I am at a loss on this. <br> I am trying to add a Kendo dropdown user control to a column in my kendo grid.
My View Model:
public class MainViewModel
{
[Display(Name = "Main")]
[Required]
public string Main1 { get; set; }
public string Description { get; set; }
[UIHint("CustomerList")]
public CustomerViewModel Customer { get; set; }
}
public class CustomerViewModel
{
public string CustomerID { get; set; }
public string CustomerName { get; set; }
}
My Grid looks like:
@(Html.Kendo().Grid<Test.Models.MainViewModel>()
.Name("mainGrid")
.Columns(col =>
{
col.Bound(x => x.Main1);
col.Bound(x => x.Customer).ClientTemplate("#=Customer.CustomerName#").Width(180);
col.Bound(x => x.Contact1);
col.Command(x => { x.Edit(); x.Destroy(); });
})
)
The Customer displays in the grid however when I go to add/edit I do not see that column. I don't believe that its calling my user control. <br>I am not sure why.
This user control is in the Views folder. I also tried moving it into the Views>Shared and the Views>Shared>DisplayTemplate folder.
My user control:
<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<Main.Models.CustomerViewModel>" %>
<%= Html.Kendo().DropDownListFor(m => m)
.DataValueField("CustomerID")
.DataTextField("CustomerName")
.BindTo((System.Collections.IEnumerable)ViewData["customers"])
%>
This is almost identical to the Kendo example they provide with the only difference is that they have areas setup in their project and I do not.
12 Answers, 1 is accepted
Rank 1
I tried a second w ay by created a partial view in the Shared/EditorTemplates folders and called it CustomerList.cshtml
Contents of the file are:
@(Html.Kendo().DropDownList(m => m)
.DataTextField("CustomerName")
.DataValueField("CustomerID")
.OptionLabel("--- Select Value ---")
.BindTo((System.Collections.IEnumerable)ViewData["customers"])
)
This still doesn't work, when I go that field I see 2 text boxes (the ID and Name field) I do not see a DropDownList.
Please advise.
Rank 1
I now got the drop down to occur. However I still have 2 issues:
1) The dropdown will not show if Editable is set to Popup.
2) When I switched Editable to InLine, its display fines. However if I select a different value and click save the model object still has the original value. How would I go about getting the selected value from the drop down?
Please review the following sample project, which demonstrates how the Grid's Popup Editor (GridEditMode.PopUp) can be customized. You can add the DropDownList in the Person view. After making a selection updating the record will persist the selected DropDownList item.
Regards,
Ivan Danchev
Telerik
Rank 1
Are you saying that the example where they use a UIHint to create a template will only work InLine and not in popup?
If I am to create a popup then I should utilize the TemplateName in Editable?
Rank 1
Rank 1
To further clarify. I created a template as suggested. The template is bound to a PersonModel, There is a property in the Person called Status. This status field is my dropwdownlist. I can populate the dropdownlist by setting its DataSource.
.DataSource(ds => ds
.Read("GetStatusList", "MyController")
)
However the initial value is not set, nor can I get the updated value back in my view model.
Is DataSource the right way to go about this or should I be using the Bind method?
Rank 1
Rank 1
OK. The only issue that I have is that the dropdownlist does not return a value when I am adding a record.
If I am editing a record and change the value I am fine.
When I go to add I have a default value show in the dropdown.
(By setting the value in the DataSource>Model of the grid.)
Even if I select a different value from the drop down I still see null in the DataModal on the post.
Why is this the case on a create and how do I go about resolving this?
This is expected when populating the DropDownList from the model because when adding a new record all of its fields are null. For this reason a better approach would be to pass the data to the DropDownList through the ViewData object. This scenario is covered in the following Code Library example, which shows how the ViewData can be used to populate the widget.
Regards,
Ivan Danchev
Telerik
Rank 1
Your provided example does not work when
.Editable(e => e.Mode(GridEditMode.PopUp))
My grid needs to be in PopUp mode.
Rank 1
I also tweaked my original example.
I went back to the edit template for the form.
I started with:
</div>
@(Html.Kendo().DropDownList()
.Name("Customer")
.DataTextField("CustomerName")
.DataValueField("CustomerID")
.DataSource(ds => ds
.Read("GetList", "MyController")
)
.HtmlAttributes(new { @class = "form-control"})
)
</div>
And changed it to (binding)
<div class="form-group">
@(Html.Kendo().DropDownListFor(m => m)
.Name("Customer")
.BindTo(ViewData["customers"] as System.Collections.IEnumerable)
.DataValueField("CustomerID")
.DataTextField("CustomerName")
)
</div>
Just to make sure that you understand my issue. I don't need the dropdownlist to be nullable. (I am setting a default value).
However the issue is when I click the create button from the grid. The Popup appears and the user enters their information (In this case selects an option from the Doprdownlist). It is when the user clicks save and the model is posted back to the server do I have an issue. All of the fields are populated except for what the user selects in the dropdownlist. (It comes back to the server as null).
Which action do you set ViewData["customers"] in? How are you trying to access the value and which action you are trying to access it in after clicking Update?
Here's short video (refresh the page if it is not loading correctly), showing how the DropDownList's value selection works at my end in one of the examples I linked in a previous reply, both when updating an existing record and when adding a new one. The ViewData the widget is bound to is set in the Home/Index action.
Regards,
Ivan Danchev
Telerik