This is a migrated thread and some comments may be shown as answers.

Detail Template does not expand

1 Answer 199 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Anthony
Top achievements
Rank 1
Anthony asked on 22 Sep 2013, 05:09 AM
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("&#32;", " ");
                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"));
        }
    }

1 Answer, 1 is accepted

Sort by
0
Daniel
Telerik team
answered on 25 Sep 2013, 06:53 AM
Hello Anthony,

I posted my reply in the support ticket on the same topic. For convenience I am pasting it below and have attached the test project.

There are a few issues with the bundle configuration:

  • kendo.web and kendo.all are both included. kendo.all contains kendo.web so only it should be added.
  • The CSS file for the theme is not included. Also, in order for the sprites to be loaded correctly when optimization is enabled, the bundle name should be the actual path to the file plus some name.

but non of them would cause the described problems. The ToMvcClientTemplate extension method should also replace the invalid template characters. I attached a sample project that uses a simplified version of the code that you provided. Could you check it and let me know if I am missing something and if it works as expected on your side?

On a side note, the characters generated by the AntiXssEncoder are now handled internally by the widgets so the ToMvcClientTemplate method will not be needed in the latest release.

Regards,
Daniel
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
Grid
Asked by
Anthony
Top achievements
Rank 1
Answers by
Daniel
Telerik team
Share this question
or