[CLOSED] GridPanel JavaScript Filter with Paging Problem

[Django]

Hello

I used JavaScript function for filtering the gridpanel.I am calling the js function from listener of a button..

Here is the my javascript function

function filterNotificationStore() {
      
    var grid = App.AllNotificationsGridPanel;
    var idList = new Array();    
    idList.push(40);
    idList.push(45);
    idList.push(47);
    var filterFn = function (item) {
        if (idList.indexOf(item.data.UserID) > -1) {
            return true;
        }
        else {
            return false;
        }              
    };
    grid.store.filterBy(filterFn);
}

It works and filtering well.
But when i click the next page button(gridpagingtoolbar), filter is flying :)
Here is my grid panel.

<ext:GridPanel ID="AllNotificationsGridPanel" runat="server" Cls="feed-grid" Border="true">
                  <Features>
                       <ext:GridFilters runat="server" ID="NotificationGridFilter" Local="true">
                             <Filters>
                                   <ext:DateFilter DataIndex="ActivityDate">
                                   </ext:DateFilter>
                            </Filters>    
                      </ext:GridFilters>                                                                            
                  </Features>                                                                        
                  <Store>
                        <ext:Store ID="NotificationsStore" runat="server">
                               <Model>
                                    <ext:Model ID="NotificationsModel" runat="server" Name="NotificationItem" IDProperty="ID">
                                           <Fields>
                                                 <ext:ModelField Name="ID" Type="Int"/>
                                                 <ext:ModelField Name="UserID" Type="Int"/>
                                                 <ext:ModelField Name="Title" Type="String"/>
                                                 <ext:ModelField Name="ActivityDate" Type="Date"/>
                                                 <ext:ModelField Name="ActivityBy" Type="String" />
                                                 <ext:ModelField Name="MsgContent" Type="String" />   
                                                 <ext:ModelField Name="Unread" Type="Boolean" /> 
                                            </Fields>                    
                                    </ext:Model>
                               </Model>
                               <Sorters>
                                    <ext:DataSorter Property="ActivityDate" Direction="DESC" />
                               </Sorters>
                        </ext:Store>
                  </Store>                                                                        
                  <View>
                       <ext:GridView ID="GridView1" runat="server">
                              <Listeners>
                                   <ItemDblClick Handler="ActivityViewer.ActivityInfo.activityTabOpen(record);" />
                              </Listeners>
                       </ext:GridView>
                  </View>
                  <SelectionModel>
                       <ext:RowSelectionModel ID="RowSelectionModel1" runat="server" Mode="Single">
                              <DirectEvents>
                                   <Select OnEvent="ActivitySelect" Buffer="250" Before="return record.data.Unread;" Success="activityRowSelectSuccess(record);">
                                        <ExtraParams>
                                             <ext:Parameter Name="ID" Value="record.data.ID" Mode="Raw" />                                                            
                                        </ExtraParams>
                                    </Select>                                              
                               </DirectEvents>
                       </ext:RowSelectionModel>
                   </SelectionModel>
                   <ColumnModel>
                        <Columns>
                             <ext:Column ID="Column1" runat="server" Text="Title" DataIndex="Title" Flex="1">
                                    <Renderer Handler="return notificationRenderHandler(value,record);" />
                              </ext:Column>
                              <ext:Column ID="Column3" runat="server" Text="Date" DataIndex="ActivityDate" Width="150">
                                    <Renderer Handler="return formatDate(value, record, metadata)" />
                              </ext:Column>
                        </Columns>
                   </ColumnModel>
                   <BottomBar>
                        <ext:PagingToolbar ID="PagingToolbar1" runat="server" />
                    </BottomBar>
          </ext:GridPanel>

How can i solve this problem ?

Thank you...

[Daniil]

Hi @Django,

I cannot reproduce. Please provide a full test case and specify the Ext.NET version you are using.

[Django]

<ext:Button ID="btnFilterNotificationStoreByUserID" runat="server" Text="Filter by User" Icon="Find" Width="80">
      <Listeners>
             <Click Handler="FilterNotificationStore()"></Click>                                  
      </Listeners>
</ext:Button>

A lot of data in my grid by coming different users. I want to filter with UserID or UserIDs...
Total page of grid panel is 16.(symbolize a lot of data)
When i click the button and filtering the grid, page number is decrease 2. Filter works well.
Now i have 2 pages.(after filtering).
Problem starting here.
I click the next page button on "PagingToolbar", filter is destroy and page number go 16 again.
16 and 2 example numbers. Problem is when i want to go next page on grid after filtering process, filter is destroy.
I export latest ext.net version from "http://svn.ext.net/premium/trunk/" in yesterday.

[Django]

hello again
i prepared full test case.
if i remove datefilter, it works. You can try with datefilter and without datefilter :)
thank you

<script runat="server">
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!X.IsAjaxRequest)
        {
            List<object> dsList = new List<object>() { };
            for (int i = 0; i < 50; i++)
            {
                dsList.Add( new object[] { i, 40, "Testtesttest", System.DateTime.Now });
            }
            for (int j = 51; j < 100; j++)
            {
                dsList.Add( new object[] { j, 45, "Testtesttest", System.DateTime.Now });
            }
            for (int k = 101; k < 150; k++)
            {
                dsList.Add( new object[] { k, 47, "Testtesttest", System.DateTime.Now });
            }
            for (int m = 151; m < 200; m++)
            {
                dsList.Add( new object[] { m, 50, "Testtesttest", System.DateTime.Now });
            }
            this.NotificationsStore.DataSource = dsList;
            this.NotificationsStore.DataBind();
        }
    }
 </script>
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript">
        function filterNotificationStore() {

            var grid = App.AllNotificationsGridPanel;
            var idList = new Array();
            idList.push(40);
            idList.push(45);
            idList.push(47);
            var filterFn = function (item) {
                if (idList.indexOf(item.data.UserID) > -1) {
                    return true;
                }
                else {
                    return false;
                }
            };
            grid.store.filterBy(filterFn);
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <ext:ResourceManager runat="server" ID="ResourceManager1" />
        <ext:GridPanel ID="AllNotificationsGridPanel" runat="server" Cls="feed-grid" Border="true">
            <Features>
                <ext:GridFilters runat="server" ID="NotificationGridFilter" Local="true">
                    <Filters>
                        <ext:DateFilter DataIndex="ActivityDate">
                        </ext:DateFilter>
                    </Filters>    
                </ext:GridFilters>                                                                            
            </Features>
            <TopBar>
                <ext:Toolbar runat="server">
                    <Items>
                        <ext:Button ID="btnFilterNotificationStoreByUserID" runat="server" Text="Filter" Icon="Find" Width="80">
                            <Listeners>
                                <Click Handler="filterNotificationStore();"></Click>                                 
                            </Listeners>
                        </ext:Button>
                    </Items>
                </ext:Toolbar>
            </TopBar>                                                                       
            <Store>
                <ext:Store ID="NotificationsStore" runat="server">
                        <Model>
                            <ext:Model ID="NotificationsModel" runat="server" Name="NotificationItem" IDProperty="ID">
                                    <Fields>
                                            <ext:ModelField Name="ID" Type="Int"/>
                                            <ext:ModelField Name="UserID" Type="Int"/>
                                            <ext:ModelField Name="Title" Type="String"/>
                                            <ext:ModelField Name="ActivityDate" Type="Date"/>
                                    </Fields>                   
                            </ext:Model>
                        </Model>
                        <Sorters>
                            <ext:DataSorter Property="ActivityDate" Direction="DESC" />
                        </Sorters>
                </ext:Store>
            </Store>            
            <SelectionModel>
                <ext:RowSelectionModel ID="RowSelectionModel1" runat="server" Mode="Single">                        
                </ext:RowSelectionModel>
            </SelectionModel>
            <ColumnModel>
                <Columns>
                    <ext:Column ID="Column2" runat="server" Text="ID" DataIndex="ID"></ext:Column>            
                    <ext:Column ID="Column1" runat="server" Text="UserID" DataIndex="UserID"></ext:Column>    
                    <ext:Column ID="Column3" runat="server" Text="Title" DataIndex="Title"></ext:Column>    
                    <ext:Column ID="Column4" runat="server" Text="ActivityDate" DataIndex="ActivityDate"></ext:Column>                      
                </Columns>
            </ColumnModel>
            <BottomBar>
                <ext:PagingToolbar ID="PagingToolbar1" runat="server" />
            </BottomBar>
        </ext:GridPanel>
    </div>
    </form>
</body>
</html>

[Daniil]

Well, a GridFilters plugin re-apply its filters on paging. But it doesn't know about your custom filter applied. So, it resets.

I think you should take the only option - either custom filtering by calls of filterBy method or filtering by a GridFilters only.