Keep horizontal scroll bar visible when grid exceeds length of page

[Hatem Muhsen]

Hi,

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("Add");

            toolbarItems.Add("Edit");

            toolbarItems.Add("Delete");

            toolbarItems.Add("Update");

            toolbarItems.Add("Cancel");

            toolbarItems.Add("Search");

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

        }

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

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

        </div>

        @(Html.EJS().Grid<ProjectMvcModel>("Grid")

        //.Height("300")

        .Width("100%")

        //.Height("600")

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

        .AllowResizing(true)

        .AllowFiltering()

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

        .AllowSelection()

        .AllowGrouping()

        .AllowSorting(true)

        .AllowReordering()

        .ShowColumnChooser(true)

        .ShowColumnMenu(true)

        .AllowExcelExport(true)

        .EnableAltRow()

        .DetailTemplate("#rowDetailTemplate")

        .ToolbarClick("toolbarClick")

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

        //.SearchSettings()

        

        .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();

            /*REQUIRED*/

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

            /*REQUIRED*/

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

            /*REQUIRED*/

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

            /*REQUIRED*/

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

            /*REQUIRED*/

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

            /*REQUIRED*/

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

            /*REQUIRED*/

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

            /*REQUIRED*/

            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();

            /*REQUIRED*/

            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();

        })

            //.EnableVirtualization()

            .ActionComplete("actionComplete")

            .AllowPaging()

            .QueryCellInfo("onQueryCellInfo")

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

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

            .Toolbar(toolbarItems)

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

            .PageSettings(page =>

            {

                page.PageSize(25);

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

            })

            //.QueryCellInfo("OnQueryCellInfo")

            .DataBound("OnDataBound")

            .Render()

        )

    </div>

</div>

Attachment: Screen_Shot_20190906_at_12.28.23_AM_d3f77981.zip

[Pavithra Subramaniyam]

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. 

 

Index.cshtml 

 

@Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.datasource). .DataBound("dataBound").Render() 

 

<script> 

    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 

    } 

 

</script> 

 

 

 

 

Please get back to us, if you need further assistance. 

 

Regards, 

Pavithra S.