Grid: filter/hide rows with minlength (String in cell)

[Lars1603]

Hi everyone,

I have a little problem with filtering my Grid and I hope that you can help me.

I am currently in the process of developing a grid in which I list all my projects with the associated data.
In the first column I list the project number in the form of strings. Usually all project numbers have a length of 9 characters. Due to certain circumstances, I also have entries of projects in my database where the project number is shorter than 9. (but I urgently need this data for another use case)

In the grid that I am developing here, I only want to list projects with a project number length of 9 characters. Is there any filter option where I can specify how long a cell's value must be for it to be displayed?
If a value has less than 9 characters, the entire row should be hidden. It is important to note: the rows cannot be edited and are only listed using a READ function.

In the picture (attachment) you can see an example. In this case, the first two rows should be filtered and hidden.

Thanks in advance
Lars

 

 

[Anton Mironov]

Hello Lars,

Thank you for the details provided.

In order to achieve the desired behavior, I would recommend using the following approach:

1. Use the DataBound Event of the Grid.
2. In the Event handler, get all dataItems of the Grid.
3. From the dataItems get all rows of the Grid.
4. Iterate throw the rows and if the "ProjectNumber" property of the dataItem has less length than 9 - add a custom class to this row.
5. Add style for the custom class that hides the pointed row.
6. Here is an example:
   

   // In the Grid:
   .Events(e => e.DataBound("onDataBound"))
   
   // The Event handler:
       function onDataBound() {
           var grid = $('#grid').data("kendoGrid");
           var data = grid.dataSource.data();
           var totalNumber = data.length;
   
           for (var i = 0; i < totalNumber; i++) {
               var currentDataItem = data[i];
               if (currentDataItem.ProjectNumber.length < 9) {
                   var rowUID = currentDataItem.uid;
                   var row = grid.tbody.find("tr[data-uid='" + rowUID + "']");
                   $(row).addClass("test");
               }
                  
           }
       }
   
   // The style:
       .test{
           display: none;
       }

Give a try to the approach above and let me know if further assistance is needed.

Kind Regards,
Anton Mironov
Progress Telerik

[Lars1603]

Wow, this works perfectly!
Thank you very much :)