Grid Grouping - Collapse / Expand Not Working

[Gede]

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.

[Bryan Corazza]

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.