I have many, many grids in the ASP.NET Core application but there is one template where the column resizing is not working. So the resize icon shows up when you hover but moving it left or right does nothing. And the hard coded column widths if I change the values have no effect.
.Resizable(resize => resize.Columns(true))
4 Answers, 1 is accepted
Have in mind that when all columns have pixel widths and their sum is less than the width of the Grid, the column widths are ignored, and the browser expands all columns.
Having said that could you please make sure there are not JS errors in the console of your browser?
Finally, providing us with the full configuration of the grid would definitely help us fully understand the case and we will be able to provide further assistance.
Regards,
Georgi
Progress Telerik
Rank 2
Hello Georgi,
There are no JS errors. The same strategy and markup in working in other templates no worries.
This scenario is a bit complex in that the column widths have to be set manually because there is a razor partial view showing above it that has a custom filtering section with possible selections for each column and so the Kendo column sizes have to be set to closely match the area above as close as possible.
Using Kendo custom filtering would not work on this without retooling like 70 grids or so.
@Html.Partial("_ZenerDisplayFilter", @Model.ProductFiltering.Zener)
<div class="row" id="productsgrid" style="margin-bottom:70px;margin-top:5px;min-width:1500px;">
</div>
@(Html.Kendo().Grid<MCC.Core.Model.Composite.RectifierComposite>()
.Name("productsgrid")
.Columns(columns =>
{
columns.Bound(a => a.ProductRoot.Name).ClientTemplate(
"<a href='" + Url.Action("ZenersDetail", "ProductCategories",
new { productName = "#= ProductRoot.Name #" }) + "'>#= ProductRoot.Name # </a>"
).Width(135).Title("Product");
columns.Bound(a => a.ProductRoot.ProductConfigurationType).Width(135).Title("Configuration");
columns.Bound(a => a.ProductRoot.Package).Width(140).Title("Package");
columns.Bound(a => a.Zener.PD).Width(100).Title("IF");
columns.Bound(a => a.Zener.VZ).Width(100).Title("VRWM");
columns.Bound(a => a.Zener.IZT).Width(100).Title("VF");
columns.Bound(a => a.Zener.IR).Width(126).Title("IR");
columns.Bound(a => a.ProductRoot.ProductStatus).Width(113).Title("Status");
columns.Bound(a => a.ProductBuyLink).ClientTemplate(
"<a href='" + "#= ProductBuyLink #" + "' target=blank>" + "<img title='Buy Now' alt='Buy Now' height=25 src='../../images/shoppingcart_24.png'/></a>"
).Width(55).Title("Buy").Sortable(false);
columns.Bound(a => a.ProductBuyLink).ClientTemplate(
"<a href='" + "#= ProductCheckStockLink #" + "' target=blank>" + "<img title='Check Stock' alt='Check Stock' height=24 src='../../images/checkstock_24.png'/></a>"
).Width(55).Title("Stock").Sortable(false);
})
.Resizable(resize => resize.Columns(true))
.Pageable(pageable => pageable
.PageSizes(true)
.ButtonCount(5)
.Refresh(true)
)
.Sortable()
.Reorderable(reorderable => reorderable.Columns(true))
.Groupable()
.Excel(e => e.AllPages(true))
.ToolBar(toolbar =>
{
toolbar.Pdf();
toolbar.Excel();
})
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(50)
.Model(model => model.Id(ac => ac.ProductRoot.PrimaryKey))
.Model(model =>
{
model.Id(ac => ac.ProductRoot.PrimaryKey);
model.Field(ac => ac.ProductRoot.ModifiedUser).Editable(false);
model.Field(ac => ac.ProductRoot.CreatedByFK).Editable(false);
model.Field(ac => ac.ProductRoot.CreatedDT).Editable(false);
model.Field(ac => ac.ProductRoot.LastModifiedDT).Editable(false);
})
.Read(read => read.Action("Zeners_Read", "ProductCategories"))
)
)
</div>
I have examined the provided configuration and noticed that scrolling is not enabled. The server wrapper has its scrolling disabled by default.
Could you please enable scrolling (.Scrollable()) and let me know if the issue still occurs?
Regards,
Georgi
Progress Telerik
Rank 2
Thank you Georgi,
That was it. The columns are not sizing.
Best wishes,
Reid