I don't think I'm alone in saying that it would be nice to see better docs, maybe even an entire separate section for this library that was Raorpages-specific.
Would be nice to see such things as:
- Client template examples
- Different ways of loading & customizing the grid
- Common problems and their solutions

I recently upgraded my project to ASP NET Core 3.2 and now my grids are returning undefined. I've found a couple threads about this, but nothing that has worked for me so far. I have an enumerable defined object that I'm creating in my AJAX LoadData method to load my data and returning. What am I doing wrong?
index.cshtml
<ejs-grid id="Grid" allowPaging="true" allowSorting="true" allowFiltering="true">
<e-data-manager url="/Routes/LoadData" updateUrl="/Routes/UpdateData" adaptor="UrlAdaptor"></e-data-manager>
<e-grid-columns>
<e-grid-column field="Name" headerText="Name" allowSorting="true"></e-grid-column>
<e-grid-column field="Frequency.Name" headerText="Frequency" type="string"></e-grid-column>
<e-grid-column field="DayOfWeek.Name" headerText="Day" type="string"></e-grid-column>
<e-grid-column field="TimeOfDay.TimeString" headerText="Time"></e-grid-column>
<e-grid-column field="RouteId" headerText="" template="#edittemplate"></e-grid-column>
</e-grid-columns>
</ejs-grid>
<script id="edittemplate" type="text/x-template">
<div>
<a rel='nofollow' href="/Routes/Edit/${RouteId}">Edit</a> |
<a rel='nofollow' href="/Routes/Details/${RouteId}">Details</a> |
<a rel='nofollow' href="/Routes/Delete/${RouteId}">Delete</a>
</div>
</script>
Controller
public IActionResult LoadData([FromBody]DataManagerRequest dm)
{
var sa = new JsonSerializerSettings();
IEnumerable<Route> DataSource = _context.Route
.Include(r => r.DayOfWeek)
.Include(r => r.Frequency)
.Include(r => r.TimeOfDay)
.ToList();
DataOperations operation = new DataOperations();
if (dm.Search != null && dm.Search.Count > 0)
{
DataSource = operation.PerformSearching(DataSource, dm.Search); //Search
}
if (dm.Sorted != null && dm.Sorted.Count > 0) //Sorting
{
DataSource = operation.PerformSorting(DataSource, dm.Sorted);
}
if (dm.Where != null && dm.Where.Count > 0) //Filtering
{
DataSource = operation.PerformFiltering(DataSource, dm.Where, dm.Where[0].Operator);
}
int count = DataSource.Cast<Route>().Count();
if (dm.Skip != 0)
{
DataSource = operation.PerformSkip(DataSource, dm.Skip); //Paging
}
if (dm.Take != 0)
{
DataSource = operation.PerformTake(DataSource, dm.Take);
}
return Json(new { result = DataSource, count = _context.Route.Count() });
}
Have a razorpages app started and several areas of a view have various dropdowns etc that gather a users selections. These selections are then used as inputs to grab data for a grid. Ok, easy enough, my example is working so far. However, so far I have only got to the point of LOADING my grid, now I need to handle updates/deletes etc.
Im looking over the examples, both frm the kendo project template and from this github project
https://github.com/telerik/ui-for-aspnet-core-examples/blob/master/Kendo.Examples.RazorPages/Kendo.Examples.RazorPages/Pages/Grid/GridCrudOperations.cshtml
Ok, some general questions and observations:
(1) These examples assume that criteria for getting the grid data is known at execution time. In my case I need to gather several inputs before fetching the data for the grid. Im doing this now, then loading the grid with json and javascript and it works. However, now I need to handle updating/deleting etc
(2) What is the purpose of the .Data methods on the Datasource crud methods eg. and where is this Data method in the docs as used here?
.DataSource(ds => ds.Ajax() .Read(r => r.Url("/Index?handler=Read").Data("forgeryToken")) .Update(u => u.Url("/Index?handler=Update").Data("forgeryToken")) .Create(c => c.Url("/Index?handler=Create").Data("forgeryToken")) .Destroy(d => d.Url("/Index?handler=Destroy").Data("forgeryToken")) .Model(m => m.Id(id => id.OrderID)) .PageSize(10)(3) If I want to handle "batch" editing, AND I load the Dataset via JSON with javascript, how then does the .Read and other datasource method(s) need to change?
eg. this example ,
https://demos.telerik.com/aspnet-core/grid/editing
so to load the product grid then
function testLoadDS() { var testObj = [{ "OrderID": "1", "Freight": "10.1", "OrderDate": "10/19/2019", "ShipCity": "Austin", "ShipName": "Test123" }]; let productDS = $("#grid").data("kendoGrid").dataSource; productDS.data(testObj);}
So then, this example, what things need to change from in-line to batch editing?
https://github.com/telerik/ui-for-aspnet-core-examples/tree/master/Kendo.Examples.RazorPages/Kendo.Examples.RazorPages/Pages/Grid
In this example
https://demos.telerik.com/aspnet-core/grid/editing
How could one show a image button instead of a command type button for the delete function?
Also, similar to the last question - will this example work with partial page updates? In other words will the updating of the grid cause the entire view its contained within to be refreshed?
I want to export the current sheet to xlsx and send it to the server. I use excel proxy to send the file to server. but when the server side process done. the ui will auto refresh. I want to receive the return value and not refresh the UI, how can I do this, please help.
server side code:
[HttpPost]
public ActionResult Post()
{
try
{
var data = Request.Form;
var file = data["base64"][0];
var fileName = data["fileName"][0];
var contentType = data["contentType"][0];
byte[] buffer = Convert.FromBase64String(file);
string filePath = FileHelper.MapPath("/wwwroot/UserUpload/" + fileName);
FileStream fs = new FileStream(filePath, FileMode.CreateNew);
fs.Write(buffer, 0, buffer.Length);
fs.Close();
return new JsonResult("OK");
}
catch (Exception e)
{
return new JsonResult("Fail");
}
}
If one has a grid on a section of a page and follows the approach with inline editing, as in this example, will just the grid update and NOT the entire view?
https://demos.telerik.com/aspnet-core/grid/editing-inline
I have a grid that has an edit and a delete button. I want to hide those buttons conditionally based on a specific value within the row. How can I accomplish this? For reference here is the current Grid create.
01.@(Html.Kendo()02. .Grid<CdEyeColor>()03. .Name("Codes")04. .DataSource(ds =>05. {06. ds.Ajax()07. .ServerOperation(true)08. .Model(m =>09. {10. m.Id(code => code.EyeColorId);11. })12. .Create(create => create.Action("CreateCode", "CdEyeColor"))13. .Read(read => read.Action("ReadCode", "CdEyeColor"))14. .Update(update => update.Action("EditCode", "CdEyeColor"))15. .Destroy(destroy => destroy.Action("DeleteCode", "CdEyeColor"));16. })17. .Columns(columns =>18. {19. columns.Bound(c => c.EyeColorTitle).Width(100);20. columns.Bound(c => c.EyeColorDescription).Width(200);21. columns.Bound(c => c.BeginDate).Width(100);22. columns.Bound(c => c.EndDate).Width(100);23. columns.Bound(c => c.changedByName).Width(150);24. columns.Bound(c => c.ChangedTimestamp).Width(200);25. columns.Bound(c => c.createdByName).Width(150);26. columns.Bound(c => c.CreatedTimestamp).Width(100);27. columns.Command(command =>28. {29. command.Edit().UpdateText("Update");30. command.Destroy();31. });32. })33. .ToolBar(toolbar => toolbar.Create())34. .HtmlAttributes(new { style = "height: 380px;" })35. .Scrollable()36. .Groupable()37. .Events(x => { x.Edit("onEdit"); x.Save("onGridSave"); })38. .Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("EditorTemplateEyeColor").Window(window => { window.Title("Eye Color"); }))39. .Sortable()40. .Pageable(pageable => pageable41. .Refresh(true)42. .PageSizes(true)43. .ButtonCount(5))44.)I have a razorpage with a grid and these methods on the DataSource.
.Update(u => u.Url("/Audit?handler=Update").Data("forgeryToken"))
.Create(c => c.Url("/Audit?handler=Create").Data("forgeryToken"))
.Destroy(d => d.Url("/Audit?handler=Destroy").Data("forgeryToken"))
For some reason when I edit a row, then hit update, I get a 400 error as the request is being made for Audit?handler=Create instead of the Update handler?
What can I check?
My Update handler
public JsonResult OnPostUpdate([DataSourceRequest] DataSourceRequest request, ViewLineItemModel localOrder)
{
// get updated order from parameter
// save updates to db
//....
// test
JsonResult r = new JsonResult(localOrder);
return r;
}
hello, I'm working through a trial of UI for .NET Core and not having much luck with a very simple task. I'm following the example in the demo for cascading dropdowns and I can't even get the first dropdownlist to load. It just shows a list of items marked Undefined.
Here's the code from the View (Create.cshtml):
<div class="form-group">
<label asp-for="CategoryID" class="control-label"></label>
@(Html.Kendo().DropDownList()
.Name("categories")
.HtmlAttributes(new { style = "width:100%" })
.OptionLabel("Select category...")
.DataTextField("CategoryName")
.DataValueField("CategoryID")
.DataSource(source =>
{
source.Read(read =>
{
read.Action("LoadCategories", "Groups");
});
})
)
<span asp-validation-for="CategoryID" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="SubcategoryID" class="control-label"></label>
@(Html.Kendo().DropDownList()
.Name("subcategories")
.HtmlAttributes(new { style = "width:100%" })
.OptionLabel("Select subcategories...")
.DataTextField("SubcategoryName")
.DataValueField("SubcategoryID")
.DataSource(source =>
{
source.Read(read =>
{
read.Action("LoadSubcategories", "Groups")
.Data("filterSubcategories");
})
.ServerFiltering(true);
})
.Enable(false)
.AutoBind(false)
.CascadeFrom("categories")
)
<span asp-validation-for="SubcategoryID" class="text-danger"></span>
</div>
<script>
function filterSubcategories() {
return {
categories: $("#categories").val()
};
}
</script>
Here's the code from GroupsController.cs:
public JsonResult LoadCategories()
{
List<Category> categories = new List<Category>();
var catQuery = from d in _context.Category
where d.IsActive
orderby d.CategoryName // Sort by name.
select d;
categories = catQuery.ToList();
return new JsonResult(categories);
}
public JsonResult LoadSubcategories(int? categories)
{
List<Subcategory> subcategories = new List<Subcategory>();
var catQuery = from d in _context.SubCategory
where d.CategoryID == categories.GetValueOrDefault()
orderby d.SubCategoryName // Sort by name.
select d;
subcategories = catQuery.ToList();
return new JsonResult(subcategories);
}
I get the same result when using code in GroupsController LoadCategories more similar to your demo source code:
return Json(_context.Category
.Select(c => new { CategoryID = c.CategoryID, CategoryName = c.CategoryName }).ToList());
