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

Column auto-fit on grid resize with differing column widths

Thread ID:

Created:

Updated:

Platform:

Replies:

100562 Aug 16,2011 08:30 PM UTC Aug 19,2011 08:34 AM UTC ASP.NET MVC (Classic) 3
loading
Tags: Grid
Mark Treveil
Asked On August 16, 2011 08:30 PM UTC

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 [Syncfusion]
Replied On 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




Mark Treveil
Replied On 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


Eswari S [Syncfusion]
Replied On 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


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.

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

;