Getting a value from the model as selectedvalue in a dropdown

7 posts, 1 answers
  1. Jonas
    Jonas avatar
    39 posts
    Member since:
    Oct 2014

    Posted 06 Feb 2015 Link to this post

    Hello

    I have a grid showing data (registrations) with the possibility to edit this data.
    Each registration stores information about a region, stored in the DB as forgein key regionId for each registration.

    When I edit a registration I want a dropdown for choosing region with the current region selected. The dropdown gets its values from the region table in the DB.
    As I load the dropdown I think I loose the registration model and it gets replaced by the region model and thus I have no access to the regionId for the registration anymore, how can I get hold of the regionId value in the dropdown?

    My editTemplate:
    @model regDB.Models.registration
     
    @Html.HiddenFor(model => model.id)
     
    <div>
        @Html.EditorFor(model => model.regionId)
    </div>
     
    <div style="width: 250px;">
        @(Html.Kendo().DropDownList()
              .Name("Regions")
              .HtmlAttributes(new { style = "width: 250px" })
              .DataTextField("name")
              .DataValueField("id")
              .Value(model.regionId)
              .DataSource(source =>
              {
                  source.Read(read =>
                  {
                      read.Action("GetRegions", "Home");
                  });
              })
        )
    </div>
     and the GetRegions code:
    public JsonResult GetRegions()
            {
                var regDB = new regDB_DEVEntities();
                regDB.Configuration.ProxyCreationEnabled = false;
                return Json(regDB.region, JsonRequestBehavior.AllowGet);
            }
    If I remove the ProxyCreationEnabled, I'll get a circular reference error.

    I hope you understand my question, otherwise i'll have to try to explain some more

    /Jonas
  2. Answer
    Georgi Krustev
    Admin
    Georgi Krustev avatar
    3707 posts

    Posted 10 Feb 2015 Link to this post

    Hello Jonas,

    In general, editors used in a grid editor form will be bound to the row model using MVVM value bindings. This means that values set from the server in the editor template will not be preserved, but rather will be replaced with the values of the current model. I would suggest you review our examples: All these examples cover different scenarios using ComboBox/DropDownList widgets.

    To answer your specific question, you can access the dropdownlist widget and update its selected value in the Edit event of the grid. Review this "how-to" demo that demonstrates how to do this. Note that this demo is applicable to ASP.NET MVC too, because the event handler needs to be implemented using JavaScript in both technologies.

    Regards,
    Georgi Krustev
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Jonas
    Jonas avatar
    39 posts
    Member since:
    Oct 2014

    Posted 10 Feb 2015 in reply to Georgi Krustev Link to this post

    Hello Georgi

    Thank you, I will look at the demos in more detail in offline mode

    BR
    Jonas
  5. Jonas
    Jonas avatar
    39 posts
    Member since:
    Oct 2014

    Posted 23 Feb 2015 Link to this post

    Hello

    I'm still having a problem with this. I got it working for editing a row in the grid. But when I chose to create a new row for the grid I get [object Object] inserted in the grid instead of the name from the dropdown. Do you know why?

    Some updated code:

    column for region and call to edit template from the grid:
    .Columns(columns =>
            {
                columns.Bound(c => c.region).Width(80).Locked(true);
                columns.Bound(c => c.country).Width(120).Locked(true);
                columns.Bound(c => c.productName).Width(200).Locked(true);
                columns.Command(command => { command.Edit(); command.Destroy(); }).Title("Edit").Width(150);
            })
    .Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("EditRegTemplate").Window(w => w.Title("Registration Form")))

    relevant part of the edit template:
    @(Html.Kendo().DropDownListFor(model => model.region)
                  .HtmlAttributes(new { style = "width: 183px" })
                  .DataTextField("name")
                  .DataValueField("name")
                  .OptionLabel("Select region...")
                  .DataSource(source =>
                  {
                      source.Read(read =>
                      {
                          read.Action("GetRegions", "Home");
                      });
                  })
                )

    and the code to get all regions:
    public JsonResult GetRegions()
            {
                var regDBregion = new regDB_DEVEntities();
                regDBregion.Configuration.ProxyCreationEnabled = false;
                return Json(regDBregion.region, JsonRequestBehavior.AllowGet);
            }


    Now why does this work for updating rows in the grid but returns [object Object] when I try to create a new row?
  6. Jonas
    Jonas avatar
    39 posts
    Member since:
    Oct 2014

    Posted 23 Feb 2015 in reply to Jonas Link to this post

    Never mind my last post.
    I got my models wrong, that's why I was getting the wrong result.
  7. Mayuri
    Mayuri avatar
    7 posts
    Member since:
    Sep 2015

    Posted 04 Sep 2015 Link to this post

    Hello Georgi,

    I am facing similar issue. my issue is while using kendo dropdownlist with kendo grid. I have a kendo grid with all the fields as dropdown (around 12 fields) except one column(employeename) as a simple display column. For dropdown fields, I have created partial views as EditorTemplates and attached them to the grid column. But when I run my application, initially it does not display the dropdowns. When click the cell turns into a dropdown field and when I select any value and change focus, the grid cell gets populated with dropdown value property and not the text property. For some of the columns, it even does not set the selected value in cell. No idea what is the issue. below is my code:
    @(Html.Kendo().Grid(Model)
                .Name("EmployeeHarborGrid")
                .EnableCustomBinding(false)
                .Columns(columns =>
                  {
                        columns.Bound(d => d.EmployeeName).Title("Employee");
                        columns.Bound(d => d.AcaJobClassification).Title("ACA Job Classification")
                                   .EditorTemplateName("_AcaJobClassification").Width(120).ClientTemplate("#:AcaJobClassification#");
                        columns.Bound(d => d.TwelveMonthsOffer).Title("12 Months Offer")
                  }

    my editor template code:
    @using Kendo.Mvc.UI
    @(Html.Kendo().DropDownListFor(m => m)
    .Name("AcaJobClassification").HtmlAttributes(new { @style = "font-size:12px" })
    .DataTextField("Text")
    .DataValueField("Value")
    .BindTo(new List<SelectListItem>()
    {
    new SelectListItem() {Text="--Please Select--", Value="0"},
    new SelectListItem() {Text="Contract", Value="1"},
    new SelectListItem() {Text="Educator", Value="2"},
    new SelectListItem() {Text="Fulltime", Value="3"},
    new SelectListItem() {Text="Parttime", Value="4"},
    })
    .SelectedIndex(3)
    )

    If employee record exists, then I want the dropdowns to pick the record value and set the dropdown index accordingly.
    Can I achieve this with ClientTemplate attribute on the column. I would prefer using ClientTemplate instead of creating EditorTemplate. Please suggest. Also, I want to bind this dropdown with an Enum list but facing problem with that as well. Can you help me out with that as well?
    Appreciate your quick reply. 
    Thanks.

  8. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3707 posts

    Posted 08 Sep 2015 Link to this post

    Hello Mayuri,

    In general, the widget will not update the edited model either because the MVVM value binding is not defined (which is done automatically in your case) or the widget is designed to set the whole object to the model and not only the primitive value (check valuePrimitive option). That being said, I will suggest you set the ValuePrimitive(true).

    I noticed also that you are setting SelectedIndex(3) in the template. This will not work, because the editor value is controlled by the grid model (the model is the single source of truth). If you would like to set default value of the widget use the DefaultValue setting.

    If I am missing something, send us a repro project that depicts the issue.

    Regards,
    Georgi Krustev
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top
UI for ASP.NET MVC is VS 2017 Ready