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

Grid Grouping - Collapse / Expand Not Working

1 Answer 311 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Gede
Top achievements
Rank 1
Gede asked on 13 Sep 2012, 08:10 AM
Hi,
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 :

@(Html.Kendo().Grid<WANDA.ViewLookupStaffTag>()
        .Name("StaffTagGrid")
        .BindTo((IEnumerable<WANDA.ViewLookupStaffTag>)ViewBag.StaffTag)
        .Columns(columns =>
        {
            columns.Bound(p => p.StaffTagDesc).Title("Description");           
            columns.Bound(p => p.StaffTagCategoryDesc).GroupHeaderTemplate(
                @<text>
                   Tag Category : @item.Key
                </text>);
            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
            .Server()
            .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")))   
        .RowAction(
            row =>
            {
                if (row.DataItem.StaffTagStatus == "Inactive")
                {
                    row.HtmlAttributes["class"] = "inactive-status";
                }
            })
        .Pageable(pager => pager.PageSizes(true))
        .Sortable()
        .Filterable()
        .DataSource(data => data.Server().PageSize(100)))

Help pleaseee.

1 Answer, 1 is accepted

Sort by
0
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.
Tags
Grid
Asked by
Gede
Top achievements
Rank 1
Answers by
Bryan Corazza
Top achievements
Rank 1
Share this question
or