[CLOSED] Combobox editor in TreePanel

[ADV]

Hi,

I need an editable column in a TreePanel.

The following code works property:

<ext:Column ID="Column16" runat="server" Width="140" Text="Type" DataIndex="TYPE" Align="Left" MenuDisabled="true" Reorderable="false" Resizable="false" Sortable="false">
    <Renderer Handler="return StatusRenderer(value, #{StoreAssessmentTypes});" />
    <Editor>
        <ext:ComboBox ID="cmbAssessmentTYPE" runat="server" ValueField="ID" DisplayField="Value" Width="140" MaxWidth="140" Editable="false" QueryMode="Local">
            <Items>
                <ext:ListItem Value="SA" Text="SA - Self assessment" />
                <ext:ListItem Value="V" Text="V - Validated" />
                <ext:ListItem Value="PC" Text="PC - Precess check" />
            </Items>
        </ext:ComboBox>
    </Editor>
    <EditorOptions CompleteOnEnter="true" CancelOnEsc="true" RevertInvalid="true" />
</ext:Column>

while in codebehind

protected void Page_Load(object sender, EventArgs e)
{
   if (!X.IsAjaxRequest)
   {
      cmbAssessmentTYPE.Items.Add(new Ext.Net.ListItem("SA - Self assessment", "SA"));
      cmbAssessmentTYPE.Items.Add(new Ext.Net.ListItem("V - Validated", "V"));
      cmbAssessmentTYPE.Items.Add(new Ext.Net.ListItem("PC - Precess check", "PC"));
   }
}

<ext:Column ID="Column16" runat="server" Width="140" Text="Type" DataIndex="TYPE" Align="Left" MenuDisabled="true" Reorderable="false" Resizable="false" Sortable="false">
    <Renderer Handler="return StatusRenderer(value, #{StoreAssessmentTypes});" />
    <Editor>
        <ext:ComboBox ID="cmbAssessmentTYPE" runat="server" ValueField="ID" DisplayField="Value" StoreID="StoreAssessmentTypes" Width="140" MaxWidth="140" Editable="false" QueryMode="Local">
        </ext:ComboBox>
    </Editor>
    <EditorOptions CompleteOnEnter="true" CancelOnEsc="true" RevertInvalid="true" />
</ext:Column>

<Bin>
    <ext:Model ID="ID_ModelGenericComboBox" Name="ModelGenericComboBox" runat="server" IDProperty="ID">
        <Fields>
            <ext:ModelField Name="ID" />
            <ext:ModelField Name="Value" />
        </Fields>
    </ext:Model>

    <ext:Store ID="StoreAssessmentTypes" runat="server" AutoLoad="true" ModelName="ModelGenericComboBox" />
    <ext:Store ID="StoreSubCategoryScores" runat="server" AutoLoad="true" ModelName="ModelGenericComboBox" />
    <ext:Store ID="StoreSubCategoryStatus" runat="server" AutoLoad="true" ModelName="ModelGenericComboBox" />
</Bin>

i get a generic javascript error.
It seems that are not recognized properly the listitem couple ID, Value

Exactly the same code works perfectly in Grid Panels.

Has anyone had the same problem?

Thanks

[fabricio.murta]

Hello! I suspect the editor component might not be always available during page load so it could fail, but you stated that it works fine for GridPanels.

I am afraid we'd require you to provide us a runnable test case so we can reproduce the issue in our side and provide you with appropriate advice.

[ADV]

Hi,
here I am, I have been on away for some days.


The following is the example.
It raises a javascript error by clicking cmdAssessmentCreate.

protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {

                List<object> oData = new List<object>();

                StoreAssessmentTypes.RemoveAll();

                oData.Add(new { ID = "SA", Value = "Self assesment" });
                oData.Add(new { ID = "V", Value = "Validated" });
                oData.Add(new { ID = "PC", Value = "Project check" });

                StoreAssessmentTypes.DataSource = oData;
            }
        }



        protected void cmdAssessmentCreate_DirectClick(object sender, DirectEventArgs e)
        {
            Ext.Net.Node root = new Ext.Net.Node();
            Ext.Net.Node nP = new Ext.Net.Node();

            TreePanelAssessment.Root.Clear();

            root.CustomAttributes.Add(new ConfigItem("CODICE", "ROOT", ParameterMode.Value));
            TreePanelAssessment.Root.Add(root);


            nP = new Ext.Net.Node { NodeID = "1", Leaf = true, Icon = Icon.Star };
            nP.CustomAttributes.Add(new ConfigItem("ID", "1"));
            nP.CustomAttributes.Add(new ConfigItem("A", "A", ParameterMode.Value));
            nP.CustomAttributes.Add(new ConfigItem("B", "B", ParameterMode.Value));
            root.Children.Add(nP);

            nP = new Ext.Net.Node { NodeID = "2", Leaf = true, Icon = Icon.Star };
            nP.CustomAttributes.Add(new ConfigItem("ID", "2"));
            nP.CustomAttributes.Add(new ConfigItem("A", "S", ParameterMode.Value));
            nP.CustomAttributes.Add(new ConfigItem("B", "D", ParameterMode.Value));
            root.Children.Add(nP);

            nP = new Ext.Net.Node { NodeID = "3", Leaf = true, Icon = Icon.Star };
            nP.CustomAttributes.Add(new ConfigItem("ID", "3"));
            nP.CustomAttributes.Add(new ConfigItem("A", "G", ParameterMode.Value));
            nP.CustomAttributes.Add(new ConfigItem("B", "F", ParameterMode.Value));
            root.Children.Add(nP);

            TreePanelAssessment.Render();
        }

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>

    <script type="text/javascript">
        var StatusRenderer = function (value, st) {
            var ind = st.find("ID", value);
            var r = st.getAt(ind);

            if (Ext.isEmpty(r)) {
                return "";
            }
            return r.data.Value;
        };
    </script>

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

        <ext:Viewport ID="ViewportMain" runat="server" Layout="BorderLayout" StyleSpec="background-color: transparent;">
            <Items>
                <ext:TreePanel ID="TreePanelAssessment" ColumnLines="true" RowLines="true" Title="Assessments/Goals" Region="Center" Icon="Plugin" MarginSpec="150 50 50 50" Frame="true" Stateful="false" StateID="CIT_TreePanelAssessment" BodyCls="css1"
                    runat="server"
                    Collapsible="true"
                    UseArrows="true"
                    RootVisible="false"
                    MultiSelect="false"
                    SingleExpand="false"
                    FolderSort="false">
                            
                    <Store>
                        <ext:TreeStore ID="StoreAssessment" runat="server">
                            <Model>
                                <ext:Model ID="ModelAssessment" runat="server">
                                    <Fields>
                                        <ext:ModelField Name="ID" />
                                        <ext:ModelField Name="A" />
                                        <ext:ModelField Name="B" />
                                        <ext:ModelField Name="C" />
                                    </Fields>
                                </ext:Model>
                            </Model>
                        </ext:TreeStore>
                    </Store>

                    <TopBar>
                        <ext:Toolbar ID="Toolbar1" runat="server" Height="30">
                            <Items>
                                <ext:Button ID="cmdAssessmentCreate" ClientIDMode="Static" runat="server" ondirectclick="cmdAssessmentCreate_DirectClick" Text="Create assessments" Icon="PluginEdit" Margins="0 0 0 2" />
                            </Items>
                        </ext:Toolbar>
                    </TopBar>

                    <ColumnModel>
                        <Columns>
                            <ext:TreeColumn ID="TreeColumn1" runat="server" Width="250" Text="A" DataIndex="A" />

                            <ext:Column ID="Column9" runat="server" MinWidth="220" MaxWidth="350" Flex="1" Text="B" DataIndex="B" >
                                <Editor><ext:TextField ID="txtASSESSOR" runat="server" /></Editor>
                            </ext:Column>

                            <ext:Column ID="Column16" runat="server" Width="140" Text="Type" DataIndex="TYPE" Align="Left">
                                <Renderer Handler="return StatusRenderer(value, #{StoreAssessmentTypes});" />
                                <Editor>
                                    <ext:ComboBox ID="cmbAssessmentTYPE" runat="server" StoreID="StoreAssessmentTypes" ValueField="ID" DisplayField="Value" Width="240" MaxWidth="240" Editable="false" QueryMode="Local" />
                                </Editor>
                                <EditorOptions CompleteOnEnter="true" CancelOnEsc="true" RevertInvalid="true" />
                            </ext:Column>

                        </Columns>
                    </ColumnModel>

                    <Root>
                        <ext:Node Text="Initial Root" />                                                  
                    </Root>

                    <View>
                        <ext:TreeView ID="TreeGridViewAssessment_ROWS" runat="server" MarkDirty="true" />
                    </View>

                    <SelectionModel>
                        <ext:TreeSelectionModel ID="TreeSelectionModelAssesments" runat="server" Mode="Single">
                                   
                        </ext:TreeSelectionModel>
                    </SelectionModel>
                            
                    <Plugins>
                        <ext:CellEditing ID="CellEditingAssessment" runat="server" ClicksToEdit="2">
                        </ext:CellEditing>
                    </Plugins>

                </ext:TreePanel>
            </Items>

            <Bin>
                <ext:Model ID="ID_ModelGenericComboBox" Name="ModelGenericComboBox" runat="server" IDProperty="ID">
                    <Fields>
                        <ext:ModelField Name="ID" />
                        <ext:ModelField Name="Value" />
                    </Fields>
                </ext:Model>

                <ext:Store ID="StoreAssessmentTypes" runat="server" AutoLoad="true" ModelName="ModelGenericComboBox" />
            </Bin>

        </ext:Viewport>
    </div>
    </form>
</body>
</html>

I use normally put some store in the bin section, for tidy.
This code works perfectly with a Grid Panel.



It also works with treePanel but only if I move the contents of cmdAssessmentCreate_DirectClick in Page_Load.

[fabricio.murta]

Hello!

Sorry for the delay, the sample code you provided reproduces awesomely clear the issue you are having, we are working on it but still don't have a proper solution to provide you with. Although the concepts looks the same, the way the TreeGrid is built is rather different (in order to accomodate the tree column) than the ordinary GridPanel, thus the way you want to refresh it does not just work when called from code behind -after- page load (well, as you already noticed!).

But that's not necessarily a bug, but by design it probably should be built a different way after the page already has the components on screen.

Anyway, we are investigating it and will return to you with the proper means to do so, or a more concrete reply.

[fabricio.murta]

Hello again!

I've dug further it and found that just by allowing Ext.data.Store.getCount() to make some a sanity check addresses the issue (apparently).

As a side note, this issue is not reproducible with Ext.NET 3.0 or newer, as far as I could see.

To fix that on 2.x, add this javaScript code to your page:

        Ext.define('Ext.data.Store', {
            override: 'Ext.data.Store',
            getCount: function () {
                return this.data ? this.data.getCount() : 0;
            }
        })

Hope this helps!

[ADV]

Hi, sorry but it doesn't work.

Now I don't get the javascritp error, but when I press the button the "Type" column disappears and no data is displayed.

[fabricio.murta]

Hello, you are right, it just stops the error but does not fix the mechanism. We are investigating the issue to have a better understanding the reasons this bug happens. It does not happen on newer Ext.NET versions, and I don't see any bug we fixed on TreeGrid/TreePanel that could have been an exact match to this issue.

[Daniil]

Hello!

This code

TreePanelAssessment.Render();

re-renders already rendered TreePanel component. Re-rendering means destroying the component and rendering it again. Destroying of TreePanel means that its editors are being destroyed as well. So, the ComboBox is being destroyed and its associated Store is destroyed as well because of default AutoDestroy="true" setting.

To fix, please set AutoDestroy="false" for StoreAssessmentTypes.

And the issue is not reproducible with v3, because AutoDestroy has been changed to false at some point. As for v2, we are not going to change the default value, because it can break existing apps.

[ADV]

It works perfectly.

Your support is excellent as always!
You really have an enviable knowledge of the matter.

[Daniil]

Thank you very much for the kind words and, especially, for using Ext.NET - that is the greatest thanks for us!