Grid with razorpages questions

[BitShift]

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



 




[Al]

Referring to my post https://www.telerik.com/forums/razorpage-grid-with-checkboxes-example-result---hope-this-helps-others here are the changes for batch - you will notice that the first click on an item opens up the editor and then you can edit. In my example the first click on the checkbox opens the checkbox editor and then you can click true/false - but it is not intuitive.

.DataSource(ds => ds.Ajax()
            .Read(r => r.Url("/Manage/LabBatch?handler=Read").Data("forgeryToken"))
            .Update(u => u.Url("/Manage/LabBatch?handler=Update").Data("forgeryToken"))
            .Create(c => c.Url("/Manage/LabBatch?handler=Create").Data("forgeryToken"))
            .Destroy(d => d.Url("/Manage/LabBatch?handler=Destroy").Data("forgeryToken"))
            .Model(m => m.Id(id => id.Id))
            .Batch(true)
            .PageSize(20)
            .ServerOperation(false)
        )
        .ToolBar(toolbar => {
            toolbar.Save();
        })
        .Editable(editable => editable.Mode(GridEditMode.InCell))
        .Scrollable()

 

public ActionResult OnPostUpdate([DataSourceRequest] DataSourceRequest request, [Bind(Prefix = "models")]IEnumerable<ClientDto3> clients)
       {
           var clientDto3S = clients as ClientDto3[] ?? clients.ToArray();
           foreach (var client in clientDto3S)
           {
               // the updatedClientData contains the updated data (only one record at a time in this example)
               var updatedClientData = ClientsDtos.Where(x => x.Id == client.Id).Select(x => client);
               // test changing data here
               client.UserCodeType = "99";
               TempMessage =
                   $"Admin = {client.Admin}, Management = {client.Management}, Office = {client.Office} ";
               // use this data to update DB here and return the updated data
           }
           var res = new JsonResult(clientDto3S.ToDataSourceResult(request));
           return res;
       }

[Tsvetomir]

Hi guys,

Thank you for sharing such an extensive portion of information. It would be definitely helpful for other users from our community!

BitShift, I will go ahead and target your questions as they were the first ones in this thread.

1 and 2:

The purpose of the Data() option is to allow the developer for sending additional information with the requests to the server-side. Since, internally the Kendo UI Grid performs $.ajax() requests, the additional parameters are passed in the data option of the request. This feature allows for returning specific data according to collected information from other inputs on the page, for instance.

In the specific case, it calls a JavaScript function. It returns the anti-forgery token that is included on the page. With the recent updates on the ASP.NET Core framework, it is mandatory to send these tokens with every request. You could return an object with all of the information that you would like to access on the server-side.

3. In order to make changes to the actual edit mode and the way the items are edited, I can recommend taking a look at the following live demo. 

https://demos.telerik.com/aspnet-core/grid/editing

The controller implementation would be the same as with the RazorPages syntax. The full implementation of the CRUD operations for the Kendo UI Grid could be found in the following page and its corresponding .cs file:

https://github.com/telerik/ui-for-aspnet-core-examples/blob/master/Kendo.Examples.RazorPages/Kendo.Examples.RazorPages/Pages/Grid/GridCrudOperations.cshtml

All that is left is to unify the grid's options between the live demo shared above and the example from the GitHub repository. 

Al, I have already responded to the thread that you have referenced. However, for anyone who stumbles upon this thread, I am pasting my response here:

The RowTemplate option of the Kendo UI Grid completely overrides the row implementation. It gives the freedom the construct the row's content according to one's preferences. You could include multiple field values within one cell, for instance.

The ClientTemplate option is column-based and it per-column. It changes the appearance of the cell. You could set it to anything that fits your requirements. Since the client template is not an editor template, having editors such as the checkbox editors might be misleading for the users. This is due to the fact that this template is designed to display values only and not to edit the underlying field. 

The recommended way to have an editor in any of the grid's columns is to attach the click/change event to the editor. Within the handler, access the underlying data item and change the value of the field. It is important to point out that the cell should be made non-editable in order to prevent the grid from rendering its default editor. It could be done by setting the .Editable() option of the column and returning a false value:

.Editable("notEditable")

function notEditable(e){
     return false;
}

Until very recently the built input with type checkbox was completely non-customizable. Simple CSS did not have any effect on the customization of the appearance. That is why the Kendo UI team created an input that is hidden and a label that was customizable. Therefore, styling the label while using the checkbox functionality of the input. 

Feel free to contact me back in case any additional questions arise.

 

Best regards,
Tsvetomir
Progress Telerik