PDA

View Full Version : [CLOSED] Add a MultiCombo box as a column in a grid panel



jainanki
Jun 17, 2014, 5:54 PM
Hello,

I am struggling with the concept of adding a multi combo box as a column in an Ext.Net grid panel. I can add a simple multi combo box, but my requirement here is that every multi combo (separate rows) should have a different store (add separate items).

My grid should look like this:

TextField | TextField | CheckBox | CheckBox | MultiCombo
Rec.UqId | Rec.Name | Rec.Sea | Rec.Adv | Rec.FieldCollection

And since the FieldCollection for every record will be diff, hence separate store for every multi combo box.

I have done the first 4 columns, having trouble in he multi combo box column.

Thanks in advance,
Ankit

Daniil
Jun 17, 2014, 9:48 PM
Hi @jainanki,

Do you use a ComponentColumn?

jainanki
Jun 17, 2014, 9:52 PM
Yes, Daniil. I do use a ComponentColumn.

jainanki
Jun 17, 2014, 10:03 PM
This is how my aspx declaration looks like:


<ColumnModel ID="ColumnModel1" runat="server">
<Columns>
<Ext:Column ID="colId" runat="server" DataIndex="LookupId" Visible="false" />
<Ext:Column ID="colFeatLayerName" runat="server" Text="Feature Layer" DataIndex="LookupDesc" Width="150"/>
<Ext:CheckColumn ID="colFLSelected" runat="server" Text="Selected" DataIndex="LookupSelected" Width="75" Editable="true"/>
<Ext:CheckColumn ID="colSearch" runat="server" Text="Search" DataIndex="Search" Width="75" Editable="true"/>
<Ext:CheckColumn ID="colAdvSearch" runat="server" Text="Advanced Search" DataIndex="AdvSearch" Width="100" Editable="true"/>
<Ext:ComponentColumn ID="colFields" runat="server" Text="Fields" Width="200">
<Component>
<Infra:EpicMultiCombo runat="server" ID="propDataSourceMultiCombo"/>
</Component>
</Ext:ComponentColumn>
</Columns>
</ColumnModel>

And this is what I am doing to link the data source for the grid:


this.sliderStore.DataSource = _propertyValues;
this.sliderStore.DataBind();

Daniil
Jun 18, 2014, 10:19 AM
You can configure a ComponentColumn's Component in its BeforeBind listener. Please look at the example.

Example

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

<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
Store store = this.GridPanel1.GetStore();
store.DataSource = new object[]
{
new object[] { "test", "test" },
new object[] { "test", "test" },
new object[] { "test", "test" }
};
}
}
</script>

<!DOCTYPE html>

<html>
<head runat="server">
<title>Ext.NET v2 Example</title>

<script>
var onBeforeBind = function(column, e) { // "e" contains "config", "grid", "record", "rowIndex".
e.config = {
xtype: "netmulticombo",
queryMode: "local",
displayField: "text",
store: {
/* configure a store as needed */
model: Ext.define("Model" + e.rowIndex, {
extend: "Ext.data.Model",
fields: [ "text" ]
}),
data: [{
text: "Item1"
}, {
text: "Item2"
}]
}
};
};
</script>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />

<ext:GridPanel ID="GridPanel1" runat="server">
<Store>
<ext:Store runat="server">
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="test1" />
<ext:ModelField Name="test2" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel runat="server">
<Columns>
<ext:Column runat="server" Text="Test 1" DataIndex="test1" />
<ext:Column runat="server" Text="Test 2" DataIndex="test2" />
<ext:ComponentColumn
runat="server"
Text="MultiCombo"
Editor="true">
<Listeners>
<BeforeBind Fn="onBeforeBind" />
</Listeners>
</ext:ComponentColumn>
</Columns>
</ColumnModel>
</ext:GridPanel>
</form>
</body>
</html>