CODEWITHSUNDEEP
javascriptjquerykendo-grid
parita porwal
parita porwal

Reputation: 672

How to remove multiple header from kendo grid

I am creating a sample application in which I show data in kendo grid. For this I get the page size data in kendo grid and then load it. when page change I load next data.

When my page change event call the grid is added in already exist grid. By this it shows multiple column header.

My sample is - http://jsfiddle.net/pporwal26/y6KdK/78/

var jsonData = JSON.parse("{\"Report\":\"type1\",\"FileList\":[{\"owner\":\"machine-174\\\\admin\",\"path\":\"C:\\\\workarea\\\\WinTest1lakhfileinKB\\\\WinTest\\\\nGYh\\\\SMv\\\\U1P8FLx\\\\vMbhdo\\\\TgFSW\\\\42Ioulj0w.txt\"},{\"owner\":\"machine-174admin\",\"path\":\"C:\\\\workarea\\\\bada_data\\\\Employee Database - Copy (7) - Copy.mdb\"}],\"Count\":100,\"total\":100,\"page\":4}");

function nextData(page){
jsonData = JSON.parse("{\"Report\":\"type1\",\"FileList\":[{\"owner\":\"machine-170\\\\admin\",\"path\":\"C:\\\\workarea\\\\WinTest1lakhfileinKB\\\\WinTest\\\\nGYh\\\\SMv\\\\U1P8FLx\"},{\"owner\":\"machine-170admin\",\"path\":\"C:\\\\workarea\"}],\"Count\":100,\"total\":100,\"page\":5}");
$("#grid").kendoGrid({  dataSource: {
       serverPaging: true,
       schema: {
           data: "FileList",
           total: "total" 
       },
       data: jsonData 
   } })
}

createGrid(jsonData);
function createGrid(jsonData){
$("#grid").kendoGrid({
   pageable: true,
   scrollable: true,

   pageable: {
         pageSize: 2,
         refresh: true,
         change:function(e){
           nextData(e.index);
         }
     },
   dataSource: {
       serverPaging: true,
       schema: {
           data: "FileList",
           total: "total",
       },
       data: jsonData 
   }
});
}

How I remove multiple header when page change event call?

Upvotes: 0

Views: 171

Answers (2)

sunwoo
sunwoo

Reputation: 148

Try modifying your nextData function as below.

function nextData(page){
    jsonData = JSON.parse("{\"Report\":\"type1\",\"FileList\":[{\"owner\":\"machine-170\\\\admin\",\"path\":\"C:\\\\workarea\\\\WinTest1lakhfileinKB\\\\WinTest\\\\nGYh\\\\SMv\\\\U1P8FLx\"},{\"owner\":\"machine-170admin\",\"path\":\"C:\\\\workarea\"}],\"Count\":100,\"total\":100,\"page\":5}");
    var _dataSource = new kendo.data.DataSource({
       schema: {
           data: "FileList",
           total: "total"
       },
       data: jsonData,
       serverPaging : true,
       pageSize : 2,
       page     : page
    });
    $("#grid").data("kendoGrid").setDataSource(_dataSource);
}

Upvotes: 1

Shailesh Rathod
Shailesh Rathod

Reputation: 157

http://jsfiddle.net/y6KdK/79/

var grid = createGrid(jsonData);

create the instance of your grid.

var dataSource = new kendo.data.DataSource({
  data: jsonData
});
grid.setDataSource(dataSource);

And set your newly created datasource into your nextData function. please see the above fiddle link.

Upvotes: 0

Related Questions