Updating GridPanel Cell(ComboBox) based on another Cell(Combobox), Both the cell belongs to the same column?

Question

As the subject specifies, i have a GridPanel with a ComboBox as a cell to one of the column. By default each cell containing the ComboBox have the selected item as current rownumber, user has the ability to change the items in the ComboBox .

Problem: I will explain the problem with an example which[B] i intend to be the behaviour[/B] . Consider a scenario where the user changes the ComboBox value from 2(present in row number 2) to 6, the value of the ComboBox present in the Row 6 should change from 6 to 2. that is the values must swap so that each row will not have any duplicate entries as selected item in the ComboBox.

Proposed Solution: I tried few things but i was stuck at a point which i have explained below. I have two stores Store1 for GridPanel and Store2 for the ComboBox. in the Listeners event --> BeforeSelect event of the ComboBox 1) i get the selected value (the value which the user has modified to) 2) Iterate through the data which was bounded to the GridPanel(as there are some other editable columns which may have been modified) --->[B] This is the part where i am stuck[/B] 3) Update the Store1 and commit the changes which will reflect in the dataview. This is what is in my mind.

Is it possible to do this in client side or do we have to do it in server side? i prefer client side. I have developed a sample Page which showcases gridpanel , combobox etc..

I am form a background working with Telerik Controls from past 3 years and i am new to Ext.net( Actually Working on POC from past 3 Days)

<%@ Page Language="C#" %>

<%@ Import Namespace="System.Collections.Generic" %>
<%@ Import Namespace="System.Xml" %>
<%@ Import Namespace="System.Data.Linq" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<script runat="server">
    protected void Page_Load(object sender, EventArgs e)
    {
        //if (!X.IsAjaxRequest)
        //{
        this.Store1.DataSource = new List<Company> 
             { 
                 new Company(0, "3m Co", 71.72, "name1", 0.03, 1),
                 new Company(1, "Alcoa Inc", 29.01, "name2", 1.47,2),
                 new Company(2, "Altria Group Inc", 83.81, "name3", 0.34,3),
                 new Company(3, "American Express Company", 52.55, "name4", 0.02,4),
                 new Company(4, "American International Group, Inc.", 64.13, "name5", 0.49,5),
                 new Company(5, "AT&T Inc.", 31.61, "name6", -1.54,6),
                 new Company(6, "Boeing Co.", 75.43, "name7", 0.71,7),
                 new Company(7, "Caterpillar Inc.", 67.27, "name8", 1.39,8),
                 new Company(8, "Citigroup, Inc.", 49.37, "name9", 0.04,9),
                 new Company(9, "E.I. du Pont de Nemours and Company", 40.48, "name10", 1.28,10)
             };

        this.Store1.DataBind();


        List<object> Items = new List<object>(10);
        for (int i = 1; i <= 10; i++)
        {
            Items.Add(new { Text = "C" + i, ItemValue = i });
        }

        Store2.DataSource = Items;
        Store2.DataBind();


        if (!this.IsPostBack)
        {
            //RowSelectionModel sm = this.GridPanel1.GetSelectionModel() as RowSelectionModel;

            //sm.SelectedRow = new SelectedRow(2);

            //sm.SelectedRows.Add(new SelectedRow(2));
            //sm.SelectedRows.Add(new SelectedRow("11"));
        }


        //}
    }

    protected void SubmitSelection(object sender, DirectEventArgs e)
    {
        string json = e.ExtraParams["Values"];

        if (string.IsNullOrEmpty(json))
        {
            return;
        }

        //XML will be represent as
        //<records>
        //   <record><Name>Alcoa Inc</Name><Price>29.01</Price><Change>0.42</Change><PctChange>1.47</PctChange></record>
        //        ...  
        //   <record>...</record>
        //</records>

        XmlNode xml = JSON.DeserializeXmlNode("{records:{record:" + json + "}}");


        foreach (XmlNode row in xml.SelectNodes("records/record"))
        {
            string enable = row.SelectSingleNode("Enable").InnerXml;
            string name = row.SelectSingleNode("Name").InnerXml;
            string price = row.SelectSingleNode("Price").InnerXml;
            string change = row.SelectSingleNode("UpdatedBy").InnerXml;
            string pctChange = row.SelectSingleNode("PctChange").InnerXml;

            //handle values
        }

        List<Company> companies = JSON.Deserialize<List<Company>>(json);

        foreach (Company company in companies)
        {
            string name = company.Name;
            double price = company.Price;
            string change = company.UpdatedBy;
            double pctChange = company.PctChange;

            //handle values
        }

        Dictionary<string, string>[] companies1 = JSON.Deserialize<Dictionary<string, string>[]>(json);

        foreach (Dictionary<string, string> row in companies1)
        {
            string name = row["Name"];
            string price = row["Price"];
            string change = row["UpdatedBy"];
            string pctChange = row["PctChange"];

            //handle values
        }

        this.ResourceManager1.AddScript("Ext.Msg.alert('Submitted', 'Please see source code how to handle submitted data');");
    }

    public class Company
    {
        public Company(int id, string name, double price, string updatedBy, double pctChange, int displayOrder)
        {
            this.ID = id;
            this.Name = name;
            this.Price = price;
            this.UpdatedBy = updatedBy;
            this.PctChange = pctChange;
            this.DisplayOrder = displayOrder;
        }

        public int ID { get; set; }
        public string Name { get; set; }
        public double Price { get; set; }
        public string UpdatedBy { get; set; }
        public double PctChange { get; set; }
        public int DisplayOrder { get; set; }
    }
</script>


<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Demo Grid For Admin Screen</title>

    <link href="resources/css/examples.css" rel="stylesheet" />

    <script>
        var template = '<span style="color:{0};">{1}</span>';

        var change = function (value) {
            return Ext.String.format(template, (value > 0) ? "green" : "black", value);
        }

        var pctChange = function (value) {
            return Ext.String.format(template, (value > 0) ? "green" : "red", value + "%");
        }

        var duplicated = function (store, SelectedItem, index) {

            var found = false;
            //TODO: Iterate through the data which was bounded to the GridPanel
            //      Update the Store1 and commit the changes which will reflect in the dataview.




            //if (index != undefined || index != null) {

            //    store.store.each(function (record) {
            //        if (found = (record.data.itemValue == SelectedItem.data.itemValue) ? true : false) {
            //            record.data.itemValue = store.value;
            //            record.data.text = store.rawValue;

            //            alert("Duplicate present");
            //            found = true;
            //        };
            //    }
            //)
            //}
            return found;
        }

    </script>
</head>
<body>
    <form id="Form1" runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server" />

        <h1>Decision Support Admin Screen</h1>
        <p>This example shows how to maintance selection between paging</p>

        <ext:Store ID="Store1" runat="server" PageSize="10">
            <Model>
                <ext:Model ID="Model1" runat="server" IDProperty="ID">
                    <Fields>
                        <ext:ModelField Name="Enable" Type="Boolean" />
                        <ext:ModelField Name="ID" />
                        <ext:ModelField Name="Name" />
                        <ext:ModelField Name="Price" />
                        <ext:ModelField Name="UpdatedBy" />
                        <ext:ModelField Name="PctChange" />
                        <ext:ModelField Name="DisplayOrder" Type="Int" />
                    </Fields>
                </ext:Model>
            </Model>
        </ext:Store>

        <ext:Store ID="Store2" runat="server">
            <Model>
                <ext:Model ID="Model2" runat="server">
                    <Fields>
                        <ext:ModelField Name="text" Type="String" ServerMapping="Text" />
                        <ext:ModelField Name="itemValue" Type="int" ServerMapping="ItemValue" />
                    </Fields>
                </ext:Model>
            </Model>
        </ext:Store>

        <ext:GridPanel
            ID="GridPanel1"
            runat="server"
            StoreID="Store1"
            Title="Decision Support Admin Screen"
            Collapsible="false"
            DisableSelection="false"
            Width="600">
            <ColumnModel ID="ColumnModel1" runat="server">
                <Columns>
                    <ext:CheckColumn runat="server" Text="Enable" Editable="true" Width="55" DataIndex="Enable"></ext:CheckColumn>
                    <ext:Column ID="Column1" runat="server" Text="Company" DataIndex="Name" Flex="1" />
                    <ext:Column ID="Column2" runat="server" Text="Price" Width="75" DataIndex="Price">
                        <Renderer Format="UsMoney" />
                    </ext:Column>
                    <ext:Column ID="Column3" runat="server" Text="Updated By" Width="75" DataIndex="UpdatedBy">
                        <Renderer Fn="change" />
                    </ext:Column>
                    <ext:Column ID="Column4" runat="server" Text="Change" Width="75" DataIndex="PctChange">
                        <Renderer Fn="pctChange" />
                    </ext:Column>

                    <ext:ComponentColumn ID="ComponentColumn2"
                        runat="server"
                        Editor="true"
                        DataIndex="DisplayOrder"
                        Flex="1"
                        Text="Display Order Dynamic">
                        <Component>
                            <ext:ComboBox ID="ComboBox2" runat="server" StoreID="Store2" ValueField="itemValue" DisplayField="text">
                                <Listeners>
                                    <BeforeSelect Fn="duplicated">
                                    </BeforeSelect>
                                </Listeners>
                            </ext:ComboBox>
                        </Component>
                    </ext:ComponentColumn>

                </Columns>
            </ColumnModel>
            <View>
                <ext:GridView ID="GridView1" runat="server" StripeRows="true">
                    <Plugins>
                        <ext:GridDragDrop ID="GridDragDrop1" runat="server" DragText="Drag and drop to reorganize" />
                    </Plugins>
                </ext:GridView>
            </View>
        </ext:GridPanel>
        <table>
            <tr>
                <td>
                    <ext:Button ID="btnSave" runat="server" Text="Save">
                        <DirectEvents>
                            <Click OnEvent="SubmitSelection">
                                <ExtraParams>
                                    <ext:Parameter
                                        Name="Values"
                                        Value="#{GridPanel1}.getRowsValues()"
                                        Mode="Raw"
                                        Encode="true" />
                                </ExtraParams>
                            </Click>
                        </DirectEvents>
                    </ext:Button>

                </td>
                <td>
                    <ext:Button ID="btnBack" runat="server" Text="Back" />
                </td>
            </tr>
        </table>
    </form>
</body>
</html>

Answer 1

I was able to solve this issue. Just replace this method var duplicated = function (store, SelectedItem, index) in the above code with this one

 var duplicated = function (store, SelectedItem, index) {
        var found = false;
        var GridPanelStore = Ext.getCmp('GridPanel1').getStore();

        GridPanelStore.each(function (record) {
            if (record.data.DisplayOrder == SelectedItem.data.itemValue) {
                record.data.DisplayOrder = store.value;
                //TODO: Do we have to display the user some Notification about the duplicate value?
                found = true;
            }
            else if (record.data.DisplayOrder == store.value) {
                record.data.DisplayOrder = SelectedItem.data.itemValue;
                found = true;
            }
        }
            )

        GridPanelStore.commitChanges;
        Ext.getCmp('GridPanel1').getView().refresh(false);
        return found;
    }