[CLOSED] [Razor] Select Combobox item from model value

  1. #1

    [CLOSED] [Razor] Select Combobox item from model value

    Hi there,

    I've got several combo boxes such as this one:
    fields.Add(Html.X().ComboBox()
              .FieldLabel("Service Status")
              .LabelAlign(LabelAlign.Top)
              .ID("ddlServiceStatus")
              .Margins("0 0 0 0")
              .LabelWidth(200)
              .Width(200)
              .EmptyText("--- Please Select ---")
              .Cls("form-label")
              .DisplayField("ServiceStatusName")
              .ValueField("ServiceStatusId")
              .Store(store => store.Add(Html.X().Store()
                     .AutoLoad(true)
                     .Proxy(proxy => proxy.Add(Html.X().AjaxProxy()
                             .Url("/Services/RetrieveServiceStatuses/")
                             .Reader(reader => reader.Add(Html.X().JsonReader()
                             .Root("data")
                             .TotalProperty("total")
                         ))
                 ))
                 .Model(model => model.Add(Html.X().Model()
                            .Fields(modelFields =>
                            {
                                     modelFields.Add(Html.X().ModelField().Name("ServiceStatusID"));
                                     modelFields.Add(Html.X().ModelField().Name("ServiceStatusName"));
                           })
                  ))
                  )
           )
    );
    The page this field resides on gets on MVC model from the controller on load and I need to use the Model.ServiceStatus value to pre-select the relevant combobox item. I've tried a few methods - using the selecteditems attribute and a load handler but I'm obviously not doing it correctly... What is the correct way to do this in razor syntax?
    Last edited by Daniil; May 18, 2012 at 4:53 PM. Reason: [CLOSED]
  2. #2
    Hi,

    Please look at the example.

    Example View
    @inherits System.Web.Mvc.WebViewPage<string>
                  
    <!DOCTYPE html>
    
    <html>
    <head>
        <title>Ext.Net.MVC v2 Example</title>    
    </head>
    <body>
        @Html.X().ResourceManager()
    
        @(Html.X().ComboBox()
            .ValueField("value")
            .DisplayField("text")
            .Store(store =>
                store.Add(Html.X().Store()
                    .Model(model =>
                        model.Add(Html.X().Model()
                            .Fields(fields =>
                            {
                                fields.Add(Html.X().ModelField().Name("text"));
                                fields.Add(Html.X().ModelField().Name("value"));
                            })
                        )
                    )
                    .Proxy(proxy =>
                        proxy.Add(Html.X().AjaxProxy()
                            .Reader(reader =>
                                reader.Add(Html.X().JsonReader()
                                    .Root("data")
                                )
                            )
                            .Url("/Razor/GetDataForCombobox")
                        )
                    )
                )
            )
            .SelectedItems(selectedItems =>
                selectedItems.Add(Html.X().ListItem().Value(Model))
            )
        )
    </body>
    </html>
    Example Controller Actions
    public ActionResult TestRazor()
    {
        return View((object)"1");
    }
    
    public ActionResult GetDataForCombobox()
    {
        StoreResult r = new StoreResult();
        r.Data = new object[]
        {
            new 
            {
                text = "Item 1",
                value = "1"
            },
            new 
            {
                text = "Item 2",
                value = "2"
            },
        };
    
        return r;
    }
  3. #3
    I'm still having no luck with this even when I hardcode the value as shown in the below code:

    
    fields.Add(Html.X().ComboBox()
                                                                    .FieldLabel("Service Status")
                                                                    .LabelAlign(LabelAlign.Top)
                                                                    .ID("ddlServiceStatus")
                                                                    .Margins("0 0 0 0")
                                                                    .LabelWidth(200)
                                                                    .Width(200)
                                                                    .EmptyText("--- Please Select ---")
                                                                    .Cls("form-label")
                                                                    .DisplayField("ServiceStatusName")
                                                                    .ValueField("ServiceStatusId")
                                                                    .Store(store => store.Add(Html.X().Store()
                                                                            .AutoLoad(true)
                                                                            .Proxy(proxy => proxy.Add(Html.X().AjaxProxy()
                                                                                .Url("/Services/RetrieveServiceStatuses/")
                                                                                .Reader(reader => reader.Add(Html.X().JsonReader()
                                                                                        .Root("data")
                                                                                        .TotalProperty("total")
                                                                                        ))
                                                                                    ))
                                                                            .Model(model => model.Add(Html.X().Model()
                                                                                .Fields(modelFields =>
                                                                                {
                                                                                    modelFields.Add(Html.X().ModelField().Name("ServiceStatusID"));
                                                                                    modelFields.Add(Html.X().ModelField().Name("ServiceStatusName"));
                                                                                })
                                                                            ))
                                                                        )
                                                                    )
                                                                    .SelectedItems(selectedItems => selectedItems.Add(Html.X().ListItem().Value("1")))
                                                                );
    I've got no idea what the problem is - I can't really see any obvious/important differences
  4. #4
    I think updating from SVN should resolve the problem.

    If the issue persists after update, please provide a full sample to copy, paste and run.
  5. #5
    Still no luck after the update from SVN. Here's the code that shows the problem:

    test.cshtml
    <body>
        <div>
            @(Html.X().ResourceManager()
               .Theme(Theme.Gray)
            )
    
            @(Html.X().Panel()
                .ID("pnlBasicServiceDetails")
                .Title("BASIC SERVICE DETAILS")
                .Cls("draggable")
                .Padding(4)
                .MaxWidth(1200)
                .Layout(LayoutType.Column)
                .Margins("4 0 4 4")
                .BodyPadding(4)
                .Items(form =>
                {
                    form.Add(Html.X().FieldContainer()
                        .Items(fields =>
                            {
                                fields.Add(Html.X().ComboBox()
                                    .FieldLabel("Service Status")
                                    .LabelAlign(LabelAlign.Top)
                                    .ID("ddlServiceStatus")
                                    .Margins("0 0 0 0")
                                    .LabelWidth(200)
                                    .Width(200)
                                    .EmptyText("--- Please Select ---")
                                    .Cls("form-label")
                                    .DisplayField("ServiceStatusName")
                                    .ValueField("ServiceStatusId")
                                    .Store(store => store.Add(Html.X().Store()
                                            .AutoLoad(true)
                                            .Proxy(proxy => proxy.Add(Html.X().AjaxProxy()
                                                .Url("/Examples/RetrieveServiceStatuses/")
                                                .Reader(reader => reader.Add(Html.X().JsonReader()
                                                        .Root("data")
                                                        .TotalProperty("total")
                                                        ))
                                                    ))
                                            .Model(model => model.Add(Html.X().Model()
                                                .Fields(modelFields =>
                                                {
                                                    modelFields.Add(Html.X().ModelField().Name("ServiceStatusID"));
                                                    modelFields.Add(Html.X().ModelField().Name("ServiceStatusName"));
                                                })
                                            ))
                                        )
                                    )
                                    .SelectedItems(selectedItems => selectedItems.Add(Html.X().ListItem().Value("2")))
                                );
                            }));
                })
    
            )
    
        </div>
    </body>
    Controller methods to populate combobox:
    public ActionResult Test()
            {
                return View();
            }
            public class ServiceStatusVO
            {
                public int ServiceStatusId { get; set; }
                public string ServiceStatusName { get; set; }
    
                public ServiceStatusVO()
                { }
    
                public ServiceStatusVO(int serviceStatusId, string serviceStatusName)
                {
                    ServiceStatusId = serviceStatusId;
                    ServiceStatusName = serviceStatusName;
                }
            }
    
    
            public StoreResult RetrieveServiceStatuses()
            {
                StoreResult result = new StoreResult();
    
                List<ServiceStatusVO> serviceStatusCollection = null;
                if (serviceStatusCollection == null)
                {
                    serviceStatusCollection = new List<ServiceStatusVO>();
    
                    serviceStatusCollection.Add(new ServiceStatusVO(1, "Status 1"));
                    serviceStatusCollection.Add(new ServiceStatusVO(2, "Status 2"));
                    serviceStatusCollection.Add(new ServiceStatusVO(3, "Status 3"));
                    serviceStatusCollection.Add(new ServiceStatusVO(4, "Status 4"));
                    serviceStatusCollection.Add(new ServiceStatusVO(5, "Status 5"));
                }
    
                result.Data = serviceStatusCollection;
                result.Total = serviceStatusCollection.Count;
    
                return result;
            }
    I don't believe it has anything to do with the method that actually brings back the model or the model itself as in this example the issue is happening even when I try to hardcode the selected value to "2". I remember reading somewhere that the items collection is independent of the store in some situations i.e. the items collection is empty when you bind from a store - is that this issue in this case?
  6. #6
    There are two issues.

    1. ModelField Name is ServiceStatusID, but you bind "ServiceStatusId".

    The difference is the cases of the last letter. Must be the same as JavaScript is case sensitive language.

    2. You should set up Raw mode for ListItem, because you bind integer values to ValueField.
    Html.X().ListItem().Value("2").Mode(ParameterMode.Raw)
  7. #7
    I want to do the same for that I add combo

     X.ComboBoxFor(obj => obj.BranchID)
                                                            .FieldLabel("Branch")
                                                            .AnchorHorizontal("100%")
                                                            .EmptyText("Select")
                                                            .EmptyValue(0)
                                                            .AllowBlank(true)
                                                            .DisplayField("BranchName")
                                                            .ValueField("BranchID")
                                                            .Editable(false)
                                                            .Width(270)
                                                            .QueryMode(DataLoadMode.Local)
                                                            .ForceSelection(true)
                                                            .TriggerAction(TriggerAction.All)
                                                            .LabelAlign(LabelAlign.Right)
                                                            .SelectedItems(s=>s.Add(Html.X().ListItem().Value(Model).Mode(ParameterMode.Raw)))
                                                             .Triggers(
                                                                           Html.X().FieldTrigger().Icon(TriggerIcon.Clear).Qtip("Remove selected")
                                                                           
                                                                     )
                                                                  .Listeners(l=>{
                                                                      l.TriggerClick.Handler = "this.clearValue();";
                                                                     
                                                                  }) 
                                                                .Store(
                                                                    X.Store()
                                                                        .DataSource(ViewBag.Branch)
                                                                            .ID("storeBranch")
                                                                            .Model(
                                                                                X.Model()
    
                                                                                    .Fields(
                                                                                        Html.X().ModelField().Name("BranchID").Type(ModelFieldType.Int),
                                                                                        Html.X().ModelField().Name("BranchName").Type(ModelFieldType.String)
    
                                                                                            )
                                                                                           
                                                                                    )
                                                                                    
    
    
                                                                                )
    and add
    .SelectedItems(s=>s.Add(Html.X().ListItem().Value(Model).Mode(ParameterMode.Raw)))
    according this post.But I am get an error

    CS1660: Cannot convert lambda expression to type 'System.Collections.Generic.IEnumerable<Ext.Net.Li stItem>' because it is not a delegate type
    on
    .SelectedItems(s=>s.Add(Html.X().ListItem().Value(Model).Mode(ParameterMode.Raw)))
    line.

    sorry By mistake I am not adding
    @inherits System.Web.Mvc.WebViewPage<string>
    But after add this I get another error

    The 'inherits' keyword is not allowed when a 'model' keyword is used.
    currently I use

    @model Models.PM.TableClass.tbl_Pur_Master
    for modelbinding with fields.
    Last edited by matrixwebtech; Aug 08, 2014 at 9:44 PM.
  8. #8
    Problem solved

Similar Threads

  1. [CLOSED] How to select a ComboBox item by value?
    By vadym.f in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Apr 16, 2012, 4:15 PM
  2. I can not select any item in combobox
    By marco.amusquivar in forum 1.x Help
    Replies: 1
    Last Post: Mar 21, 2012, 8:09 PM
  3. [CLOSED] Combobox, select first item
    By Yevgeniy in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Nov 28, 2011, 12:05 PM
  4. Replies: 0
    Last Post: Sep 20, 2010, 8:56 PM
  5. Select a item in a Combobox
    By eliezer in forum 1.x Help
    Replies: 1
    Last Post: Apr 16, 2009, 12:23 PM

Posting Permissions