In the following article I would show how you can specify custom column width for Data Grid in eForms by using some minimal JavaScript.
Suppose your grid has 3 columns where you wish to specif 25% width to first 2 columns each and 50% width to last column.
You could insert CSS in the CSS injector as shown below where in controlholdername you would specify the internal name of the Data Grid and for the colgroup col:nth-child specify the index of the control. The index for 1st column is 1 and so on.
[controlholdername=’DataGrid1′] table colgroup col:nth-child(1)
{
width:25%
}
[controlholdername=’DataGrid1′] table colgroup col:nth-child(2)
{
width:25%
}
[controlholdername=’DataGrid1′] table colgroup col:nth-child(3)
{
width:50%
}
The resulting screen in preview might look like the one shown below
I have also attached the sample application just in case you wish to try to import and try this application on your own AgilePoint subscription