How to exclude MVC Kendo Grid's column filter “contains” option?

10 posts, 0 answers
  1. Jeka74
    Jeka74 avatar
    7 posts
    Member since:
    Jun 2017

    Posted 16 May 2018 Link to this post

    I'm working on the bug where one screen has a grid that contains a column showing numbers, but when I try to filter it, it has "contains" option.
    When I type 0, I'm getting an error.
    I need to filter that column as a number not as a string.

    This is the fragment of the code:

    <p>columns.Bound(x => x.DebitAmount).Title("Debit").Width(300).ClientTemplate("#=kendo.toString(DebitAmount,'c') #").ClientFooterTemplate("#=kendo.toString(sum,'c') #");
    columns.Bound(x => x.CreditAmount).Title("Credit").Width(300).ClientTemplate("#=kendo.toString(CreditAmount,'c') #").ClientFooterTemplate("#=kendo.toString(sum,'c') #");
     
    ...............................other columns..........................

     

    .Filterable(ftb => ftb.Mode(GridFilterMode.Menu)
           .Extra(false)
           .Operators(operators => operators
           .ForString(str => str.Clear()
           .Contains("Contains")
           .IsEqualTo("EqualTo")
           .IsNotEqualTo("NotEqualTo")
           .IsEmpty("Empty")))
           .Operators(operators => operators
           .ForNumber(str => str.Clear()
          .IsEqualTo("EqualTo")
          .IsGreaterThan("GreaterThan")
          .IsLessThan("LessThan")
           )).Messages(m => m.IsFalse(" False "))
        .Messages(m => m.IsTrue("True ")))

     

    The model declares those fields as decimal

    The generated columns show "Contains" filter, even though the value are decimal

     

    I have another screen that shows decimal number as well, where filter is defined the same way, however, it does not include "contains" filter option.

    This is the code:

    columns.Bound(c => c.Amount).Title("Amount").ClientTemplate("#= kendo.toString(Amount,'c')#").Width("120px");
     

    .................other columns.................

     

    .Filterable(ftb => ftb.Mode(GridFilterMode.Menu)
        .Extra(false)
        .Operators(operators => operators
        .ForString(str => str.Clear()
        .Contains("Contains")
        .IsEqualTo("EqualTo")
        .IsNotEqualTo("NotEqualTo")
        .IsEmpty("Empty")))
        .Operators(operators => operators
        .ForNumber(str => str.Clear()
       .IsEqualTo("EqualTo")
       .IsGreaterThan("GreaterThan")
       .IsLessThan("LessThan")
        )))

    Everything seems the same (except of messages part) when defining the filter operations, but somehow, on the first screen, the "contains" operation is included and on the second is not.
    What am I missing?

     

     

  2.
  3. Stefan
    Admin
    Stefan avatar
    3006 posts

    Posted 17 May 2018 Link to this post

    Hello, Eugene,

    Thank you for the details.

    If both fields are the same type and the model, they should not have different filter options.

    I can suggest inspecting the page source in the dev tools, and searching for the following string "model":{"fields", this will point to the generated Grid model on the client. Please check if the debit column has the correct type.

    Could you please share an example reproducing this, as the issue could be caused by a factor which we are overlooking at this moment.

    Regards,
    Stefan
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  5. Jeka74
    Jeka74 avatar
    7 posts
    Member since:
    Jun 2017

    Posted 17 May 2018 in reply to Stefan Link to this post

    Hi, Stefan.

    There is nothing to reproduce, pretty much. Both pages I have, use the same filtering logic. However, on one page the filter does not show "contains" option and on another page it does, even though the models declare those fields as decimal

    The image1 displays what I do and image2 shows the error thrown when execution the cod

  7. Jeka74
    Jeka74 avatar
    7 posts
    Member since:
    Jun 2017

    Posted 17 May 2018 in reply to Stefan Link to this post

    Also, Stefan.

    I'm not sure if that helps, but I'm attaching an image here that shows the generated code for the Debit column

  8.
  9. Jeka74
    Jeka74 avatar
    7 posts
    Member since:
    Jun 2017

    Posted 17 May 2018 in reply to Stefan Link to this post

    Stefan, I searched for the "model":{"fields" on both screens, the screen that has filtering working has it, but somehow I could not find it on the screen with broken filtering
  11. Jeka74
    Jeka74 avatar
    7 posts
    Member since:
    Jun 2017

    Posted 17 May 2018 in reply to Stefan Link to this post

    HI again, Stefan.

    I found some script sections that look like the part of the grid code on the page with the broken filter:

    {"title":"Debit","headerAttributes":{"data-field":"DebitAmount","data-title":"Debit","data-aggregates":"sum"},"width":"300px","template":"#= kendo.toString(DebitAmount,\u0027c\u0027)#","footerTemplate":"#=kendo.toString(sum,\u0027c\u0027) #","field":"DebitAmount","encoded":true,"aggregates":["sum"]}

     

    And this is the grid code on the page with working filter:

    {"title":"Amount","headerAttributes":{"data-field":"Amount","data-title":"Amount"},"width":"120px","template":"#= kendo.toString(Amount,\u0027c\u0027)#","field":"Amount","encoded":true}

     

    What I found is that when I do a search in developer tool for "model":{"fields" string, I cannot find it for the broken filter page , but can find it for the working filter page. However, when I just scroll down the code on the broken filter page, I can find it.

     

    Not sure why. Very strange

    Hoe that may help you to point me to the right direction in resolving that issue

  13. Jeka74
    Jeka74 avatar
    7 posts
    Member since:
    Jun 2017

    Posted 17 May 2018 in reply to Stefan Link to this post

    Stefan, I found the solution. I'm not sure why I should do that on that particular page, but that's what I found:

    I need to add the following logic when defining the datasource:

    .Model(c => { c.Field<decimal>(d => d.DebitAmount); })
    .Model(c => { c.Field<decimal>(d => d.CreditAmount); })
    .Model(c => { c.Field<DateTime>(d => d.RequestedDate); })
  14.
  15. Stefan
    Admin
    Stefan avatar
    3006 posts

    Posted 18 May 2018 Link to this post

    Hello, Eugene,

    I'm glad to hear that you have found a solution.

    In it indeed strange that this code is needed, as the data type should be automatically mapped from the model.

    This may only be required when using custom DataSource:

    https://docs.telerik.com/aspnet-mvc/getting-started/custom-datasource#custom-datasource

    Regards,
    Stefan
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  17. Jeka74
    Jeka74 avatar
    7 posts
    Member since:
    Jun 2017

    Posted 18 May 2018 in reply to Stefan Link to this post

    Stefan, do you know if using my current Grid Filter set up I can use SuggestionsOperator with Grid Filterable Mode option is set to `GridFilterMode.Menu`, so when using "contains" filter, I can see available suggestions when I start typing?
  19. Stefan
    Admin
    Stefan avatar
    3006 posts

    Posted 21 May 2018 Link to this post

    Hello, Eugene,

    Currently, this options is available only when the row filter mode is used:

    https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/configuration/columns.filterable.cell#columns.filterable.cell

    https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/configuration/columns.filterable.cell#columns.filterable.cell.suggestionOperator

    A similar result could be achieved with a custom AutoComplete editing. We have a demo showcasing this. In this case, the suggest property has to be set to the titleFilter AutoComplete:

    https://demos.telerik.com/aspnet-mvc/grid/filter-menu-customization

    https://docs.telerik.com/kendo-ui/api/javascript/ui/autocomplete/configuration/suggest

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