Filter Store from code behind with IN logic

  1. #1

    Filter Store from code behind with IN logic

    Hi,

    I try to filter the store using IN logic with code below.

            Dim oDataFilters As New DataFilterCollection
            Dim oDataFilter As New DataFilter
    
            oDataFilter.Op = "in"
            oDataFilter.Value = "[TEXT1, TEXT2]"
    
            oDataFilters.Add(oDataFilter)
            storeObj.Filter(oDataFilters)
    The store is empty after the filter. Even TEXT1 and TEXT2 is exists.
    How can I filter with IN method?

    Thanks.
  2. #2
    Hello @Kuro13!

    You probably applying the in operator to the "[TEXT1, TEXT2]" string. Or, considering the string value gets morphed into an array once at client-side, you could be applying the "in" to the [undefined, undefined] array, as TEXT1 and TEXT2 are likely not defined variables in the scope of the filtering code, at client-side.

    Maybe if you could provide a running test case following our guidelines we could help you out with the issue. But with just that we can't go much further.

    I hope this helps!
    Fabrício Murta
    Developer & Support Expert
  3. #3
    Hi Fabricio,

    Thanks for replying fast.
    Yes, I think the store is filtered for "[TEXT1, TEXT2]" as a string not or.
    But, I try using "['TEXT1', 'TEXT2']" and it still not working.

    Its pretty hard to copy all the code. But this are some important part of the code.

    I have 2 grid.
    <ext:GridPanel
        runat="server"
        ID="GPTop"
        ClientIDMode="Static"
        ColumnWidth="0.5"
        Height="150"
        Frame="true">
        <Store>
            <ext:Store
                runat="server"
                ID="storeTop">
                <Model>
                    <ext:Model runat="server" IDProperty="code">
                        <Fields>
                            <ext:ModelField Name="code" />
                            <ext:ModelField Name="expand" />
                        </Fields>
                    </ext:Model>
                </Model>
            </ext:Store>
        </Store>
        <ColumnModel>
            <Columns>
                <ext:Column runat="server" Text="Manager" DataIndex="code" Flex="1" RightCommandAlign="false">
                    <Commands>
                        <ext:ImageCommand CommandName="Expand" Icon="Add" />
                        <ext:ImageCommand CommandName="Collapse" Icon="Delete" />
                    </Commands>
                    <DirectEvents>
                        <Command OnEvent="TopExpanded_DirectMethod">
                            <ExtraParams>
                                <ext:Parameter Name="code" Value="record.data.code" Mode="Raw" />
                                <ext:Parameter Name="expand" Value="record.data.expand" Mode="Raw" />
                            </ExtraParams>
                        </Command>
                    </DirectEvents>
                </ext:Column>
            </Columns>
        </ColumnModel>
        <SelectionModel>
            <ext:CheckboxSelectionModel runat="server" Mode="Multi" CheckOnly="true" />
        </SelectionModel>
    </ext:GridPanel>
    
    <ext:GridPanel
        runat="server"
        ID="GPBottom"
        ClientIDMode="Static"
        ColumnWidth="0.5"
        Height="150"
        Frame="true">
        <Store>
            <ext:Store
                runat="server"
                ID="storeBottom">
                <Model>
                    <ext:Model runat="server" IDProperty="code">
                        <Fields>
                            <ext:ModelField Name="code" />
                            <ext:ModelField Name="topcode" />
                        </Fields>
                    </ext:Model>
                </Model>
            </ext:Store>
        </Store>
        <ColumnModel>
            <Columns>
                <ext:Column runat="server" Text="Employee" DataIndex="code" Flex="1" />
            </Columns>
        </ColumnModel>
        <SelectionModel>
            <ext:CheckboxSelectionModel runat="server" Mode="Multi" CheckOnly="true" />
        </SelectionModel>
    </ext:GridPanel>
    And here is how I bind all the data to the grid.
    Dim listManager As New List(Of Object())
    listManager.Add(New Object() {"001", False})
    listManager.Add(New Object() {"002", False})
    listManager.Add(New Object() {"003", False})
    listManager.Add(New Object() {"004", False})
    storeTop.DataSource = listManager.ToArray()
    storeTop.DataBind()
    
    
    Dim listEmployee As New List(Of Object())
    listEmployee.Add(New Object() {"101", "001"})
    listEmployee.Add(New Object() {"102", "002"})
    listEmployee.Add(New Object() {"103", "003"})
    listEmployee.Add(New Object() {"104", "004"})
    storeBottom.DataSource = listEmployee.ToArray()
    storeBottom.DataBind()
    
    storeBottom.Filter("topcode", "NULL")
    And when user click on expand bottom in top list, I want to filter storeBottom to show only the expanded manager (the expand can be more than one).
    I use direct method to refilter the storeBottom.
    Public Sub TopExpanded_DirectMethod(sender As Object, e As DirectEventArgs)
        Dim code As String = e.ExtraParams("code")
        Dim expand As Boolean = Convert.ToBoolean(e.ExtraParams("expand"))
    
        'Some Logic for creating list of code selected
    
        Dim oDataFilters As New DataFilterCollection
        Dim oDataFilter As New DataFilter
    
        oDataFilter.Property = "topcode"
        oDataFilter.Op = "in"
    
        'This suppose to be list of code generated above. But for simplicity, I use hardcoded data.
        oDataFilter.Value = "['001', '002']"
    
        oDataFilters.Add(oDataFilter)
        storeBottom.Filter(oDataFilters)
    End Sub
    With code above, I hope to get the store filtered and show only Employee 101 and 102.
    But nothing showed.
    Am I doing it wrong? What is the correct format for DataFilter value if the Op is "in"?
    Or maybe there are any other way to do this?

    Thanks
  4. #4
    I try using
    "[001, 002]"
    "001, 002"
    "001|002"
    It still the same.
    Last edited by Kuro13; Aug 24, 2017 at 3:55 PM.
  5. #5
    Hello @Kuro13!

    Unfortunately bits & pieces of code won't help us help you. The link provided in our last thread provides some test case templates you can base your example in. It does not matter whether your test case is written in C# or VB.NET, but we need a simplified & runnable one.

    Again, the link points to: More Information Required.
    Fabrício Murta
    Developer & Support Expert
  6. #6
    Hi Fabricio,

    I understand your situation.
    Here I try to using the template.
    Hope this help.

    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                this.storeTop.DataSource = this.DataTop;
                this.storeTop.DataBind();
    
                this.storeBottom.DataSource = this.DataBottom;
                this.storeBottom.DataBind();
    
                this.storeBottom.Filter("topcode", "NULL");
            }
        }
    
        protected void TopExpanded_DirectMethod(object sender, DirectEventArgs e)
        {
            //Here I loop for all expanded code. but we will use a hardcoded one for this.
            //string selectedCode = GetSelectedCode();
    
            DataFilterCollection oDataFilters = new DataFilterCollection();
            DataFilter oDataFilter = new DataFilter();
    
            oDataFilter.Property = "topcode";
    
            //Here is working code
            oDataFilter.Op = "=";
            oDataFilter.Value = "002";  //this show only the employee with 002 Manager.
    
            //Here what I try to do for multi select
            //oDataFilter.Op = "in";
            //oDataFilter.Value = "['001', '002']";  //this suppose to show only the employee with 001 or 002 Manager. But it shows nothing.
    
            oDataFilters.Add(oDataFilter);
            storeBottom.Filter(oDataFilters);
        }
    
        private object[] DataTop
        {
            get
            {
                return new object[]
                {
                    new object[] { "001", false },
                    new object[] { "002", false },
                    new object[] { "003", false },
                    new object[] { "004", false }
                };
            }
        }
    
        private object[] DataBottom
        {
            get
            {
                return new object[]
                {
                    new object[] { "101", "001" },
                    new object[] { "102", "002" },
                    new object[] { "103", "003" },
                    new object[] { "104", "004" }
                };
            }
        }
    </script>
    
    <!DOCTYPE html>
    
    <html>
    <head runat="server">
        <title>Ext.NET Examples</title>
    
        <script type="text/javascript">
        </script>
    </head>
    <body>
        <ext:ResourceManager runat="server" />
        
        <ext:GridPanel 
            ID="GPTop"
            runat="server" 
            Title="Array Grid" 
            Width="600" 
            Height="350">
            <Store>
                <ext:Store ID="storeTop" runat="server">
                    <Model>
                        <ext:Model runat="server" IDProperty="code">
                            <Fields>
                                <ext:ModelField Name="code" />
                                <ext:ModelField Name="expand" />
                            </Fields>
                        </ext:Model>
                    </Model>
                </ext:Store>
            </Store>
            <ColumnModel runat="server">
                <Columns>
                    <ext:Column runat="server" Text="Manager" DataIndex="code" Flex="1" RightCommandAlign="false">
                        <Commands>
                            <ext:ImageCommand CommandName="Expand" Icon="Add" />
                            <ext:ImageCommand CommandName="Collapse" Icon="Delete" />
                        </Commands>
                        <DirectEvents>
                            <Command OnEvent="TopExpanded_DirectMethod">
                                <ExtraParams>
                                    <ext:Parameter Name="code" Value="record.data.code" Mode="Raw" />
                                    <ext:Parameter Name="expand" Value="record.data.expand" Mode="Raw" />
                                </ExtraParams>
                            </Command>
                        </DirectEvents>
                    </ext:Column>
                </Columns>
            </ColumnModel>
            <SelectionModel>
                <ext:CheckboxSelectionModel runat="server" Mode="Multi" CheckOnly="true" />
            </SelectionModel>
        </ext:GridPanel>
    
        <ext:GridPanel 
            ID="GPBottom"
            runat="server" 
            Title="Array Grid" 
            Width="600" 
            Height="350">
            <Store>
                <ext:Store ID="storeBottom" runat="server">
                    <Model>
                        <ext:Model runat="server" IDProperty="code">
                            <Fields>
                                <ext:ModelField Name="code" />
                                <ext:ModelField Name="topcode" />
                            </Fields>
                        </ext:Model>
                    </Model>
                </ext:Store>
            </Store>
            <ColumnModel runat="server">
                <Columns>
                    <ext:Column runat="server" Text="Employee" DataIndex="code" Flex="1" />
                </Columns>
            </ColumnModel>
            <SelectionModel>
                <ext:CheckboxSelectionModel runat="server" Mode="Multi" CheckOnly="true" />
            </SelectionModel>
        </ext:GridPanel>
    </body>
    </html>
    Thanks
  7. #7
    Hello @Kuro13!

    This is much more like it! And here you go:

    oDataFilter.CustomConfig.Add(new ConfigItem()
    {
        Name = "value",
        Value = "['001', '002']",
        Mode = ParameterMode.Raw
    });
    This is one manner to ensure your value gets passed as an array. Any Ext.NET component supports this custom config to send content the way you need, and I can call that a "pragmatic" way to do what you need.

    But I will agree with you if you said "there should be an easier way to pass the array argument back". As C# is strongly typed, this is a recurring challenge to us. If we leave it "generic", there's room for errors, if we tight it too much, it's harder to make mistakes and intellisense becomes more useful from code behind, but gives away freedom, in such case for instance. That's why we have the Custom Config. :)

    A shortcut for that though would be to use the RawValue with the <raw> token prefix.

    In other words, you can just change (and uncomment the previous one as well) line 36 to:

    oDataFilter.RawValue = "<raw>['001', '002']";
    Notice we're using RawValue instead of just Value. Without the <raw> prefix, it would just serialize the string as, well, a string, in the response to client-side.

    From that point, you can use Json to serialize an array or List() using Ext.Net.JSON's serializer helper. Something like this:

    var values = new List<string>() { "001", "002" };
    oDataFilter.RawValue = "<raw>" + JSON.Serialize(values);
    I hope this helps!
    Fabrício Murta
    Developer & Support Expert
  8. #8
    Hi Fabricio,

    Thank you so much. It works.
    I finally understand what CustomConfig is use for.

    Thanks for your help. :)

Similar Threads

  1. Bug in your 2.0 and 2.1 logic for DateTimeOffset
    By gdog_5021 in forum 2.x Help
    Replies: 9
    Last Post: Dec 05, 2012, 5:57 AM
  2. Replies: 2
    Last Post: Apr 12, 2012, 6:44 AM
  3. [CLOSED] Filter a Store on Datarange from Code Behind
    By sisa in forum 1.x Premium Help
    Replies: 3
    Last Post: Sep 15, 2011, 3:38 PM
  4. Replies: 3
    Last Post: Jul 24, 2011, 2:57 PM
  5. [CLOSED] Filter store on the server (in code behind)
    By deejayns in forum 1.x Premium Help
    Replies: 2
    Last Post: Dec 01, 2010, 10:19 AM

Tags for this Thread

Posting Permissions