Hi Experts,
I had downloaded the KendoGridWithCascadingCombo boxes example posted by admin and used the same concept in my code. I need help with the following
1. I need to show the dropdown text instead of the value on the grid after editing. The client template does not seem to work for InLineEditing
Here is the code on my razor file
@using System.Web.Mvc.Html
@using Kendo.Mvc.UI
@model ModelSelectionViewModel
@section Head {
<script type="text/javascript">
function error_handler(e) {
if (e.errors) {
var message = "Errors:\n";
$.each(e.errors, function (key, value) {
if ('errors' in value) {
$.each(value.errors, function () {
message += this + "\n";
});
}
});
alert(message);
}
}
function rowindex(dataItem) {
var data = $("#ModelSelectionSearchCriteriaList").data("kendoGrid").dataSource.data()
return data.indexOf(dataItem);
}
function filterCategory() {
return {
media: $("#Media").data("kendoDropDownList").value()
};
}
function filterSubCategory() {
return {
categoryId: $("#Category").data("kendoDropDownList").value()
};
}
</script>
}
<div class="container">
<div class="row-fluid">
<div class="span12">
<ul class="breadcrumb">
@Html.MvcSiteMap().SiteMapPath()
</ul>
</div>
<!--/span-->
</div>
<!--/row-fluid-->
<div class="row">
<div class="span12">
<div class="widget">
<div class="widget-header">
<i class="icon-star"></i>
<h3>
Model Selection Criteria Panel</h3>
</div>
<div class="widget-content">
@using (Html.BeginForm("GetData", "ModelSelection"))
{
@(Html.Kendo().Grid(Model.ModelSelectionCriteriaList)
.Name("ModelSelectionSearchCriteriaList")
.HtmlAttributes(new { style = "width:100%;" })
.Columns(columns =>
{
columns.Bound(c => c.Media).HeaderHtmlAttributes(new { @title = "Media" }).Width(300).ClientTemplate("#=Media#" +
// "<input type='hidden' name='ModelSelectionSearchCriteriaList[#= rowindex(data)#].Media' value='#= Media #' />"
//);
columns.Bound(c => c.Category).Title("Category").HeaderHtmlAttributes(new { @title = "Category" }).Width(300);
// .ClientTemplate("#=Category #" +
// "<input type='hidden' name='ModelSelectionSearchCriteriaList[#= rowindex(data)#].Category' value='#= Category #' />"
//);
columns.Bound(c => c.SubCategory).Title("SubCategory").HeaderHtmlAttributes(new { @title = "SubCategory" }).Width(300);
// .ClientTemplate("#=SubCategory#" +
// "<input type='hidden' name='ModelSelectionSearchCriteriaList[#= rowindex(data)#].SubCategory' value='#= SubCategory #' />"
//);
columns.Command( command => { command.Edit(); command.Destroy(); }).Width(200);
})
.ToolBar(toolbar =>
{
toolbar.Create().Text("Add New Criteria");
})
.Editable(editable => editable
.Mode(GridEditMode.InLine)
.DisplayDeleteConfirmation(false)
)
.Scrollable()
.DataSource(datasource => datasource
.Ajax()
.ServerOperation(false)
.Events(events => events.Error("error_handler"))
.Model(model => model.Id(c => c.Id))
.Create(update => update.Action("EditingInline_Create", "ModelSelection").Type(HttpVerbs.Post))
.Destroy(update => update.Action("EditingInline_Destroy", "ModelSelection").Type(HttpVerbs.Post))
.Update(update => update.Action("EditingInline_Update", "ModelSelection").Type(HttpVerbs.Post))
// .Read(read => read.Action("EditingInline_Read", "ModelSelection").Type(HttpVerbs.Post))
)
)
<input id="save" type="submit" class="btn btn-primary" name="button" value="Search" />
@:
@Html.ActionLink("Reset Criteria", "Index", "ModelSelection", new { }, new { id = "btnReset", @class = "btn" })
}
</div>
</div>
</div>
</div>
------------------------------------
@model long
@(Html.Kendo().DropDownListFor(m => m)
.OptionLabel("Select Category...")
.DataTextField("CategoryText")
.DataValueField("CategoryId")
.DataSource(source => {
source.Read(read =>
{
read.Action("GetModelCategory", "ModelSelection")
.Data("filterCategory");
})
.ServerFiltering(true);
})
.AutoBind(false)
.CascadeFrom("Media")
)
@Html.ValidationMessageFor(m => m)
--------------------------------------------------------------
2. media.cshtml
@model long
@(Html.Kendo().DropDownListFor(m => m)
.OptionLabel("Select Media..")
.DataTextField("MediaText")
.DataValueField("MediaId")
.DataSource(source => {
source.Read(read => {
read.Action("GetModelMedia", "ModelSelection");
});
})
)
@Html.ValidationMessageFor(m => m)
3. subcategory.cshtml
@model long
@(Html.Kendo().DropDownListFor(m => m)
.AutoBind(false)
.OptionLabel("Select SubCategory...")
.DataTextField("SubCategoryText")
.DataValueField("SubCategoryId")
.DataSource(source => {
source.Read(read =>
{
read.Action("GetModelSubCategory", "ModelSelection")
.Data("filterSubCategory");
})
.ServerFiltering(true);
})
.CascadeFrom("Category")
)
@Html.ValidationMessageFor(m => m)
-----------------------------------------------------------------------------
My Controller code is below
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using TIMS.Models;
using TIMS.Areas.Alberta.SearchCriteria;
using TIMS.Areas.Alberta.Services;
using TIMS.Services;
using TIMS.Areas.Alberta.ViewModels;
using Kendo.Mvc.UI;
using Kendo.Mvc.Extensions;
using TIMS.Controllers;
namespace TIMS.Areas.Alberta.Controllers
{
public class ModelSelectionController : BaseController
{
#region Protected Members
protected IAlbertaLookupService albertaLkService;
protected IAlbertaUserSessionService albertaUserSessionService;
#endregion
#region Constructor
public ModelSelectionController(IAlbertaLookupService albertaLkService, IAlbertaUserSessionService albertaUserSessionService)
{
this.albertaLkService = albertaLkService;
this.albertaUserSessionService = albertaUserSessionService;
}
#endregion
public ActionResult Index()
{
ModelSelectionViewModel modelSelectionViewModel = new ModelSelectionViewModel();
List<ModelSelectionSearchCriteria> sessionCriteria = new List<ModelSelectionSearchCriteria>();
albertaUserSessionService.ModelSelectionSearchCriteriaData = sessionCriteria;
return View(modelSelectionViewModel);
}
public ActionResult EditingInline_Read([DataSourceRequest] DataSourceRequest request)
{
return Json(albertaUserSessionService.ModelSelectionSearchCriteriaData.ToDataSourceResult(request));
}
[AcceptVerbs(HttpVerbs.Post)]
public ActionResult EditingInline_Create([DataSourceRequest] DataSourceRequest request, ModelSelectionSearchCriteria criteria)
{
if (criteria != null && ModelState.IsValid)
{
List<ModelSelectionSearchCriteria> sessionCriterias = albertaUserSessionService.ModelSelectionSearchCriteriaData;
if (sessionCriterias.Count != 0)
criteria.Id = sessionCriterias[sessionCriterias.Count -1].Id + 1;
else
criteria.Id = 1;
sessionCriterias.Add(criteria);
albertaUserSessionService.ModelSelectionSearchCriteriaData = sessionCriterias;
}
return Json(new[] { criteria }.ToDataSourceResult(request, ModelState));
}
[AcceptVerbs(HttpVerbs.Post)]
public ActionResult EditingInline_Destroy([DataSourceRequest] DataSourceRequest request, ModelSelectionSearchCriteria criteria)
{
if (criteria != null )
{
List<ModelSelectionSearchCriteria> sessionCriterias = albertaUserSessionService.ModelSelectionSearchCriteriaData;
int index = 0;
for (int c = 0; c < sessionCriterias.Count; c++)
if (sessionCriterias[c].Id == criteria.Id)
{
index = c;
break;
}
sessionCriterias.RemoveAt(index);
albertaUserSessionService.ModelSelectionSearchCriteriaData = sessionCriterias;
}
return Json(ModelState.ToDataSourceResult());
}
[AcceptVerbs(HttpVerbs.Post)]
public ActionResult EditingInline_Update([DataSourceRequest] DataSourceRequest request, ModelSelectionSearchCriteria criteria)
{
if (criteria != null && ModelState.IsValid)
{
List<ModelSelectionSearchCriteria> sessionCriterias = albertaUserSessionService.ModelSelectionSearchCriteriaData;
int index=0;
for (int c=0; c < sessionCriterias.Count; c++)
if (sessionCriterias[c].Id == criteria.Id)
{
index = c;
break;
}
sessionCriterias[index].Media = criteria.Media;
sessionCriterias[index].Category = criteria.Category;
sessionCriterias[index].SubCategory = criteria.SubCategory;
albertaUserSessionService.ModelSelectionSearchCriteriaData = sessionCriterias;
}
return Json(ModelState.ToDataSourceResult());
}
public JsonResult GetModelMedia()
{
SelectList medias = albertaLkService.GetModelMediaList();
return Json(medias.Select( p => new { MediaId = p.Value, MediaText = p.Text}) , JsonRequestBehavior.AllowGet);
}
public JsonResult GetModelCategory(long media)
{
SelectList categories = albertaLkService.GetModelMatrixCategoryList(media);
return Json(categories.Select(p => new { CategoryId = p.Value, CategoryText = p.Text }), JsonRequestBehavior.AllowGet);
}
public JsonResult GetModelSubCategory(long categoryId)
{
SelectList subCategories = albertaLkService.GetModelMatrixSubCategoryList(categoryId);
return Json(subCategories.Select(p => new { SubCategoryId = p.Value, SubCategoryText = p.Text }), JsonRequestBehavior.AllowGet);
}
public ActionResult GetData(ModelSelectionViewModel viewModel)
{
List<ModelSelectionSearchCriteria> sessionCriteria = albertaUserSessionService.ModelSelectionSearchCriteriaData;
return View("result", viewModel);
}
}
}
I had downloaded the KendoGridWithCascadingCombo boxes example posted by admin and used the same concept in my code. I need help with the following
1. I need to show the dropdown text instead of the value on the grid after editing. The client template does not seem to work for InLineEditing
Here is the code on my razor file
@using System.Web.Mvc.Html
@using Kendo.Mvc.UI
@model ModelSelectionViewModel
@section Head {
<script type="text/javascript">
function error_handler(e) {
if (e.errors) {
var message = "Errors:\n";
$.each(e.errors, function (key, value) {
if ('errors' in value) {
$.each(value.errors, function () {
message += this + "\n";
});
}
});
alert(message);
}
}
function rowindex(dataItem) {
var data = $("#ModelSelectionSearchCriteriaList").data("kendoGrid").dataSource.data()
return data.indexOf(dataItem);
}
function filterCategory() {
return {
media: $("#Media").data("kendoDropDownList").value()
};
}
function filterSubCategory() {
return {
categoryId: $("#Category").data("kendoDropDownList").value()
};
}
</script>
}
<div class="container">
<div class="row-fluid">
<div class="span12">
<ul class="breadcrumb">
@Html.MvcSiteMap().SiteMapPath()
</ul>
</div>
<!--/span-->
</div>
<!--/row-fluid-->
<div class="row">
<div class="span12">
<div class="widget">
<div class="widget-header">
<i class="icon-star"></i>
<h3>
Model Selection Criteria Panel</h3>
</div>
<div class="widget-content">
@using (Html.BeginForm("GetData", "ModelSelection"))
{
@(Html.Kendo().Grid(Model.ModelSelectionCriteriaList)
.Name("ModelSelectionSearchCriteriaList")
.HtmlAttributes(new { style = "width:100%;" })
.Columns(columns =>
{
columns.Bound(c => c.Media).HeaderHtmlAttributes(new { @title = "Media" }).Width(300).ClientTemplate("#=Media#" +
// "<input type='hidden' name='ModelSelectionSearchCriteriaList[#= rowindex(data)#].Media' value='#= Media #' />"
//);
columns.Bound(c => c.Category).Title("Category").HeaderHtmlAttributes(new { @title = "Category" }).Width(300);
// .ClientTemplate("#=Category #" +
// "<input type='hidden' name='ModelSelectionSearchCriteriaList[#= rowindex(data)#].Category' value='#= Category #' />"
//);
columns.Bound(c => c.SubCategory).Title("SubCategory").HeaderHtmlAttributes(new { @title = "SubCategory" }).Width(300);
// .ClientTemplate("#=SubCategory#" +
// "<input type='hidden' name='ModelSelectionSearchCriteriaList[#= rowindex(data)#].SubCategory' value='#= SubCategory #' />"
//);
columns.Command( command => { command.Edit(); command.Destroy(); }).Width(200);
})
.ToolBar(toolbar =>
{
toolbar.Create().Text("Add New Criteria");
})
.Editable(editable => editable
.Mode(GridEditMode.InLine)
.DisplayDeleteConfirmation(false)
)
.Scrollable()
.DataSource(datasource => datasource
.Ajax()
.ServerOperation(false)
.Events(events => events.Error("error_handler"))
.Model(model => model.Id(c => c.Id))
.Create(update => update.Action("EditingInline_Create", "ModelSelection").Type(HttpVerbs.Post))
.Destroy(update => update.Action("EditingInline_Destroy", "ModelSelection").Type(HttpVerbs.Post))
.Update(update => update.Action("EditingInline_Update", "ModelSelection").Type(HttpVerbs.Post))
// .Read(read => read.Action("EditingInline_Read", "ModelSelection").Type(HttpVerbs.Post))
)
)
<input id="save" type="submit" class="btn btn-primary" name="button" value="Search" />
@:
@Html.ActionLink("Reset Criteria", "Index", "ModelSelection", new { }, new { id = "btnReset", @class = "btn" })
}
</div>
</div>
</div>
</div>
------------------------------------
Editor Templates
1. category.cshtml@model long
@(Html.Kendo().DropDownListFor(m => m)
.OptionLabel("Select Category...")
.DataTextField("CategoryText")
.DataValueField("CategoryId")
.DataSource(source => {
source.Read(read =>
{
read.Action("GetModelCategory", "ModelSelection")
.Data("filterCategory");
})
.ServerFiltering(true);
})
.AutoBind(false)
.CascadeFrom("Media")
)
@Html.ValidationMessageFor(m => m)
--------------------------------------------------------------
2. media.cshtml
@model long
@(Html.Kendo().DropDownListFor(m => m)
.OptionLabel("Select Media..")
.DataTextField("MediaText")
.DataValueField("MediaId")
.DataSource(source => {
source.Read(read => {
read.Action("GetModelMedia", "ModelSelection");
});
})
)
@Html.ValidationMessageFor(m => m)
3. subcategory.cshtml
@model long
@(Html.Kendo().DropDownListFor(m => m)
.AutoBind(false)
.OptionLabel("Select SubCategory...")
.DataTextField("SubCategoryText")
.DataValueField("SubCategoryId")
.DataSource(source => {
source.Read(read =>
{
read.Action("GetModelSubCategory", "ModelSelection")
.Data("filterSubCategory");
})
.ServerFiltering(true);
})
.CascadeFrom("Category")
)
@Html.ValidationMessageFor(m => m)
-----------------------------------------------------------------------------
My Controller code is below
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using TIMS.Models;
using TIMS.Areas.Alberta.SearchCriteria;
using TIMS.Areas.Alberta.Services;
using TIMS.Services;
using TIMS.Areas.Alberta.ViewModels;
using Kendo.Mvc.UI;
using Kendo.Mvc.Extensions;
using TIMS.Controllers;
namespace TIMS.Areas.Alberta.Controllers
{
public class ModelSelectionController : BaseController
{
#region Protected Members
protected IAlbertaLookupService albertaLkService;
protected IAlbertaUserSessionService albertaUserSessionService;
#endregion
#region Constructor
public ModelSelectionController(IAlbertaLookupService albertaLkService, IAlbertaUserSessionService albertaUserSessionService)
{
this.albertaLkService = albertaLkService;
this.albertaUserSessionService = albertaUserSessionService;
}
#endregion
public ActionResult Index()
{
ModelSelectionViewModel modelSelectionViewModel = new ModelSelectionViewModel();
List<ModelSelectionSearchCriteria> sessionCriteria = new List<ModelSelectionSearchCriteria>();
albertaUserSessionService.ModelSelectionSearchCriteriaData = sessionCriteria;
return View(modelSelectionViewModel);
}
public ActionResult EditingInline_Read([DataSourceRequest] DataSourceRequest request)
{
return Json(albertaUserSessionService.ModelSelectionSearchCriteriaData.ToDataSourceResult(request));
}
[AcceptVerbs(HttpVerbs.Post)]
public ActionResult EditingInline_Create([DataSourceRequest] DataSourceRequest request, ModelSelectionSearchCriteria criteria)
{
if (criteria != null && ModelState.IsValid)
{
List<ModelSelectionSearchCriteria> sessionCriterias = albertaUserSessionService.ModelSelectionSearchCriteriaData;
if (sessionCriterias.Count != 0)
criteria.Id = sessionCriterias[sessionCriterias.Count -1].Id + 1;
else
criteria.Id = 1;
sessionCriterias.Add(criteria);
albertaUserSessionService.ModelSelectionSearchCriteriaData = sessionCriterias;
}
return Json(new[] { criteria }.ToDataSourceResult(request, ModelState));
}
[AcceptVerbs(HttpVerbs.Post)]
public ActionResult EditingInline_Destroy([DataSourceRequest] DataSourceRequest request, ModelSelectionSearchCriteria criteria)
{
if (criteria != null )
{
List<ModelSelectionSearchCriteria> sessionCriterias = albertaUserSessionService.ModelSelectionSearchCriteriaData;
int index = 0;
for (int c = 0; c < sessionCriterias.Count; c++)
if (sessionCriterias[c].Id == criteria.Id)
{
index = c;
break;
}
sessionCriterias.RemoveAt(index);
albertaUserSessionService.ModelSelectionSearchCriteriaData = sessionCriterias;
}
return Json(ModelState.ToDataSourceResult());
}
[AcceptVerbs(HttpVerbs.Post)]
public ActionResult EditingInline_Update([DataSourceRequest] DataSourceRequest request, ModelSelectionSearchCriteria criteria)
{
if (criteria != null && ModelState.IsValid)
{
List<ModelSelectionSearchCriteria> sessionCriterias = albertaUserSessionService.ModelSelectionSearchCriteriaData;
int index=0;
for (int c=0; c < sessionCriterias.Count; c++)
if (sessionCriterias[c].Id == criteria.Id)
{
index = c;
break;
}
sessionCriterias[index].Media = criteria.Media;
sessionCriterias[index].Category = criteria.Category;
sessionCriterias[index].SubCategory = criteria.SubCategory;
albertaUserSessionService.ModelSelectionSearchCriteriaData = sessionCriterias;
}
return Json(ModelState.ToDataSourceResult());
}
public JsonResult GetModelMedia()
{
SelectList medias = albertaLkService.GetModelMediaList();
return Json(medias.Select( p => new { MediaId = p.Value, MediaText = p.Text}) , JsonRequestBehavior.AllowGet);
}
public JsonResult GetModelCategory(long media)
{
SelectList categories = albertaLkService.GetModelMatrixCategoryList(media);
return Json(categories.Select(p => new { CategoryId = p.Value, CategoryText = p.Text }), JsonRequestBehavior.AllowGet);
}
public JsonResult GetModelSubCategory(long categoryId)
{
SelectList subCategories = albertaLkService.GetModelMatrixSubCategoryList(categoryId);
return Json(subCategories.Select(p => new { SubCategoryId = p.Value, SubCategoryText = p.Text }), JsonRequestBehavior.AllowGet);
}
public ActionResult GetData(ModelSelectionViewModel viewModel)
{
List<ModelSelectionSearchCriteria> sessionCriteria = albertaUserSessionService.ModelSelectionSearchCriteriaData;
return View("result", viewModel);
}
}
}