Set column widths, wrap text

[Jerry Lawrence]

In the MVC grid, I would like to set the column widths to a fixed size. I have tried this in the controller:

gridModel.TableDescriptor.Columns[1].Width = 20;

It appears that the columns are auto sizing but I can't find where to turn autosizing columns off. There is an AllowColumnResize in GridTableDescriptor, but I'm not sure where/how to set that.

If the columns are fixed width, the text in the columns needs to auto wrap in the cell - which means the cell height needs to be adjusted. Is this doable?

Thanks,

Jerry

[Balaji M]

Hi Jerry,

Thank you for your interest in syncfusion products.

I would like to set the column widths to a fixed size
We regret to let you know that currently, we don't support column width in the current version. We will implemented this in our forthcoming release Essential Studio.

I have created an simple workaround sample to reported column width issue.

Please find the sample from the below link.
http://files.syncfusion.com/support/grid_mvc/Incidents/F89659/MVC_SampleGrid.zip

Please refer the code snippet from the below.
[js]

 Sys.Application.add_load(function() {
           
            //Set columnIndex, width 
            var columnIndex = 2;
            var colWidth = 450;
            //Find the table header cells
            var th = $($($('#Grid1').find("thead:first")[0]).find("tr:last")).find("th");
            //set the column header width
            var widthDiff = colWidth - th[columnIndex].offsetWidth;
            th[columnIndex].style.width = colWidth + "px";
            //find the div element inside the header and update the width [Note: calculate the padding values,here padding value is 11]
            var div = $(th[columnIndex]).find("div");
            $(div[0]).width(colWidth - 11 + "px");
            //Update the Grid width by the modified column width
            $("#Grid1")[0].style.width = parseInt($("#Grid1")[0].style.width) + widthDiff + "px";
            
        });

2.Autosizing columns off
We suggest you to use AllowResizing property in GridPropertyModel to enable/disable the resizing feature.

3.Columns needs to auto wrap in the cell

We regret to let you know that currently, we don't support Wrap Text in the current version. We will implemented this in our forthcoming release Essential Studio.

Please let me know if you have any concerns.

Regards,
M. Balaji.

[Scott Popovic]

Hi, I tried this workaround but get an error "Microsoft JScript runtime error: Object expected" on the line

var th = $($($('#RosterGrid').find("thead:first")[0]).find("tr:last")).find("th");

where RosterGrid is the name of the grid control.

[Sindhuja M]

Hi Henryk ,

Thank you for your interest in Syncfusion products.

I am afraid that I am unable to reproduce the reported issue. I have created a simple sample to test this issue and I am able to deal with the column width issue successfully and the sample is available from below link.


http://files.syncfusion.com/support/grid_mvc/Incidents/F89659/SampleGrid.zip


Please have a look at the above sample and if still the issue exists, could you please try reproducing it in the above sample and send us the modified sample so that we could sort out the cause of the issue and provide you a solution or share your sample with us?

Please let me know if you have any concerns.

Thanks and Regards,
Sindhuja.M

[Scott Popovic]

Hi,

After installing latest version (7.403.0.20) of the grid component and running the sample project I now get an error "Invalid argument." on the last line of the view script, line:

$("#Grid1")[0].style.width = parseInt($("#Grid1")[0].style.width) + widthDiff + "px";

Click continue and it seems to do its thing. Haven't tried running it outside the dev environment yet however.

Project attached.

Cheers,
Henryk.



MVC_SampleGrid_Henryk_9a5fee99.zip

[Balaji M]

Hi Henryk

Thank you for your interest in Syncfusion products.

Our Essential Grid have been revamped to provide an enhanced support to extensive client side functionality. The reported issue raised because of RegisterClientMvcResourceManager. Our current [7.403.0.20] grid uses new MvcStaticResourceManager to register the css and scripts required to display and add functionality to the controls.

Add the Resource Manager to the Site.Master page under the tag as follows.


.....

<%=Html.RegisterStaticResources() %>


we suggest you to add your Sys.Application.add_load function (ie. column width funtion) after the RegisterStaticResources call method in site.master.

Refer the below code snippet, which illustrates this.

.....
.....
.....

<%=Html.RegisterStaticResources() %>



Please refer the updated sample from the below location.
http://files.syncfusion.com/support/grid_mvc/Incidents/v7.4.0.20/F89659/MVC_SampleGrid.zip

We would also suggest you to refer the below documentation link for more details.

http://help.syncfusion.com/User%20Interface/ASP.NET%20MVC/Grid

Please let me know if you have any concerns.

Regards,
M. Balaji.

[Henryk Schneider]

Hi,

This works fine on views where the grid exists, but when I load a page without the grid, I get an error :

Microsoft JScript runtime error: 'offsetWidth' is null or not an object.

On the line:

var widthDiff = colWidth - th[columnIndex].offsetWidth;

I'm assuming this is because the script is in the site.master file. So I just put that and everything below it in an if block:

if (th.length != 0) {
...
}

I'm not sure if there's a better way to get around it.

Also, after all this, I have realised I really need the auto wrap to work on a cell, because when we get some long text, even tthough I've set the column, it gets pushed out anyway, also pushing out the following columns.

Thanks.
H

[Balaji M]

Hi Henryk,

We regret for the delayed response.

The reported issue raised due to non-existence of grid in the View. We suggest to use the following code snippet

to validate the Grid existence.

[.js]

$('#Grid1').length>0


Refer the below code snippet, which illustrates this.
[.js]

Sys.Application.add_load(function() {
//Set columnIndex, width
var columnIndex = 2;
var colWidth = 450;
//Validate the Grid appearance
if ($('#Grid1').length > 0) {
//Find the table header cells
var th = $($($('#Grid1').find("thead:first")[0]).find("tr:last")).find("th");
//set the column header width
var widthDiff = colWidth - th[columnIndex].offsetWidth;
th[columnIndex].style.width = colWidth + "px";
//find the div element inside the header and update the width [Note: calculate the padding

values,here padding value is 11]
var div = $(th[columnIndex]).find("div");
$(div[0]).width(colWidth - 11 + "px");
//Update the Grid width by the modified column width
$("#Grid1")[0].style.width = parseInt($("#Grid1")[0].style.width) + widthDiff + "px";
}
});


Please refer the updated sample from the below link.

http://files.syncfusion.com/support/grid_mvc/v7.4.0.20/F89659/MVC_SampleGrid.zip

Please let us know if you have any concerns.

Regards,
M. Balaji