Set columns width when using kendo-grid-column-group

[Hadas]

Hi,

I am using the kendo grid with kendo-grid-column-group, when I try adding a width to the grid and to each column, the grid does it own thing, and doesnt set the with of the column according to what I wrote .

It sets other columns, and sometimes hides columns, 

What are the rules??

 

Thanks

<kendo-grid-column-group title=Name" >
            <kendo-grid-column field="Name" title="Name" [width]="100">
                <ng-template kendoGridCellTemplate let-dataItem>
                    <span class="whole-cell text-center" )">
                        {{ Name }}
                    </span>
                </ng-template>
            </kendo-grid-column>

        </kendo-grid-column-group>

[Svet]

Hi Hadas,

If the grid's width is larger, than the total width of all columns, then the the extra space will be equally distributed to all columns.

If the grid's width is smaller, that the total width of all columns, than a horizontal scrollbar will appear on the bottom of the grid.

We can further set the grid's scrollable property to 'none' in order to not allow the horizontal scrollbar. In this case, if the width of the grid is smaller, than the width of all columns, the columns will be shrunk proportionately. Check the following example demonstrating this behavior:
https://www.telerik.com/kendo-angular-ui/components/grid/api/GridComponent/#toc-scrollable 

You can also check the following post on the same topic:
https://www.telerik.com/forums/kendo-grid-column-width-is-not-applied#CuFCyiYWTEG-4PC65RJ4Bg

I hope this helps. Let me know in case additional information is needed for this case. 

Regards,
Svetlin
Progress Telerik

[Hadas]

Thank you for your reply,

When I use <kendo-grid-column-group> where do I set the width of each column?

I seems to me that since I am using kendo-grid-column-group then the width is getting messed up... could that be?

[Svet]

Hi Hadas,

It looks like, I did not send the correct link for the example in the previous post. Here it is:
https://stackblitz.com/edit/angular-lpf5fg-zykisi?file=app/app.component.ts

We need to set the width of each column inside the <kendo-grid-column-group>:

<kendo-grid-column-group title="Product Info">
    <kendo-grid-column
        field="ProductID"
        [width]="50"
        [minResizableWidth]="30"
        title="ID">
    </kendo-grid-column>

    <kendo-grid-column
        field="ProductName"
        title="Product Name"
        [width]="360">
    </kendo-grid-column>
</kendo-grid-column-group>

Check the example and let me know in case any further assistance is required for this case. 

I hope this helps.

Regards,
Svetlin
Progress Telerik