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?

(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

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.

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());

Clicking on item in DropDownList in a Grid Popup Editor causes a javascript "undefined" error. Attached are screen shots from the Chrome debugger. Relevant code is below:

using System;
using System.Collections.Generic;
using System.Diagnostics;
using System.Linq;
using Microsoft.AspNetCore.Mvc;
using Microsoft.Extensions.Logging;
using TelerikTest.Models;
using System.Net.Http;
using Newtonsoft.Json;
using System.Text;
using System.IO;
using Kendo.Mvc.UI;
using Kendo.Mvc.Extensions;

namespace TelerikTest.Controllers {
   public class PeopleController : Controller {

      public PeopleController() {
         }

      private List<Person> InitPersons() {
         var persons = new List<Person>();
         persons.Add(new Person() { Id = 1, FirstName = "Joe", LastName = "Smith", JobTitle = "President", Street = "409 State St.", City = "Chicago", State = "IL", Zip = "60606" });
         persons.Add(new Person() { Id = 2, FirstName = "Bob", LastName = "Brown", JobTitle = "Vice President", Street = "1200 Fifth Ave.", City = "New York", State = "NY", Zip = "10005" });
         return persons;
         }

      public IActionResult Index() {
         var persons = InitPersons();
         return View(persons);
         }

      public IActionResult EditForms(int id) {
         var persons = InitPersons();
         var person = persons.Single(x => x.Id == id);
         ViewData["name"] = person.LastName;

         var cfi = new List<CategoryFormItem>();
         cfi.Add(new CategoryFormItem() { id = 1, category = "Medical", form = "Medical Conditions" });
         cfi.Add(new CategoryFormItem() { id = 2, category = "Medical", form = "Physical" });
         cfi.Add(new CategoryFormItem() { id = 3, category = "Permission", form = "Participation" });
         cfi.Add(new CategoryFormItem() { id = 4, category = "Permission", form = "Travel" });
         cfi.Add(new CategoryFormItem() { id = 5, category = "Incident", form = "Behavior" });
         cfi.Add(new CategoryFormItem() { id = 6, category = "Incident", form = "Injury" });

         var cf = new List<CategoryForm>();
         foreach (var f in cfi) {
            var c = new CategoryForm();
            c.id = f.id;
            c.cf = $"{f.category}: {f.form}";
            cf.Add(c);
            }

         ViewData["categoryforms"] = cf;

         var pforms = new List<PersonFormViewModel>();
         var vmForm = new PersonFormViewModel() { id = 1, category = "Medical", formId = 1, name = "Physical", personId = id, received = DateTime.Today, remarks = "Required physical" };
         pforms.Add(vmForm);

         return View(pforms);
         }

      public IActionResult CreateForm([DataSourceRequest]DataSourceRequest request, [FromForm] PersonFormViewModel vm) {
         return Json(new[] { vm }.ToDataSourceResult(request, ModelState));
         }

      public IActionResult UpdateForm([DataSourceRequest]DataSourceRequest request, PersonFormViewModel vm) {
         return Json(new[] { vm }.ToDataSourceResult(request, ModelState));
         }

      public IActionResult DeleteForm([DataSourceRequest]DataSourceRequest request, PersonFormViewModel vm) {
         return Json(new[] { vm }.ToDataSourceResult(request, ModelState));
         }
      }
   }

@model IEnumerable<TelerikTest.Models.PersonFormViewModel>
@using Kendo.Mvc.UI

@section Scripts {
<script type="text/javascript">
    function onDataBound() {
        var btn = $("#addPeopleForm").data("kendoButton");
        if (btn == undefined) {
            $("#addPeopleForm").kendoButton({
                icon: "plus",
                click: function (e) {
                    e.preventDefault();
                    var grid = $('#gridPersonForms').data('kendoGrid');
                    grid.addRow();
                }
            });
        }
    };
</script>
}

<div class="text-center">
     <h1 class="display-4">@ViewData["name"]</h1>
</div>
<div>
    @(Html.Kendo().Grid<PersonFormViewModel>(Model)
       .Name("gridPersonForms")
       .Columns(columns => {
           columns.Bound(c => c.id).Hidden();
           columns.Bound(c => c.personId).Hidden();
           columns.Bound(c => c.formId).Hidden();
           columns.Bound(c => c.category).Hidden().ClientGroupHeaderTemplate("#= value #");
           columns.Bound(c => c.catfrm).Hidden();
           columns.Bound(c => c.name).Width(100).Title("Form");
           columns.Bound(c => c.received).Width(60).Title("Date Received");
           columns.Bound(c => c.remarks).Title("Remarks");
           columns.Command(c => { c.Edit(); c.Destroy(); }).Width(250).ClientHeaderTemplate("<button id='addPeopleForm'>Add New Form Receipt</button>");
       })
       .Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("AddPeopleForm"))
       .Events(e => e.DataBound("onDataBound"))
       .Selectable(s => s.Mode(GridSelectionMode.Single).Type(GridSelectionType.Row))
       .DataSource(dataSource => dataSource
           .Ajax()
           .Model(m => m.Id(p => p.id))
           .Create("CreateForm", "People")
           .Update("UpdateForm", "People")
           .Destroy("DeleteForm", "People")
           .Group(g => g.Add(x => x.category))
           .ServerOperation(false)
           )
    )
</div>

using System;
using System.ComponentModel;
using System.ComponentModel.DataAnnotations;

namespace TelerikTest.Models {
   public class PersonFormViewModel {
      public int id { get; set; }
      public int personId { get; set; }
      public int formId { get; set; }

      [DisplayFormat(ApplyFormatInEditMode = true, DataFormatString ="{0:MM/dd/yyyy}")]
      [DataType(DataType.Date)]
      [DisplayName("Date Received")]
      public DateTime received { get; set; }

      [DisplayName("Remarks")]
      public string remarks { get; set; }

      public string category { get; set; }
      public string name { get; set; }

      [UIHint("CategoryFormEditor")]
      [DisplayName("Category: Form")]
      public CategoryForm catfrm { get; set; }

      public PersonFormViewModel() {
         }
      }
   }

@model TelerikTest.Models.PersonFormViewModel

<div class="k-edit-form-container">
    @Html.HiddenFor(m => m.id)
    @Html.HiddenFor(m => m.personId)
    @Html.HiddenFor(m => m.formId)

    <div class="k-edit-label">
        @Html.LabelFor(model => model.catfrm)
    </div>
    <div class="k-edit-field">
        @Html.EditorFor(model => model.catfrm)
        @Html.ValidationMessageFor(model => model.catfrm)
    </div>

    <div class="k-edit-label">
        @Html.LabelFor(model => model.received)
    </div>
    <div class="k-edit-field">
        @Html.EditorFor(model => model.received)
        @Html.ValidationMessageFor(model => model.received)
    </div>
    <div class="k-edit-label">
        @Html.LabelFor(model => model.remarks)
    </div>
    <div class="k-edit-field">
        @Html.EditorFor(model => model.remarks)
        @Html.ValidationMessageFor(model => model.remarks)
    </div>
</div>

@using Kendo.Mvc.UI

@(Html.Kendo().DropDownList()
   .Name("catfrm")
   .DataValueField("id")
   .DataTextField("cf")
   .BindTo((System.Collections.IEnumerable) ViewData["categoryforms"])
   )

using System;
namespace TelerikTest.Models {
   public class CategoryForm {
      public int id { get; set; }
      public string cf { get; set; }

      public CategoryForm() {
         }
      }

   public class CategoryFormItem {
      public int id { get; set; }
      public string category { get; set; }
      public string form { get; set; }

      public CategoryFormItem() {
         }
      }
   }

Hi,

I have some values that are DateTimeOffsets. I'm having trouble formatting them in a grid though.

This code:

produces:

2019-06-06T17:47:52.0256922+01:00

when what I want to see is:

06/06/2019 17:47:52

Is the Grid unable to format DateTimeOffsets, or am I missing something?

Thanks,

Gary