Обновление ячейки GridPanel (ComboBox) на основе другой ячейки (Combobox). Обе ячейки принадлежат одному и тому же столбцу?

Как указывает тема, у меня есть GridPanel с ComboBox в качестве ячейки для одного из столбцов. По умолчанию каждая ячейка, содержащая ComboBox, имеет выбранный элемент в качестве текущего номера строки, пользователь имеет возможность изменять элементы в ComboBox.

Проблема: я объясню проблему на примере, который [B] я намерен использовать для поведения [/B] . Рассмотрим сценарий, в котором пользователь изменяет значение ComboBox с 2 (присутствует в строке номер 2) на 6, значение ComboBox, присутствующее в строке 6, должно измениться с 6 на 2, то есть значения должны поменяться местами, чтобы каждая строка не иметь повторяющихся записей в качестве выбранного элемента в ComboBox.

Предлагаемое решение: я попробовал несколько вещей, но застрял в точке, которую я объяснил ниже. У меня есть два магазина Store1 для GridPanel и Store2 для ComboBox. в событии Listeners --> событие BeforeSelect ComboBox 1) я получаю выбранное значение (значение, которое пользователь изменил) 2) Итерация по данным, которые были ограничены GridPanel (поскольку есть некоторые другие редактируемые столбцы, которые возможно, было изменено) --->[B] Это та часть, где я застрял[/B] 3) Обновите Store1 и зафиксируйте изменения, которые отразятся в представлении данных. Это то, что у меня на уме.

Можно ли это сделать на стороне клиента или это нужно делать на стороне сервера? я предпочитаю клиентскую сторону. Я разработал пример страницы, которая демонстрирует gridpanel, combobox и т.д.

У меня есть опыт работы с Telerik Controls за последние 3 года, и я новичок в Ext.net (фактически работаю над POC за последние 3 дня)

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