grid column width remaining available grid space ?

[issam]

hi,

is there a way to make a specific column get all available remainnig width :

from examples :

 var grid = new ej.grids.Grid({

        dataSource: window.categoryData,

        allowPaging: true,

        toolbar: ['Search'],

        columns: [

            { field: 'CategoryName', headerText: 'Category Name', width: 160 },

            { field: 'ProductName', headerText: 'Product Name' },

            { field: 'QuantityPerUnit', headerText: 'Quantity Per Unit', width: 170, textAlign: 'Right' },

            { field: 'UnitsInStock', headerText: 'Units In Stock', width: 170, textAlign: 'Right' },

            {

                field: 'Discontinued', headerText: 'Discontinued', width: 150,

                textAlign: 'Center', displayAsCheckBox: true, type: 'boolean'

            }

        ],

        pageSettings: { pageCount: 5 }

    });

let's say that the grid have 100% width, i want that the 'ProductName' have all available width .

i have tried with 'star' and '*' without success .

thanks .

[Venkatesh Ayothi Raman]

Hi Issam, 

Thanks for the using Syncfusion products. 

Normally, the column gets all available remaining width which is not specified any width in the column’s property. This is the default behavior of the Grid. So, if you want to specify a column get all available remaining width then we suggest to don’t specify a width in columns. Please refer to the following code example, 

let grid: Grid = new Grid( 

        { 

            dataSource: data, 

            columns: [ 

                { field: 'OrderID', headerText: 'Order ID', width: 120, textAlign: 'Right' }, 

                { field: 'CustomerID', headerText: 'Customer Name'}, 

                { field: 'OrderDate', headerText: 'Order Date', width: 130, format: 'yMd', textAlign: 'Right' }, 

                { field: 'Freight', width: 120, format: 'C2', textAlign: 'Right' }, 

                { field: 'ShippedDate', headerText: 'Shipped Date', width: 140, format: 'yMd', textAlign: 'Right' }, 

                { field: 'ShipCountry', headerText: 'Ship Country', width: 150 } 

            ] 

        }); 

    grid.appendTo('#Grid'); 

Sample: https://plnkr.co/edit/gqiN05nQ6UqK0xawHmIt?p=preview 

Output: 

 

Regards, 

Venkatesh Ayothiraman. 

[issam]

thanks for the answer,

for some reason it didn't work for me , i had to add this in my css to get the correct behaviour

  .e-table

    {

        width: 100%;

    }

[Venkatesh Ayothi Raman]

Hi Issam, 

Thanks for the update. 

We have tried to reproduce the reported issue at our end while using the style which you have shared with us, but it unsuccessful. We have prepared a sample with your code example which you have shared with us and it can be referred from following link, 

Sample: https://plnkr.co/edit/h5N7CVMk7FcxL1FEdxgY?p=preview 

If you still face the same issue, then could you please share the following details? 

1)      Share the Grid code example. 

2)      Share issue reproducing scenario. 

3)      Share the issue video or screenshot. 

4)      Modified the given sample as issue reproducible. 

It would be helpful for us to find the problem and provide the better solution as earliest. 

Regards, 

Venkatesh Ayothiraman.