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....
