Selectable column is not working

[Aliaksandr]

Hello

 

Is it possible to render grid under one invisible element, but show it in different one. Main problem is that showing element is disappear each time when user communicate with my app,If i generate new grid one each refresh selectable column in the grid stops working.

 

Can you guide me how to solve one or another problem.

[Eduardo Serra]

Hello Aliaksandr,

From your description, it's not entirely clear what you want to achieve; in order for us to offer the best support possible, create a sample in the Kendo UI Dojo demonstrating your situation and what you want to achieve.

Thank you.

Regards,
Eduardo Serra
Progress Telerik

[Aliaksandr]

Hello Serra

 

Sorry for messy question I've asked before. It is related to another topic I found here:

https://www.telerik.com/forums/i-m-sometimes-getting-this-error-ucaught-typeerror-cannot-read-property-%27removeclass%27-of-undefined

 

It's a bit difficult for us to create sample app to show problem we are facing with. I'll try to display it with 

Actually we have site, that looks very similar with telerik documentation site.

We have list of folders on left part of the page and data grid on right side. (see screeshot)

 

When user clicks on folder button, we are rerendering all grid with code below. 

Looks like problem we have is that we initialize grid multiple times and he doesn't like it. 

Hope my initial question has a bit more sense now. We would like to initialize grid once and somewhere on the hidden placeholder and render on div we get when do grid panel rendering

var grid = null;

function gridInitialize(gridDiv) {

    grid = gridDiv.kendoGrid({
        dataSource: dataSource,
        sortable: true,
        reorderable: true,
        pageable: true,
        resizable: true,
        groupable: true,
        filterable: {
            extra: false
        },
        columnMenu: true,
        columns: [
            { selectable: true, width: "50px" },
            {
                field: "field1",
                title: "field 1",
                editable: function (dataItem) { return false; },
                width: "100px"
            },
            {
                field: "field2",
                title: "Field 2",
                template: renderShipTo,
                groupable: false,
                editable: function (dataItem) { return false; },
                hidden: true,
                width: "100px"
            },
            { command: { text: "Open", click: open }, title: " ", width: "80px" }
        ],

        navigatable: true,
        editable: true
    });

    var kendoGrid = grid.data("kendoGrid");
}

[Eduardo Serra]

Hello Aliaksandr,

Thank you for clarifying your situation.

It is indeed important that you to follow the instructions described in this guide in our documentation and destroy the grid before replacing it with a new one:

$("#grid").data("kendoGrid").destroy(); // destroy the Grid
$("#grid").empty(); // empty the Grid content (inner HTML)

I have prepared a sample in the Kendo UI Dojo replicating your scenario, in it, you can see how destroying the grid allows us to render a new one using the same div element and the selectable functionality still works in newer grids; take a look at the sample in the Kendo UI Dojo here.

I hope this helps!

Regards,
Eduardo Serra
Progress Telerik