Trigger an action when a field changes

[yh bil]

I created a EJS grid  and i defined my columns like it is mentioned below , 

@Html.EJS().Grid("UrlAdaptor").DataSource(ds => ds.Url(@Url.Action("UrlDatasource", "DemandePrestation")).InsertUrl(@Url.Action("Insert", "DemandePrestation")).UpdateUrl(@Url.Action("Update", "DemandePrestation")).RemoveUrl(@Url.Action("Delete", "DemandePrestation")).Adaptor("UrlAdaptor")).AllowSorting().AllowResizing().AllowReordering().AllowGrouping().AllowFiltering().AllowExcelExport().AllowPdfExport().Columns(col =>
{
col.Field("IDDemandePrestation").Visible(false).IsPrimaryKey(true).HeaderText("IDDemandePrestation").Add();
col.Field("mar_intitule_marche").ValidationRules(new { required = "true" }).CustomAttributes(new { id = "marc_id" }).HeaderText("Marché").Width("250").EditType("dropdownedit").Edit(new { @params = DropDownListMarche }).Add();
col.Field("pres_designation_prestation").ValidationRules(new { required = "true" }).HeaderText("Type prestation").Width("250").EditType("dropdownedit").Edit(new { @params = DropDownListTprestation }).Add();
//col.Field("clt_nom_client").ValidationRules(new { required = "true" }).HeaderText("Client").Width("250").EditType("dropdownedit").Edit(new { @params = DropDownListClient }).Add()
col.Field("ctr_id_ent").ValidationRules(new { required = "true" }).HeaderText("Client").Width("250").EditType("dropdownedit").Edit(new { @params = DropDownListEntreprises }).Add();
col.Field("dpr_date_demande_prestation").HeaderText("Date demande").DefaultValue(DateTime.Now).Format(new { type = "dateTime", format = "dd/MM/yyyy" }).EditType("datetimepickeredit").Add();
col.Field("dpr_etat_demande_prestation").AllowEditing(false).HeaderText("Etat de la demande").Add();
//col.Field("ctr_id_ent").ValidationRules(new { required = "true" }).HeaderText("Entreprise/Moa").Width("250").EditType("dropdownedit").Edit(new { @params = DropDownListEntreprises }).Add();
col.HeaderText("Manager une demande").Width("200").Commands(commands).Add();

}).Locale("fr-FR").AllowPaging().Toolbar(toolbarItems).FilterSettings(filter => { filter.Type(Syncfusion.EJ2.Grids.FilterType.Menu); }).AllowSelection().SelectionSettings(select => select.Type(Syncfusion.EJ2.Grids.SelectionType.Single)).ToolbarClick("toolbarclick").EditSettings(edit => { edit.AllowAdding(true).AllowEditing(true).AllowDeleting(true).Mode(Syncfusion.EJ2.Grids.EditMode.Dialog); }).Render()

i tried to add an event listener to the field "mar_intitule_marche " which will be triggered everytime the value of the field changes . but after trying many alternatives nothing worked , any suggestions please , 

thanks in advance 

[Hemanthkumar S]

Hi yh bil,

Query: Trigger an action when the value of the field changes

From the information you provided, we understand that you are attempting to perform an action when the value of the "mar_intitule_marche" field changes. This field is a DropdownEdit type in Dialog Edit mode.

The dropdown generated in the "mar_intitule_marche" field is a Syncfusion Dropdown component. By default, the Syncfusion Dropdown component includes a change event that is triggered when an item in the dropdown is selected or when the model value is changed by the user.

We have created a custom solution sample based on your update. Our suggestion is to set the change event of the Syncfusion Dropdown component inside the actionComplete event of the Grid. This event will be triggered after the dialog edit mode is created.

For more information, please refer to the below code example, API Documentation, Screenshot, and the attached sample.

[Views\Home\Index.cshtml]

 

@(Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.DataSource.ToArray()).ActionComplete("actionComplete")

    .Columns(col =>

    {

        col.Field("CustomerName.FirstName").HeaderText("Customer Name").Add();

        col.Field("ShipName").HeaderText("Ship Name").EditType("dropdownedit").Add();

        col.Field("ShipCountry").HeaderText("Ship Country").EditType("dropdownedit").Add();

    }).EditSettings(edit => { edit.AllowAdding(true).AllowEditing(true).AllowDeleting(true).Mode(Syncfusion.EJ2.Grids.EditMode.Dialog); }).Render())

 

<script>

    var fieldName = "ShipName";

        function actionComplete(args) {

            if ((args.requestType === 'beginEdit' || args.requestType === 'add')) {

                var dialog = args.dialog;

                dialog.element.querySelector('#Grid' + fieldName).ej2_instances[0].change = () => {

                    console.log("changed");

                }

            }

        }

</script>

change API: https://ej2.syncfusion.com/documentation/api/drop-down-list#change

actionComplete API: https://ej2.syncfusion.com/documentation/api/grid#actioncomplete

Screenshot:

Please feel free to contact us if you require any further assistance. We are always available and eager to help you in any way we can.

Regards,

Hemanth Kumar S

Attachment: mvc_grid_dropdown_6cab6638.zip

[yh bil]

Thank you so much , i can finally use the trigger an action everytime the selected value changes , i really really appreciate your answer 

[Hemanthkumar S]

Hi yh bil,

Thank you for your message. We are pleased to hear that you found our suggested approach helpful. If you feel that it adequately addresses your concern, please consider accepting it as the solution. Doing so will make it easier for other members to find the solution quickly.

Regards,

Hemanth Kumar S