Page 1 of 2 12 LastLast
Results 1 to 10 of 13

Thread: Implement Grid Filter

  1. #1
    Sencha User
    Join Date
    Aug 2015
    Location
    India
    Posts
    24

    Default Answered: Implement Grid Filter

    Hi,

    I want to implement a grid filter. As of now, if there are two values in one cell, the list filter shows value1, value2 as shown in the figure below.

    Filters.jpg


    But, I need to implement in such a way that, all the values should appear one below the other and it should eliminate all the duplicate records as shown in the below figure.

    Filters_1.jpg

    Please let me know on how to implement this filter.

  2. Thanks for the Fiddle. For your list filter, you'll want to provide a store config that provides a list of the values that you want to be available for it.

    But as I look at what you're trying to accomplish, it occurs to me that the list filter isn't going to achieve the desired end out of the box. When you use the list filter, the selected values are going to be added to an array and then compared against the values that equal the value for the dataIndex of the column being filtered. Since you have complex data for the CARNAME dataindex, the filter--out of the box--isn't going to be able to do the kind of matching logic that you're after (it'll work for "Corolla", but not for the one where there is an array of values).

    https://fiddle.sencha.com/#fiddle/13b3

    I would encourage you to extend the List filter and create a custom component in which you can implement the specialized matching logic that you need.

    Thanks!
    Joel

  3. #2
    Sencha User
    Join Date
    Nov 2014
    Posts
    3,120
    Answers
    446

    Default

    Hi--

    You should be able to use the "store" config of the list filter to provide the datasource that you want to use for the menu list:

    http://docs.sencha.com/extjs/5.1/5.1...List-cfg-store

    Thanks!
    Joel

  4. #3
    Sencha User
    Join Date
    Aug 2015
    Location
    India
    Posts
    24

    Default

    Hi Watson,

    I am very new to ExtJS framework. Can you please elaborate on the usage of filter store?
    How can I bind b/w the data source of the store and the actual data present in the grid?



    Thanks!

  5. #4
    Sencha User
    Join Date
    Nov 2014
    Posts
    3,120
    Answers
    446

    Default

    Quote Originally Posted by Nandu007 View Post
    Hi Watson,

    I am very new to ExtJS framework. Can you please elaborate on the usage of filter store?
    How can I bind b/w the data source of the store and the actual data present in the grid?



    Thanks!
    The "store" config allows you to specify a store that will be used as the datasource for the menu items. My suggestion would be to create a store that contains the discreet data values that you want to be available in the menu, and then use that store as the source of that list filter.

    Thanks!
    Joel

  6. #5
    Sencha User
    Join Date
    Aug 2015
    Location
    India
    Posts
    24

    Default

    I got that. Now I can get the values in the menu. My question is, how can I bind the menu values to that of the data stored in grid?
    Once I select the values from the filter, it should filter based on the match with the grid data right? How can I do this?

  7. #6
    Sencha User
    Join Date
    Nov 2014
    Posts
    3,120
    Answers
    446

    Default

    Quote Originally Posted by Nandu007 View Post
    I got that. Now I can get the values in the menu. My question is, how can I bind the menu values to that of the data stored in grid?
    Once I select the values from the filter, it should filter based on the match with the grid data right? How can I do this?
    Assuming that the value fields are the same, it should just filter it. Can you share an example of the issue? https://fiddle.sencha.com

    Thanks!
    Joel

  8. #7
    Sencha User
    Join Date
    Aug 2015
    Location
    India
    Posts
    24

    Default

    Hi,
    I have shared an example. In fiddler, I am not able to replicate the list filter. Except that everything is same as my original code.
    In my original code, if I try to filter, it shows [object, Object] in the menu of the list filter since I have explicitly used a renderer for models column. I even tried using string filter. It doesn't filter anything.

    https://fiddle.sencha.com/#fiddle/139t

  9. #8
    Sencha User
    Join Date
    Nov 2014
    Posts
    3,120
    Answers
    446

    Default

    Thanks for the Fiddle. For your list filter, you'll want to provide a store config that provides a list of the values that you want to be available for it.

    But as I look at what you're trying to accomplish, it occurs to me that the list filter isn't going to achieve the desired end out of the box. When you use the list filter, the selected values are going to be added to an array and then compared against the values that equal the value for the dataIndex of the column being filtered. Since you have complex data for the CARNAME dataindex, the filter--out of the box--isn't going to be able to do the kind of matching logic that you're after (it'll work for "Corolla", but not for the one where there is an array of values).

    https://fiddle.sencha.com/#fiddle/13b3

    I would encourage you to extend the List filter and create a custom component in which you can implement the specialized matching logic that you need.

    Thanks!
    Joel

  10. #9
    Sencha User
    Join Date
    Aug 2015
    Location
    India
    Posts
    24

    Default

    Hi Watson,

    Thanks a lot! for your response. I will try this and report back.

  11. #10
    Sencha User
    Join Date
    Aug 2015
    Location
    India
    Posts
    24

    Default

    Hi Watson,

    Can you tell me the difference between using fields inside model and to declare fields explicitly? Because if I use fields inside model it won't filter even if there is one record.

    Code:
    model: Ext.create('Ext.data.Model', {
        fields: ['CNAME', {
            name: 'CARNAME',
            mapping: 'CAR.CARNAME'
        }]
    })
    and

    Code:
    fields: ['CNAME', {
        name: 'CARNAME',
        mapping: 'CAR.CARNAME'
    }]

Page 1 of 2 12 LastLast

Similar Threads

  1. Replies: 3
    Last Post: 29 Nov 2015, 5:04 PM
  2. Replies: 2
    Last Post: 30 Oct 2014, 5:18 AM
  3. Does 4.1 implement filter fields in grid headers?
    By dukeyboy in forum Ext: 4.x Beta
    Replies: 1
    Last Post: 13 Feb 2012, 4:25 AM
  4. Replies: 3
    Last Post: 27 Oct 2010, 8:20 AM
  5. Best way (any way) to implement filter in the Tree
    By atchijov in forum Ext 2.x: Help & Discussion
    Replies: 2
    Last Post: 2 Apr 2008, 10:42 AM

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •