I have trouble getting the Kendo Grid ASP.NET MVC Ajax implementation to work
The Javascript/Jquery version worked like a charm, the ASP.NET MVC has been quite a challenge.
I have a grid and a detail template. At first, when I added the ClientTemplate code, the page would display a javascript error of Invalid template. I searched for a while on this and 2 solutions were offered.
1. Commenting the System.WebSecurity.AntiXss enry form the Web.config
2. Using .ToMvcClientTemplate() as created by someone (Extension method on MvcHtmlString). The code for this is below
I tried both the options. now the page loads with no javascript error, but no mater how much i click on the arrow in the row (which should open the tab),
nothing happens. I even have a break point in the controller that never gets hit.
One final note, when I change the mode to IE9, the page throws a javascript error:
Unhandled exception at line 18, column 19554 in http://localhost:1770/Scripts/kendo/2013.1.514/kendo.web.min.js
Please advise. Here is the code:
@(Html.Kendo().Grid<PPSPortal.Models.ATM>()
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("GetATMStatusGrid", "ATM", new { id = participantId, userId = userId, pageid = 3 }))
.PageSize(10)
.ServerOperation(false)
)
.Events(ev => ev.DataBound("onDataBound"))
.Name("Grid")
.Sortable()
.Filterable()
.Pageable()
.ColumnMenu().Events(x=>x.ColumnHide("UpdateColumnsWhenHidden").ColumnShow("UpdateColumnsWhenShown"))
.Groupable()
.ClientDetailTemplateId("template")
.Columns(cl=>
{
cl.Bound(x => x.Id);
cl.Bound(x => x.Name);
cl.Bound(x => x.Status);
cl.Bound(x => x.Active);
cl.Bound(x => x.Online);
cl.Bound(x => x.TotalCashRemaining).Format("{0:c}") ;
cl.Bound(x => x.LastMessageFromATM);
cl.Bound(x => x.LastMessageToATM);
cl.Bound(x => x.GroupName);
cl.Bound(x => x.Location);
})
.ToolBar(toolbar =>
{
toolbar.Template(@<text>
<div class="toolbar">
<table>
<tr>
<td>
@Html.JHAButton("Excel", "", "Export To Excel")
@Html.JHAButton("CSV", "", "Export To CSV")</td>
</tr>
</table>
</div>
</text>);
})
)
@(Html.Kendo().TabStrip()
.Name("tabStrip_#=Id#")
.SelectedIndex(0)
.Animation(animation => animation.Open(open => open.Fade(FadeDirection.In)))
.Items(items =>
{
items.Add().Text("Events").Content(@<text>
@(Html.Kendo().Grid<PPSPortal.Models.ATMDetails>()
.Name("grid_#=Id#")
.Columns(columns =>
{
columns.Bound(o => o.Event).Width(56);
columns.Bound(o => o.MessageParamValue).Width(110);
})
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(5)
.Read(read => read.Action("GetDetails", "ATM", new { id = @participantId, termId = "#=Id#", termName = "#=Name#" }))
)
.Pageable()
.Sortable()
.ToClientTemplate())
</text>
);
items.Add().Text("Cassette Details").Content(
"<div class='cassette-details'>" +
"</div>"
);
})
.ToClientTemplate().ToMvcClientTemplate())
The MvcHtmlString extension method:
public static class KendoMvcExtensions
{
public static IHtmlString ToMvcClientTemplate(this MvcHtmlString mvcString)
{
if (HttpEncoder.Current.GetType() == typeof(AntiXssEncoder))
{
var initial = mvcString.ToHtmlString();
var corrected = initial.Replace("\\u0026", "&").Replace("%23", "#").Replace("%3D", "=").Replace(" ", " ");
return new HtmlString(corrected);
}
return mvcString;
}
}
Another problem is that even though I have specified Groupable above, that does not work either. A circle with a line across it appears.
i suspect it could be the js files I am referencing.
They are bundled in the BundleConfig.cs.
This is the BundleConfig.cs
public class BundleConfig
{
// For more information on Bundling, visit http://go.microsoft.com/fwlink/?LinkId=254725
public static void RegisterBundles(BundleCollection bundles)
{
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-{version}.js"));
bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
"~/Scripts/jquery-ui-{version}.js"));
bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
"~/Scripts/jquery.unobtrusive*",
"~/Scripts/jquery.validate*"));
// Use the development version of Modernizr to develop with and learn from. Then, when you're
// ready for production, use the build tool at http://modernizr.com to pick only the tests you need.
bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
"~/Scripts/modernizr-*"));
bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
"~/Content/themes/base/jquery.ui.core.css",
"~/Content/themes/base/jquery.ui.resizable.css",
"~/Content/themes/base/jquery.ui.selectable.css",
"~/Content/themes/base/jquery.ui.accordion.css",
"~/Content/themes/base/jquery.ui.autocomplete.css",
"~/Content/themes/base/jquery.ui.button.css",
"~/Content/themes/base/jquery.ui.dialog.css",
"~/Content/themes/base/jquery.ui.slider.css",
"~/Content/themes/base/jquery.ui.tabs.css",
"~/Content/themes/base/jquery.ui.datepicker.css",
"~/Content/themes/base/jquery.ui.progressbar.css",
"~/Content/themes/base/jquery.ui.theme.css"));
// Script bundles
bundles.Add(new ScriptBundle("~/bundles/jhaCtls").Include(
"~/Telerik/js/jquery.min.js",
"~/Scripts/kendo/2013.1.514/kendo.web.min.js",
"~/Scripts/kendo/2013.1.514/kendo.all.min.js",
"~/Scripts/kendo/2013.1.514/kendo.aspnetmvc.min.js",
//"~/Scripts/kendo/2013.1.514/kendo.dataviz.min.js",
//"~/Scripts/kendo/2013.1.514/jquery.min.js",
"~/HTMLCtls/js/JHAHTMLCtls-2013.1.1.0.min.js"));
// Style bundles
bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css"));
bundles.Add(new StyleBundle("~/Telerik/css").Include("~/Telerik/styles/kendo.common.min.css", "~/Telerik/styles/kendo.dataviz.min.css"));
}
}
The Javascript/Jquery version worked like a charm, the ASP.NET MVC has been quite a challenge.
I have a grid and a detail template. At first, when I added the ClientTemplate code, the page would display a javascript error of Invalid template. I searched for a while on this and 2 solutions were offered.
1. Commenting the System.WebSecurity.AntiXss enry form the Web.config
2. Using .ToMvcClientTemplate() as created by someone (Extension method on MvcHtmlString). The code for this is below
I tried both the options. now the page loads with no javascript error, but no mater how much i click on the arrow in the row (which should open the tab),
nothing happens. I even have a break point in the controller that never gets hit.
One final note, when I change the mode to IE9, the page throws a javascript error:
Unhandled exception at line 18, column 19554 in http://localhost:1770/Scripts/kendo/2013.1.514/kendo.web.min.js
Please advise. Here is the code:
@(Html.Kendo().Grid<PPSPortal.Models.ATM>()
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("GetATMStatusGrid", "ATM", new { id = participantId, userId = userId, pageid = 3 }))
.PageSize(10)
.ServerOperation(false)
)
.Events(ev => ev.DataBound("onDataBound"))
.Name("Grid")
.Sortable()
.Filterable()
.Pageable()
.ColumnMenu().Events(x=>x.ColumnHide("UpdateColumnsWhenHidden").ColumnShow("UpdateColumnsWhenShown"))
.Groupable()
.ClientDetailTemplateId("template")
.Columns(cl=>
{
cl.Bound(x => x.Id);
cl.Bound(x => x.Name);
cl.Bound(x => x.Status);
cl.Bound(x => x.Active);
cl.Bound(x => x.Online);
cl.Bound(x => x.TotalCashRemaining).Format("{0:c}") ;
cl.Bound(x => x.LastMessageFromATM);
cl.Bound(x => x.LastMessageToATM);
cl.Bound(x => x.GroupName);
cl.Bound(x => x.Location);
})
.ToolBar(toolbar =>
{
toolbar.Template(@<text>
<div class="toolbar">
<table>
<tr>
<td>
@Html.JHAButton("Excel", "", "Export To Excel")
@Html.JHAButton("CSV", "", "Export To CSV")</td>
</tr>
</table>
</div>
</text>);
})
)
@(Html.Kendo().TabStrip()
.Name("tabStrip_#=Id#")
.SelectedIndex(0)
.Animation(animation => animation.Open(open => open.Fade(FadeDirection.In)))
.Items(items =>
{
items.Add().Text("Events").Content(@<text>
@(Html.Kendo().Grid<PPSPortal.Models.ATMDetails>()
.Name("grid_#=Id#")
.Columns(columns =>
{
columns.Bound(o => o.Event).Width(56);
columns.Bound(o => o.MessageParamValue).Width(110);
})
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(5)
.Read(read => read.Action("GetDetails", "ATM", new { id = @participantId, termId = "#=Id#", termName = "#=Name#" }))
)
.Pageable()
.Sortable()
.ToClientTemplate())
</text>
);
items.Add().Text("Cassette Details").Content(
"<div class='cassette-details'>" +
"</div>"
);
})
.ToClientTemplate().ToMvcClientTemplate())
The MvcHtmlString extension method:
public static class KendoMvcExtensions
{
public static IHtmlString ToMvcClientTemplate(this MvcHtmlString mvcString)
{
if (HttpEncoder.Current.GetType() == typeof(AntiXssEncoder))
{
var initial = mvcString.ToHtmlString();
var corrected = initial.Replace("\\u0026", "&").Replace("%23", "#").Replace("%3D", "=").Replace(" ", " ");
return new HtmlString(corrected);
}
return mvcString;
}
}
Another problem is that even though I have specified Groupable above, that does not work either. A circle with a line across it appears.
i suspect it could be the js files I am referencing.
They are bundled in the BundleConfig.cs.
This is the BundleConfig.cs
public class BundleConfig
{
// For more information on Bundling, visit http://go.microsoft.com/fwlink/?LinkId=254725
public static void RegisterBundles(BundleCollection bundles)
{
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-{version}.js"));
bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
"~/Scripts/jquery-ui-{version}.js"));
bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
"~/Scripts/jquery.unobtrusive*",
"~/Scripts/jquery.validate*"));
// Use the development version of Modernizr to develop with and learn from. Then, when you're
// ready for production, use the build tool at http://modernizr.com to pick only the tests you need.
bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
"~/Scripts/modernizr-*"));
bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
"~/Content/themes/base/jquery.ui.core.css",
"~/Content/themes/base/jquery.ui.resizable.css",
"~/Content/themes/base/jquery.ui.selectable.css",
"~/Content/themes/base/jquery.ui.accordion.css",
"~/Content/themes/base/jquery.ui.autocomplete.css",
"~/Content/themes/base/jquery.ui.button.css",
"~/Content/themes/base/jquery.ui.dialog.css",
"~/Content/themes/base/jquery.ui.slider.css",
"~/Content/themes/base/jquery.ui.tabs.css",
"~/Content/themes/base/jquery.ui.datepicker.css",
"~/Content/themes/base/jquery.ui.progressbar.css",
"~/Content/themes/base/jquery.ui.theme.css"));
// Script bundles
bundles.Add(new ScriptBundle("~/bundles/jhaCtls").Include(
"~/Telerik/js/jquery.min.js",
"~/Scripts/kendo/2013.1.514/kendo.web.min.js",
"~/Scripts/kendo/2013.1.514/kendo.all.min.js",
"~/Scripts/kendo/2013.1.514/kendo.aspnetmvc.min.js",
//"~/Scripts/kendo/2013.1.514/kendo.dataviz.min.js",
//"~/Scripts/kendo/2013.1.514/jquery.min.js",
"~/HTMLCtls/js/JHAHTMLCtls-2013.1.1.0.min.js"));
// Style bundles
bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css"));
bundles.Add(new StyleBundle("~/Telerik/css").Include("~/Telerik/styles/kendo.common.min.css", "~/Telerik/styles/kendo.dataviz.min.css"));
}
}