Grid width is not getting set what ever I tried

[TelerikDev]

I am using the following syntax and followed few examples to resize the grid but couldn't how can I adjust the width of the gird

 @(Html.Kendo().Grid(Model)
    .Name("Grid")
    .Columns(columns => {
        columns.Bound(p => p.ItemId).Visible(false);
        columns.Bound(p => p.ItemName).HeaderTemplate("ItemID")
        .Template(@<text><a href="@Url.Action("ItemDetail", "Storage", new { ItemId = item.ItemId })">@item.UnNumber</a></text>);
columns.Bound(p => p.UnNumber).HeaderTemplate("UN Number").Filterable(false);
columns.Bound(p => p.PackingInstructions).HeaderTemplate("Packing Instructions");
columns.Bound(p => p.IsCargo).HeaderTemplate("Cargo Only");
columns.Bound(p => p.SdsSheetFileName).HeaderTemplate("SDS #1")
    .Template(@<text><a href="@Url.Action("GetReport", "Storage", new { fileName = item.SdsSheetFileName })" target="_blank">@item.SdsSheetFileName</a></text>);
        columns.Bound(p => p.GroundShipmentFileName).HeaderTemplate("Example Shipment Ground (Fully Regulated)")
        .Template(@<text><a href="@Url.Action("GetReport", "Storage", new { fileName = item.GroundShipmentFileName })" target="_blank">@item.GroundShipmentFileName</a></text>);
        columns.Bound(p => p.NextDayShipmentFileName).HeaderTemplate("Example Shipment Next Day (Fully Regulated)")
        .Template(@<text><a href="@Url.Action("GetReport", "Storage", new { fileName = item.NextDayShipmentFileName })" target="_blank">@item.NextDayShipmentFileName</a></text>);
        columns.Bound(p => p.FreightShipmentFileName).HeaderTemplate("Example Shipment Freight (Fully Regulated)")
        .Template(@<text><a href="@Url.Action("GetReport", "Storage", new { fileName = item.FreightShipmentFileName })" target="_blank">@item.FreightShipmentFileName</a></text>);
        columns.Bound(p => p.GroundShipmentLimitedFileName).HeaderTemplate("Example Shipment Ground (Limited Quantity)")
        .Template(@<text><a href="@Url.Action("GetReport", "Storage", new { fileName = item.GroundShipmentLimitedFileName })" target="_blank">@item.GroundShipmentLimitedFileName</a></text>);
        columns.Bound(p => p.NextDayShipmentLimitedFileName).HeaderTemplate("Example Shipment Next Day (Limited Quantity)")
        .Template(@<text><a href="@Url.Action("GetReport", "Storage", new { fileName = item.NextDayShipmentLimitedFileName })" target="_blank">@item.NextDayShipmentLimitedFileName</a></text>);
        columns.Bound(p => p.FreightShipmentLimitedFileName).HeaderTemplate("Example Shipment Freight (Limited Quantity)")
        .Template(@<text><a href="@Url.Action("GetReport", "Storage", new { fileName = item.FreightShipmentLimitedFileName })" target="_blank">@item.FreightShipmentLimitedFileName</a></text>);
    })
    .Pageable()
    .Sortable()
    .Filterable()
    .Navigatable()
    .Size(ComponentSize.Small)
     .HtmlAttributes(new { style = "height: 550px;width:500px;" })
)

[Anton Mironov]

Hello,

Thank you for the code snippet and details provided.

In order to achieve the desired behavior, I would recommend using the "Width" configuration of the Grid.

Here is an example:

        @(Html.Kendo().Grid<TelerikMvcApp6.Models.OrderViewModel>()
            .Name("grid")
            .Columns(columns =>
            {
                columns.Bound(p => p.OrderID).Filterable(false);
                columns.Bound(p => p.Freight);
                columns.Bound(p => p.OrderDate).Format("{0:MM/dd/yyyy}");
                columns.Bound(p => p.ShipName).Encoded(false);
                columns.Bound(p => p.ShipCity);
            })
            .Pageable()
            .Sortable()
            .Scrollable()
            .Filterable(f => f.Mode(GridFilterMode.Row))
            .HtmlAttributes(new { style = "height:550px;" })
            .DataSource(dataSource => dataSource
                .Ajax()
                .PageSize(20)
                .Read(read => read.Action("Orders_Read", "Grid"))
            )
            .Width(200)
        )

Give a try to the approach above and let me know if this is the desired result.

Kind Regards,
Anton Mironov
Progress Telerik

[TelerikDev]

No luck either still see a scroll

[Anton Mironov]

Hi,

Thank you for the image provided.

The fastest route to getting you up and running is if you could provide a runnable, isolated, sample project. Examining this project will let us replicate the issue locally and further troubleshoot it.

Looking forward to hearing back from you.

Best Regards,
Anton Mironov

[Anton Mironov]

Furthermore, the example could be sent either within a sample project or by using a REPL, or a dojo.