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

1 Answer 58 Views
Filter Grid
Lars1603
Top achievements
Rank 1
Iron
Lars1603 asked on 03 Nov 2022, 09:23 AM | edited on 03 Nov 2022, 09:26 AM

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

 

 

1 Answer, 1 is accepted

Sort by
1
Accepted
Anton Mironov
Telerik team
answered on 08 Nov 2022, 07:45 AM

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

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Lars1603
Top achievements
Rank 1
Iron
commented on 08 Nov 2022, 02:24 PM

Wow, this works perfectly!
Thank you very much :)
Tags
Filter Grid
Asked by
Lars1603
Top achievements
Rank 1
Iron
Answers by
Anton Mironov
Telerik team
Share this question
or