This is a migrated thread and some comments may be shown as answers.

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

4 Answers 48 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Muhammad
Top achievements
Rank 1
Muhammad asked on 15 Apr 2020, 04:00 PM

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.

4 Answers, 1 is accepted

Sort by
0
Georgi
Telerik team
answered on 17 Apr 2020, 08:17 AM

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

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
0
Muhammad
Top achievements
Rank 1
answered on 17 Apr 2020, 03:08 PM

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

0
Accepted
Georgi
Telerik team
answered on 21 Apr 2020, 01:11 PM

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

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
0
Muhammad
Top achievements
Rank 1
answered on 21 Apr 2020, 01:59 PM
Thanks it's working now
Tags
Grid
Asked by
Muhammad
Top achievements
Rank 1
Answers by
Georgi
Telerik team
Muhammad
Top achievements
Rank 1
Share this question
or