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

Grid Configuration

Hello,  I've been replaced the guy that was working on a project and i'm lost
 hopefully someone can lead me in the right direction...

All i need to do is to create a grid that:
  • fills parent div's width
  • has a fixed height
  • has scrollbars if the grid is bigger than the above mentioned parent div
Failing that I would just like it to render full size so I can just use regular html scrollbars on the container

I've read the API documentation and i've searched the internet. I just can't get it working.

I've tried a ton of different settings with varying degrees of success...

Somehow the scrollbar just stopped appearing despite the grid being about 300% browser width, ironically removing the scroll settings element made them reappear but it's not how it needs to be

Below is the current table markup

<div class="grid-container">
            <ej:grid runat='server' id="ctl00" height="0" width="0">
               <ej:Column AllowEditing="False" DataType="number" Field="Ref Number" IsIdentity="True"/>
                <ej:Column DataType="string" Field="STATUS" HeaderText="Status"/>
                <ej:Column DataType="string" Field="LOCATION_NAME" HeaderText="Location"/>
                <ej:Column DataType="number" Field="ALERT" HeaderText="Alert"/>
                <ej:Column DataType="date" Field="Date_Time_Found" HeaderText="Date Found" Format="{0:dd:MM:yyyy HH:mm}"/>
                <ej:Column AllowEditing="False" DataType="string" Field="Station or Train" HeaderText="Station or Train"/>
                <ej:Column DataType="string" Field="Station/Depot" HeaderText="Station/Depot"/>
                <ej:Column DataType="string" Field="How Handed In" HeaderText="How Handed In"/>
                <ej:Column DataType="string" Field="Going To Station" HeaderText="Going To Station"/>
                <ej:Column DataType="string" Field="Category"/>
                <ej:Column DataType="string" Field="Sub Category"/>
                <ej:Column DataType="string" Field="Cat_Other_Notes" HeaderText="Other Notes"/>
                <ej:Column DataType="string" Field="Colour"/>
                <ej:Column DataType="string" Field="GBP Cash Amount"/>
                <ej:Column DataType="string" Field="Foreign Cash Amount"/>
                <ej:Column AllowEditing="False" DataType="string" Field="ID Present"/>
                <ej:Column AllowEditing="False" DataType="string" Field="High Value Present"/>
                <ej:Column AllowEditing="False" DataType="string" Field="Important Documents Present"/>
                <ej:Column DataType="string" Field="IMAGE_FILE" HeaderText="Image"/>
                <ej:Column DataType="string" Field="Found By"/>
                <ej:Column DataType="string" Field="Colleagues Name"/>
                <ej:Column DataType="string" Field="HAS_LOOKED_AT_FLAG" HeaderText="Been Reviewed?"/>

And the code-behind (called from Page_Load)

private void ConfigureGrid()
        // Configure grid options
        ctl00.AllowSorting = true;
        ctl00.AllowPaging = true;
        ctl00.AllowReordering = true;
        ctl00.AllowResizeToFit = true;
        ctl00.AllowResizing = true;

        // Configure Data Source
        ctl00.DataSourceID = "SqlDataSource1";
        ctl00.DataSourceCachingMode = Syncfusion.JavaScript.DataSourceCachingMode.None;

        // Attach Events
        ctl00.ServerRowSelected += Unnamed1_ServerRowSelected;

And finally some script 

$(function () {
            var gridObj = $("#<%= ctl00.ClientID %>").ejGrid("instance");
            scrolWidth = gridObj.model.scrollSettings.width / $(".cols-sample-area").width();
            if (gridObj.element.width() > $(".cols-sample-area").width()) {
             var scrollerwidth = Math.floor($(".cols-sample-area").width())
            gridObj.option("model.scrollSettings", { width: scrollerwidth })
            scrolWidth = 1;
        $(window).resize(function () {
            var gridobj = $("#<%= ctl00.ClientID %>").data('ejGrid');

Please help i have no idea what im doing....

1 Reply

PK Prasanna Kumar Viswanathan Syncfusion Team January 15, 2016 12:25 PM UTC

Hi Josh,

Thanks for contacting Syncfusion support.

We analyzed your query and we need some details to provide the prompt solution. So, please confirm the following details

1.       You have mentioned that you need a grid with parent. Are you expecting hierarchy or details template?

2.       Do you need a scroll bars according to the parent width?

Prasanna Kumar N.S.V

Live Chat Icon For mobile
Up arrow icon