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

Recreating the Grid will not Group

6 Answers 78 Views

Grid

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

Chris asked on 02 May 2013, 07:34 PM

All... I have to change the Grid Layout on an user selection. So the grid will have different column layout and different datasource set for each User selection..
So I did the obvious chose of a Kendo Newbe ... I destroyed the previously created Kendo grid, cleared the grid inner html and recreated the kendo grid using the new column values
Everything works fine.. but after the second selection (first selection is when the kendogrid is first created) ... the grouping wont work ..

any lime light on this issue is appriciated...
Here is the code snippit..

<div id="grid" style="height: 380px"></div>

6 Answers, 1 is accepted

answered on 03 May 2013, 07:11 PM

Atanas -

i am attaching the html file along with this post.. just modify the kendo file location as urs..I am changing the Column layout based on user selection... But after the first one the Grouping wont happen...

Another weird thing i noticed is... When changing the column layout.. if you dont empty the Div inner html, the column header wont show up... anyway that gets fixed if we clear the div before recreating the kendogrid...

Let me know what you find out... or what i missed...

Well i tried to upload the HTML file...the page wont .. so here is the code...
<script type="text/javascript">
        $(document).ready(function () {

            var sViewListDropDownId = 'lstDropDown';
            //var sValue = $("#" + sViewListDropDownId).val();

            var ViewListData = [];
            ViewListData.push({ text: 'First Choice', value: '1' });
            ViewListData.push({ text: 'Second Choice', value: '2' });
            ViewListData.push({ text: 'Third Choice', value: '3' });
            ViewListData.push({ text: 'Forth Choice', value: '4' });

            // create DropDownList from input HTML element
            $("#" + sViewListDropDownId).kendoDropDownList({
                dataTextField: "text",
                dataValueField: "value",
                dataSource: ViewListData,
                index: 0,
                change: ViewListDropDownId_OnChange
            });

            ViewListDropDownId_OnChange();
        });

        function ViewListDropDownId_OnChange() {
                var sViewListDropDownId = 'lstDropDown';
                var sValue = $("#" + sViewListDropDownId).val();

                var ColumnsArray = [];
                var DataSourceArray = [];

                var iValue = parseInt(sValue);
                for (var i = 1; i <= iValue; i++) {
                    ColumnsArray.push({ "field": 'field' + i, "title": 'Field Title' + i });
                }

                for (var j = 0; j < 10; j++) {
                    var IndiData = {};
                    for (var i = 1; i <= iValue; i++) {
                        var sKey = ("field" + i);
                        IndiData[sKey] = 'Value' + +i + j;

                    }
                    DataSourceArray.push(IndiData);
                }
                var ViewGridId = 'grid';

                var ViewGrid = $("#" + ViewGridId).data("kendoGrid");
                if (ViewGrid) {
                    ViewGrid.destroy();
                }
                $("#" + ViewGridId).html('');
                //alert("am destroing it..");

                $("#" + ViewGridId).kendoGrid({
                    dataSource: {
                        data: DataSourceArray,
                        pageSize: 5
                    },
                    selectable: "single",
                    groupable: true,
                    sortable: true,
                    pageable: {
                        refresh: true,
                        pageSizes: true
                    },
                    columns: ColumnsArray
                });
        };
    </script>

<input id="lstDropDown" value="1" />
<div id="grid" style="height: 380px"></div>

answered on 03 May 2013, 07:37 PM

Similar changes to the jbin worked... but i wont work in mine..

var ColumnsArray = [];
ColumnsArray.push({ "field": 'foo', "title": 'Foo Field Title'});

$("#grid").kendoGrid({
dataSource:{
    data: [
      { foo: "bar Value" }
    ],
    pageSize: 5
},
columns: ColumnsArray,
selectable: "single",
groupable: true,
sortable: true,
pageable: {
    refresh: true,
    pageSizes: true
}
});

$("button").click(function() {
var grid = $("#grid").data("kendoGrid");
grid.destroy();
ColumnsArray.push({ "field": 'bar', "title": 'Bar Field Title'});

$("#grid").empty().kendoGrid({
    dataSource:{
      data: [
        { bar: "foo Value", foo: "bar Value" },
        { bar: "foo Value 1", foo: "bar Value 1" }
      ],
      pageSize: 5
    },
    columns: ColumnsArray,
    selectable: "single",
    groupable: true,
    sortable: true ,
    pageable: {
      refresh: true,
      pageSizes: true
    }
});
});