This is a migrated thread and some comments may be shown as answers.

DropdownFor-Using with MVC Razor

14 Answers 1516 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Pat Tormey
Top achievements
Rank 1
Pat Tormey asked on 04 Sep 2012, 02:58 PM
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

14 Answers, 1 is accepted

Sort by
0
Georgi Krustev
Telerik team
answered on 10 Sep 2012, 09:51 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Pat Tormey
Top achievements
Rank 1
answered on 31 Jan 2013, 03:02 PM
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
0
Georgi Krustev
Telerik team
answered on 05 Feb 2013, 11:55 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Pat Tormey
Top achievements
Rank 1
answered on 05 Feb 2013, 12:23 PM

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
 
 
 

 

0
Georgi Krustev
Telerik team
answered on 08 Feb 2013, 09:49 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Pat Tormey
Top achievements
Rank 1
answered on 09 Feb 2013, 01:54 PM
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>


0
Accepted
Georgi Krustev
Telerik team
answered on 14 Feb 2013, 08:29 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Michael
Top achievements
Rank 1
answered on 02 Nov 2015, 10:03 AM

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?‚Äč

0
Georgi Krustev
Telerik team
answered on 05 Nov 2015, 09:49 AM
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
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
0
Leo
Top achievements
Rank 1
answered on 04 Oct 2020, 05:09 PM

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))

0
Pistle
Top achievements
Rank 1
Veteran
answered on 05 Oct 2020, 12:02 PM
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.
0
Aleksandar
Telerik team
answered on 07 Oct 2020, 02:06 PM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Leo
Top achievements
Rank 1
answered on 13 Nov 2020, 05:58 PM
There are no JavaScript error. at all. 
0
Aleksandar
Telerik team
answered on 18 Nov 2020, 02:48 PM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
General Discussions
Asked by
Pat Tormey
Top achievements
Rank 1
Answers by
Georgi Krustev
Telerik team
Pat Tormey
Top achievements
Rank 1
Michael
Top achievements
Rank 1
Leo
Top achievements
Rank 1
Pistle
Top achievements
Rank 1
Veteran
Aleksandar
Telerik team
Share this question
or