Kendo grid column names does not scroll horizontally

[Shreesh]

I want to have a Kendo Grid with several columns. I am able to create a Kendo Grid with several columns and it has horizontal scroll bar. The columns are able to scroll horizontally, But the grid column names (column header names) does NOT scroll horizontally.
I also referred to the link : "http://www.telerik.com/forums/horizontal-scroll-bar-in-grid-but-not-working-for-header-".

I tried several things (like changing jquery version etc) but the problem is NOT resolved.
Can you let us know what am I missing?

The Kendo version we are using is Q1 2014 (2014.1.415).

---------------------------------------------------------------------


Following is the code snippet from Index.cshtml.


<script src="../../../../Scripts/kendo/2014.1.415/jquery.min.js" type="text/javascript"></script>

<script src="../../../../Scripts/kendo/2014.1.415/kendo.all.min.js" type="text/javascript"></script>


<script src="../../../../Scripts/kendo/2014.1.415/kendo.aspnetmvc.min.js" type="text/javascript"></script>


 @(Html.Kendo().Grid((IEnumerable<TelerikMvcApp1.Areas.UIConfig.Models.GenericUIClass>)ViewBag.GridData)


      .Name("grid")
      .Columns(columns =>
      {



          foreach (string key in ViewBag.Columns.Keys)
          {
              List<string> value = ViewBag.Columns[(string)key];



              columns.Bound(genericUI => genericUI.column1).Width(200).Title(key);
             

          }
         
         

      })

       .Scrollable(s => s.Enabled(true))

[Shreesh]

Looks like Telerik Kendo version Q1 2014 (2014.1.415) is buggy and released by Telerik with defects?

[Dimo]

Hello Shreesh,

Please refer to the forum thread posted by a colleague of yours. Please try to avoid posting duplicate forum threads or support tickets. Thank you.

http://www.telerik.com/forums/horizontal-scrolling-for-kendo-grid-column-header-not-working

Regards,
Dimo
Telerik

 

 

[Shreesh]

Hello Dimo,

I referred to the other post where you have replied. As per your post, I changed the jquery version and tried but nothing seems to work. I used 1.9.x, 1.10.x, 2.0.x, 2.1.1 but the horizontal scrolling of kendo grid column header/ titles does not work correctly. Can you let us know which exact version works for ASP.NET MVC (MVC4) , for VS2010.

I used "telerik.ui.for.aspnetmvc.2014.1.416.commercial" installer to add support for Telerik MVC projects in VS2010.

I am also tried with js files files from "telerik.kendoui.professional.2014.1.416.commercial.zip" but nothing seems to work.. Please provide a working solution. We will use this forum for solution as this issue is related to ASP.NET MVC/Grid.
Thanks
--------------
Hello Ajinkya,



The jQuery version is too old and not compatible with the Kendo UI version, as explained in our documentation:



http://docs.telerik.com/kendo-ui/getting-started/javascript-dependencies#jquery-version



Using an incompatible jQuery version can be exhibited in a number of
different ways, for example, failing event handlers, as in this case.



On a side note, the correct Kendo UI version number is 2014.1.416,
but this does not really matter, as long as the required scripts and
stylesheets are registered. The problem is caused by the Kendo UI Visual
Studio extension and is fixed now.



Regards,

Dimo

Telerik

[Dimo]

Hello Shreesh,

If the jQuery version is correct and all required Javascript files are registered (once and in the correct order), then the most probablе cause for failed horizontal scrolling is a Javascript error on the page. Please double-check.

http://docs.telerik.com/kendo-ui/getting-started/troubleshooting

If the problem persists and you need further assistance, please send a runnable demo for inspection.

Regards,
Dimo
Telerik

 

 

[Shreesh]

Hi Dimo,

The files of controller, model and view are pasted
below. I tried to attach zip of complete working soln but telerik server
timesout, hence just giving files...


-----------
ConfigController.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.IO;
using System.Data;
using System.Data.OleDb;
using MVC4Razor.Areas.UIConfig.Models;

namespace MVC4Razor.Areas.UIConfig.Controllers
{
    public class ConfigController : Controller
    {
        //
        // GET: /UIConfig/Config/

        public ActionResult Index()
        {
            ConfigModel configModel = new ConfigModel();

            ViewBag.GridData = new List<GenericUIClass>();
            ViewBag.GridData = configModel.GridView();

            return View();
        }


            
 
         

        //
        // GET: /UIConfig/Config/Details/5

        public ActionResult Details(int id)
        {
            return View();
        }

        //
        // GET: /UIConfig/Config/Create

        public ActionResult Create()
        {
            
            
            return View();
        }

        //
        // POST: /UIConfig/Config/Create

        [HttpPost]
        public ActionResult Create(FormCollection collection)
        {
            try
            {
                // TODO: Add insert logic here

                return RedirectToAction("Index");
            }
            catch
            {
                return View();
            }
        }

        //
        // GET: /UIConfig/Config/Edit/5

        public ActionResult Edit(int id)
        {
            return View();
        }

        //
        // POST: /UIConfig/Config/Edit/5

        [HttpPost]
        public ActionResult Edit(int id, FormCollection collection)
        {
            try
            {
                // TODO: Add update logic here

                return RedirectToAction("Index");
            }
            catch
            {
                return View();
            }
        }

        //
        // GET: /UIConfig/Config/Delete/5

        public ActionResult Delete(int id)
        {
            return View();
        }

        //
        // POST: /UIConfig/Config/Delete/5

        [HttpPost]
        public ActionResult Delete(int id, FormCollection collection)
        {
            try
            {
                // TODO: Add delete logic here

                return RedirectToAction("Index");
            }
            catch
            {
                return View();
            }
        }
    }
}

------------

ConfigModel.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.IO;
using System.Data;
using System.Dynamic;
using System.Data.OleDb;
using Kendo.Mvc.UI;
using System.Reflection;
using System.Reflection.Emit;


namespace MVC4Razor.Areas.UIConfig.Models
{
    public class ConfigModel
    {
        public List<GenericUIClass> GridView()
        {
            List<GenericUIClass> datalist = new List<GenericUIClass>();
            GenericUIClass gridCol = new GenericUIClass();
            gridCol.Age = "age";
            gridCol.Company = "company";
            gridCol.Dob = "dob";
            gridCol.Name = "name";
            gridCol.Vehicles = "vehicles";

            datalist.Add(gridCol);
            
            return datalist;
        }
    }
}
------------------
GenericUIClass.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace MVC4Razor.Areas.UIConfig.Models
{
    public class GenericUIClass
    {
        public string Name { get; set; }
        public string Dob { get; set; }
        public string Company { get; set; }
        public string Vehicles { get; set; }
        public string Age { get; set; }
    }
}

-------------
index.cshtml

@using Kendo.Mvc.UI
@{
    ViewBag.Title = "Index";

   
}

<link href="../../../../Content/kendo/kendo.common.min.css" rel="stylesheet" type="text/css" />
<link href="../../../../Content/kendo/kendo.default.min.css" rel="stylesheet" type="text/css" />
@*<script src="../../../../Scripts/kendo/jquery.min.js" type="text/javascript"></script>*@

<script src="http://code.jquery.com/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="../../../../Scripts/kendo/kendo.all.min.js" type="text/javascript"></script>
<script src="../../../../Scripts/kendo/kendo.aspnetmvc.min.js" type="text/javascript"></script>

@*<script src="../../../../Scripts/kendo.modernizr.custom.js" type="text/javascript"></script>*@
<h5>
    horizontal navigation</h5>

<div id="grid" style="width: auto">
    @(Html.Kendo().Grid((IEnumerable<MVC4Razor.Areas.UIConfig.Models.GenericUIClass>)ViewBag.GridData)
      .Name("grid")
      .Columns(columns =>
      {

              columns.Bound(genericUI => genericUI.Name).Title("Name").Width(300);
              columns.Bound(genericUI => genericUI.Dob).Title("Dob").Width(300);
              columns.Bound(genericUI => genericUI.Age).Title("Age").Width(300);
              columns.Bound(genericUI => genericUI.Vehicles).Title("vehicles").Width(300);
              columns.Bound(genericUI => genericUI.Company).Title("Company").Width(300);
              
      })
     

                .Pageable() // Enable paging
                .Sortable() // Enable sorting
                .Scrollable()
                
                .Scrollable(scrollable => scrollable.Height(200))
            //.Resizable(resize => resize.Columns(true))
            //.Reorderable(reorder => reorder.Columns(true))

                .DataSource(datasource => datasource.Server().PageSize(5))
                )
</div>

[Dimo]

Hello Shreesh,

I created a new Kendo UI MVC project, took all your code snippets and integrated them in it. Horizontal Grid scrolling worked as expected.

However, I noticed that you have a <div> with a "grid" ID on the page and a Grid with a "grid" name. Such a setup is invalid, because it causes duplicate IDs to exist on the page.

I still suspect that you either have a Javascript error on the page, and/or some Javascript files are not registered properly.

Since there is a limit on the attachment size, feel free to provide a runnable project by uploading it somewhere else and providing a download link.

Regards,
Dimo
Telerik

 

 

[Nathan]

I've actually found this problem and was able to narrow it down enough to resolve it.

I had a Kendo Grid being loaded into a Kendo Tabstrip.  If I just "load" it, it fails.

It I set it to load using setTrigger(function(){CodeToLoadTabContentsWithGrid();},1) then it works fine.

I suspect the ultimate source of the problem is the same... there is a bug in the Kendo controls in the code that creates them doing things out of sequence using a trigger.  Normally it wont be a problem, but if you put one control inside another and the first hasn't finished painting itself because it's set part of the painting to be done on a timer, it all falls over.

[Dimo]

Hello Nathan,

The provided description is too general, but the following information might be relevant to your scenario:

http://docs.telerik.com/kendo-ui/web/grid/appearance#initializing-the-grid-inside-a-hidden-container

Regards,
Dimo
Telerik

 

 

[Nathan]

Hi Dimo,

The tab control itself isn't hidden, it's visible.

My guess would be that the tab control hides part of itself possibly for animation effects, and then unhides that with a trigger.

When the grid is created straight after the tab is created, the tab control hasn't finished messing about doing it's animation, and parts may still be hidden.

Nathan

[Dimo]

Hello Nathan,

Here is a test page, which works as expected. Feel free to modify it until the problem that you are talking about is reproduced, and send it back.

<!DOCTYPE html>
<html>
<head>
    <style>html { font-size: 12px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title>TabStrip and Grid test</title>
    <link href="http://cdn.kendostatic.com/2014.2.1008/styles/kendo.common.min.css" rel="stylesheet" />
    <link href="http://cdn.kendostatic.com/2014.2.1008/styles/kendo.default.min.css" rel="stylesheet" />
    <script src="http://cdn.kendostatic.com/2014.2.1008/js/jquery.min.js"></script>
    <script src="http://cdn.kendostatic.com/2014.2.1008/js/kendo.web.min.js"></script>
</head>
<body>

    <p><button type="button" id="appendTab" class="k-button">Append a tab with a Grid</button></p>

    <div id="tabstrip" style="width: 1200px">
        <ul>
            <li class="k-state-active">
                Tab 1
            </li>
        </ul>
        <div>
            Tab 1 content
        </div>
    </div>

    <script>

        $(document).ready(function() {
            var tabstrip = $("#tabstrip").kendoTabStrip().data("kendoTabStrip");

            $("#appendTab").click(function (e) {
                tabstrip.append({
                    text: "Grid Tab",
                    content: "<div class='tabGrid'></div>"
                });
                tabstrip.wrapper.children().last().find(".tabGrid").kendoGrid(gridConfig);
                tabstrip.select(tabstrip.tabGroup.children().last());
            });
        });

        var gridConfig = {
            dataSource: {
                type: "odata",
                transport: {
                    read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Customers"
                },
                pageSize: 10
            },
            height: 250,
            pageable: true,
            columns: [{
                field: "ContactName",
                title: "Contact Name",
                width: 200
            }, {
                field: "ContactTitle",
                title: "Contact Title"
            }, {
                field: "CompanyName",
                title: "Company Name"
            }, {
                field: "Country",
                width: 150
            }]
        };

    </script>

</body>
</html>

Regards,
Dimo
Telerik

 

 

[Joseph]

The same issue occurred for me. I used the correct css, js files, and jquery version with the Kendo UI version in use of the project, but the name of the grid and div id wrapping around the grid happened to be declared the same. When changing the div id to something different, then the grid vertical and horizontal scrolling was fixed and the column headers became static again.

 Thanks for the post Dimo.