I have the following code block in a blazor winform and i'm trying to add a button with an on click event to the id field to edit that row's data in a new form but after scouring documentation I cannot find a way to do this that isn't just changing the fields in the table directly.
<SfGrid DataSource="#Customers" RowHeight="20" AllowPaging="true" AllowSorting="true" AllowFiltering="true">
<GridPageSettings PageSize="50"></GridPageSettings>
<GridColumns>
<GridColumn Field=#nameof(Customer.Id) HeaderText="Id" Width="120"></GridColumn>
<GridColumn Field=#nameof(Customer.Name) HeaderText="Name" Width="120"></GridColumn>
<GridColumn Field=#nameof(Customer.Email) HeaderText="Email" Width="120"></GridColumn>
<GridColumn Field=#nameof(Customer.Password) HeaderText="Password" Width="120"</GridColumn>
</GridColumns>
</SfGrid>
I have only tried to accomplish this by creating an onclick event as you would in a traditional html table but I don't believe this can be accomplished within a data grid.
Using Template you can mainly fully customize the content of a GridColumn:
...
<GridColumn HeaderText="Actions" TextAlign="TextAlign.Center" Width="120">
<Template>
#{
Customer customer = (context as Customer);
<button #onclick="() => OpenEditCustomerForm(customer)">Edit</button>
}
</Template>
</GridColumn>
...
Documentation
As per your needs, I suggest using the grid column's column template feature, which allows you to customize your needs. Please refer to the UG documentation mentioned below for your reference.
Documentation: https://blazor.syncfusion.com/documentation/datagrid/column-template
Related
I am trying to access the keywords typed in a lookup or master-detail field in lightning-record-edit-form using lightning-input-field and based on the value entered in that lookup I want to update picklist value to active or Inactive. Below is the code
<template>
<lightning-card>
<lightning-record-edit-form object-api-name="Opportunity_Bidder__c">
<lightning-input-field field-name="Opportunity_Name__c" onchange={onOpportunitySelected}>
</lightning-input-field>
<lightning-input-field field-name="Bid_c" onchange={onOpportunitySelected}>
</lightning-input-field>
<lightning-button type="submit" variant="brand" label="Create"></lightning-button>
</lightning-record-edit-form>
</lightning-card>
onOpportunitySelected(event){
alert('alert called');
this.opportunityName = event.target.value;
}
The issue is that onOpportunitySelected method is not called when user is typing in Opportunity_Name__c. However, its being called on other fields like textfield or any other field than lookup or master-detail field
I am new to salesforce, can anybody tell me that is it achievable using lightning-input-field for lookup or I need to customize lookup like here
To re-iterate "OnChange wont work on Lookup or Master-Detail fields in Lightning-record-edit-form ?"
Thanks in Advance
I'm building an app with react-admin, I have an organizations resource and programs resource.
each program has relation to one organization.
(saved in mongoDB anf I have a node server)
I created a custom list to organizations resource.
<List {...props}>
<Datagrid rowClick={programsRowClick}>
<TextField source="name" />
<EditButton />
</Datagrid>
</List>
I want when we click on organization row to recieve all the programs that have the same organizationId.
the API is: https://localhost:4000/api/organization/${id}/programs
I tried to create a custom function programsRowClick but I dont realy understand what should it return?
the react run on https://localhost:3000
the server run on https://localhost:4000/api
could you help me?
thank's!
Maybe this can help you :
https://marmelab.com/react-admin/List.html#expand
It allows you to display a custom component in the list on row click.
Otherwise rowClick accept a function which returns a path.
ie :
<RA.Datagrid rowClick={(id: RA.Identifier) => `/${resource}/${id}/${customRoute}`}>
I have a large form and I would like when the user clicks a "new" button for the focus to be placed in a specific input field. There's a grid on the form and every field has a known id. Note it might not be the first field so not easy to use the tab.
Would appreciate some advice if this is possible. Would save having to manually have the user move the cursor over and click in the input field.
Update: Changed "move cursor" to "change focus"
Here is one solution -
Angular js gives you an advantage of using some of the extra features so that you dont have to use the jquery.
Here is one way to implement the autofocus feature.
<div class="button" input-focus>{{element.idORname}}</div>
and the directive to be defined here.
.directive("inputfocus",function($timeout){
return {
link : function(element,attributes){
element.bind('click',function($timeout){
$timeout(function(){
element/*.parent() or.child()*/.find('type of the field you want to select')[0].focus();
);
);
);
Here you can use the javascript or jquery methods for the dom traversal if there are nested fields in your code.
$timeout is necessary to call for the focus after the browser renders when user has finished clicking the event
As you can see the find('')[0] is a replacement for find('').focus as the latter requires jquery to be used.
Place "autofocus" attribute on the element that you want to focus.
Example:
Name: <input type="text" name="name" autofocus />
If all the input ids are known, just use that.
$("#NewButton").on('click', function(){
//Other code.
$("#IdOfInputToBeFocused").focus();
});
Custom data attribute can be used with jQuery like this
<input data-field="special" />
And then that specific field can be called like this
jQuery('input').find("[data-field='special']").focus();
Im working in a school project, a minesweeper. Will be 20x20, so it has 400 buttons. Its there a way to add an actionEvent/actionPerformed and implement a generalized method for the whole array? Or there is an easier way?
Maybe something like that (using jQuery for convenience but you can do it with Vanilla JS too):
Your HTML:
<div id="buttonsHolder">
<button data-num=1>1</button>
<button data-num=2>2</button>
<button data-num=3>3</button>
...
<button data-num=4>4</button>
</div>
Your JavaScript:
$('#buttonsHolder').on('click', 'button', (function(evt){
var buttonNum = $(this).attr('data-num');
// Now, buttonNum variable holds the button number has clicked.
});
Of course instead of use data-num atribute you can use whatever data you need.
You are placing the buttons inside a container (i suppose). Add a actionhandler to that to capture a click. And read the 'target' variable of the event, and see if that is a button
Can anyone help me to build a xpages mobile search?
I want a text field and a button that proceds a full text search on database and return a Dataview with the results.
Is there possible?
I don't know how to start this.
I think your approach with a dataview is the same with a repeat or just a normal view.
You have a text field. In data for the text field go to advanced and use a scoped variable. Try view scope, that should work. and give the variable a name (exampleValue)
<xp:inputText id="inputText6" value="#{viewScope.exampleValue}"></xp:inputText>
You now have some data that you can reference with viewScope.exampleValue
In the search parameter compute this value and put in viewScope.exampleValue
<xe:this.data>
<xp:dominoView var="view1" viewName="Your view name" search="#{javascript:viewScope.exampleValue}">
Then have a button that does a partial refresh on the dataview
<xp:button value="Refresh Search" id="button1" >
<xp:eventHandler event="onclick" submit="true"
refreshMode="partial" refreshId="ID_of_area_to_refresh">
</xp:eventHandler></xp:button>
Take a look at this question too. I can't upvote this answer enough. Xpages search between 2 dates
You will also want to make sure you have initiated a ftindex, make sure you do that. You also want to make sure the FTindex is up to date, so put this code in some event somewhere.
database.updateFTIndex(true);
Here is the code you can use to clear a field.
<xp:button value="Label" id="button2"><xp:eventHandler event="onclick" submit="true" refreshMode="partial" refreshId="inputText1">
<xp:this.action>
<xp:modifyField name="httppwd" var="viewscope" value=""></xp:modifyField>
</xp:this.action></xp:eventHandler></xp:button>
Are you using the View control or the Data View? Only the Data View works with the mobile controls.