PDA

View Full Version : Binding ComboBox in Grid to the record's list in the same row



jasneo
Jul 02, 2015, 6:23 AM
I am trying to bind the ComboBox to the record's SupportedOperators (which is a list of strings) in the same row. Each record might have a different list.

Model


public class ConditionViewModel
{
public string Parameter;
public string Operator;
public IList<string> SupportedOperators;
public string Value;
}


Controller


public ActionResult DisplayQuery()
{
List<ConditionViewModel> conditionList = new List<ConditionViewModel>();

conditionList.Add(new ConditionViewModel() { Parameter = "NAME", Operator = "=", SupportedOperators = new List<string>() { "!=", "=", "IS NULL", "IS NOT NULL" }, Value = "TEST NAME" });
conditionList.Add(new ConditionViewModel() { Parameter = "POSITION", Operator = "!=", SupportedOperators = new List<string>() { "!=", "=", "IS NULL", "IS NOT NULL" }, Value = "" });
conditionList.Add(new ConditionViewModel() { Parameter = "SALARY", Operator = ">=", SupportedOperators = new List<string>() { ">", "<", ">=", "<=" }, Value = "0" });

ViewBag.QueryConditionList = conditionList;

return View();
}


View


@(
Html.X().Model()
.Name("QueryConditionModel")
.Fields(
Html.X().ModelField().Name("Parameter"),
Html.X().ModelField().Name("Operator"),
Html.X().ModelField().Name("Value"),
Html.X().ModelField().Name("SupportedOperators")
)
)

@(
Html.X().Store()
.ID("QueryConditionStore")
.Data(ViewBag.QueryConditionList)
.ModelName("QueryConditionModel")
)

@(
Html.X().GridPanel()
.Height(300)
.StoreID("QueryConditionStore")
.ColumnModel(
Html.X().Column().DataIndex("Parameter").Text("Parameter").Width(150)
.Editor(Html.X().TextField()),
Html.X().Column().DataIndex("Operator").Text("Operator").Width(80)
.Editor(
Html.X().ComboBox()
.QueryMode(DataLoadMode.Local)
.StoreID("QueryConditionStore")
.DisplayField("SupportedOperators")
.ValueField("SupportedOperators")
),
Html.X().Column().DataIndex("Value").Text("Value").Flex(1)
.Editor(Html.X().TextField())
)
.SelectionModel(Html.X().CellSelectionModel())
.Plugins(
Html.X().CellEditing()
)
)


I tried the above and it concatenates the list to a string and displays 3 records in each ComboBox. See the below screenshot.

24052

I want the first ComboBox to display like the following:


!=
=
IS NULL
IS NOT NULL


the third ComboBox to display like the following:


>
<
>=
<=


Any help is appreciated.

Thanks!

Daniil
Aug 21, 2015, 10:00 AM
Hi @jasneo,

Please update the View to the bellow one. The controller and Model have no changes.

View

<!DOCTYPE html>
<html>
<head>
<title>Ext.Net.MVC v3 Example</title>

<script>
var onBeforeEdit = function (editingPlugin, context) {
var editor, data;

if (context.field === "Operator") {
editor = this.getEditor(context.record, context.column);
data = [];

Ext.Array.each(context.record.data.SupportedOperat ors, function (op) {
data.push([op]);
});

editor.field.getStore().loadData(data);
}
};
</script>
</head>
<body>
@Html.X().ResourceManager()

@(Html.X().Model()
.Name("QueryConditionModel")
.Fields(
Html.X().ModelField().Name("Parameter"),
Html.X().ModelField().Name("Operator"),
Html.X().ModelField().Name("Value"),
Html.X().ModelField().Name("SupportedOperators")
)
)

@(Html.X().Store()
.ID("QueryConditionStore")
.Data(ViewBag.QueryConditionList)
.ModelName("QueryConditionModel")
)

@(Html.X().GridPanel()
.Height(300)
.StoreID("QueryConditionStore")
.ColumnModel(
Html.X().Column().DataIndex("Parameter").Text("Parameter").Width(150)
.Editor(Html.X().TextField()),

Html.X().Column().DataIndex("Operator").Text("Operator").Width(80)
.Editor(
Html.X().ComboBox()
.QueryMode(DataLoadMode.Local)
.Store(Html.X().Store()
.Reader(Html.X().ArrayReader())
.Fields("Operator")
.AutoLoad(false)
)
.DisplayField("Operator")
.ValueField("Operator")
),

Html.X().Column().DataIndex("Value").Text("Value").Flex(1)
.Editor(Html.X().TextField())
)
.SelectionModel(Html.X().CellSelectionModel())
.Plugins(
Html.X().CellEditing()
.Listeners(events =>
events.BeforeEdit.Fn = "onBeforeEdit"
)
)
)

</body>
</html>