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

Kendogrid HTML TABLE Filtering and pagination issue

3 Answers 96 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Abhishek
Top achievements
Rank 1
Abhishek asked on 27 Jan 2020, 11:12 AM

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.

3 Answers, 1 is accepted

Sort by
0
Martin
Telerik team
answered on 29 Jan 2020, 10:08 AM

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

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Abhishek
Top achievements
Rank 1
answered on 30 Jan 2020, 07:05 PM

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.

 

0
Martin
Telerik team
answered on 03 Feb 2020, 02:59 PM

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

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
General Discussions
Asked by
Abhishek
Top achievements
Rank 1
Answers by
Martin
Telerik team
Abhishek
Top achievements
Rank 1
Share this question
or