When the Grid is set initially with a sort operation, the icon for the column will show twice in a UI for ASP.NET MVC web application.
Using the Kendo UI Grid template, add the sorting configuration to the dataSource:
@(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.OrderViewModel>()
.Name("grid")
.Columns(columns => {
columns.Bound(p => p.OrderID).Filterable(false).Width(200);
columns.Bound(p => p.Freight).Width(100);
columns.Bound(p => p.OrderDate).Format("{0:MM/dd/yyyy}").Width(140);
columns.Bound(p => p.ShipName);
columns.Bound(p => p.ShipCity).Width(150);
})
.Pageable()
.Sortable()
.Scrollable()
.Filterable()
.HtmlAttributes(new { style = "height:430px;" })
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(20)
.Read(read => read.Action("Orders_Read", "Grid"))
.Sort(s => s.Add("OrderID").Descending())) //Added Predefined Sort
)
The icon should only appear once for the sorted column.
Hello,
I think there is a bug with the DataTimeOffset field when used in a Grid. It cannot display correctly and is showing something like /Date(1364927400000)/. I have to retrieve my data from database as DateTimeOffset format and then use a new ViewModel to convert the DateTimeOffset values to DateTime values. This is really annoying.
Could you let me know if there is a way a DateTimeOffset field can be supported in the grid? Sometimes you do have to display the time zone info.
I hope this can be fixed in a future release.
Thanks,
Sam
When I use a grid, I can enable Filterable and the column shows me when I am filtering it; however if I enable ColumnMenu I have no indication if I am filtering on that column. We've used a work around to handle this state ourselves, but its ugly and I think this should be part of the core product.
@(Html.Kendo().Grid<ShipmentGrid>()
.Name("grid")
.AutoBind(false)
.Columns(columns =>
{
columns.Template(@<text></text>).Width(50).Title("PDFs").ClientTemplate($"<a href='javascript:" + jsPage + $".openDocumentWindow(#=AccountId#, #=OrderNumber#, #=OrderLineId#, #=OrderLineNumber#)'><img src={Url.Content("~/Content/images/pdficon_small.png")} /></a>");
columns.Bound(m => m.CustomerName).Width(200).Title("Customer").HeaderTemplate("Customer <span style='float:center' class='k-icon k-i-filter'></span>").Filterable(f => f.Multi(true).Search(true)).Sortable(true);
columns.Bound(m => m.PurchaseOrderNumber).Width(100).Title("PO").HeaderTemplate("PO <span style='float:center' class='k-icon k-i-filter'></span>").Filterable(f => f.Multi(true).Search(true)).Sortable(true);
})
.HtmlAttributes(new { style = "font-size:0.85em;" })
.Filterable()
.ColumnMenu()
.Reorderable(reorder => reorder.Columns(true))
.Resizable(r => r.Columns(true))
.Scrollable(s => s.Height(340))
.Pageable(pageable => pageable
.Refresh(true).ButtonCount(10)
.PageSizes(new [] { 25, 250, 2500 })
)
.Sortable(sortable => sortable
.SortMode(GridSortMode.SingleColumn)
)
.ClientDetailTemplateId("itemdetail")
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Url("/api/shipments").Data(jsPage + ".getParameters"))
.PageSize(2500)
.ServerOperation(false)
.Events(events => events
.Error(jsPage + ".GridService.onError")
.RequestStart(jsPage + ".GridService.onRequestStart")
.RequestEnd(jsPage + ".GridService.onRequestEnd")
)
)
.NoRecords()
.Events(events => events.DataBound(jsPage + ".onDataBound"))
)
Dragging a row from a Grid to another empty Grid is not working.
The row is not inserted in the empty Grid
The row should be inserted in the empty Grid.
When a UI for ASP.NET MVC Grid contains a PDF or Excel button within the Toolbar, the IconClass is being ignored.
.ToolBar(t => t.Excel().Text("Export to Excel").IconClass("icon here"))
The specific icon should be added based on the IconClass.
Reproducible with a Grid nested in the content of the tab, or loaded in the tab through AJAX.
Dojo example: https://dojo.telerik.com/eJuHaTan
The rows cannot be reordered.
The rows can be reordered.
Bug report
PersistSelection does not work when GroupPaging is enabled. Error is thrown: "Cannot read property 'Id' of undefined"
Reproduction of the problem
Dojo: https://dojo.telerik.com/aKixuZAy
Expected/desired behavior
No error shall be thrown and rows should be persisted when GroupPaging is enabled
Environment
Kendo UI version: 2020.2.617
Browser: [all]
Hi.
I'd like to request the ability to sort on multiple columns of a grid, allow unsorting a column, but the grid must have at least one columns sorted.
An exception is thrown when calling `ToDataSourceResult` from the `Kendo.DynamicLinq` library if there are no columns sorted:
System.NotSupportedException: The method 'Skip' is only supported for sorted input in LINQ to Entities. The method 'OrderBy' must be called before the method 'Skip'
Thank you.
Regression introduced in R3 2023 SP1
If an initially hidden column is shown with the showColumn API method, the column header remains hidden because of the k-hidden class that remains in the th element.
<input type="button" name="btn1" value="Show the hidden columns" onclick="btn1Click()" />
<br />
<br />
@(Html.Kendo().Grid<TelerikMvcApp1.Models.OrderViewModel>()
.Name("Grid")
.Columns(columns =>
{
columns.Bound(p => p.OrderID);
columns.Bound(p => p.Freight);
columns.Bound(p => p.ShipName);
columns.Bound(p => p.ShipCity).Hidden(true);
columns.Bound(p => p.OrderDate).Format("{0:MM/dd/yyyy}").Hidden(true);
})
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(20)
.Read(read => read.Action("Orders_Read", "Grid"))
)
)
<script>
function btn1Click() {
var grid = $("#Grid").data("kendoGrid");
grid.showColumn("ShipCity");
grid.showColumn("OrderDate");
}
</script>
The hidden columns are shown but their headers remain hidden.
As a workaround, the k-hidden class can be removed from the column header, after showing the column:
grid.showColumn("ShipCity");
$(".k-grid .k-header[data-field='ShipCity']").removeClass("k-hidden");
The columns and their headers are shown.
https://demos.telerik.com/aspnet-mvc/grid/right-to-left-support
https://demos.telerik.com/kendo-ui/grid/right-to-left-support
https://demos.telerik.com/aspnet-core/grid/right-to-left-support
Incorrect rendering of the buttons.
Buttons rendered consistently with the jQuery and Core Grids.
Have a Grid bound to local data (see below code snippets and screenshot)
@model Pager_issue.Models.GridViewModel
@(Html.Kendo().Grid(Model.Items)
.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);
columns.Bound(p => p.ShipCity);
})
.Pageable(p => p.PageSizes(new[] { "5", "10", "50", "all" }).PreviousNext(false))
.Sortable()
.Scrollable()
.Filterable()
.HtmlAttributes(new { style = "height:550px;" })
.DataSource(dataSource => dataSource
.Ajax()
.Batch(true)
.ServerOperation(false)
)
)
public class HomeController : Controller
{
[HttpGet]
public ActionResult Index()
{
var model = new GridViewModel
{
Items = Enumerable.Range(0, 200).Select(i => new OrderViewModel
{
OrderID = i,
Freight = i * 10,
OrderDate = DateTime.Now.AddDays(i),
ShipName = "ShipName " + i,
ShipCity = "ShipCity " + i
})
};
return View(model);
}
When filling the Grid with data via a ViewModel, the pager doesn't show on load
The pager should be visible on load
### Bug report
The Grid columns do not expose the ClientTemplateHandler() method. It is available in Telerik UI for ASP.NET Core since version 2023.1.314.
### Reproduction of the problem
columns.Bound(p => p.IsAlwaysIncluded).ClientTemplateHandler("myColTemplate");
<script>
function myColTemplate(data) {
return `<div>${data.IsAlwaysIncluded}</div>`
}
</script>
The ClientTemplateHandler() method must be exposed for the Grid columns.
### Environment
Telerik UI for ASP.NET MVC version: 2023.1.425
* **Browser: [all]
Regression in R1 2023 SP1.
Set a HeaderTemplate in one of the following 3 ways.
columns.Bound(p => p.Freight).HeaderTemplate("<div title='Freight'>Freight</div>");
columns.Bound(p => p.Freight).HeaderTemplate(@<text>
<div title="Freight">Freight</div>
</text>);
columns.Bound(p => p.Freight).HeaderTemplate(@<div title="Freight">Freight</div>);
In the first scenario the error is:
System.NotSupportedException: Specified method is not supported.
In the second and third scenario the error is:
Index was out of range. Must be non-negative and less than the size of the collection.
Parameter name: index
No exception thrown when the HeaderTemplate is set.
The Kendo UI Grid's Toolbar Template UI for ASP.NET MVC documentation displays an approach used for UI for ASP.NET Core. The ClientTemplate and ClientTemplateID are not available for UI for ASP.NET MVC.
Please try the approach used in the documentation. It is not available for UI for ASP.NET MVC.
Either include the approach for UI for ASP.NET MVC, or modify the documentation.
In the Less themes the textboxes and the other editors (e.g., NumericTextBox) in the popup of the Grid are misaligned. The rendering of the textboxes in the MVC and Core Grid is different when compared to the Kendo UI for jQuery Grid.
Reproducible in the Popup Editing demos (Core and MVC).
The width of the TextBox does not match the width of the NumericTextBox.
The rendering differs:
<span class="k-widget k-textbox k-valid" style=""><input data-val="true" data-val-required="The Product name field is required." id="ProductName" name="ProductName" value="" data-role="textbox" aria-disabled="false" class="k-input k-valid" autocomplete="off" data-bind="value:ProductName" style="width: 100%;"></span>
vs
<input type="text" id="ProductName" name="ProductName" title="Product Name" required="required" autocomplete="off" data-bind="value:ProductName" class="k-textbox k-valid">
Identical rendering and alignment.
As the title says, I'm getting script errors when attempting to perform a delete function with an MVC grid when in MobileMode.Phone. The attached project will illustrate the problem. Just run it and select delete button for one of the items in the far right column. A popup will appear, but don't click either of the buttons on it yet. Inspect the html with whatever browser you use (I'm using chrome so I just right click and choose select). There will be a "Cannot read property 'data' of undefined" error. If you then click the "Delete" button, you'll get a "Cannot read property 'resolve' of undefined". Then click on the "Cancel" button and you'll get "Cannot read property 'reject' of undefined". I'll attach a pic showing these errors.
I need to be able to utilize my grid in mobile phone mode and delete items. Please help with this.
Also, to get this sample project small enough, I removed the files from the MobileSaveError\lib\KENDOUIMVC\2020.3.915.545 folder. I figure you can replace those easily enough. Is that the right thing to do in this case? I thought maybe I could remove the items in the Packages folder as NuGet/VS will usually restore those. But wasn't 100% sure on that. So if you can tell me or link me to an article about what we can remove to shrink the project size for samples when we need to send them, that would be great.
Thank you,
Steven
I've been using the "Change" event to handle a Single Row Selection grid as that seems to be the event to use to determine when the user selects a row.
I just tried adding "persistSelection(true)" to my grid but it seems to be triggering a change event when I switch to another page and back to the previous page, or do an external $(this).data('kendoGrid').dataSource.read() on the grid.
How can I only get a change event when the USER selects a row, not the persistedSelection selecting the row?
Or at least detetect where it came from it in my Change event?
Thanks,
Bryan
Using server binding does not render the NoRecords message for the Grid
@(Html.Kendo().Grid(new List<Product>())
.Name("Grid")
.Columns(columns => {
columns.Bound(p => p.ProductID).Groupable(false);
columns.Bound(p => p.ProductName);
columns.Bound(p => p.UnitPrice);
columns.Bound(p => p.UnitsInStock);
})
.NoRecords("No records found.")
.Pageable()
.Sortable()
.Scrollable()
.DataSource(d=>d.Server())
.Filterable()
.Groupable()
)
A possible workaround is to use local binding by setting the AJAX binding in the DataSource, but keep the initial server binding:
@(Html.Kendo().Grid(new List<Product>())
.Name("Grid")
.Columns(columns => {
columns.Bound(p => p.ProductID).Groupable(false);
columns.Bound(p => p.ProductName);
columns.Bound(p => p.UnitPrice);
columns.Bound(p => p.UnitsInStock);
})
.NoRecords("No records found.")
.Pageable()
.Sortable()
.Scrollable()
.DataSource(d=>d.Ajax().ServerOperation(false))
.Filterable()
.Groupable()
)