How to customize filter based on data created with template in Grid

2 posts, 0 answers
  1. James
    James avatar
    6 posts
    Member since:
    Dec 2017

    Posted 22 Aug Link to this post

    Hi All,

            I am working on grid filter and I meet such a problem. The type of field "status" is string and it will return 0 for Female and 1 for Male. I use a template to show "Male" or "Female" instead of "0" or "1" respectively in grid. However, the filter doesn't work because it only receives "0" or "1" and "Female" or "Male" will show nothing in grid. The code is below.

         { 'field': 'status' , 'title': 'Gender', 'width': 110, 'template': "#= status === '1' ? 'Male' : 'Female' #&quot, }

           I wanna use filter to accept "Male" or "Female", or create a multiple selection, how should I make it? Thanks for your help.

    James

  2. Georgi
    Admin
    Georgi avatar
    370 posts

    Posted 24 Aug Link to this post

    Hi James,

    A possible solution is to create a custom filter widget.

    e.g.

    filterable:{
               cell:{
                 showOperators:false,
                 template:function(args){
                   args.element.kendoDropDownList({
                     dataSource:{
                       data:[
                         {
                           value:0,
                           text:'female'
                         },
                         {
                           value:1,
                           text:'male'
                         }
                       ]
                     } ,
                     dataValueField:'value',
                     dataTextField:'text',
                     optionLabel:'select gender',
                     valuePrimitive: true
                   })
                 }
               }
             }
             }

    Below you will find a sample which demonstrates the above approach:



    Regards,
    Georgi
    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.
Back to Top