Filter by 'between' pre-defined values

4 posts, 0 answers
  1. Lucy
    Lucy avatar
    17 posts
    Member since:
    Nov 2016

    Posted 03 Aug 2017 Link to this post

    Hello,

    I have a requirement to filter some prices using pre-defined values like the following:

    • Less than £10
    • Between £10 and £20
    • Between £20 and £30
    • More than £30

    I can't seem to see a way to do this with the Grid. Is it possible?

    Thank you

    Lucy

  2. Viktor Tachev
    Admin
    Viktor Tachev avatar
    2499 posts

    Posted 07 Aug 2017 Link to this post

    Hello Lucy,

    Applying default filter for the Grid can be done by setting a filter condition in the DataSource. This way when the data is requested the filter will be applied and the Grid will show only the relevant information.

    The code snippet below outlines how you can set the DataSource to filter records where the UnitPrice is between 10 and 20.

    .DataSource(dataSource => dataSource
        .Ajax()
        .Filter(f=>f.Add(a=>a.UnitPrice).IsGreaterThan(10).And().IsLessThan(20))
        .Batch(true)
        .PageSize(20)               
        .ServerOperation(false)
        .Model(model => model.Id(p => p.ProductID))
        .Read("Editing_Read", "Grid")
    )


    Regards,
    Viktor Tachev
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Lucy
    Lucy avatar
    17 posts
    Member since:
    Nov 2016

    Posted 07 Aug 2017 in reply to Viktor Tachev Link to this post

    Hi,

    Thank you for the reply.

    Sorry I didn't actually mean when the data is requested. I meant the pre-defined values show in the 'filter' box for UnitPrice. Then when you select one, it filters it.

    Thank you

    Lucy

  4. Viktor Tachev
    Admin
    Viktor Tachev avatar
    2499 posts

    Posted 09 Aug 2017 Link to this post

    Hello Lucy,

    Thank you for clarifying the scenario. In that case the filter menu can be customized to include a DropDownList with predefined values. There is an example that shows how to customize the filter menu below. 


    Have in mind that the filter for the dataSource should be applied manually via the filter() method. This is necessary because each option in the DropDownList would have a different filter operator. You can use the change event of the DropDownList to set the filter.


    Regards,
    Viktor Tachev
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top