Command buttons in child grid doesn't always work

[Dana Kiehl]

Hello,

I have a grid set up with a child grid. My child grid has two command buttons in each row, however, they are not always working. When the grid loads I have one row with the child grid expanded. The buttons work then but when I expand another row, the buttons in the first row don't work. Even if I collapse all the rows and then expand the first row again, I am still not able to use the buttons. They seem to only work again when I refresh the page.

Below is the code for the child grid

List<object> commands = new List<object>();

    commands.Add(new { type = "Details", buttonOption = new { iconCss = "e-icons e-details", cssClass = "e-flat" }, id = "viewDetails" });

    commands.Add(new { type = "Remove", buttonOption = new { iconCss = "e-icons e-delete", cssClass = "e-flat" } });

    List<object> toolbarItems = new List<object>();

    toolbarItems.Add("Search");

    List<object> parentCommands = new List<object>();

    parentCommands.Add(new { type = "Add", buttonOption = new { iconCss = "e-icons e-add", cssClass = "e-flat" }, id = "addVersion" });

    var ChildGrid = new Syncfusion.EJ2.Grids.Grid()

    {

        DataSource = new Syncfusion.EJ2.DataManager() { Json = ViewBag.DataSource2.ToArray(), Adaptor = "RemoteSaveAdaptor", RemoveUrl = "/DataGrid/RemoveVersion" },

        QueryString = "RuleId",

        CommandClick = "commandClick",

        EditSettings = new Syncfusion.EJ2.Grids.GridEditSettings() { AllowAdding = true, AllowDeleting = true, Mode = Syncfusion.EJ2.Grids.EditMode.Dialog, ShowDeleteConfirmDialog = true },

        AllowPaging = true,

        RowHeight = 100,

        TextWrapSettings = new Syncfusion.EJ2.Grids.GridTextWrapSettings() { WrapMode = Syncfusion.EJ2.Grids.WrapMode.Header },

        AllowFiltering = true,

        PageSettings = new Syncfusion.EJ2.Grids.GridPageSettings() { PageSize = 5, PageSizes = true },

        AllowSorting = true,

        ShowColumnMenu = true,

        FilterSettings = new Syncfusion.EJ2.Grids.GridFilterSettings() { Type = Syncfusion.EJ2.Grids.FilterType.Excel },

        AllowSelection = true,

        Toolbar = toolbarItems,

        Columns = new List<Syncfusion.EJ2.Grids.GridColumn>

{

                new Syncfusion.EJ2.Grids.GridColumn(){Field="RuleFileRuleVersion.VersionNumber", IsPrimaryKey=true, IsIdentity=true, HeaderText="Version Id"},

                new Syncfusion.EJ2.Grids.GridColumn(){Field="CurrentStart", Type="date", Format="yMd", HeaderText="Current-Start"},

                new Syncfusion.EJ2.Grids.GridColumn(){Field="CurrentEnd", Type="date", Format="yMd", HeaderText="Current-End"},

                new Syncfusion.EJ2.Grids.GridColumn(){Field="NewStart", Type="date", Format="yMd", HeaderText="New Business-Start"},

                new Syncfusion.EJ2.Grids.GridColumn(){Field="NewEnd", Type="date", Format="yMd", HeaderText="New Business-End"},

                new Syncfusion.EJ2.Grids.GridColumn(){Field="RenewStart", Type="date", Format="yMd", HeaderText="Renewal-Start"},

                new Syncfusion.EJ2.Grids.GridColumn(){Field="RenewEnd", Type="date", Format="yMd", HeaderText="Renewal-End"},

                new Syncfusion.EJ2.Grids.GridColumn(){Field="RuleFileRuleVersion.Enabled", AllowEditing=true, HeaderText="Enabled", EditType = "booleanedit", Type="boolean", DisplayAsCheckBox=true, Filter=new {type="CheckBox"}},

                new Syncfusion.EJ2.Grids.GridColumn(){Field="RuleFileRuleVersion.Level", AllowEditing=true, HeaderText="Level"},

                //new Syncfusion.EJ2.Grids.GridColumn(){Field="ParametersSet", AllowEditing=false, HeaderText="Has Parameters", DisplayAsCheckBox=true, Filter=new {type="CheckBox"} },

                new Syncfusion.EJ2.Grids.GridColumn(){Field="RuleId", AllowEditing=false, HeaderText="Rule Id", Visible=false, IsIdentity=true},

                new Syncfusion.EJ2.Grids.GridColumn(){HeaderText="Manage Records", Commands=commands}

            }

    };

}

Thanks,

Dana

[Thiyagu Subramani]

Hi Dana, 

Thanks for contacting Syncfusion support. 

Based on your shared information we suspect that your reported issue may occurs while performing Grid action using commandColumn parameter in commandClick event. To achieve your requirement we suggest you to perform Grid action using  button’s target element like below. 

    List<object> commands = new List<object>(); 

    commands.Add(new { type = "Details", buttonOption = new { iconCss = "e-icons e-edit", cssClass = "e-flat" } }); 

    commands.Add(new { type = "Remove", buttonOption = new { iconCss = "e-icons e-delete", cssClass = "e-flat" } }); 

 

    var ChildGrid = new Syncfusion.EJ2.Grids.Grid() 

    { 

        EditSettings = new Syncfusion.EJ2.Grids.GridEditSettings() { AllowAdding = true, AllowDeleting = true, AllowEditing = true, Mode = Syncfusion.EJ2.Grids.EditMode.Normal, ShowDeleteConfirmDialog = true }, 

        AllowPaging = true, 

        CommandClick = "commandClick", 

. . . . . . . .  

    new Syncfusion.EJ2.Grids.GridColumn(){ HeaderText="Manage Records", Commands=commands} 

} 

    }; 

} 

 

<script> 

    function commandClick(args) { 

        if (args.target.title == "Details") { 

            // Perform your actions here. 

            alert('edit') 

        } 

        if (args.target.title == "Remove") { 

            // Perform your actions here. 

            alert('delete') 

        } 

    } 

</script> 

Sample link:  https://www.syncfusion.com/downloads/support/forum/163788/ze/28338613152537701040284967 

If still facing the issue, please share your commandClick event’s code to us, then only we provide the appropriate solution as soon as possible. 

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

Regards, 

Thiyagu S 

[Dana Kiehl]

Hello,

Thank you for your response. Unfortunately, that is the way I have it set up ( I will paste my commandClick code below) and I still have the issues. After some additional testing, I found that when the issue occurs I get an error message that says cannot read property 'type' of undefined and it appears that commandColumn is coming in undefined. Again this happens when the page is loaded with a child grid for one row already expanded say row 1. If I then expand row 2 and then try to click on either of the command buttons in the row 1 child grid don't work and throw that error. I can click the row 2 child grid command buttons with no issue.

  function commandClick(args) {

        console.log(args);

        if (args.commandColumn.type == "Details") {

            var curPage;

            var rowIndex;

            var parentGrid = this.element.parentElement.closest(".e-grid").ej2_instances[0];

            //gets current page

            curPage = parentGrid.pageSettings.currentPage;

            curPage = JSON.stringify(curPage);

            sessionStorage.setItem('CurPage', curPage);

            var currentData = parentGrid.currentViewData;

            //gets Rule Id of the current row

            var currentRowData = args.rowData;

            var rowId = currentRowData.RuleId;

            //gets Row index of current row

            var i;

            for (i = 0; i < currentData.length; i++) {

                if (currentData[i].RuleId == rowId) {

                    rowIndex = i;

                }

            }

            rowIndex = JSON.stringify(rowIndex);

            sessionStorage.setItem('rowIndex', rowIndex);

            var id = currentRowData.RuleFileRuleVersion.VersionNumber;

            var ruleId = rowId;

            window.location.rel='nofollow' href = "https://localhost:44303/DataGrid/RulesVersionDetails/" + id + "?ruleId=" + ruleId;

        }

        if (args.commandColumn.type == "Remove") {

            var currentRowData = args.rowData;

            var ruleId = currentRowData.RuleId;

            var id = currentRowData.RuleFileRuleVersion.VersionNumber;

            $("#deleteModal").data('id', id + ',' + ruleId).modal("show");

            $('#btnDelteYes').click(function () {

                var id = $('#deleteModal').data('id');

 

                $.ajax({

                    url: "/DataGrid/RemoveVersion",

                    type: "POST",

                    datatype: "json",

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

                    data: JSON.stringify(id),

                    success: function (result) {

                        $('#deleteModal').modal("hide");

                        window.location.rel='nofollow' href = "https://localhost:44303/DataGrid/Index";

                    }

                });

            });

        }

    }

Thanks,

Dana

[Thiyagu Subramani]

Hi Dana, 

Thanks for your update. 

Based on your shared information we confirm that your reported issue may occurs when args.commandColumn returned as undefined in commandClick event like below and this issue may occurs column command’s UID does not maintained properly for respective child Grids.  

In last update we suggest you to use your command column actions by differentiating the args.target instead of args.commandColumn like below code snippet. 

 

function commandClick(args) { 

        console.log(args); 

        if (args.target.title == "Details") { 

                 // Perform your actions here.. 

        } 

        if (args.target.title == "Remove") { 

            var currentRowData = args.rowData; 

            var ruleId = currentRowData.RuleId; 

            var id = currentRowData.RuleFileRuleVersion.VersionNumber; 

            . . . . . . . .   

        } 

    } 

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

Regards, 

Thiyagu S