What's New?

Binding ComboBox in Grid to the record's list in the same row

  1. #1
    Jul 02, 2015, 5:23 AM

    Binding ComboBox in Grid to the record's list in the same row

    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.

    Click image for larger version.  Name: Query.png  Views: 73  Size: 7.1 KB  ID: 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!
  2. #2
    Aug 21, 2015, 9: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.SupportedOperators, 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>

Similar Threads

  1. List as a record in a data store
    By thebadcodeguy in forum 2.x Help
    Replies: 1
    Last Post: May 30, 2015, 6:48 PM
  2. [CLOSED] Ordered list string created from an html editor appear as unorder list when added in a templated grid.
    By RCM in forum 2.x Legacy Premium Help
    Replies: 2
    Last Post: Mar 04, 2013, 12:47 PM
  3. [1.0] Binding ext:GridCommand.Disabled to a record field
    By igitur in forum 1.x Help
    Replies: 0
    Last Post: Jul 26, 2010, 9:09 AM
  4. Select rows in a Grid with a list of record Id
    By fquintero in forum 1.x Help
    Replies: 1
    Last Post: Dec 01, 2009, 4:14 PM
  5. [CLOSED] Binding List(of Object) Parsing properties
    By CMA in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Jul 24, 2009, 7:25 AM

Posting Permissions