[CLOSED] Data selection case sensitive on Store with row selection issue

**ljcorreia** · Oct 19, 2010, 12:41 PM

Hi,

In the following example, you will be able to see 2 problems where the first one is my main issue:

1. Selection Model is case-sensitive and I'd like it to behave like insensitive, that means, select the row when clicking in the button ignoring case.

2. Renderer Format="LowerCase" seems not to be working. UpperCase works fine.

Of course I could convert Column1 on DataLayer level, but in my scenario it has implications.
I also tried to convert like Data Prepare Sample but if I change the data to lowercase on Convert handler nothing gets displayed. I don't know what I was doing wrong.

<%@ 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)
        {
            Store store = this.GridPanel1.GetStore();
            store.DataSource = new object[] { 
                                         new object[] {"firsttest", "firsttest" },
                                         new object[] {"SecondTest", "SecondTest" },
                                         new object[] {"thirdTest", "thirdTest" }
                                };
            store.DataBind();
        }
    }

    protected void Select_Click(object sender, DirectEventArgs e)
    {
        RowSelectionModel sm = this.GridPanel1.SelectionModel.Primary as RowSelectionModel;
        sm.SelectedRows.Add(new SelectedRow("firsttest"));
        sm.SelectedRows.Add(new SelectedRow("secondtest"));
        sm.UpdateSelection();
    }
</script>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Ext.Net Example</title>

    <script type="text/javascript">
        var prepare = function(value, rec) {
            rec[0] = value.toString.toLowerCase();
        };
    </script>

</head>
<body>
    <form id="Form1" runat="server">
    <ext:ResourceManager ID="ResourceManager1" runat="server" />
    <ext:GridPanel ID="GridPanel1" runat="server" AutoHeight="true">
        <Store>
            <ext:Store ID="Store1" runat="server">
                <Reader>
                    <ext:ArrayReader IDProperty="Column1">
                        <Fields>
                            <ext:RecordField Name="Column1">
                                <Convert Fn="prepare" />
                            </ext:RecordField>
                            <ext:RecordField Name="Column2" />
                        </Fields>
                    </ext:ArrayReader>
                </Reader>
            </ext:Store>
        </Store>
        <ColumnModel ID="ColumnModel1" runat="server">
            <Columns>
                <ext:Column Header="Column 1" DataIndex="Column1">
                    <Renderer Format="LowerCase" />
                </ext:Column>
                <ext:Column Header="Column 2" DataIndex="Column2">
                    <Renderer Format="LowerCase" />
                </ext:Column>
            </Columns>
        </ColumnModel>
        <SelectionModel>
            <ext:CheckboxSelectionModel ID="CheckboxSelectionModel1" runat="server" SingleSelect="false" />
        </SelectionModel>
        <Buttons>
            <ext:Button ID="ButtonSelect" runat="server" Text="Select Rows">
                <DirectEvents>
                    <Click OnEvent="Select_Click" />
                </DirectEvents>
            </ext:Button>
        </Buttons>
    </ext:GridPanel>
    </form>
</body>
</html>

Your help is much appreciated.
Regards,
Leo

**Daniil** · Oct 19, 2010, 2:38 PM

Hi,

The parentheses should follow after "toString", and a convert function should return a value.

So, the convert function can look like this:

Example

var prepare = function(value, rec) {
    value = value.toString().toLowerCase();
    rec[0] = value;
    return value;
};

But it doesn't cause lowercasing of ids...I think it's an issue and the convert function should change ids too.
Maybe I'm wrong.
Needs to discuss it with Dev team.

**Daniil** · Oct 19, 2010, 2:43 PM

Originally Posted by ljcorreia

Hi,

2. Renderer Format="LowerCase" seems not to be working. UpperCase works fine.

Thank you for the report.
We will notice you when a fix will be committed to the SVN.

Here is a test case to reproduce.

Example

<%@ 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)
        {
            Store store = this.GridPanel1.GetStore();
            store.DataSource = new object[] { 
                                         new object[] {"TEST1"},
                                         new object[] {"TEST2"},
                                         new object[] {"TEST3"}
                                };
            store.DataBind();
        }
    }
</script>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Ext.Net Example</title>
</head>
<body>
    <form runat="server">
    <ext:ResourceManager runat="server" />
    <ext:GridPanel ID="GridPanel1" runat="server" AutoHeight="true">
        <Store>
            <ext:Store runat="server">
                <Reader>
                    <ext:ArrayReader>
                        <Fields>
                            <ext:RecordField Name="test" />
                        </Fields>
                    </ext:ArrayReader>
                </Reader>
            </ext:Store>
        </Store>
        <ColumnModel runat="server">
            <Columns>
                <ext:Column Header="Test" DataIndex="test">
                    <Renderer Format="LowerCase"/>
                </ext:Column>
            </Columns>
        </ColumnModel>
    </ext:GridPanel>
    </form>
</body>
</html>

**ljcorreia** · Oct 19, 2010, 3:20 PM

Originally Posted by Daniil

Hi,

The parentheses should follow after "toString", and a convert function should return a value.

So, the convert function can look like this:

Example

var prepare = function(value, rec) {
    value = value.toString().toLowerCase();
    rec[0] = value;
    return value;
};

But it doesn't cause lowercasing of ids...I think it's an issue and the convert function should change ids too.
Maybe I'm wrong.
Needs to discuss it with Dev team.

Hi Daniil,

Thanks for your quick reply.
Sorry I forgot the parenthesis, but I put them on my real scenario.
Unfortunately, the main issue remains though.
Please click the button and you will notice that the second record do not get selected.

Would you suggest something else, please?

<%@ 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)
        {
            Store store = this.GridPanel1.GetStore();
            store.DataSource = new object[] { 
                                         new object[] {"firsttest", "firsttest" },
                                         new object[] {"SecondTest", "SecondTest" },
                                         new object[] {"thirdTest", "thirdTest" }
                                };
            store.DataBind();
        }
    }

    protected void Select_Click(object sender, DirectEventArgs e)
    {
        RowSelectionModel sm = this.GridPanel1.SelectionModel.Primary as RowSelectionModel;
        sm.SelectedRows.Add(new SelectedRow("firsttest"));
        sm.SelectedRows.Add(new SelectedRow("secondtest"));
        sm.UpdateSelection();
    }
</script>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Ext.Net Example</title>

    <script type="text/javascript">
        var prepare = function(value, rec) {
            value = value.toString().toLowerCase();
            rec[0] = value;
            return value;
        };
    </script>

</head>
<body>
    <form id="Form1" runat="server">
    <ext:ResourceManager ID="ResourceManager1" runat="server" />
    <ext:GridPanel ID="GridPanel1" runat="server" AutoHeight="true">
        <Store>
            <ext:Store ID="Store1" runat="server">
                <Reader>
                    <ext:ArrayReader IDProperty="Column1">
                        <Fields>
                            <ext:RecordField Name="Column1">
                                <Convert Fn="prepare" />
                            </ext:RecordField>
                            <ext:RecordField Name="Column2" />
                        </Fields>
                    </ext:ArrayReader>
                </Reader>
            </ext:Store>
        </Store>
        <ColumnModel ID="ColumnModel1" runat="server">
            <Columns>
                <ext:Column Header="Column 1" DataIndex="Column1">
                </ext:Column>
                <ext:Column Header="Column 2" DataIndex="Column2">
                </ext:Column>
            </Columns>
        </ColumnModel>
        <SelectionModel>
            <ext:CheckboxSelectionModel ID="CheckboxSelectionModel1" runat="server" SingleSelect="false" />
        </SelectionModel>
        <Buttons>
            <ext:Button ID="ButtonSelect" runat="server" Text="Select Rows">
                <DirectEvents>
                    <Click OnEvent="Select_Click" />
                </DirectEvents>
            </ext:Button>
        </Buttons>
    </ext:GridPanel>
    </form>
</body>
</html>

Leo.

**Daniil** · Oct 19, 2010, 3:55 PM

Please click the button and you will notice that the second record do not get selected.

That's right. As I mentioned a convert function doesn't change a record's id. There is still "SecondTest".
But this code

sm.SelectedRows.Add(new SelectedRow("secondtest"));

selects a record with id "secondtest".

We will notice you when we have any update.

**Vladimir** · Oct 19, 2010, 7:31 PM

Hi,

LowerCase renderer is fixed. Please node that we renamed enum value LowerCase -> Lowercase
Please update from SVN

**Daniil** · Oct 19, 2010, 9:35 PM

Hi Leo,

To lowercase records ids we would suggest you to use the Store's updateRecordId method.

Please look at the example.
After clicking on the "To lowercase records ids" button your button will work in according to your requirement.

Example

<%@ 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)
        {
            Store store = this.GridPanel1.GetStore();
            store.DataSource = new object[] {
                                         new object[] {"firsttest", "firsttest" },
                                         new object[] {"SecondTest", "SecondTest" },
                                         new object[] {"thirdTest", "thirdTest" }
                                };
            store.DataBind();
        }
    }

    protected void Select_Click(object sender, DirectEventArgs e)
    {
        RowSelectionModel sm = this.GridPanel1.SelectionModel.Primary as RowSelectionModel;
        sm.SelectedRows.Add(new SelectedRow("firsttest"));
        sm.SelectedRows.Add(new SelectedRow("secondtest"));
        sm.UpdateSelection();
    }
</script>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Ext.Net Example</title>

    <script type="text/javascript">
        var prepare = function(value, rec) {
            value = value.toString().toLowerCase();
            rec[0] = value;
            return value;
        };
    </script>

</head>
<body>
    <form runat="server">
    <ext:ResourceManager runat="server" />
    <ext:GridPanel ID="GridPanel1" runat="server" AutoHeight="true">
        <Store>
            <ext:Store runat="server">
                <Reader>
                    <ext:ArrayReader IDProperty="Column1">
                        <Fields>
                            <ext:RecordField Name="Column1">
                                <Convert Fn="prepare" />
                            </ext:RecordField>
                            <ext:RecordField Name="Column2" />
                        </Fields>
                    </ext:ArrayReader>
                </Reader>
            </ext:Store>
        </Store>
        <ColumnModel runat="server">
            <Columns>
                <ext:Column Header="Column 1" DataIndex="Column1" />
                <ext:Column Header="Column 2" DataIndex="Column2">
                    <Renderer Format="LowerCase" />
                </ext:Column>
            </Columns>
        </ColumnModel>
        <SelectionModel>
            <ext:CheckboxSelectionModel runat="server" SingleSelect="false" />
        </SelectionModel>
    </ext:GridPanel>
    <ext:Button runat="server" Text="Select Rows" OnDirectClick="Select_Click" />
    <ext:Button runat="server" Text="To lowercase records ids">
        <Listeners>
            <Click Handler="var store = GridPanel1.getStore();
                            store.each(function(r) {
                                store.updateRecordId(r, r.id.toString().toLowerCase());
                            }); " />
        </Listeners>
    </ext:Button>
    </form>
</body>
</html>

**ljcorreia** · Oct 20, 2010, 2:30 PM

Hi,

Thanks to all for the commitment in solving the problem.
This can be now marked as solved.

Thanks a lot.
Leo

Thread: [CLOSED] Data selection case sensitive on Store with row selection issue

Thread Tools

Search Thread

Display

[CLOSED] Data selection case sensitive on Store with row selection issue

Similar Threads

How to change gridpanel selection model selection mode (single/multiple) from client side (javascript)?

How to select gid row selection from another grid row selection event

[CLOSED] Row Editor selection issue

how to get only last selected row from checkbox selection model multi selection

grid sorting case sensitive?

Posting Permissions

Sitemap

Downloads

Resources

Thread: [CLOSED] Data selection case sensitive on Store with row selection issue

[CLOSED] Data selection case sensitive on Store with row selection issue

Similar Threads

Posting Permissions

Sitemap

Downloads

Resources

Stay connected with us