<div id="grid"></div>
<script>
// The dataSource is initialized as a stand-alone widget that can be bound to the Grid.
var dataSource = new kendo.data.DataSource({
transport: {
read: {
// The remote endpoint from which the data is retrieved.
url: "https://demos.telerik.com/kendo-ui/service/products",
dataType: "jsonp"
}
},
pageSize: 10
});
$("#grid").kendoGrid({
// The dataSource configuration is set to an existing DataSource instance.
dataSource: dataSource,
pageable: true
});
</script>
The breakpoint is added at the last line (326079) of the file.
The breakpoint is added at the desired line (e.g., 3715).
Bundling the Kendo js files in an ASP.NET MVC application throws a NullReferenceException error. Reproduced with versions 2024.1.319 and 2024.2.514. The bundling works without exceptions in version 2023.3.1114.
bundles.Add(new ScriptBundle("~/bundles/kendo").Include(
"~/Scripts/kendo/2024.2.514/kendo.web.min.js",
"~/Scripts/kendo/2024.2.514/kendo.aspnetmvc.min.js"
));
Instead of kendo.web.min.js you can use kendo.all.min.js with the same result.
@Scripts.Render("~/bundles/kendo")
Exception Details: System.NullReferenceException: Object reference not set to an instance of an object.
Workaround:
Use bundles.Add(new Bundle("~/bundles/kendo") instead of bundles.Add(new ScriptBundle("~/bundles/kendo")
No exception is thrown when bundling the Kendo script files.
Regression in R1 2023.
columns.Bound(p => p.OrderDate).HtmlAttributes(new { title = "Order Date: #=kendo.toString(OrderDate, 'dd-MM-yyyy')# " });
kendo.toString is not executed and as a result the date is not formatted. The exact value of the title attribute, as shown above is rendered as title of the cell.
The logic is executed and the OrderDate value is rendered in the title with the specified format.
In a Selectable grid, when only one column is shown in the grid, and the model's Id field is specified, an error occurs on selection.
If you include more than one column (must be more than one visible) it works correctly.
If the model's Id is not specified, it works correctly even with only one column visible.
@(Html.Kendo().Grid<TelerikMvcApp1.Models.OrderViewModel>()
.Name("grid1")
.Columns(columns => {
columns.Bound(p => p.ShipName);
columns.Bound(p => p.ShipCity).Hidden(true);
})
.Pageable()
.Sortable()
.Scrollable()
.Filterable()
.Selectable(s => s.Mode(GridSelectionMode.Single))
.HtmlAttributes(new { style = "height:430px;" })
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(20)
.Read(read => read.Action("Orders_Read", "Grid"))
.Model(m => m.Id("OrderID"))
)
)
The Grid should allow switching between case sensitive and case insensitive filtering.
I'm using the ClientTemplate-Feature to render buttons for CRUD-actions in grids. For one entity I have to use a TreeList instead of a Grid due to parent-child relations. It would be great if I could use the same templates I use for the grid for the treelist as well.
Example:
columns.Bound(x => x.UserName)
.ClientTemplate("<a href='" + Url.Admin().Account() + "/#= Id#/edit'>#= UserName #</a>")
.Width(300);
Of the highest priority, we desperately need file explorer for inserting and uploading images. In the AJAX editor, this appears to be build off the radFileExplorer control which is the other one we REALLY need for MVC which doesn't exist at all.
Hi,
We are using globalization with UI for ASP.NET MVC to translate control to French (fr-CA). However, while most messages are correctly displayed in French, there are some that are still displayed in English. For example, if we use the Grid control with filter on a 'string' column, the dropdown for the operators shows both French ("Commence par") and English ("Is empty") operators:
Looking at the source code, we can see that in ressource files "Messages.fr-FR.resx" and "Messages.fr-CA.resx", there are some messages that are still in English (for example, Filter_StringIsEmpty).
Note that corresponding text seems to be correctly translated in jQuery messages file (for example, "kendo.messages.fr-CA.js"), so it might only be a matter of applying the same translation to .resx files.
Note also that the same problem seems to be present in the source code of the latest version (2020.1.114).
Thanks!
Right now the Telerik UI MVC NuGet package is a 30 MB package that installs not just the DLL, but a lot of boilerplate JavaScript and CSS. I prefer to acquire the necessary content via Bower, so I can only install what I need. Currently, after every upgrade I have to wait for the package to install, then delete all of the unused content files. It would be nice if you supplied an "assembly-only" package, moving the content into an optional package that users who still need it could install. It would reduce upgrade time substantially, as well as offer less chance for a mistake.
After using setOptions() the HTML structure of Grids column header is different.
In the following demo:
https://demos.telerik.com/aspnet-mvc/grid/persist-state
When the button is clicked, setOptions() called for the Grid and the structure of the column headers is now different.
When setOpitons() is called with no options that may affect the headers the HTML structure of the column headers should be the same.
My web page displays grids on multiple pages, and each grid has a pager with a page size control.
In recent updates the styling broke in all but one page.
In the case where I was creating the grid using Kendo UI for JQuery, it worked fine.
In the instances when I create it using MVC, there are styling errors. (See in the image how the number "10" is truncated.)
After much drilling into the HTML, I found the difference in how the Razor library creates the HTML elements, as opposed to how the JQuery creates the HTML elements.
JQuery generates the following element structure. Note that the k-pager-sizes element comes after the k-pager-numbers-wrap element
<div class="k-pager k-grid-pager k-pager-md"> <!-- The pager bar -->
<div class="k-pager-numbers-wrap">
<!-- ... -->
</div>
<span class="k-pager-sizes k-label">
<!-- The page-size picker goes here -->
</span>
</div>
In contrast, the Kendo Razor libraries generates the following element structure, where the k-pager-sizes element falls inside the k-pager-numbers-wrap element:
<div class="k-pager k-grid-pager k-pager-md"> <!-- The pager bar -->
<div class="k-pager-numbers-wrap">
<!-- ... -->
<span class="k-pager-sizes k-label">
<!-- The page-size picker goes here -->
</span>
</div>
</div>
This breaks the styling. (I am using the bootstrap kendo theme) There is styling rule that imposes a minimum width on all buttons under .k-pager-numbers-wrap. This makes the drop-down arrow too wide, which causes the page size number to truncate.
@each $size, $size-props in $kendo-pager-sizes {
$_padding-x: k-map-get($size-props, padding-x);
$_padding-y: k-map-get($size-props, padding-y);
$_item-group-spacing: k-map-get($size-props, item-group-spacing);
$_item-min-width: k-map-get($size-props, item-min-width);
$_pager-dropdown-width: k-map-get($size-props, pager-dropdown-width);
.k-pager-#{$size} {
padding-inline: $_padding-x;
padding-block: $_padding-y;
gap: $_item-group-spacing;
.k-pager-numbers-wrap {
.k-button {
min-width: $_item-min-width;
}
My current hack workaround is to add a more specific CSS rule.
@import "@progress/kendo-theme-bootstrap/dist/all.scss";
.k-pager-md .k-pager-numbers-wrap .k-dropdownlist .k-button {
min-width:inherit;
}
Please note the following MVC code:
Bug 1: The Window should have the top set by the Top() method. It does not.
Bug 2: The Window should have the top set by the HtmlAttributes() method. That does not work either.
Bug 3: The scrollable method also does nothing to the window. So this entire line seems to be omitted.
Bug 4: The window is supposed to be centered by the Kendo native code. It isn’t. The recurring editor div element is not shown until after the window centers. So the window generates, centers on the screen, then the recurring DIV is shown which expands the window downwards, then the window is shown. This makes it go off the bottom of the screen. I didn’t need vertical center anyways so I fixed this by setting the top to 40px. Which is when I ran into the above issues. However if I was not doing this, the center() issue would still be there. I fixed this in JavaScript on the event’s edit event.
The Kendo Scaffolder is no longer available in the Add New Scaffolded Item dialog.
The Kendo Scaffolder works as intended.
When a user types 7/8/201x into a DatePicker, 7/8/201 is what ends up getting sent to the server. I believe an important function of a date-type-specific control or widget is to prevent the entry of bad data. The picker should not allow the entry of any string that is not a valid date or is outside of the Min-Max range (if specified). In fact, properly formatted dates typed into the textbox seem to ignore the Min-Max range. No user entering a date of birth is going to use the month selectors. He or she will type the date into the textbox. The datepicker, out of the box, should not allow the entry of invalid or out of range dates. The developer should not need to write a custom validator for behavior that virtually everyone would want.
.HtmlAttributes(new { @class = "test" })
The custom class is not applied to the TileLayout.
The custom class is applied to the TileLayout along with the pre-defined Kendo classes.
Inspect the Grid in the MVC demos.
The Grid renders the k-widget class.
The rendering must be consistent with jQuery and Core and the k-widget class should not be rendered. The issue is specifically in the MVC Grid. The Kendo UI for jQuery and the Core Grid no longer render this class.
Not reproducible with Sass themes.
https://dojo.telerik.com/ejaVeZUD/7
Map custom markers are not positioned correctly when zooming out using 'Less' themes
Markers are positioned correctly when zooming out.
Passing a dynamic object to a template column builder throws an exception:
c.Template(m => { })
.ClientTemplate("<input type='checkbox' value='#= Id #' />")
.Visible(ViewBag.Can.Edit);
Using an explicit cast doesn't throw the error:
c.Template(m => { })