When we are managing large volumes of data with several thousand datasource objects (grid rows) all of the rows need to be transported with each event.
This leads to errors with the json being too large to serialize.
We wish to restrict the data footprint and only return data for the page requested.
so if the grid has 100 pages and page size is 10 we only want to return the 10 rows required for the page, not 1000 rows.
This is not possible with the Kendo grid.
To work around this issue we have devised a strategy to return the the number of datasource objects Kendo grid expects up to the requested page count, but they are empty objects with no data, and then only have the last 10 rows populated with data.
It would be better for the grid control just to expect the number of results expected to the selected page and not have to add the dummy rows, so long as the total number of rows is provided so that the grid knows how many pages there are.
Our work around looks something like this in asp.net MVC
var users = cm.getUsers();
var result = new DataSourceResult();
var results = new List<user>();
int index = 0;
if (pageNum == 1)
results = users.Take(pageSize).ToList();
else
{
index = pageSize * (pageNum - 1);
results = users.Skip(index).Take(pageSize).ToList();
}
List<user> output = null;
[This is the bit that should be handled by the kendo grid, without the need for dummy rows to further reduce json size]
if (index == 0)
{
output = new List<user>(results);
}
else
{
output = new user[index].ToList();
output.AddRange(results);
}
result = output.ToDataSourceResult(request);
result.Total = users.Count();
return Json(result, JsonRequestBehavior.AllowGet);
Not sure if this is already in the works but when building mvc grids it would be helpful to have the ability to prevent a column from getting too big when the screen size is larger than the grid needs. Right now if columns are turned off and there is more space for the unlocked columns, they expand to fill the page which is normally fine but in some instances it looks silly to have a column for example that you would enter a 2 digit number in to be 300 plus px wide.
I have a cshtml page that uses Kendo UI ASP.NET MVC that does the following:
- sends an ajax request to a controller action method,
- opens a new tab using window.open(),
- displays a temporary message to let the user know that something is happening,
- then overwrite the new tab content using the view that is contained in the ajax response.
The view contains one or more grid widgets (the number depends on how many result types were requested) and each grid is set up to export Excel.
The problem is that when window.open() is used to open a new tab, the browser history state is null and the window.location.href is empty with the browser location showing "about:blank". For Chrome and Firefox, this does not cause any issues when exporting excel for the grid. However, when using Edge with this situation, when the Export to Excel grid toolbar button is clicked and the onExportExcel event is fired, the browser Open or Save dialog prompt is displayed but the active tab (the one that contained the grid) closes. This behaviour is very undesireable. The ProxyUrl grid excel option does not fire since Edge supports javascript file saving.
A workaround for this situation is to forcibly set the new tab window object location href by using the window.history.pushUpdate function. A code snippet is included below.
let dataModel = {Id = 123571113, Name="jason bourne"};
let jsonModel = JSON.stringify(dataModel);
let curDate = new Date();
let targetUrl = '@Url.Action("Reports", "Report", new { @area = "Reports" })';
let targetWindowName = "something meaningful" + " " + curDate.toISOString();//add datetime stamp to avoid issue where you cannot open a window with the same name as the current window.
let html = "some html content to provide a temporary message to your audience";
let targetWindow = window.open(targetUrl, targetWindowName);
if (targetWindow !== null && targetWindow !== undefined)
{
targetWindow.document.write(html);
targetWindow.document.close(); // to finish loading the page
targetWindow.document.title = targetWindowName;
//attempt to forcibly update the URL in the history and target window location to fix problem with grid export to excel on Edge browser
let targetWindowHistoryHref = window.location.href;
if (oModel.BuildingDesigns !== null && oModel.BuildingDesigns !== undefined && oModel.BuildingDesigns.length > 0) {
targetWindowHistoryHref += "?oBuildingDesignId=" + oModel.BuildingDesigns[0].ObfuscatedBuildingDesignId + "&BuildingDesignName=" + oModel.BuildingDesigns[0].BuildingDesignName;
} else {
targetWindowHistoryHref += "?" + oModel.Target;
}
targetWindow.history.pushState(null, null, targetWindowHistoryHref);
}
$.when(
$.ajax({
type: "POST",
dataType: "html", // this is the data type expected to be returned from the controller method
contentType: "application/json", // this is the content type expected by the controller method
url: targetUrl,
data: jsonModel,
beforeSend: function() {
console.log(".... submitting report request");
athena.loader.loading("submitting report request");
},
success: function(response) {
athena.loader.stopLoading();
if (debugLevel > 2) {
console.log(".... response = " + response + " : ", response);
}
//attempt to populate the target browser tab with the response
try {
console.log(".... attempting to open a browser tab and populate it with the HTML response object");
console.log(".... targetWindow = " + targetWindow);
//will trigger popup blockers :: targetWindow = window.open("", oModel.Target);
if (targetWindow !== null) {
if (response === null || response === undefined) {
targetWindow.document.body.innerHTML = '';
} else {
//completely replace the existing document (not just the innerhtml)
targetWindow.document.open();
targetWindow.document.write(response);
targetWindow.document.close();
targetWindow.document.title = targetWindowName;
}
}
} catch (ex) {
// do nothing, just catch when the open fails.
console.log("error: " + ex.message);
}
},
error: function(jqXhr, textStatus, errorThrown) {
console.log('.... error :: ajax status = ' + textStatus + ' :: errorThrown = ' + errorThrown);
console.log('....-- jqXhr.responseText :: \n' + jqXhr.responseText);
}
})
).done(
function() {
console.log(".... report request has completed");
targetWindow.focus();
}
);
Test Environment:
OS Version: 22H2 OS Build 22621.1702
Edge Version: Edge(Chromium) Version 114.0.1823.37 (Official build) (64-bit)
Repro-Steps:
- Open ASP.NET MVC Grid Web API Binding Demo | Telerik UI for ASP.NET MVC with valid credentials in Edge browser.
- Navigate through the page using Tab key till filter buttons.
- Run Tab stops and observe the issue whether focus is moving to the filter buttons or not.
While navigating through the page, the Tab focus is not moving to the filter buttons.
While navigating through the page, the Tab focus should move to the filter buttons.
User Impact:
Test Environment:
OS Version: 22H2 OS Build 22621.1702
Edge Version: Edge(Chromium) Version 114.0.1823.37 (Official build) (64-bit)
Repro-Steps:
- Open Demo for core features in ASP.NET MVC Grid control | Telerik UI for ASP.NET MVC with valid credentials in Edge browser.
- Navigate through the page using Tab key till Expand/collapse button.
- Run Tab stops and observe the issue whether focus is not moving to the "expand/collapse" button.
While navigating through the page, the Tab focus is not moving to the expand and collapse button.
While navigating through the page, the Tab focus should move to the expand and collapse button.
User Impact:
Bug report
It was possible to use Html in the Select button message up to R1 2023. The current behavior is a regression in R1 2023 SP2.
Reproduction of the problem
Dojo example: https://dojo.telerik.com/uyuhocUL
Current behavior
No actual Html can be used in the button's message.
Expected/desired behavior
Html can be used in other messages of the Upload, e.g., dropFilesHere, so it should be possible to do it in the Select button message as well.
Environment
- Kendo UI version: 2022.1.425
- jQuery version: x.y
- Browser: [all]
Aren't the files in the /Content/kendo/2023.1.314/ folder KendoUI version files, not MVC version files?
Below is the contents of the file after upgrading to the new version.
I thought it was strange, so I browsed the stylesheet folder of the newly installed version.
The folder contents of the previous version were as follows.
Isn't it a problem with the distributed installation files?
Describe the bug
Column headers do not resize properly in IE11 when scrollable is set to false. Regression introduced in 2021.3.914.
To reproduce
Steps to reproduce the behavior:
The column headers are squished to the left side.
Expected behavior
Columns headers must have the same width as the respective columns.
Workaround:
.k-ie .k-grid-header {
display: table-header-group;
}
Affected package (please remove the unneeded items)
- theme-default
- theme-bootstrap
- theme-material
Affected suites (please remove the unneeded items)
- Kendo UI for jQuery
Affected browsers (please remove the unneeded items)
- IE version: 11
Build system information (please remove the unneeded items)
- Not Applicable
Bug report
When we want to add a formula in a given cell in the Spreadsheet, we double-click it and enter the "=" in it as an identifier that a formula definition will follow. If we want to include in the formula a cell that is not inside the visible range of the Spreadsheet, we scroll to that cell and select it. In Internet Explorer, if we scroll to a given cell using the arrows of the Spreadsheet's scrollbar the "double-clicked" cell becomes just a selected one and the "=" sign is converted to a string value.
Reproduction of the problem
- Open this Dojo example in Internet Explorer 11
- Select the A1 cell and enter "=" in it.
- Press the "down" direction arrow of the Spreadsheet trying to reach cell A50.
- With the first click on the arrow, the A1 cell is no more "double-clicked" and the "=" inside it is converted to a string
Current behavior
When building a formula in a given cell and trying to navigate to a cell using the scrollbar, this usage stops the formula building and converts the "=" into a string.
Expected/desired behavior
When a user creates a formula for a given cell, they should be able to navigate through the Spreadsheet using its scrollbars.
Environment
- Kendo UI version: 2019.2.619
- jQuery version: x.y
- Browser: IE 11.950.17134.0
Bug report
Error is thrown when using Kendo HTML Editor Control in Kendo Grid Popup EditorTemplate in IE only
Reproduction of the problem
Place Kendo editor in Grid popup template
@(Html.Kendo().Grid<TelerikMvcApp2.Models.Person>().Name("persons")
.DataSource(dataSource => dataSource
.Ajax()
.Model(model => model.Id(m => m.PersonID))
.Read(read => read.Action("GetPersons", "Home"))
.Update(up => up.Action("UpdatePerson", "Home"))
)
.Columns(columns =>
{
columns.Bound(c => c.PersonID).Width(200);
columns.Bound(c => c.Name);
columns.Bound(c => c.BirthDate).Format("{0:g}");
columns.Command(cmd => cmd.Edit());
})
.Pageable()
.Sortable()
.Editable(ed => ed.Mode(GridEditMode.PopUp).TemplateName("Person"))
)
Person.cshtml
@(Html.Kendo().EditorFor(model => model.Text))
1. Run and open in IE
2. Click edit, make a change in the popup and Save
2. Click again on Edit
https://www.screencast.com/t/kZFZ9hZNEp
Expected/desired behavior
No error is thrown
Environment
Kendo UI version: 2020.3.118
With the latest 2022 release, the grid toolbar seems to be rendering buttons incorrectly. It is generating them with k-button and k-button-icontext classes only on them. I don't 100% know this is wrong, but i expected them to render with k-button-solid-base and k-rounded-md classes, and i'm pretty sure i saw docs saying the icontext is not used anymore.
Note: this is about the mvc wrapper.
I'm not sure if this is a bug but if you leave the size off of a column, it stretches to fill the remaining area. However I discovered that this does NOT happen if you lock one of your columns. If you do this, the column doesn't render at all.
there seems to be a bug in your commands column and it's made worse when loading/saving grid layouts.
When i load a page with this grid column definition,
.Groupable()
.Columns(columns =>
{
columns.Command(cmd => cmd.Custom("Undelete")
.Click("undelete"))
.Width(60);when you inspect the grid, the grid internally shows two classes for the command cell:
attributes: {class: 'k-command-cell k-command-cell'}
now, if i apply a grid layout, the problem gets worse. This sample code will cause the dom to end up with multiple k-command-cell classes on the grid's td element.
$("#UndeleteGrid").data("kendoGrid").setOptions($("#UndeleteGrid").data("kendoGrid").getOptions())<td class="k-command-cell k-command-cell k-command-cell k-command-cell k-command-cell k-command-cell k-command-cell k-command-cell k-command-cell" role="gridcell"><a role="button" class="k-button k-grid-Undelete" href="#" title="Undelete"><span class="k-icon k-i-undo"></span></a></td>
<script>
//my amazing function|
function() {
var x = 0;
doSomething();
}
Your grid will "minify" this into a single line when including the popup code as an editor template. This will break everything because javascript will treat everything after the double-slashes as a comment, which means the entire popup is now gone.
This has been an ongoing issue for years and we expected that your code would someday be smart enough to strip comments when minifying the popup (which minifying is supposed to do anyway) or perhaps convert them so they open and close.
Note: I realize it's not really a "minify" since it keeps the same variables but it's about as well as i can describe what's going on.
The requested solution is simply to strip comments out when pulling in the custom popup editor, as they are pretty much useless when the entire popup is in a single line anyway.
I load a pdf on a PDFViewer component using loadDefault function, but Open event is not fired.
Also, I want to scroll to the end of the document and for that, I need to retrieve the count of the pages and activate the last page in the render event, even it's called multiple times.
How can I get the count of the pages and scroll to the end of the .pdf document after it is loaded?
@(Html.Kendo().PDFViewer().Name("documentViewer")
.PdfjsProcessing(pdf => pdf.File(Url.Content("~/Content/data/default.pdf")))
.Events(e => e
.Error("(function(e) { onDocumentViewerError(e); })")
.Render("(function(e) { onDocumentViewerRender(e); })")
.Open("(function(e) { onDocumentViewerOpen(e); })")
)
)
...
<script type="text/javascript">
...
function loadDefault() {
var docUrl = window.location.origin + window.location.pathname + "Content/data/default.pdf";
var pdfViewer = $("#documentViewer").data("kendoPDFViewer");
pdfViewer.fromFile(docUrl);
}
onDocumentViewerRender = function(e) {
console.log("render");
if (goToEnd) {
goToEnd = false;
setTimeout(function () {
var pdfViewer = $("#documentViewer").data("kendoPDFViewer");
pdfViewer.activatePage(pagesCount); // how to get pagesCount
}, 2000);
}
}
onDocumentViewerOpen = function(e) {
console.log("open"); // not shown in Console
}
...
</script>
Add the ability to display aggregates of non grouped columns in the group header.
Today, when we use IEnumerable<dynamic> type as the model for the kendo grid, the grid is generated fine, but the javascript serialization fails when we pass the datasource to the GridBuilder constructor. This results in empty grid client side, because the datasource is empty, even if the html initially generated contains the values. This behavior comes from a problem with the JavaScriptSerializer (also present in the JSon() function of MVC)
If you change the dataSource to a grid (for example by changing the filter conditions) so that less data is returned, you will not be warned if the current page is no longer valid. No error is reported and no data is returned and you won't have a clue why. Try this to replicate: Make a paged grid plus a couple of datepickers to filter the grid data by date range. Add a button to make the new filter dates effective. Write a new MVC controller method to populate the data, using the ToDataSourceResult extension method e.g. "return Json(obj.ToDataSourceResult(request));" to return data. Open a sizeable dataset in the grid (many pages) and go to the last page. Change the filter conditions to be much more restrictive. Click the button to make them effective. Watch as the grid displays no data, the code reports no error and stepping into your controller confirms that the method is returning data. Confusing huh? An error or warning would make this much clearer.
The existing solution was built in 2009 using .Net 3.5 web forms framework (List View), ASP.Net Ajax (Accordion) and JQuery (validation). The web page accomplishes the following key functional requirements – a. Ability to group products – The groups are dynamically extracted from the same datasource that is providing the product list. Using ASP.Net Ajax we were able to provide the expand / collapse visual effect. b. Ability to enter order quantities very quickly - a lot of stores place orders at the last minute (5-10 minutes before order deadline) for valid reasons. The web page readily provides a text box for quick entry. On a desktop, the user can traverse the rows within the group using the tab key. The web page typically contains 150 – 200 products for entry. Having to click on Edit/Update/Cancel dramatically increases the number of clicks / touch / swipe. Besides, it creates a real estate issue on smaller form factors. c. Real time validation – using JQuery we were able to validate the row as and when the quantity was entered. Any error would show below the row in question. The error would continue to show until the quantity was revised. The error however, will not stop the user from entering quantities on other rows. This approach lets the user review any errors in the end.
Possibility to iterate over all manually defined columns and f.i. set width or any other property.