[OPEN] [#1487] [4.2.1] GridPanel RowEditing with dynamic data from DirectMethod

**xeo4.it** · May 26, 2017, 3:38 PM

Hello, I want to load dynamic data for RowEditing plug-in through DirectMethod.
A GridPanel has 1 column displayed as text, in Editor mode has a ComboBox and every time I edit one row I want load data from server.
The problem is that the row editing mode (the ComboBox) disappear immediately.
Can you help me?


<head runat="server">
    <title>Row Editing - Dynamic ComboBox</title>
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            stCustom.DataSource = DataFactory.GetGridItems();
            stCustom.DataBind();
        }
        [DirectMethod(ShowMask = true)]
        public void reCustom_BeforeEdit()
        {
            stName.DataSource = DataFactory.GetComboNameItems();
            stName.DataBind();
        }
        public class DataFactory
        {
            public static List<GridItem> GetGridItems()
            {
                return Enumerable.Range(1, 10).ToList().Select(i => new GridItem()
                {
                    Name = "Name_0",
                }).ToList();
            }
            public static List<ComboItem> GetComboNameItems()
            {
                return Enumerable.Range(1, 5).ToList().Select(i => new ComboItem()
                {
                    Description = "Name_" + i,
                    Value = i
                }).ToList();
            }
        }
        public class GridItem
        {
            public string Name { get; set; }
        }
        public class ComboItem
        {
            public string Description { get; set; }
            public int Value { get; set; }
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <ext:ResourceManager runat="server" />
        <ext:GridPanel ID="grdCustom" runat="server"
            Width="800" Title="Row Editing - Dynamic Combo">
            <Store>
                <ext:Store ID="stCustom" runat="server">
                    <Model>
                        <ext:Model runat="server">
                            <Fields>
                                <ext:ModelField Name="Name" />
                            </Fields>
                        </ext:Model>
                    </Model>
                </ext:Store>
            </Store>
            <Plugins>
                <ext:RowEditing ID="reCustom" runat="server" ClicksToMoveEditor="1" AutoCancel="false">
                    <Listeners>
                        <BeforeEdit Handler="App.direct.reCustom_BeforeEdit();" />
                    </Listeners>
                </ext:RowEditing>
            </Plugins>
            <ColumnModel>
                <Columns>
                    <ext:Column runat="server" Text="Name" DataIndex="Name" Flex="1">
                        <Editor>
                            <ext:ComboBox runat="server" ID="cbName"
                                DisplayField="Description" ValueField="Id"
                                QueryMode="Local">
                                <Store>
                                    <ext:Store ID="stName" runat="server">
                                        <Model>
                                            <ext:Model runat="server">
                                                <Fields>
                                                    <ext:ModelField Name="Id" />
                                                    <ext:ModelField Name="Description" />
                                                </Fields>
                                            </ext:Model>
                                        </Model>
                                    </ext:Store>
                                </Store>
                            </ext:ComboBox>
                        </Editor>
                    </ext:Column>
                </Columns>
            </ColumnModel>
        </ext:GridPanel>
    </form>
</body>

**fabricio.murta** · May 27, 2017, 2:50 AM

Hello @xeo4.it!

Whilst editing with the row editing plug in, if the combo store gets loaded, the editor is cancelling. So what should be done is:

- while expanding the combo box, check if the combo store data corresponds to the edited store
- if not, then reload the store (editor will be dismissed)
- then restart editing the record for the row previously edited
- make the combo expand again, so the operation looks seamless for the user

The second expand will not turn into a loop back to the beginning because now the data it displays will correspond to the edited record.

Another important bit that this logic addresses is, when you switch from one row to the other, beforeEdit is not going to trigger, so your first approach was not going to work in the first place.

The only "bug fix" here is restart editing and expanding the combo box. The rest, including passing a reference to the edited row to code behind, can't be helped in that case.

Here's the PoC based on your code sample:

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

<!DOCTYPE html>

<html>
<head runat="server">
    <title>Row Editing - Dynamic ComboBox</title>
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            stCustom.DataSource = DataFactory.GetGridItems();
            stCustom.DataBind();
        }
        [DirectMethod(ShowMask = true)]
        public void reCustom_BeforeEdit()
        {
            stName.DataSource = DataFactory.GetComboNameItems();
            stName.DataBind();
        }

        public void reCustom_BeforeEdit(object sender, DirectEventArgs e)
        {
            stName.DataSource = DataFactory.GetComboNameItems();
            stName.DataBind();
            lbl1.Call("setHtml", "Status: Last direct refill at " + DateTime.Now.ToString("hh:mm:ss") + " while editing row #" + e.ExtraParams["rowIndex"] + ".");

            int rowIndex;

            if (int.TryParse(e.ExtraParams["rowIndex"], out rowIndex))
            {
                reCustom.StartEdit(rowIndex);
                cbName.Expand();
            }
        }

        public class DataFactory
        {
            public static List<GridItem> GetGridItems()
            {
                return Enumerable.Range(1, 10).ToList().Select(i => new GridItem()
                {
                    Name = "Name_0" + i,
                }).ToList();
            }
            public static List<ComboItem> GetComboNameItems()
            {
                var now = DateTime.Now.ToString("hh:mm:ss");
                return Enumerable.Range(1, 5).ToList().Select(i => new ComboItem()
                {
                    Description = "Name_" + i + "[" + now + "]",
                    Value = i
                }).ToList();
            }
        }
        public class GridItem
        {
            public string Name { get; set; }
        }
        public class ComboItem
        {
            public string Description { get; set; }
            public int Value { get; set; }
        }
    </script>

    <script type="text/javascript">
        var shouldReloadCB = function (component) {
            var record = component.up().getRecord().getData();

            // True if the last store loaded data corresponded to another record
            return component.getStore().lastCorrespondingRecord != record.id;
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <ext:ResourceManager runat="server" />
        <ext:GridPanel ID="grdCustom" runat="server"
            Width="800" Title="Row Editing - Dynamic Combo">
            <TopBar>
                <ext:Toolbar runat="server">
                    <Items>
                        <ext:Label ID="lbl1" runat="server" Html="Status: " />
                    </Items>
                </ext:Toolbar>
            </TopBar>
            <Store>
                <ext:Store ID="stCustom" runat="server">
                    <Model>
                        <ext:Model runat="server">
                            <Fields>
                                <ext:ModelField Name="Name" />
                            </Fields>
                        </ext:Model>
                    </Model>
                </ext:Store>
            </Store>
            <Plugins>
                <ext:RowEditing ID="reCustom" runat="server" ClicksToMoveEditor="1" AutoCancel="false" />
            </Plugins>
            <ColumnModel>
                <Columns>
                    <ext:Column runat="server" Text="Name" DataIndex="Name" Flex="1">
                        <Editor>
                            <ext:ComboBox runat="server" ID="cbName"
                                DisplayField="Description" ValueField="Id">
                                <DirectEvents>
                                    <Expand
                                        Before="return this.getStore().lastCorrespondingRecord != this.up().getRecord().getData().Name;"
                                        OnEvent="reCustom_BeforeEdit"
                                        Success="this.getStore().lastCorrespondingRecord = this.up().getRecord().getData().Name"
                                        >
                                        <ExtraParams>
                                            <ext:Parameter Name="rowIndex" Value="#(return App.stCustom.find('id', this.up().getRecord().getData().id))" Mode="Raw" />
                                        </ExtraParams>
                                    </Expand>

                                </DirectEvents>
                                <Store>
                                    <ext:Store ID="stName" runat="server" AutoLoad="false">
                                        <Model>
                                            <ext:Model runat="server">
                                                <Fields>
                                                    <ext:ModelField Name="Id" />
                                                    <ext:ModelField Name="Description" />
                                                </Fields>
                                            </ext:Model>
                                        </Model>
                                    </ext:Store>
                                </Store>
                            </ext:ComboBox>
                        </Editor>
                    </ext:Column>
                </Columns>
            </ColumnModel>
        </ext:GridPanel>
    </form>
</body>
</html>

Notice how, as you expand the combo box in different rows, the "status bar" at the top of the grid displays when and which row data was loaded for the combo box.

I hope this fits your scenario and helps!..

**fabricio.murta** · May 27, 2017, 3:03 AM

Hello!

We've just logged this issue about dismissing the editor when the store reload under #1487 in our issues tracker.

Unfortunately for now, if you have problems with it, for example, dropping data as the user edits another column as well (then the combo box should reset the previously edited column or row), then I suggest you inhibit switching rows while editing and preloading the combo store as soon as editing begins. Then it could be done during the beforeEdit event of the Ext.Net.RowEditing plug in. The same logic should do, just correctly addressing to the combo's store and updating the references to the active editor (by the context on the example above, this.up()).

Hope this helps! We are going to update here as soon as we get a fix for this issue.

**xeo4.it** · May 29, 2017, 7:58 AM

Thank you Fabricio!

Thread: [OPEN] [#1487] [4.2.1] GridPanel RowEditing with dynamic data from DirectMethod

Thread Tools

Search Thread

Display

[OPEN] [#1487] [4.2.1] GridPanel RowEditing with dynamic data from DirectMethod

Similar Threads

how to get the selected row data of dynamic gridpanel in c# ?

[OPEN] [#360] [2.3] RowEditing + hidden column issue

[CLOSED] Binding Data to Dynamic GridPanel on RowSelection of another GridPanel

[OPEN] [#103] RowEditing Plugin - Format bug?

[CLOSED] THe Gridpanel with Store can't Bind the Data via Page in DataSource using the customizing DirectMethod or DirectEvent

Posting Permissions

Sitemap

Downloads

Resources

Thread: [OPEN] [#1487] [4.2.1] GridPanel RowEditing with dynamic data from DirectMethod

[OPEN] [#1487] [4.2.1] GridPanel RowEditing with dynamic data from DirectMethod

Similar Threads

Posting Permissions

Sitemap

Downloads

Resources

Stay connected with us