Kendo grid column names does not scroll horizontally

12 posts, 0 answers
  1. Shreesh
    Shreesh avatar
    33 posts
    Member since:
    Aug 2011

    Posted 02 Jun 2014 Link to this post


    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))
  2. Shreesh
    Shreesh avatar
    33 posts
    Member since:
    Aug 2011

    Posted 03 Jun 2014 in reply to Shreesh Link to this post

    Looks like Telerik Kendo version Q1 2014 (2014.1.415) is buggy and released by Telerik with defects?
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 04 Jun 2014 Link to this post

    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
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  5. Shreesh
    Shreesh avatar
    33 posts
    Member since:
    Aug 2011

    Posted 04 Jun 2014 in reply to Dimo Link to this post

    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
  6. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 06 Jun 2014 Link to this post

    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
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  7. Shreesh
    Shreesh avatar
    33 posts
    Member since:
    Aug 2011

    Posted 09 Jun 2014 in reply to Dimo Link to this post

    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>


  8. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 09 Jun 2014 Link to this post

    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
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  9. Nathan
    Nathan avatar
    39 posts
    Member since:
    Sep 2011

    Posted 22 Oct 2014 in reply to Dimo Link to this post

    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.
  10. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 22 Oct 2014 Link to this post

    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
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  11. Nathan
    Nathan avatar
    39 posts
    Member since:
    Sep 2011

    Posted 22 Oct 2014 in reply to Dimo Link to this post

    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
  12. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 24 Oct 2014 Link to this post

    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>
    </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
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  13. Joseph
    Joseph avatar
    5 posts
    Member since:
    Sep 2015

    Posted 22 Sep 2015 in reply to Dimo Link to this post

    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.

     

Back to Top
UI for ASP.NET MVC is VS 2017 Ready