We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Keep horizontal scroll bar visible when grid exceeds length of page


I'd like to keep the horizontal scroll bar visible while scrolling down the page but I don't want to have the vertical scroll bar inside of the grid. I want to keep the main page's scroll bar but lock the horizontal scroll bar so users can scroll across the grid. The idea is so that users don't have to scroll all the way to the bottom of the page so they can find the scroll bar. 

I've attached a screenshot of my grid.

Here is my code:

<div class="control-section" style="position:relative;">


            List<object> toolbarItems = new List<object>();







            toolbarItems.Add(new { text = "Click", tooltipText = "Click", id = "Click", prefixIcon = "e-expand" });


        <div style="height: 40px;">

            @Html.EJS().Button("clear").Content("Clear Search").Render()






        .DataSource(DataManager => { DataManager.Url("/Proj/UrlDataSource").CrudUrl("/Proj/CrudUpdate").Adaptor("UrlAdaptor"); })



        .FilterSettings(filter => filter.Type(Syncfusion.EJ2.Grids.FilterType.Excel))











        .GroupSettings(group => { group.ShowDropArea(false).ShowUngroupButton(true).ShowGroupedColumn(true).ShowToggleButton(true); })



        .Columns(col =>


            col.Field(p => p.Id).Width("60").IsPrimaryKey(true).IsIdentity(true).Type("number").Width("120").AllowFiltering(false).Add();

            col.HeaderText("Project Details").Visible(true).Template(" <a rel='nofollow' href='ProjectDetailsMaster?id=${Id} '>View</a> ").Width("140").AllowEditing(false).Add();

            col.Field(p => p.ProjName).AllowSorting(true).AllowFiltering(false).Width("175").Add();


            col.Field(p => p.ProjDesc).Width("325").ValidationRules(new { required = "true" }).AllowFiltering(false).Add();


            col.Field(p => p.GroupName).EditType("dropdownedit").Edit(new { @params = GroupNameDropdown }).Width("175").ValidationRules(new { required = "true" }).Add();


            col.Field(p => p.PortfolioName).EditType("dropdownedit").Edit(new { @params = PortfolioNameDropdown }).Width("175").ValidationRules(new { required = "true" }).Add();


            col.Field(p => p.PortLead).EditType("dropdownedit").Edit(new { @params = PortfolioLeadsDropdown }).Width("180").ValidationRules(new { required = "true" }).Add();


            col.Field(p => p.ProjLead).EditType("dropdownedit").Edit(new { @params = ProjectLeadsDropdown }).Width("180").ValidationRules(new { required = "true" }).Add();


            col.Field(p => p.ProgramName).EditType("dropdownedit").Edit(new { @params = ProgramNameDropdown }).Width("180").ValidationRules(new { required = "true" }).Add();


            col.Field(p => p.AssignedDate).Format("yMd").EditType("datepickeredit").Width("175").ValidationRules(new { required = "true" }).Add();


            col.Field(p => p.StatusName).EditType("dropdownedit").Edit(new { @params = StatusNameDropdown }).Template("#statusTemplate").Width("175").ValidationRules(new { required = "true" }).Add();

            col.Field(p => p.DecisionTypeName).EditType("dropdownedit").Edit(new { @params = DecisionNameDropdown }).Width("180").Add();

            col.Field(p => p.JRCDate).Format("yMd").EditType("datepickeredit").Width("175").Add();


            col.Field(p => p.PriorityName).EditType("dropdownedit").Edit(new { @params = PriorityNameDropdown }).Width("175").Add();

            col.Field(p => p.CompletionDate).Format("yMd").EditType("datepickeredit").Width("200").Add();

            col.Field(p => p.CreatedOn).Width("200").Format("yMd").IsIdentity(true).Add();

            col.Field(p => p.CreatedBy).Width("200").IsIdentity(true).Add();

            col.Field(p => p.ModifiedOn).Width("200").Format("yMd").IsIdentity(true).Add();

            col.Field(p => p.ModifiedBy).Width("180").IsIdentity(true).Add();

            col.Field(p => p.KSNLink).Template("#ksnLinkTemplate").Width("180").Add();






            .PageSettings(page => page.PageCount(5))

            .EditSettings(edit => { edit.AllowAdding(true).AllowEditing(true).AllowDeleting(true).ShowDeleteConfirmDialog(true).Mode(Syncfusion.EJ2.Grids.EditMode.Normal); })


            //(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel", "ColumnChooser", "ExcelExport", "Search" })

            .PageSettings(page =>



                page.PageSizes(new List<string>() { "10", "25", "50", "100", "All" });








Attachment: Screen_Shot_20190906_at_12.28.23_AM_d3f77981.zip

1 Reply

PS Pavithra Subramaniyam Syncfusion Team September 9, 2019 10:00 AM UTC

Hi Hatem, 
Thanks for contacting us. 
By default Grid horizontal scrollbar will appear at the end of Grid content only. But you want to display the scrollbar in the viewport itself which is not feasible without using grids vertical scrollbar. But you can achieve your requirement by using browser’s native horizontal scrollbar. To display the browsers native scrollbar we need to set the total columns width as grid width. Please find the below code example for more information in which we have calculated the total width of the column and set as the Grid width inside the DataBound event. 
@Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.datasource). .DataBound("dataBound").Render() 
    function dataBound(args) { 
        var width = 0; 
         this.columns.forEach((e) => { 
            width = width + parseInt(e.width); 
        this.width = width;  // setting the total columns width as Grid width to show native scrollbar 
Please get back to us, if you need further assistance. 
Pavithra S. 

Live Chat Icon For mobile
Up arrow icon