RadGrid column size change when EditMode property is set to "Batch

[Agustin]

Hi, I have a RadGrid with some columns with different widths defined in the markup file aspx. Radgrid is displayed fine, but if I set the EditMode property to "Batch" then all column widths are moved to the same value (a proportional width = total width / number of columns). If I remove EditMode="Batch" from MasterTableView item the Radgrid show the correct width for each columns

Please, have you some idea to help me to fix this issue?

[Eyup]

Hello Agustin,

 

I've tested this behavior and it does not happen on my side. Perhaps, you can use some CSS to modify the inner input elements rendered in Batch editing to keep the same size of the cells.

If this does not work, you can open a formal support ticket and send us a very basic runnable sample to demonstrate the mentioned issue so we can look further at it.

 

Regards,
Eyup
Progress Telerik

[Robert Stoppel]

Hello Eyup,

This happens to me as well. I'm trying to find the solution without success.

I'm on version 2020.3.1021.45

Robert Stoppel

[Attila Antal]

Hi Robert,

I have tested this scenario and I was unable to replicate the issue.

I am using the HeaderStyle-Width to set the width of all Columns to 150px. But I am changing that for the last column to 200px. In total, they are as wide as the Grid-Width and not more.

<telerik:RadGrid ID="RadGrid1" runat="server" AllowPaging="True" Width="800px" OnNeedDataSource="RadGrid1_NeedDataSource">
    <MasterTableView AutoGenerateColumns="False" DataKeyNames="OrderID" EditMode="Batch">
        <HeaderStyle Width="150px" />
        <Columns>
            <telerik:GridBoundColumn DataField="OrderID" DataType="System.Int32"
                FilterControlAltText="Filter OrderID column" HeaderText="OrderID"
                ReadOnly="True" SortExpression="OrderID" UniqueName="OrderID">
            </telerik:GridBoundColumn>
            <telerik:GridDateTimeColumn DataField="OrderDate" DataType="System.DateTime"
                FilterControlAltText="Filter OrderDate column" HeaderText="OrderDate"
                SortExpression="OrderDate" UniqueName="OrderDate">
            </telerik:GridDateTimeColumn>
            <telerik:GridNumericColumn DataField="Freight" DataType="System.Decimal"
                FilterControlAltText="Filter Freight column" HeaderText="Freight"
                SortExpression="Freight" UniqueName="Freight">
            </telerik:GridNumericColumn>
            <telerik:GridBoundColumn DataField="ShipName"
                FilterControlAltText="Filter ShipName column" HeaderText="ShipName"
                SortExpression="ShipName" UniqueName="ShipName">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="ShipCountry"
                FilterControlAltText="Filter ShipCountry column" HeaderText="ShipCountry"
                SortExpression="ShipCountry" UniqueName="ShipCountry">
                <HeaderStyle Width="200px" />
            </telerik:GridBoundColumn>
        </Columns>
    </MasterTableView>
</telerik:RadGrid>

Then I switched between EditModes but I did not experience any difference in the Column's width.

Here is the backend code to test my Grid setup

protected void RadGrid1_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)
{
    (sender as RadGrid).DataSource = Enumerable.Range(1, 70).Select(x => new
    {
        OrderID = x,
        OrderDate = DateTime.Now.Date.AddDays(x),
        Freight = x * .1,
        ShipName = "Name " + x,
        ShipCountry = "Country " + x
    });
}

 

Maybe there's another setting in the Grid that you have and changes the Column's Width. If you enable Filtering, that will automatically expand the Columns to as wide as the Filter Controls is. That is done automatically so that the Filter Control will be visible at all times.

[Robert Stoppel]

Agustin,

Telerik support finally provided proper solution to this problem. It's all about table-layout that is set to Fixed when Batch is selected.

In that case Browser does this:

From Attilla:

The BatchEditing sets the table-layout to Fixed to smoothen the UX and this is the intended behavior.

However, if you'd like to force the layout to be Automatic, you can override the built-in CSS.

Example:

.RadGrid .rgMasterTable {
    table-layout: auto !important;
}

[Agustin]

Robert, I fixed my problem setting the Width to the Header of the column (first row in the table). I'm understanding now the Grid behavior

Thanks for your solution