I'm having trouble figuring out how to use a Kendo Comobox in an editor template for a Grid cell (both ajax). Is there an example of this anywhere? I have a typical scenario where the Combobox has an id for the value and but text for the display. The text needs to appear in the grid cell and combobox, but the id needs to be posted when the grid is submitted. Below is a code snippet for what I have at the moment.
The column binding for the grid of employees:
columns.Bound(c => c.Employee).EditorTemplateName("EmployeeId");
The editor template:
@(Html.Kendo().ComboBox()
.Name("EmployeeId")
.DataTextField("value")
.DataValueField("key")
.Filter("startswith")
.DataSource(source => {
source.Read(read =>
{
read.Action("GetEmployees", "Employee");
})
.ServerFiltering(false);
})
)
This loads the combobox values and the startswith filtering is working fine, but when I make a selection, the grid doesn't take the selected value. It works if I switch to a column bound to the EmployeeId, but then the column displays the id rather than the text.
What is the right way to handle this? I would think this is a really common scenario, so assume there is a straight forward way to deal with it.
Thanks, DanO
The column binding for the grid of employees:
columns.Bound(c => c.Employee).EditorTemplateName("EmployeeId");
The editor template:
@(Html.Kendo().ComboBox()
.Name("EmployeeId")
.DataTextField("value")
.DataValueField("key")
.Filter("startswith")
.DataSource(source => {
source.Read(read =>
{
read.Action("GetEmployees", "Employee");
})
.ServerFiltering(false);
})
)
This loads the combobox values and the startswith filtering is working fine, but when I make a selection, the grid doesn't take the selected value. It works if I switch to a column bound to the EmployeeId, but then the column displays the id rather than the text.
What is the right way to handle this? I would think this is a really common scenario, so assume there is a straight forward way to deal with it.
Thanks, DanO
7 Answers, 1 is accepted
0
Gibi
Top achievements
Rank 2
Rank 2
answered on 17 Sep 2012, 09:17 PM
I have the same Issue.
Help us out here.
Help us out here.
0
Dan
Top achievements
Rank 1
Rank 1
answered on 18 Sep 2012, 01:41 AM
Gibi -
I discovered this example of a DropDownList in a Grid which is a very similar scenario
http://demos.kendoui.com/web/grid/editing-custom.html
However, you need to download the MVC Examples project to see all the code (the editor template, controller and view model are not included in the online demo). Also - I was only able to get this to work when the ComboBox was bound to a complex type like in the example (Employee property that has two child properties - EmployeeId and EmployeeName). Generally my view models are flattened (EmployeeId and EmployeeName would be properties of the view model itself), but I wasn't able to find a way to make it work with that structure. I would like to know if there is a way to accomplish the same thing without adding the complex type parent container, as I will have to refactor a bunch of code if I want to use the control.
I discovered this example of a DropDownList in a Grid which is a very similar scenario
http://demos.kendoui.com/web/grid/editing-custom.html
However, you need to download the MVC Examples project to see all the code (the editor template, controller and view model are not included in the online demo). Also - I was only able to get this to work when the ComboBox was bound to a complex type like in the example (Employee property that has two child properties - EmployeeId and EmployeeName). Generally my view models are flattened (EmployeeId and EmployeeName would be properties of the view model itself), but I wasn't able to find a way to make it work with that structure. I would like to know if there is a way to accomplish the same thing without adding the complex type parent container, as I will have to refactor a bunch of code if I want to use the control.
0
Dan
Top achievements
Rank 1
Rank 1
answered on 19 Sep 2012, 01:31 AM
I discovered an additional issue with using a ComboBox in a grid. You can reproduce the issue on the following page of the MVC Examples project:
/razor/web/grid/editing-custom
Simply change the DropDownList to a ComboBox in this file:
\Areas\razor\Views\web\grid\EditorTemplates\ClientEmployee.cshtml
Then try entering some random text in the ComboBox, and move away from the field. The value in the field gets set to undefined, and you can't reset it correctly again without refreshing the page.
I have not been able to come up with a way to get this working. I tried tying into the ComboBox events as a possible solution, but for some reason when the ComboBox is in a Grid cell (at least one in batch mode), all of its events fire at the point that you click into the Grid cell, before the ComboBox has even been rendered... Frustrating. Not sure where to go from here.
/razor/web/grid/editing-custom
Simply change the DropDownList to a ComboBox in this file:
\Areas\razor\Views\web\grid\EditorTemplates\ClientEmployee.cshtml
Then try entering some random text in the ComboBox, and move away from the field. The value in the field gets set to undefined, and you can't reset it correctly again without refreshing the page.
I have not been able to come up with a way to get this working. I tried tying into the ComboBox events as a possible solution, but for some reason when the ComboBox is in a Grid cell (at least one in batch mode), all of its events fire at the point that you click into the Grid cell, before the ComboBox has even been rendered... Frustrating. Not sure where to go from here.
0
Gibi
Top achievements
Rank 2
Rank 2
answered on 19 Sep 2012, 04:07 AM
Thanx Dan.
I also figured it out about the combo. But to it make bind you must give the combo box name property the same name as the property you need to bind to.I also set the property [UIHint("TemplateName")] on field in the view model. Added the template in the shared/EditorTemplates folder. Now it binds and works fine with the refresh.
-------------------Grid-------------------------------
@(Html.Kendo().Grid<MVC.ViewModels.ResultsViewModel>(Model)
.Name("Grid")
.Columns(columns => {
columns.Bound(o => o.Waarneming).Width(550).Title("Waarneming"); columns.Bound(p => p.Result).Width(110).Title("Resultaat");
})
-------------------Combo Box----------------------
@(Html.Kendo().ComboBox()
.Name("Result")
.DataValueField("Text")
.DataTextField("Text")
.HighlightFirst(true)
.BindTo((IEnumerable<SelectListItem>) ViewBag.NormeringList)
)
I also figured it out about the combo. But to it make bind you must give the combo box name property the same name as the property you need to bind to.I also set the property [UIHint("TemplateName")] on field in the view model. Added the template in the shared/EditorTemplates folder. Now it binds and works fine with the refresh.
-------------------Grid-------------------------------
@(Html.Kendo().Grid<MVC.ViewModels.ResultsViewModel>(Model)
.Name("Grid")
.Columns(columns => {
columns.Bound(o => o.Waarneming).Width(550).Title("Waarneming"); columns.Bound(p => p.Result).Width(110).Title("Resultaat");
})
-------------------Combo Box----------------------
@(Html.Kendo().ComboBox()
.Name("Result")
.DataValueField("Text")
.DataTextField("Text")
.HighlightFirst(true)
.BindTo((IEnumerable<SelectListItem>) ViewBag.NormeringList)
)
0
Robert
Top achievements
Rank 1
Rank 1
answered on 27 Mar 2013, 09:53 PM
Hello all,
It appears that Dan's question was never answered. What Dan is describing is also discussed in this datasource forum thread(see below). If the option is not selected from the combobox, then the combobox text is sent as the selected value which isn't bound to an object and doesn't conform to the datasource schema. The malformed data is what causes the datasource to stop responding. In the forum thread, a custom data schema function is the solution. Love to see an example of this if anyone got it working, since a combobox in a grid seems fairly common.
thanks,
Rob
the thread is referenced here (the link editor's not working):
http://www.kendoui.com/forums/framework/data-source/datasource-bug---if-read-fails-it-is-not-possible-to-call-read-again.aspx
It appears that Dan's question was never answered. What Dan is describing is also discussed in this datasource forum thread(see below). If the option is not selected from the combobox, then the combobox text is sent as the selected value which isn't bound to an object and doesn't conform to the datasource schema. The malformed data is what causes the datasource to stop responding. In the forum thread, a custom data schema function is the solution. Love to see an example of this if anyone got it working, since a combobox in a grid seems fairly common.
thanks,
Rob
the thread is referenced here (the link editor's not working):
http://www.kendoui.com/forums/framework/data-source/datasource-bug---if-read-fails-it-is-not-possible-to-call-read-again.aspx
0
Robert
Top achievements
Rank 1
Rank 1
answered on 02 Apr 2013, 03:06 PM
This question on how to handle undefined text in a grid combobox is now answered in stackoverflow for both inline and batch editing:
http://stackoverflow.com/questions/15691774/kendo-grid-combobox-sends-undefined-data-to-datasource/
http://stackoverflow.com/questions/15691774/kendo-grid-combobox-sends-undefined-data-to-datasource/
0
lucerias
Top achievements
Rank 1
Rank 1
answered on 09 Jun 2016, 02:09 AM
I have used workaround to set the model value with the drop down selected value under gridview onSave event.
function onSave(e) {
e.model.CustomerCategoryId= $("#CustomerCategoryId").kendoDropDownList().val();
}