Hi all , I need some help with some issues in a custom editor I add to a kendo grid . I'm using MCV and the code is the following :
@(Html.Kendo().Grid<GridProspectObject>()
.Name("GridAllProspects")
.AutoBind(false)
Events(events =>
{
events.DataBound("loadtooltipsAllProspectsGrid");
events.Edit("onEditAssignment");
})
.Columns(columns =>
{
columns.Bound(p => p.ProspectName).Title("name");
columns.Bound(p => p.Class).Title("class");
columns.Bound(p => p.DisplayStatus).Title("assignment status (click to change)").ClientTemplate("#=AssignedTo#").EditorTemplateName("EditorVolunteer").HtmlAttributes(new { @style = "text-align:left" });
})
.ToolBar(toolbar =>
{
toolbar.Save();
})
.Editable(editable => editable.Mode(GridEditMode.InCell))
.Pageable()
.Sortable()
.Filterable()
.DataSource(dataSource => dataSource
.Ajax()
.Batch(true)
. PageSize(50)
.Model(model =>
{
model.Id(p => p.ProspectId);
model.Field(p => p.ProspectName).Editable(false);
model.Field(p => p.Class).Editable(false);
})
.Read(read => read.Action("Read_AllProspects", "Projects", new { listId = prospectList.PROSPECT_LIST_ID, pid = Model.PROJECTS_ID }).Type(HttpVerbs.Get))
. Update(update => update.Action("ChangeAssignment", "Projects"))
)
.HtmlAttributes(new { @style = "margin-top:10px" })
)
The editor template is a kendo comboBox :
@(Html.Kendo().ComboBox()
.Name(ViewData.TemplateInfo.GetFullHtmlFieldName(string.Empty))
.Filter("contains")
.Placeholder("--select--")
.DataValueField("Value")
.DataTextField("Name")
.Events( events =>
{
events.DataBound("dataBound");
events.Open("openDropDown");
})
.DataSource(dataSource => dataSource
.Read(read => read.Action("ReadAsignmentOptions", "Projects").Data("getParentId") )
)
.Template("#if( data.Value == '" + Guid.Empty + "' || data.Value == '-1' ) {# " +
"<span class='specialOption'>#:data.Name #</span>" +
" #} else {# " +
"<span>#:data.Name#</span>" +
" #}#")
)
Finally the "getParentId()" function is :
function getParentId() {
var row = $(event.srcElement).closest("tr");
var grid = $(event.srcElement).closest("[data-role=grid]").data("kendoGrid");
var dataItem = grid.dataItem(row);
return { prospectId: dataItem.ProspectId, currentAssigned: dataItem.AssignedToId };
}
The issues I need help with are :
1) I want to add server filtering to the combobox so I can display a custom message "no results to display" when the text entered in the comboxbox returns no results but when I add the options "ServerFilter(true)" to the comboxbox the function getParentId() throws an error saying "cannot ready property dataItem of null".
2) When a selection is made from the combobox (the same custom editor) , I want to display that selection with the red corner in the cell visible, so the user can see the change before saving . Right now when I select an option the old value keeps showing in the grid cell and only red icon appears.
3) This code works fine in IE and Google Chrome , but for some reason it does not work in Firefox. When I click on the grid cell to edit it the combobox just spins forever because the request never gets to the controller. Is this a known bug ?
Thanks !