DropdownFor-Using with MVC Razor

[Pat Tormey]

Where should I be looking to find simple examples for Binding to MVC 4.0 datasources?

For example where is the document to

@(Html.Kendo().DropDownListFor(model => model.CarModel))

And all the other 'For' extensions.

Thanks
Pat

[Georgi Krustev]

Hello Pat,

 
I will sugget you check this help topic, which shows how to use Kendo DropDownList wrapper for ASP.NET MVC.

You can find more information about strongly-typed extensions ("For" extensions) here.

All the best,
Georgi Krustev
the Telerik team

[Pat Tormey]

This is one of the frustrations of Using KendoUI.. Circular arguments for examples..
Which is why I stopped using the product, hoping it would mature.
Pointing me back to Scot's article on how it SHOULD work isn't very helpful.

I asked about binding to MVC 4 by which I meant two way binding.. Like the native Html MVC Razor controls do.
The example shown is great if I want to change all data to whatever SelectedIndex(10) is.

So let me be MORE precise.. I need to know how to use KendoUI.DropDownListFor with 2 way binding. Meaning it should show the existing value when it loads, rather than overwrite it the default index.. (which is a really silly "option" for editing existing data.)

Thanks
Pat NH USA

[Georgi Krustev]

Hello Pat,

 
As far as I know the two binding is achieved using the knockout.js library, which is not related to ASP.NET MVC framework. Could you clarify whether you are talking about knockout.js or for something else?
If you want to use knockout.js then I will suggest you check Knockout-Kendo.
In order to help you further I will need a test project, which shows how you implemented your requirements using HTML extensions. Thus I will be able to review the issues locally and advice you further.

Kind regards,
Georgi Krustev
the Telerik team

[Pat Tormey]

So just to clarify

@Html.Kendo().AutoCompleteFor(model => model.NominationYear.PrincipalTitle).BindTo(ViewBag.titleList)
is 2 way bound. It puts the data from the model.NominationYear.PrincipalTitle into the renders control and later puts the user response into the value for model.NominationYear.PrincipalTitle.

 @Html.DropDownListFor(model => model.School.SchoolType,schoolTypeList) @Html.ValidationMessageFor(model => model.School.SchoolType
 is 2 way bound... It's the MVC built in control. It puts the data into the rendered control from model.School.SchoolType and the result is later returns the user choice to model.School.SchoolType
 
 The @Html.KendoUI().DropDownListFor version isn't so clever.. It is completely surprised that it has initial data and defaults to the initial value on the list. When I ask how to make it 2 way bound.. Bound to the data both coming and going..  I'm sent to the documentation that explains I need to manually set the value to index(10)..Which would be great advice if the initial value for all dropdown was in fact 10 but not all that handy otherwise.

Yes I could count the current value and then determine it's index, but I thing the goal is to make using KendoUI easier than it JqueryUI cousins
 

Pat NH USA
 
 
 

 

[Georgi Krustev]

Hello Pat,

 
The Kendo DropDownList works exactly as the Html.DropDownList when it comes to the strongly-typed html extensions behavior. Both gets model values and set their selected item. Also their value is posted to the server where ModelBinder populates the model (two-binding) using these values. I prepared a simple test project in order to prove this - check stronly-typed link. Please modify test project in order to replicate the issue if I am missing something.

Regards,
Georgi Krustev
the Telerik team

[Pat Tormey]

Yes I see that your examples work. Unfortunately mine do not.
Please help me understand

 

I added two rating to your custom

 

public class Custom

 {

     public string CustomerID { get; set; }

     public string SelectID { get; set; }

     public string Rating1 { get; set; }

     public string Rating2 { get; set; }

     public SelectList Customers { get; set; }

 }

set initial values which I'd expect to see already on the page

 

public ActionResult StronglyTyped()

     {

         var custom = new Custom

         {

             Customers = GetList(),

             CustomerID = "BERGS",

             SelectID = "BERGS",

             Rating1 = "Best",

             Rating2 = "Best"

         };

         return View(custom);

     }

set my Rating options on the view.. (better to set at the controller then ViewBag it I suppose)

@{

    var ratingList = new SelectList(new[] { "n/a", "Good", "Better", "Best", "Not So Good" });

 

}          


     <p>

      @Html.DropDownListFor(model => model.Rating1,ratingList)

  </p>

     

  <p>

      @Html.Kendo().DropDownListFor(model => model.Rating2).BindTo(ratingList)

  </p>




[Georgi Krustev]

Hello Pat,

 
Thank you for the clarification. In that case the SelectList creates a list of SelectListItem objects where Text property is set, but Value is null. This list will be serialized like this:

[{"Text":"n/a","Value":null},{"Text":"Good","Value":null}, ...

Currently binding to such list is not supported and I will suggest you avoid creating SelectList and directly bind the widget to the list of strings:

@Html.Kendo().DropDownListFor(model => model.Rating2).BindTo(new[] { "n/a", "Good", "Better", "Best", "Not So Good" })

We will address this limitation for the upcoming release of Kendo UI.

All the best,
Georgi Krustev
the Telerik team

[Michael]

Was this addressed?  I am trying something similair and using the approach Georgi suggested 

@Html.Kendo().DropDownListFor(model => model.Rating2).BindTo(new[] { "n/a", "Good", "Better","Best", "Not So Good" })

 When the drop down list is posted, the string value of Rating2, is not shown as selected in the listbox, implying the value is currently empty.  How can we ensure that if the value in the DB is a string value of "Good" that "Good" is selected in the textbox when the page is loaded?​

[Georgi Krustev]

Hello Michael,

The widget should work as expected with the suggested approach. Could you send a repro demo? This will help us to narrow the issue down.

Regards,
Georgi Krustev
Telerik

[Leo]

We have had Kendo for some time. Somehow it does not seem to work for me. With the regular dropdown, I do get the list, but with the Kendo dropdownlist, all I get is a text box:

---------------------------------------------------------------------------------------------------------------------------------------------------------------------

   @Html.DropDownListFor(n => n.CurrentDepnum, new SelectList(Model.Departments.ToArray(), "Depnum", "DepartmentName", Model.CurrentDepnum))

   @Html.Kendo().DropDownListFor(n => n.CurrentDepnum).BindTo(new SelectList(Model.Departments.ToArray(), "Depnum", "DepartmentName", Model.CurrentDepnum))

[Pistle]

Razor is a markup syntax that lets you embed server-based code into web pages using C# and VB.Net. It is not a programming language. It is a server side markup language. Razor has no ties to ASP.NET MVC because Razor is a general-purpose templating engine. It provides two-way data binding and a simpler development experience with isolated concerns. Though MVC works fine with web apps that have large amount of dynamic server views, single page apps, REST APIs, and AJAX calls, but Razor Pages are perfect for simple pages that are read-only or do basic data input.

[Aleksandar]

Hello Leo,

Can you check if there are any JavaScript errors logged in the developer's console? 

I would also suggest reviewing the documentation section on data binding for the DropDownList:

https://docs.telerik.com/aspnet-mvc/html-helpers/editors/dropdownlist/binding/binding-overview

You can also refer to the Demo section of the DropDownList for runnable examples.

public class OrderViewModel
{
        public List<ProductViewModel> Products { get; set; }
        public int SelectedProduct { get; set; }
}

Pass a model to the View, with a collection of objects, to which the DropDownLsit would be bound:

        public ActionResult Index()
        {
            var products = Enumerable.Range(1, 10).Select(x => new ProductViewModel() { ID = x, Name = "Product " + x });
            var model = new OrderViewModel();
            model.Products = new List<ProductViewModel>();
            model.Products.AddRange(products);

            return View(model);
        }

And initialize the DropDownList:

@model MyApp.Models.OrderViewModel

@(Html.Kendo().DropDownListFor(m=>m.SelectedProduct)
        .DataTextField("Name")
        .DataValueField("ID")
        .BindTo(Model.Products))

Regards,
Aleksandar
Progress Telerik

[Leo]

There are no JavaScript error. at all. 

[Aleksandar]

Hi Leo,

Would it be possible to send a sample where the behavior reported is isolated, so I can review it locally? I still fail in trying to reproduce the behavior reported. 

For a dummy model:

public class DemoModel
    {
        public List<Department> Departments { get; set; }
        public int CurrentDepnum { get; set; }
    }
    public class Department
    {
        public int Depnum { get; set; }
        public string DepartmentName { get; set; }
    }

With the following data passed to the view

public ActionResult Index()
        {
            var model = new DemoModel()
            {
                CurrentDepnum = 1,
                Departments = new List<Department>()
                {
                    new Department(){DepartmentName="department 1", Depnum = 1},
                    new Department(){DepartmentName="department 2", Depnum = 2}
                }
            };
            return View(model);
        }

And the provided DropDownList definition 

@Html.Kendo().DropDownListFor(n => n.CurrentDepnum).BindTo(new SelectList(Model.Departments.ToArray(), "Depnum", "DepartmentName", Model.CurrentDepnum))

A DropDownList is rendered successfully.

Regards,
Aleksandar
Progress Telerik