Grid width is not getting set what ever I tried

1 Answer 59 Views
Grid
TelerikDev
Top achievements
Rank 1
TelerikDev asked on 06 Jul 2023, 04:40 AM
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;" })
)

1 Answer, 1 is accepted

Sort by
0
Anton Mironov
Telerik team
answered on 10 Jul 2023, 10:54 AM

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

As of R2 2023, the default icon type will be SVG instead of Font. See this blogpost for more information.

TelerikDev
Top achievements
Rank 1
commented on 11 Jul 2023, 02:39 AM

No luck either still see a scroll

Anton Mironov
Telerik team
commented on 13 Jul 2023, 07:51 AM

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
Telerik team
commented on 13 Jul 2023, 07:53 AM

Furthermore, the example could be sent either within a sample project or by using a REPL, or a dojo.
Tags
Grid
Asked by
TelerikDev
Top achievements
Rank 1
Answers by
Anton Mironov
Telerik team
Share this question
or