Getting a value from the model as selectedvalue in a dropdown

[Jonas]

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

[Georgi Krustev]

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:

• Online demo (you can use offline demos suite to further review the implementation)
• Grid editing with cascading dropdownlists
• Grid in-cell editing with cascading dropdownlists
• Grid editing using ComboBox with remote binding and filtering

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

 

 

[Jonas]

Hello Georgi

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

BR
Jonas

[Jonas]

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?

[Jonas]

Never mind my last post.
I got my models wrong, that's why I was getting the wrong result.

[Mayuri]

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.

[Georgi Krustev]

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