I have a Kendo Grid with dropdownlist for inline Batch updte.When i change the Dropdown list thevalue changes and when it loses the focus , the value of the selected item is displayed in the grid instead of the TextField to be displayed in the grid's dropdownlist. I am using EditorTemplateName for displaying the dropdownlist in the grid.Can you please help me what is wrong and help me correct this issue. I have searched Telerik forum but still couldnt find any help.
EditorTemplate:
@using System.Collections
@(Html.Kendo().DropDownList()
.BindTo((IEnumerable)ViewData["AllTitlesList"])
.Name("MagTitle")
.DataValueField("MagDescID")
.DataTextField("MagTitle")
.OptionLabel("- Select Title - ")
)
Kendo Grid Code:
@(Html.Kendo().Grid<ARMS_WebApi.ViewModel.AncillaryCodes>() .Name("grid") .Columns(columns => { columns.Bound(ac => ac.AncillaryCodeID).Width(75).Title("Id"); //columns.Bound(ac => ac.MagDescID).Width(150).EditorTemplateName("MagazineTitleTemplate").Title("Title").ClientTemplate("#:MagTitle#"); columns.ForeignKey(ac => ac.MagTitle, (IEnumerable)ViewData["AllTitlesList"], "MagDescID", "MagTitle").ClientTemplate("#:MagTitle#"). EditorTemplateName("_AllTitlesKendoComboBoxTemplate").Title("Title").Width(100); columns.Bound(ac => ac.AncillaryCode).Width(75).Title("Ancillary Code"); columns.Bound(ac => ac.AncillaryCodeDescription).Width(150).Title("Ancillary Code Description"); columns.Command(commands => { commands.Destroy(); }).Width(50); }) .ToolBar(toolbar => { toolbar.Create(); toolbar.Save(); toolbar.Custom().Text("Delete selection") .HtmlAttributes(new { onclick = "deleteSelection(event)" }); }) .Editable(editable => editable.Mode(GridEditMode.InCell).CreateAt(GridInsertRowPosition.Top)) .Pageable() .Sortable() .Scrollable(scr => scr.Height(300)) .Filterable( filterable => filterable .Extra(false) .Operators(operators => operators .ForString(str => str.Clear() .StartsWith("Starts with") .IsEqualTo("Is equal to") .IsNotEqualTo("Is not equal to") .Contains("Contains") ))) .Resizable(resize => resize.Columns(true)) .Reorderable(reorder => reorder.Columns(true)) .DataSource(dataSource => dataSource.Ajax() .Batch(true) .Model(model => { model.Id(ac => ac.AncillaryCodeID); model.Field(ac => ac.AncillaryCodeID).Editable(false); }) .Create(create => create.Action("AncillaryCode_Create", "AncillaryCode")) .Read(read => read.Action("AncillaryCode_Read", "AncillaryCode")) .Update(update => update.Action("AncillaryCode_Update", "AncillaryCode")) .Destroy(destroy => destroy.Action("AncillaryCode_Destroy", "AncillaryCode")) ))
Hello Ajith,
In this case I would suggest setting the DropDownList (editor template) DataValueField to "MagTitle" just like the DataTextField.
Also you can use the @(Html.Kendo().DropDownListFor() instead of @(Html.Kendo().DropDownList(). This way it will generate automatically the drop down list element id value to the model property you are binding the drop down list to.
Regards,
See What's Next in App Development. Register for TelerikNEXT.
Rank 1
Hi Boyan,
i changed the EditorTemplate as follows by setting boththe value and text field as MagTitle. But this is showing incorrect id when saving during update. Does this mean i can update only using the MagTitle as where condition during update since i am not getting the Actual id of the changed data in the dropdown list ?? . I am getting the previous Id of the selected item .
Rank 1
Hi Boyan,i changed the EditorTemplate as follows by setting boththe value and text field as MagTitle. But this is showing incorrect id when saving during update. Does this mean i can update only using the MagTitle as where condition during update since i am not getting the Actual id of the changed data in the dropdown list ?? . I am getting the previous Id of the selected item .
.DataValueField("MagTitle")
.DataTextField("MagTitle")
When updating i am getting he newly selected TextField but the value field which had the MagId is showing old id. How to resolve this.
Hello Ajith,
Please find attached a sample project that implements foreign key column scenario. Please let us know if you need any further assistance.
Regards,See What's Next in App Development. Register for TelerikNEXT.
Rank 1
Hi,
Thanks for the sample. I found out what my mistake was. I added the Editor Templates in my Shared folder. That di the trick. But however, i have another issue now.
In my Kendo grid, when i click on add new button, a new row comes on top of the grid.This new row has dropdown ad the first column and two text box columns. for the new row,when i select something from the dropdown and click on the next textbox(the next column) the first column with the dropdown becomes blank without anything. If i click onthe cell, the dropdown appears. but however, if a choose anything from the dropdown the cell is empty. what is the issue.
It would be great if you can share any sample with this bulk edit along with foreighnkey dropdown columns along with ass new row as well as bulk delete option with kendo grid in mvc.
Regards,
Ajith
Rank 1
Hello Ajith,
I am glad to hear that you have resolved the problem.
The project from my last response demonstrates how to implement foreign key column scenario. The create (add new item) functionality works fine. Please note that the foreign key columns is "EmployeeID".
Regards,
Rank 1
Hello Ajith,
Just wondering if you have got solution for your issue. I am also running into same problem, can you please respond if you have got solution for that.
Issue:
I found out what my mistake was. I added the Editor Templates in my Shared folder. That di the trick. But however, i have another issue now.In my Kendo grid, when i click on add new button, a new row comes on top of the grid.This new row has dropdown ad the first column and two text box columns. for the new row,when i select something from the dropdown and click on the next textbox(the next column) the first column with the dropdown becomes blank without anything. If i click onthe cell, the dropdown appears. but however, if a choose anything from the dropdown the cell is empty. what is the issue.
Hello Harish,
Since I am not able to replicate the described problem I would suggest you to open a support ticket and attach isolated runnable example. This way we can investigate the case in detail and provide a proper solution.
Regards,
Rank 1
Hello Harish,
I have posted my code below. Hope this helps you. Let me know if you need anything else. Currently it is working for me.
@(Html.Kendo().Grid<ARMS_WebApi.ViewModel.AncillaryCodes>()
.Name("EditAncillaryCodesGrid")
.Columns(columns =>
{
columns.Template(x => { }).ClientTemplate("<input type='checkbox' id='chkSelect_#= AncillaryCodeID#' userId='#= AncillaryCodeID#' />").Width(20);
columns.Bound(ac => ac.AncillaryCodeID).Hidden(true);
columns.ForeignKey(ac => ac.MagDescID, (IEnumerable)ViewData["AllTitlesList"], "MagDescID", "MagTitle").Width(100);
columns.Bound(ac => ac.AncillaryCode).Width(75).Title("Ancillary Code");
columns.Bound(ac => ac.AncillaryCodeDescription).Width(150).Title("Ancillary Code Description");
columns.Command(commands =>
{
commands.Destroy();
}).Width(50);
})
.ToolBar(toolbar =>
{
toolbar.Create();
toolbar.Save();
toolbar.Excel();
toolbar.Custom().Text("Delete selection")
.HtmlAttributes(new { onclick = "deleteSelection(event)" });
})
.Editable(editable => editable.Mode(GridEditMode.InCell).CreateAt(GridInsertRowPosition.Top))
.Pageable()
.Sortable()
.Scrollable(scr => scr.Height(300))
.Filterable(
filterable => filterable
.Extra(false)
.Operators(operators => operators
.ForString(str => str.Clear()
.StartsWith("Starts with")
.IsEqualTo("Is equal to")
.IsNotEqualTo("Is not equal to")
.Contains("Contains")
)))
.Resizable(resize => resize.Columns(true))
.Reorderable(reorder => reorder.Columns(true))
.DataSource(dataSource =>
dataSource.Ajax()
.Batch(true)
.Model(model =>
{
model.Id(ac => ac.AncillaryCodeID);
model.Field(ac => ac.AncillaryCodeID).Editable(false);
model.Field(ac => ac.MagDescID).DefaultValue(0);
})
.Create(create => create.Action("AncillaryCode_Create", "AncillaryCode"))
.Read(read => read.Action("AncillaryCode_Read", "AncillaryCode"))
.Update(update => update.Action("AncillaryCode_Update", "AncillaryCode"))
.Destroy(destroy => destroy.Action("AncillaryCode_Destroy", "AncillaryCode"))
))
This is the code for my kendo grid.
In my editor template i have this partial view GridForeignKey.cshtml
I copied the EditorTemplates from the sample projectshared by Boyan. I just added the "Please Select" line in the editor template.
@model object
@(
Html.Kendo().DropDownListFor(m => m)
.OptionLabel(" - Please Select -")
.BindTo((SelectList)ViewData[ViewData.TemplateInfo.GetFullHtmlFieldName("") + "_Data"])
)
Rank 1
