[CLOSED] ComboBox in Grid is not working

Hello friends,

I have another problem again. I'm trying to make a grid which has a row with dropdown (ComboBox), but i's not working. We didn't find a good solution to make the <ext-Column> (from the grid) as <ext-ComboBox> (which is working in a normal field, but seems not in the grid, more exactly in <Columns> section)

Here is Code for the Grid:

Code:

---

<ext-gridPanel title="ComboBox Field Grid" id="Grid" header="false" frame="true" scrollable="true" minHeight="350">
                                    <store>
                                        <ext-store id="Store" data="Model.MyData" autoLoad="true">
                                            <fields>
                                                <ext-integerDataField name="ID" />
                                                <ext-stringDataField name="Field1" />
                                                <ext-stringDataField name="Field2" />
                                                <ext-numberDataField name="Field3" />
                                                <ext-numberDataField name="Field4" />
                                                <ext-dateDataField name="Field5" />
                                                <ext-stringDataField name="Field6" />
                                                <ext-stringDataField name="Field7" />
                                            </fields>
                                        </ext-store>
                                    </store>
                                    <plugins>
                                        <ext-cellEditingPlugin clicksToEdit="1" editing="true" id="edit">
                                            <listeners>
                                                <edit fn="edit" />
                                            </listeners>
                                        </ext-cellEditingPlugin>
                                    </plugins>
                                    <columns>
                                        <ext-column text="ID" dataIndex="ID" width="65" disabled="true" />
                                        <ext-column text="Description" dataIndex="Field1" flex="1" editor="textfield" />
                                        <ext-column text="Long Description" dataIndex="Field2" width="705" editor="textarea" />
                                        <ext-column text="Min" dataIndex="Field3" flex="1" editor="numberfield" />
                                        <ext-column text="Max" dataIndex="Field4" flex="1" editor="numberfield" />
                                        <ext-column text="Date" formatter="date('d.M.y')" width="130" editor="datefield" dataIndex="Field5" />
                                        <ext-column text="DropDown" dataIndex="Field6" flex="1" editor="combobox" />
                                        <ext-column text="Result" dataIndex="Field7" width="170" editor="textfield" />
                                    </columns>
                                </ext-gridPanel>

---

I need that "Field6" to be a dropdown list, the thing is that it's showing the arrow for the dropdown, but is not working. And i was wondering how can make this working well or eventually to add something like this to my Grid?:

Code:

---

  <ext-comboBox displayField="name"
                              valueField="id"
                              typeAhead="true"
                              queryMode="local"
                              value="@Model.MyData.Field6"
                              emptyText="Select an item...">
                    <store>
                        <ext-store data="@Model.MyData.Field6">
                            <model>
                                <ext-model>
                                    <fields>
                                        <ext-dataField name="id" />
                                        <ext-dataField name="name" />
                                    </fields>
                                </ext-model>
                            </model>
                        </ext-store>
                    </store>
  </ext-comboBox>

---

But if i will put this line of code in <Columns> then i will have a column dropdown, and that is working, but i need a cell dropdown, not from the title of the column.


Thanks in advance!

Hello @Retarian, and welcome to Ext.NET Forums!

Is this a sample you are porting from a working Ext.NET 5 page, or is it an attempt to create a new grid without a working version in earlier Ext.NET versions?

If that's the case it would help us understand the scenario you need given the working sample for the previous version.

I believe the way you are drafting the example the combo box will just contain the value currently assigned to that row. It is actually impossible for it to be sure about the existing possibilities unles explicitly passed.

You may think then "the field can just look up the other values for the column in the grid to determine the alternatives" but then again, there's no guarantee all valid alternatives would be used across the grid; say if Field6 may accept a, b or c but there are only records with a and c; then there's no way the grid could tell that b would also be a valid entry.

This is especially true if you don't want to accept free input in the combo box (turning it into a dropdown field). Even if you're okay with having just what's in the grid as combo box options, custom code would need to be run to actually parse the grid data to evaluate possible already used values to that field.

So no matter what, the editor="combobox" is not enough to set up the field. We'll need to actually set up a combo box with a "store" (that is, a list of valid entries) and pass as an editor to that column. How we should best do that will depend in your answer about having v5 version on top of it or not.

If not, would this example behave the way you need it? Grid Panel > PlugIns > CellEditing - Ext.NET 5 Examples Explorer. Notice there, how it defines the combo box with a predefined set of acceptable values.

Looking forward to your follow-up!

Hello Fabricio,

Thanks for replaying! well, the code is from our grid 7.2, and we have different columns type and of them is a combobox.
And we didn't find yet an solution to make it work. We have tried a lot of things and the only solution is to give him an separately store.

But how can i transform from 5.3 to 7.2 ? i saw the examples, but we didn't figured out yet how to implement it.
If you could help us with an example or some information will be great!

We will try until then to implement from that example 5.3.

Hello again, @Retarian!

Quote:

---

Originally Posted by Retarian

We have tried a lot of things and the only solution is to give him an separately store.

---

Exactly! The combo cannot guess what is the list of its valid entries simply by being tied to a cell. It needs its store with the list of possible values. Be it a fixed list, be it built of what's currently in the store, this has to be explicitly determined. That's why simply editor="combobox" won't suffice.

Before we can proceed, do you confirm the example pointed above (Grid Panel > PlugIns > CellEditing - Ext.NET 5 Examples Explorer) does what you need?

Hey again,

Yes, we need a drop down like that.

I have tried those options:

1) - Not working..

Code:

---

<ext-column text="DropDown" dataIndex="Field6" flex="1" editor="combobox">
<items>
      <ext-comboBox>
              <items>
                    <ext-listItem text="Test1" />
                    <ext-listItem text="Test2" />
                    <ext-listItem text="Test3" />
              </items>
      </ext-comboBox>
</items>
</ext-column>

---

2) - Not working..

Code:

---

<ext-column text="DropDown" dataIndex="Field6" flex="1" editor="combobox">
<items>
      <ext-editor>
              <items>
                    <ext-comboBox>
                              <items>
                                <ext-listItem text="Test1" />
                                <ext-listItem text="Test2" />
                                <ext-listItem text="Test3" />
                              </items>
                    </ext-comboBox>
              </items>
      </ext-editor>
</items>
</ext-column>

---

3) Here we have them mapped on an sql table (whici is working 100%, i have tested) - but the problem is that the drop box will appear between column name and first row cell from the grid:

Code:

---

<ext-column text="DropDown" dataIndex="Field6" flex="1" editor="combobox">
<items>
      <ext-comboBox displayField ="name" valueField="id" typeAhead="true" queryMode="local" value="@Model.MyTable" emptyText="Select a text...">
            <store>
                    <ext-store data="@Model.MyTable">
                            <model>
                                    <ext-model>
                                              <fields>
                                                      <ext-dataField name="id" />
                                                      <ext-dataField name="name" />
                                              </fields>
                                    </ext-model>
                            </model>
                    </ext-store>
            </store>
      </ext-comboBox>
</items>
</ext-column>

---

I have tried even to switch from: (i thought maybe it will affect somehow the box)

Code:

---

<ext-cellEditingPlugin clicksToEdit="1" editing="true" id="edit"/>

---

To:

Code:

---

<ext-rowEditingPlugin clicksToEdit="1" editing="true" id="edit"/>

---

So.. still didn't fixed it.
Any ideas? :D

Hello again, @Retarian!

Yes, the way you have the code, you are adding the combo box as generic component/item in the column, not as "the editor component that should be used when editing it".

In Ext.NET 5 it would be inside an <editor> inner block to the column block, which we unfortunately lack in Ext.NET 7 at the moment.

We do though, have the editorModel= handle in Ext.NET 7 to use to our advantage. This means it is possible to determine the fully detailed component from the model and assign it to the column, taking advantage of all features it needs. So instead of exposing MyTable from the model, you would be exposing the entire combo box component definition. One way to attain that would be this:

Code:

---

// The exposed combo box model
public ComboBox MyComboBox { get; set; }

public void OnGet()
{
    // your code to build/get the "MyTable" data here

    // Combo Box definition during initial page GET
    MyComboBox = new ComboBox
    {
        DisplayField = "name",
        ValueField = "id",
        TypeAhead = true,
        QueryMode = "local",
        EmptyText = "Select a text...",
        Store = new Store
        {
            Data = MyTable, // you told us you got this working, right?
            Fields = new List<DataField>
            {
                new DataField() { Name = "id" },
                new DataField() { Name = "name" }
            }
        }
    };
}

---

And then your column definition becomes:

Code:

---

<ext-column text="DropDown" dataIndex="Field6" flex="1" editorModel="Model.MyComboBox" />

---

Hope this helps!

p.s.: I still haven't gone the path from the example I pointed as it seems you are close to the solution you need... it is very likely the v5 example will just follow this same approach to be ported up to 7.x though.