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: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Grid Configuration

Thread ID:

Created:

Updated:

Platform:

Replies:

121668 Jan 14,2016 05:38 PM UTC Jan 15,2016 12:25 PM UTC ASP.NET Web Forms 1
loading
Tags: Grid
josh
Asked On January 14, 2016 05:38 PM UTC

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">
            <Columns>
               <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?"/>
            </Columns>
            </ej:grid>
    </div>


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');
            gridobj.element.find(".e-gridcontent").ejScroller("refresh");
        });



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

Prasanna Kumar Viswanathan [Syncfusion]
Replied On 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?

Regards,
Prasanna Kumar N.S.V

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

or the page will be automatically redirected to 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

;