Filter Store from code behind with IN logic

Hi,

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

Code:

---

        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.

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!

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.

Code:

---

<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.

Code:

---

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.

Code:

---

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

I try using
"[001, 002]"
"001, 002"
"001|002"
It still the same.

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.

Hi Fabricio,

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

Code:

---

<%@ 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

Hello @Kuro13!

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

Code:

---

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:

Code:

---

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:

Code:

---

var values = new List<string>() { "001", "002" };
oDataFilter.RawValue = "<raw>" + JSON.Serialize(values);

---

I hope this helps!

Hi Fabricio,

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

Thanks for your help. :)