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
close icon

Column auto-fit on grid resize with differing column widths

I want display a grid in an MVC 3 / Syncfusion v3.0 app where

1. The grid width adjusts as the browser window is resized. (Easy).

2. All columns except one have a fixed size (each column being different and set on create).

3. The variable size column adjusts to fill the available space in the grid.

I appears that the out of the box grid only supports either
a) equal size, auto-fill columns
or
b) fixed size columns, not auto-resize

I am looking to extend the grid with client-size scripting to
resize the columns dynamically.

Presumably I can call

get_ColumnResizer().resizeColumn(colIndex, width)

on the window.onresize event.

Have you any advice, or suggestions for better way to achieve this?

How could I package up this type of grid extension to make it easily reuseable in my project?

Thanks
Mark


3 Replies

ES Eswari S Syncfusion Team August 18, 2011 11:08 AM UTC


Hi Mark,

Query #1 : The grid width adjusts as the browser window is resized

Grid Width will automatically change when window width is resized.

Query #2 & 3: All columns except one have a fixed size and variable size columns

We can set width for individual columns by using the Width() property. Also , the variable size column adjusts with the available space in the grid.

Please refer to the following code snippets:

<%=Html.Syncfusion().Grid("SampleGrid")
.Column(column =>
{
column.Add(p => p.OrderID).HeaderText("Order ID").Width(130);
column.Add(p => p.EmployeeID).HeaderText("Employee ID").Width(125);
column.Add(p => p.CustomerID).HeaderText("Customer ID").Width(170);
column.Add(p => p.ShipCountry).HeaderText("Ship Country").Width(100);
column.Add(p => p.Freight).HeaderText("Freight");

})

%>
uery #4 : equal size, auto-fill column and fixed size columns, not auto-resize.

Grid MVC will supports the equal size and fixed size columns.

Query #5: I am looking to extend the grid with client-size scripting to resize the columns dynamically.

We would also suggest you to use the ColumnResizer().resizeColumn(colIndex, width) to resize the columns dynamically.

We have prepared the sample for your reference with variable sized columns which can also dynamically resized and the same can be downloaded from the following link:

Sample-661809850.zip


Note: If you want to run the sample in MVC3, change the configuration manager as Debug_MVC3/Release_MVC3.To briefly know about that steps please kindly refer this document link.

How to Switch between MVC2 to MVC3

Steps to check with the sample :

Step #1: Width of the columns calculated dynamically in Sys.Application.add_load event.

[Site. Master]



Step #2 : Window resize event.

[ASPX]


Please try this and let us know if you need any further assistance.

Regards,
Eswari.S





MT Mark Treveil August 18, 2011 02:14 PM UTC

Thanks guys.

It will take me while to absorb all that, but on the face of it, the most comprehensive response I've ever had a forum query on any product/technology in the last 20 years (or is 30?).

Much appreciated.

Mark



ES Eswari S Syncfusion Team August 19, 2011 08:34 AM UTC

Hi Mark,

Thanks for the update.

Happy to hear that you have everything working . Do not hesitate to update if you have any questions.

Regards,
Eswari.S


Loader.
Live Chat Icon For mobile
Up arrow icon