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 => pageable
41.
.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());