Column auto-fit on grid resize with differing column widths

[Mark Treveil]

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

[Eswari S]

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

[Mark Treveil]

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

[Eswari S]

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