Kendogrid HTML TABLE Filtering and pagination issue

[Abhishek]

Hi Team,

 I ma trying to generate a grid with HTML Table. I AM adding row and  creating HTML Textbox in DOM CELLS property in kendogrid. but when i am filtering the data, filtering and pagination is not working in kendogrid table. Grid get regenerated. Can someone help pls. lPlease find the code.

$(document).ready(function(){
 var grid=$("#dataTable").kendoGrid({
 
 toolbar: [  { template:"<input type='button' class='k-button' value='AddData' onclick='addRow()'/>"  }
 /* {name: "addrow", text: " Add Row "} */],
  columns: [ { field: 'english' }, { field: 'local' }, { field: 'del' } ],
  pageable: {
         messages: {
             empty: "No items to display"
         },
         input: true,
         refresh: true,
         pageSizes: true,
         pageSizes: [10, 20, 30, 50]
     },
     scrollable: true,
     sortable: true,
  
     selectable: "row",
     filterable: true
   , dataSource: { pageSize: 10 }
   
       }).data("kendoGrid");
 grid.dataSource.pageSize(10);
 
});
function addRow() {
 var table;
 var tableID;
     table = document.getElementById("dataTable");
     tableID='dataTable';
 
      var rowCount = table.rows.length;
     
      var row = table.insertRow(rowCount);
     var cell1 = row.insertCell(0);
     cell1.id="row["+length+"].english";
     
        var element1 = document.createElement("textarea");
        element1.cols="85";
        cell1.appendChild(element1);
       
        var cell2 = row.insertCell(1);
     cell1.id="row["+length+"].english";   
       var element2 = document.createElement("textarea");
       element2.cols="85";
        cell2.appendChild(element2);
        
        var cell3 = row.insertCell(2);
     cell1.id="row["+length+"].english";   
}
       
</script>

 

 

<TABLE id="dataTable" width="500px" border="double">
        <thead>
          <tr style="height:8px">
          <th  data-field="english" >English</th>
          <th data-field="local" >Local</th>
          <th data-field="del">Delete </th>
         </tr>

</table>

 

Kindly suggest solution.

[Martin]

Hello Abhishek,

The reported behavior is because the structure of the Grid altered.

In order to add new rows to the Grid, I would advise to use the addRow method in the click handler of the button. As for the textarea, if you wish to have in as a cell editor, you can use the column.editor configuration for that purpose. Here you will find a Dojo example for reference.

On a side note, could you please provide some information why are you initializing the Grid from a table and not from a div? The second approach seems to me more convenient and preferred.

Regards,
Martin
Progress Telerik

[Abhishek]

Hi Martin..Thanks for your reply..i have a big code that is written on html dom table cells and there are multiple validation that i am checking on column of each row of dom cells. if i do it by grid..i need to change whole code which will impact full functionality. all other things are worked except that hmtl filtering and sorting. so i am looking for a way that i can bind html cells data in filtering..

 

 

I have tried to do it by grid row but width of cells and height is getting changed.Also i cannot do validation for each column and row like i can do for html dom cells having id and name aatributes. Also if i do it by grid, it will impact whole code and lots of changes will do..

Could you suggest a way so that i can bind html textbox inside grid for filtering and sorting.. Thanks.waiting for your reply.

 

[Martin]

Hello Abhishek,

I am afraid that there is no way to achieve filtering and paging in the current scenario. The functionalities are achieved on DataSource level. In the provided implementation, if you execute $("#dataTable").getKendoGrid().dataSource.total() at the end of your addRow function, you will see that there are 0 items in the DataSource. That means that the textarea elements that you are implementing in the Grid are not recognized as items, and therefore cannot be filtered, or recognized by the paging feature.

The only possible way would be to use the addRow method to add items in the Grid.

I am sorry I could not be more helpful.

Regards,
Martin
Progress Telerik