My company has three very large apps that are dependent on Kendo. I've been trying for several days to update the Kendo version in our largest app from version 2022.3.913. I was able to update with no problems to version 2023.1.117. But when I try to go beyond that, it's completely hosed. Worst of all is the use of icons. I can't make them work no matter what I do. We've been using .SpriteCssClass() to attach icons to buttons and menu items as well as using the k-icon k-i-xxx classes in grid item templates. None of that works anymore. None of the suggested fixes for this work with version 2023.2.829 either. I've tried telling the app to use font icons via KendMvc.Setup() in my Startup.cs and BaseController.cs files, neither of which worked. I installed both the FontIcons and SvgIcons NuGet packages, which at least allowed me to build the app. I was able to use the .Icon() method on a Button widget to use one if the SVG icons that I saw in an example, but nowhere on your site can I find a list of standard SVG icons like the list of font icons, so I wasn't able to find the icons I had been using. In addition to the complete inability to make icons work, the way you've changed font sizing for widgets has made the app look very different than before the update and has made various customizations we've made in our site.css file look very bad. Ditto for some random styling changes you've made for menu items and anchor tags in grid templates.
In short, you have really screwed us over and I don't know if we're going to be able to update past 2023.1.117. I see lots of others have had these same issues and I don't see you responding with any real solutions.
Am I missing a configuration option? I have a menu which has several levels of menus. With "Security Trimming" enabled, root level objects get trimmed with no issues. Parents which have their children objects "trimmed", still show up. Example:
@(Html.Kendo().Menu() .Name("Menu") .SecurityTrimming(true) .Items(items => { items.Add().Text("Home").Action("Index", "Home"); items.Add().Text("Owners").Action("Index", "Owners"); items.Add().Text("Interred").Action("Index", "Interred"); items.Add().Text("Maintenance").Items(itm => { itm.Add().Text(@"Sections/Lots/Spaces").Action("Index", "MaintainSpaces"); itm.Add().Text("Search Tags").Action("Index", "MaintainSearchTags"); itm.Add().Text("Undertakers").Action("Index", "MaintainUndertakers"); itm.Add().Text("Reclaim Spaces").Action("Index", "MaintainReclaimSpaces"); itm.Add().Text("Research Tool").Action("Index", "MaintainResearchTool"); itm.Add().Text("Headstones").Action("Index", "MaintainHeadstones"); }); items.Add().Text("Reports").Items(itm => { itm.Add().Text("Available Spaces").Action("Index", "ReportsPage"); }); }) )
As you can see the "Maintenance" and "Reports" menu items are still visible. An example situation would be :
A unauthorized user sees the "Home" button, and everything else should be trimmed. While the actual actions are getting trimmed, the "Maintenance" and "Reports" menu items (with nothing in them) are still there.
Am I missing a configuration option to also remove parents?
Hi
I use a Kendo window and load the content through AJAX from a partial view.
The partial view contains Kendo controls such as DropDownList, ContextMenu, etc.
How can I remove all the controls (destroy all UI, events, etc.) inside the partial view when I close the Kendo window
Hi,
When I add .OpenOnClick(true) to my menu and I click on the menu to display the submenu, the page reloads automatically.
Do I need to add another instruction to prevent the page reloading? What's the problem?
Thank's in advance.
Ignacio
This is kendo ui for asp.net mvc. In the past I have used float:right to move menu items and gridtoolbar items to the right side, but that no longer works. For example:
.ToolBar(toolbar => { toolbar.Search(); toolbar.Custom() .Text("Clear Filters/View All") .Url("#") .HtmlAttributes(new { id = "btnClearFilters", @class="btn btn-link", onclick = "btnClearFiltersClick()" }); toolbar.Custom() .Text("New Order") .Url("#") .IconClass("k-icon k-i-add") .HtmlAttributes(new { id = "btnNew", style = "float:right;", onclick = "btnNewClick()" }); toolbar.Custom() .Text("Copy Order") .Url("#") .IconClass("k-icon k-i-copy") .HtmlAttributes(new { id = "btnCopy", style = "float:right;margin-right:20px;", onclick = "btnCopyClick()", disabled = "disabled" }); })
I created a new Telerik Application Project for ASP.NET MVC. I choose one of the Bootstrap Themes. It appears to have installed Bootstrap v4.1.3.
If I upgrade to Bootstrap 5.1 will I have issues with the GridView, the Menu Extension and other HTML Extensions?
Hello,
I have a Kendo grid with multiple columns, and only one of the columns has .Filterable(true). When the filter icon above this column is clicked, a custom filter menu pops up. This menu has fields to set the filter data for multiple columns all at once, and then a "Filter" button which sets the datasource filter data to these specifications.
This filtering is working correctly, however the issue is, when going to another page in the results, the column with .Filterable(true) has its filter data removed from the request that is sent to the Controller. All other columns have their filter data persisted across the pages, just not the one with .Filterable(true). This is the case for whichever column is given this attribute.
For example, if I have Column2 set to .Filterable(true), then filter Column2's data and click "Filter", the correct filtered results are populated in the grid. But after clicking to another page of the results, the results reset and no longer filter Column2's data. It also stays like this when clicking back to page 1.
When looking at the DataSourceRequest object passed to the Controller method that gets the grid results, I can see the filter data for this column is there after clicking the "Filter" button. But after clicking to another page in the results, the request object sent to the Controller method no longer has this column included in its filter data.
Any idea why this is happening or how to resolve?
I've included some code for the grid, the custom filter menu function, and the controller method. Please let me know if anything else is needed, thank you.
.cshtml Grid Code
@(Html.Kendo().Grid<Model>()
.Name("MyGrid")
.HtmlAttributes(new { style = "height: 400px;font-size:12px;" })
.Columns(columns =>
{
columns.Bound(m => m.Column1).Title("Column1").Width(90).Filterable(false);
columns.Bound(m => m.Column2).Title("Column2").Width(90).Filterable(true);
columns.Bound(m => m.Column3).Title("Column3").Width(90).Filterable(false);
. . .
})
.Sortable()
.AutoBind(false)
.Pageable(p => p
.Refresh(true)
.PageSizes(true)
.ButtonCount(5))
.Scrollable()
.Filterable(f => f
.Mode(GridFilterMode.Menu)
)
.Events(e => e
.FilterMenuInit("OnFilterMenuInit")
)
.Resizable(rs => rs.Columns(true))
.Navigatable()
.Selectable(s => s
.Mode(GridSelectionMode.Single)
.Type(GridSelectionType.Row))
.NoRecords("No Records!")
.DataSource(ds => ds
.Ajax()
.Model(m=> m.Id(p => p.id))
.PageSize(10)
.Read(read => read.Action("GetData", "Test").Data("{arg1: " + 1 + ", arg2:'testarg'}"))
.Update(upd => upd.Action("EditData", "Test"))
.Events(e => e.RequestEnd("onRequestEnd").Error("error_handler"))
.ServerOperation(true))
.js OnFilterMenuInit function:
function OnFilterMenuInit(e) {
e.container
.empty()
.append($('<div class="row"><div class="col-md-2"><span>Column1: </span></div><div class="col-md-1"><input id="col1-operators" /></div><div class="col-md-4"><input id="col1-tb" class="k-textbox" /></div><div class="col-md-1"><input id="col1-logic" /> </div> </div>\
<div class="row"><div class="col-md-2"><span>Column2: </span></div><div class="col-md-1"><input id="col2-operators" /></div><div class="col-md-4"><input id="col2-tb" class="k-textbox" /></div><div class="col-md-1"><input id="col2-logic" /> </div> </div>\
<div class="row"><div class="col-md-2"><span>Column3: </span></div><div class="col-md-1"><input id="col3-operators" /></div><div class="col-md-4"><input id="col3-tb" class="k-textbox" /></div><div class="col-md-1"><input id="col3-logic" /> </div> </div>\
<div class="row"><div class="col-md-4"> <button type="submit" class="k-button k-primary" id="filter">Filter</button> </div><div class="col-md-4"><button type="reset" class="k-button" id="clear">Clear</button></div></div>'));
$('#filter').kendoButton({
click: function () {
var col1 = $('#col1-tb').val();
var col2 = $('#col2-tb').val();
var col3 = $('#col3-tb').val();
var col1Ops = $('#col1-operators').value();
var col2Ops = $('#col2-operators').value();
var col3Ops = $('#col3-operators').value();
var col1Logic = $('#col1-logic').value();
var col2Logic = $('#col2-logic').value();
var col3Logic = $('#col3-logic').value();
var orfilter = { logic: "or", filters: [] };
var andfilter = { logic: "and", filters: [] };
if (col1 != "") {
if (col1Logic == 'and') {
andfilter.filters.push({ field: "Column1", operator: col1Ops, value: col1 })
}
else {
orfilter.filters.push({ field: "Column1", operator: col1Ops, value: col1 })
}
}
if (col2 != "") {
if (col2Logic == 'and') {
andfilter.filters.push({ field: "Column2", operator: col2Ops, value: col2 })
}
else {
orfilter.filters.push({ field: "Column2", operator: col2Ops, value: col2 })
}
}
if (col3 != "") {
if (col3Logic == 'and') {
andfilter.filters.push({ field: "Column3", operator: col3Ops, value: col3 })
}
else {
orfilter.filters.push({ field: "Column3", operator: col3Ops, value: col3 })
}
}
. . .
andfilter.filters.push(orfilter);
orfilter = { logic: "or", filters: [] };
e.sender.dataSource.filter(andfilter);
localStorage["kendo-grid-filter"] = kendo.stringify(e.sender.dataSource.filter().filters);
}
});
$('#clear').kendoButton({
click: function () {
e.sender.dataSource.filter({});
localStorage["kendo-grid-filter"] = kendo.stringify({});
}
})
}
.cs TestController GetData Method
public ActionResult GetData([DataSourceRequest]DataSourceRequest request, int? arg1, string arg2, bool arg3 = false, bool arg4 = false)Hi,
I would like to know how to setup a generic MVC layout(page) with a (panelbar) menu on the left (collapsable when mobile)
together with a Breadcrumb. Should be responsive / mobile first.
Actually something like your demos page navigation, but then the menu should be collapsable. Like the panelbar.
Is there a complete example for this ? Or do I have to fuzzle manually to achieve this ?
(At first I was thinking about using the menu control, but to my surprise I saw that control is not responsive.)
Martin