Collapse button not working on multiple kendo grid on same html element

[Muhammad]

I'm loading Kendo Grid in a modal window over the same HTML element. The grid has grouping implemented on it.

Now when I try to collapse the rows it works first time, but when I try to close the modal and re-open another kendo grid which is again on the same HTML element  the collpase button does not work. it will work the 3rd time i.e. it works every alternate times I open the window

Things I haved tried so far

Clearing html before grid initialization

Destroying kendo grid before initialization

Any help will be appreciated.

[Georgi]

Hi Muhammad,

Indeed if you initialize the same grid more than once it is necessary to destroy it and clear its html. I assume that some sort of event handler conflict occurs due to the multiple initialization. However, I cannot be certain until I examine your configuration. Could you please provide us with your grid/window configuration? Also, make sure that the logic for destroying the widget is included. Additionally, could you please make sure there are no JS errors in the console of your browser?

Regards,
Georgi
Progress Telerik

[Muhammad]

Hi,

This is my HTML

<div class="modal" id="assignModal">

    <div class="modal-dialog modal-full">
        <div class="modal-content">
            <div class="modal-header bg-poms p-10">
                <h6 id="DetailModalHeading" class="modal-title text-semibold text-size-16">Group Assign
                </h6>

            </div>
            <div class="modal-body clearfix p-10">
                <div class="row">
                <div class=" col-xs-12 mb-10 text-right">
                    <button onclick="ParameterGroupBy(this);" id="lbldetailModalGroupBY">Group By</button>
                    <button onclick="ExpandCollapseGroups(this);"  id="lblExpandCollapse">Collapse</button>
                </div>
            </div>
            <div class="row">
                <div class="assignView col-xs-12">
                    <div id="userAssignGrid"></div>
                </div>
                </div>

            </div>
        </div>
        </div>
    </div>

 

The Method which initialize the kendo grid

loadDetailGrid = function (detailViewModel) {
    try {
            if($("#userAssignGrid").data("kendoGrid")!=undefined)
                $("#userAssignGrid").data("kendoGrid").destroy();
        $('#userAssignGrid').empty();

        $("#userAssignGrid").kendoGrid({
            dataSource: {
                data: detailViewModel,
                schema: {
                    model: {
                        id: "id",
                    }
                }
            },

            sortable: true,
            resizable: true,
            filterable: {
                multi: true,
                search: true
            },
            columnMenu: true,
            scrollable: true,
            reorderable: false,
            columns: [

                { selectable: true, width: "60px", id: "id", field: "id", editable: true, sortable: true ,filterable:false},
                {
                    title: "title",
                    field: "field",
                    width: "300px",
                }
            ]
        });


    } catch (e) {
        alert('error');
    }
};

 

Collapse Methods

ExpandCollapseGroups = function () {
    if ($("#userAssignGrid .k-i-collapse").length > 0)
        $("#userAssignGrid .k-i-collapse").click();
    else
        $("#userAssignGrid .k-i-expand").click();
};

 

Thanks

[Georgi]

Hello Muhammad,

Could you please try to also remove the element of the grid?

e.g.

            if($("#userAssignGrid").data("kendoGrid")!=undefined)
                $("#userAssignGrid").data("kendoGrid").destroy();
                var parent =  $('#userAssignGrid').parent();
                 parent.empty();
                 parent.append("<div id='userAssignGrid'/>")

Regards,
Georgi
Progress Telerik

[Muhammad]

Thanks it's working now