Applying onChange in Batch Edit Mode

[Ssekamatte James]

 This is a query for EJ1

Dear Syncfusion Support,

I am editing rows in my Grid using the Batch Edit Mode, but I want to apply cascading styles on my dropdowns.Records displayed in the District column dropdown should be determined by the region selected in the Region column (Figure is in the attachment here).

So I want to apply an on change function called DistrictChange to attain this. But it seems like there is no onchange in the syncfusion grid . I would like to know how I can input onchange like in the line below (When I do it this way, I have an error):

 col.Field("CDCRegionId").Width(120).AllowEditing(true).HeaderText("Region").ForeignKeyField("CDCRegionId").ForeignKeyValue("CDCRegion").onChange("DistrictChange").DataSource((IEnumerable<Object>)ViewBag.Region).ValidationRules(v => v.AddRule("required", true)).Add();

These are my Columns for the Grid

.Columns(col =>

                   {

                       col.Field("PatientAddressCode").Width(120).AllowEditing(false).HeaderText("Address Code").Visible(false).IsPrimaryKey(true).TextAlign(TextAlign.Right).Add();

                       col.Field("PatientNumber").Width(180).AllowEditing(false).HeaderText("Patient Number").Add();

                       col.Field("CDCRegionId").Width(120).AllowEditing(true).HeaderText("Region").ForeignKeyField("CDCRegionId").ForeignKeyValue("CDCRegion").DataSource((IEnumerable<Object>)ViewBag.Region).ValidationRules(v => v.AddRule("required", true)).Add();

                       col.Field("District_Code").Width(120).AllowEditing(true).HeaderText("District").ForeignKeyField("District_Code").ForeignKeyValue("District_Name").DataSource((IEnumerable<Object>)ViewBag.District).Add();

                       //col.Field("District_Code").Width(120).AllowEditing(true).HeaderText("District").Add();

                       col.Field("County_Id").Width(120).AllowEditing(true).HeaderText("County").ForeignKeyField("County_Id").ForeignKeyValue("County_Name").DataSource((IEnumerable<Object>)ViewBag.County).Add();

                       col.Field("Subcounty_Id").Width(120).AllowEditing(true).HeaderText("SubCounty").ForeignKeyField("Subcounty_Id").ForeignKeyValue("Subcounty_Name").DataSource((IEnumerable<Object>)ViewBag.SubCounty).Add();

                       col.Field("Parish_Id").Width(120).AllowEditing(true).HeaderText("Parish").ForeignKeyField("Parish_Id").ForeignKeyValue("Parish_Name").DataSource((IEnumerable<Object>)ViewBag.Parish).Add();

                       col.Field("Village_Id").Width(120).AllowEditing(true).HeaderText("Village").ForeignKeyField("Village_Id").ForeignKeyValue("Village_Name").DataSource((IEnumerable<Object>)ViewBag.Village).Add();

                       col.Field("Longitude").Width(100).AllowEditing(true).AllowEditing(true).HeaderText("Longitude").Add();

                       col.Field("Latitude").Width(100).AllowEditing(true).AllowEditing(true).HeaderText("Latitude").Add();

                       col.Field("DefaultPuP").AllowEditing(true).Visible(true).EditType(EditingType.BooleanEdit).HeaderText("Default PuP").Add();

                   })

My Change Function

 function DistrictChange(args) {

        // var _value = args.value;

         window.valued = args.value;

        //alert("RegionValue is: "+_value);

        $.ajax({  // Ajax function to grey out Village before selecting Parish

            url: 'GetDistrict',

            contentType: "application/json; charset=utf-8",

            dataType: "json",

            //data: { "CDCRegionId": _value },

            data: { "CDCRegionId": window.valued},

            type: 'GET',

            success: function (data) {

             //   alert("Region ID is" + " " + window.valued)

                if (data.length > 0) {

                        //alert("You are into Parish");

                    var DropDownListDistrict = $('#District_Code').ejDropDownList({

                     dataSource: data,

                         fields: {value: "District_Code", text: "District_Name"},

                        width: "300",

                    }).data("ejDropDownList");

                }

            },

        });

    }

Controller Method for The Change

   public ActionResult GetDistrict(int CDCRegionId)

        {

            var result = context.A_District.Where(o => o.CDCRegionId == CDCRegionId).Select(a => new { a.District_Code, a.District_Name }).Distinct().OrderBy(a => a.District_Name).ToList();

            return Json(result, JsonRequestBehavior.AllowGet);

        }

Attachment: OnChange_b711c08a.zip

[Farveen Sulthana Thameeztheen Basha]

Hi Ssekamatte, 

Thanks for contacting Syncfusion Support. 

Query#:- So I want to apply an on change function called DistrictChange to attain this. But it seems like there is no onchange in the syncfusion grid . I would like to know how I can input onchange like in the line below (When I do it this way, I have an error): 

While analyzing your code example, you have bind change event on Grid Column definition(which is not property of Grid). We need to define change event only at DropdownList instance. 

If you want to bind change event for DropdownList, use Load event of the Grid, update the editParams of the first dropdown column with the change event and define the change event with the required functionalities such as data collection from server-end and setting the value to the respective cell. 

 

Refer to the code example:- 

@(Html.EJ().Grid<OrdersView>("Grid") 

    .AllowPaging() 

    .Datasource(ds => 

    { 

        ds.Json(ViewBag.datasource); 

    }) 

    .EditSettings(edit => 

    { 

        edit.AllowAdding().AllowDeleting().AllowEditing().EditMode(EditMode.Batch); 

    }) 

     

     .Columns(col => 

            { 

                .  .   . 

            col.Field("CDCRegionId").Width(120).AllowEditing(true).HeaderText("Region").ForeignKeyField("CDCRegionId").ForeignKeyValue("CDCRegion").DataSource((IEnumerable<Object>)ViewBag.Region).ValidationRules(v => v.AddRule("required", true)).Add();         

             .   .    . 

   }) 

    .ClientSideEvents(events => events.Load("load").CellEdit("cellEdit").BeforeBatchSave("beforeSave")) 

        ) 

  <script> 

    function load(args) { 

        //check edited rows 

       this.model.isrowEdited = []; 

        this.model.columns[2].editParams = $.extend(true, {}, { 

            change: function (e) { 

                this.element.closest(".e-grid").ejWaitingPopup("show"); 

                $.ajax({ 

                    url: 'GetData', 

                    type: 'POST', 

                    data: { "ID": e.text }, 

                    success: ej.proxy(function (data) { 

                        this.element.closest(".e-grid").ejWaitingPopup("hide"); 

                        var gridObj = this.element.closest(".e-grid").ejGrid("instance"); 

                        var inx = gridObj.getIndexByRow(this.element.closest("tr[data-role='row']")); 

                        //push edited rows 

                        gridObj.model.isrowEdited.push(inx); 

                        //set value to the next dropdown column 

                        gridObj.setCellValue(inx, "CustomerID", data.selectedItem.text); 

                        gridObj.model.columns[3].dataSource = data.data; 

                    }, this) 

                }) 

            } 

        }); 

    }    

     <script> 

We have already discussed how to bind Cascading DropdownList in Grid BatchEditing in our Syncfusion Knowledge Base. Refer to the below KB link:- 

https://www.syncfusion.com/kb/8926/how-to-bind-cascading-drop-down-in-grid-batch-editing 

Please get back to us if you need any further assistance on it. 

 

Regards, 

Farveen sulthana T