I have a grid worth of data coming from 2 different data sources that I smash together on the server side and send to the grid. Data from one of my sources is fine (ish... it is pretty slow too), data from the other source is brutally slow. So I want to send all of the data from source one and the first page worth of data from source 2 to the grid on page load, and then use JQuery/ajax to do a deferred load on the remaining data in the background.
I do not want to do an AJAX call per page because data source 1 isn't fast enough for that.
Since the second data source is so slow, I am chunking the unpopulated data into page sized chunks (blocks of 10) and letting the async goodness do its thing. I can do the ajax and get the supplemental data without a problem. I just can't seem to get the grid to respect the updated data. I can't replace the whole datasource's data set at once because we are doing this all async and we will have data pouring in all willy nilly and we don't want to have potential over writes. So we have to update it per row.
const fieldsToUpdate = ["field1", "field2", "field3", "field4"];
$.ajax({
.... blah blah blah ....
success: function(responseData) {
const accounts = responseData.Data.AccountList;
for (let idx = 0; idx < accounts.length; idx++) {
const curAccount = accounts[idx];
const dataItem = theGrid.dataSource.get(curAccount.AccountNumber);
if (dataItem) {
console.log(`Deferred data load for: ${curAccount.AccountNumber}`);
for (let propIdx = 0; propIdx < fieldsToUpdate.length; propIdx++) {
const key = fieldsToUpdate[propIdx];
// because the set method will ignore anything that isn't marked as 'editable' and I don't care about that
let hasEdit = false;
if (dataItem.fields[key].hasOwnProperty("editable")) {
dataItem.fields[key].editable = hasEdit = true;
}
// actually set the value
dataItem.set(key, curAccount[key]);
// set it back to whatever it was
if (hasEdit) {
dataItem.fields[key].editable = false;
}
}
// we don't care
dataItem.dirtyFields = {};
dataItem.dirty = false;
}
}
}
});
So the above kinda sorta works. It will display the right data until you attempt to move to a different page. Then it looses it mind and the data reverts back to what it was originally (unset) and the paging breaks and the grid just stops working all together. There are no errors visible in the console.
What is the proper way to update individual rows of data in a grid that may or may not be visible on the current page of the grid?
We seem to be seeing a mis-match in paging options on grids used across our system.
The majority have the following default:
However, we're seeing a couple grids with the drop-down version used:
What could cause this? There's no paging options set on either of the grids however both are showing different paging options.
For reference, here's a snippit of the grid displaying the paging drop-down:
I use Grids with both popup and inline editing. My application is in English and I have not configured any localization at all. I have the problem of unwanted localization when editing, buttons (inline and popup) and Window header (popup, see image) are getting localized. In my case with Swedish translations. It seems to be the same as the server Windows setting. If I use a client with English OS and settings, the popup is still in server localization. If I install on a English OS, the buttons and headers are in English.
This always shows "en-US" as result, whatever combination of Swedish/english server/client browser I use.
var culture = kendo.culture();
console.log(culture.name);
How do I turn off this "default" OS unwanted localization and make everything in English regardless of OS language?
How you do bind a value to an input when using a responsive columns template? The value wont be saved from the input when trying to save. E.G: Row is added, I edit the value, but when I save, it goes back to 0.
columns.Template("#=resColTemplate(data)#").Title("Items").Media("(max-width: 475px)");
<script id="responsive-column-template" type="text/x-kendo-template">
<strong>Amount</strong>
<p class="col-template-val">
<input class="numeric" data-bind="#: Amount #" value="#: Amount#" required />
</p>
</script>
Hi!
I have tried following the Asynchronous upload documentation, but whenever I try to upload file(s), it always fails and the server responded with a status of 404.
Thanks in advance for your help.
My code is as follows:
HTML:
<div>
@(Html.Kendo().Upload()
.Name("files")
.Async(a => a
.Save("SaveAsync", "Home")
.Remove("RemoveAsync", "Home")
.AutoUpload(true)
)
)
</div>
Controller:
public class HomeController : Controller
{
private IWebHostEnvironment _WebHostEnvironment;
public HomeController(IWebHostEnvironment webHostEnvironment)
{
_WebHostEnvironment = webHostEnvironment;
}
public async Task<ActionResult> SaveAsync(IEnumerable<IFormFile> files)
{
// The Name of the Upload component is "files".
if (files != null)
{
foreach (var file in files)
{
var fileContent = ContentDispositionHeaderValue.Parse(file.ContentDisposition);
// Some browsers send file names with full path.
// We are only interested in the file name.
var fileName = Path.GetFileName(fileContent.FileName.ToString().Trim('"'));
var physicalPath = Path.Combine(_WebHostEnvironment.WebRootPath, "App_Data", fileName);
using (var fileStream = new FileStream(physicalPath, FileMode.Create))
{
await file.CopyToAsync(fileStream);
}
}
}
// Return an empty string to signify success.
return Content("");
}
public ActionResult RemoveAsync(string[] fileNames)
{
// The parameter of the Remove action must be called "fileNames".
if (fileNames != null)
{
foreach (var fullName in fileNames)
{
var fileName = Path.GetFileName(fullName);
var physicalPath = Path.Combine(_WebHostEnvironment.WebRootPath, "App_Data", fileName);
// TODO: Verify user permissions.
if (System.IO.File.Exists(physicalPath))
{
System.IO.File.Delete(physicalPath);
}
}
}
// Return an empty string to signify success.
return Content("");
}
}
Greetings,
Is it possible to drag items from another control such as a list and drop them on the TaskBoard similar to how you can drag items from the grid control and drop them on a calendar? Very interested in this functionality.
Thanks,
Scott
Hello,
I create a ListBox that I bind to a list of SelectListItem. In this list i use the Group property. But i don't know how to render groups in Html.Kendo().ListBox()
I'm using mvc core and Telerik.UI.for.ASP.Net.Core version 2021.2.511 package
Regards
I have a grid and I'm doing inline editing. I have a property in my model that is an enum. Using the Display() attribute on the enum works great for rendering the grid. But when I go to edit a row I have not been able to get a dropdownlist with the enum values to display.
I have a partial view in the EditorTemplates for the enum.
@model Dashboard.Web.Models.Schedule @(Html.Kendo().DropDownListFor(m => m.GotoType) .DataTextField("Text") .DataValueField("Value") .BindTo(Html.GetEnumSelectList(typeof(Dashboard.Web.Models.GotoType))) .Deferred() )
My model I have the UIHint attrbute on the enum property.
public class Schedule
{
[Key]
public int Id { get; set; }
[Display(Name = "Go To ")]
[UIHint("GotoTypeEditor")]
public GotoType GotoType { get; set; }
[ForeignKey("Location"), Display(Name = "Location")]
public int LocationId { get; set; }
public Location Location {get; set;}
}
What do I need to do in the Kendo.Grid? I tried adding the EditorTemplateName this did not work. Do i need to do something in the datasource.Model definition?
Uncaught TypeError: jQuery(...).kendoTextBox is not a function
I found this same question on SO here
https://stackoverflow.com/questions/62596574/asp-net-core-kendo-ui-textboxfor-fails-to-load
We (our team) tried the proposed solution, but we still get the error.
We are using ASP.NET Core, Telerik UI
I have a dashboard page that will be displayed on a larger flat screen TV. I don't what the menu bar showing just the hamburger button on the nav bar. How would I do this for a large screen format. I'm not sure what to change on the kendo-responsivepanel
How do I configure the button to be visible and the responsive-panel to be hidden by default?
<button id="configure" class="k-rpanel-toggle k-button k-primary btn-toggle">
<span class="k-icon k-i-menu"></span>
</button>
....
<div id="responsive-panel" class="navbar navbar-dark navbar-collapse bg-light mb-4">
<kendo-responsivepanel name="responsive-panel" auto-close="false" breakpoint="758" orientation="top">
@(Html.Kendo().Menu()
.Name("Menu")
.Items(items =>
{
items.Add().Text("Schedule").Action("Index", "Schedule", new { area = "" });
items.Add().Text("Locations")
.Items(ddl =>
{
ddl.Add().Text("Brownwood").Action("Index", "Home", new { locationCode = "BW" });
. . .
});
})
)
</kendo-responsivepanel>
</div>