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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Keep horizontal scroll bar visible when grid exceeds length of page

Thread ID:

Created:

Updated:

Platform:

Replies:

147324 Sep 6,2019 04:33 AM UTC Sep 9,2019 10:00 AM UTC ASP.NET MVC - EJ 2 1
loading
Tags: Grid
Hatem Muhsen
Asked On September 6, 2019 04:33 AM UTC

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 [Syncfusion]
Replied On 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. 
 
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. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon