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

Grid Grouping - Collapse / Expand Not Working

1 Answer 504 Views
This is a migrated thread and some comments may be shown as answers.
Top achievements
Rank 1
Gede asked on 13 Sep 2012, 08:10 AM
I'm working with Kendo grid with data grouping. But the collapse/expand button not working at all and the triangle shape different from the demo sample.
I suspect that something wrong with the css or .js file, but have no idea which one is.
This is how I define them in my layout :
<link rel="shortcut icon" href="@Url.Content("~/Content/images/favicon.gif")" type="image/x-icon" />
    <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/css/global.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/kendo.dataviz.min.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/kendo.common.min.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/kendo.default.min.css")" rel="stylesheet" type="text/css" />
    <script src="@Url.Content("~/Scripts/jquery.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/kendo.dataviz.min.js")"></script>   
    <script src="@Url.Content("~/Scripts/kendo.web.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/kendo.aspnetmvc.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/corners.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/menu.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>

and this is how my grid code :

        .Columns(columns =>
            columns.Bound(p => p.StaffTagDesc).Title("Description");           
            columns.Bound(p => p.StaffTagCategoryDesc).GroupHeaderTemplate(
                   Tag Category : @item.Key
            columns.Bound(p => p.StaffTagStatus).EditorTemplateName("StaffTagStatusDDL").Width(140).Title("Status");
            columns.Command(command => { command.Edit(); }).Width(200);
        .ToolBar(toolbar => toolbar.Create())
        .Editable(editable => editable.Mode(Kendo.Mvc.UI.GridEditMode.InLine))
        .DataSource(dataSource => dataSource
            .Group(groups => groups.Add(p => p.StaffTagCategoryDesc))
            .Sort(sort => sort.Add(p=>p.StaffTagDesc))
            .Model(model => model.Id(p => p.StaffTagID))
            .Create(create => create.Action("StaffTag_Create", "Setup"))
            .Read(read => read.Action("StaffTag", "Setup"))
            .Update(update => update.Action("StaffTag_Update", "Setup"))
            .Destroy(delete => delete.Action("StaffTag_Destroy", "Setup")))   
            row =>
                if (row.DataItem.StaffTagStatus == "Inactive")
                    row.HtmlAttributes["class"] = "inactive-status";
        .Pageable(pager => pager.PageSizes(true))
        .DataSource(data => data.Server().PageSize(100)))

Help pleaseee.

1 Answer, 1 is accepted

Sort by
Bryan Corazza
Top achievements
Rank 1
answered on 02 Oct 2012, 01:01 AM
I had the same issue and I reviewed the code in the MVC examples and once I removed the default CSS (site.css) and the default jquery 1.8 it all started working just fine.

I also noted in particular it was the th a{position: relative} line 544 of Site.css property that causes the grid filtering to not function properly.  Once this is removed, everything should work with the grid.
Asked by
Top achievements
Rank 1
Answers by
Bryan Corazza
Top achievements
Rank 1
Share this question