Selectable column is not working

4 posts, 0 answers
  1. Aliaksandr
    Aliaksandr avatar
    3 posts
    Member since:
    Sep 2010

    Posted 02 Jan Link to this post

    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.

  2. Eduardo Serra
    Admin
    Eduardo Serra avatar
    106 posts

    Posted 03 Jan Link to this post

    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
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Aliaksandr
    Aliaksandr avatar
    3 posts
    Member since:
    Sep 2010

    Posted 03 Jan in reply to Eduardo Serra Link to this post

    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");
    }
  4. Eduardo Serra
    Admin
    Eduardo Serra avatar
    106 posts

    Posted 05 Jan Link to this post

    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
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top