saving and updating data in a telerik grid

[ahsan]

Hello ! i am using a telerik grid in order to display my data, when i go to edit the rows i want it to update my database however all the demos i have seen are using URLs as part of the CRUD function, i use a sql database so urls will not work. Is there an alternative method? 

 

Kind regards

[Aleksandar]

Hello,

I can suggest inspecting the InLine Editing Demo for the Grid, for example. Click on the View source tab to view the source code behind the example:

In the above example the Action method and Controller are provided for each CRUD endpoint:

    .DataSource(dataSource => dataSource
        .Ajax()
        .PageSize(20)
        .Events(events => events.Error("error_handler"))
        .Model(model => model.Id(p => p.ProductID))
        .Create(update => update.Action("EditingInline_Create", "Grid"))
        .Read(read => read.Action("EditingInline_Read", "Grid"))
        .Update(update => update.Action("EditingInline_Update", "Grid"))
        .Destroy(update => update.Action("EditingInline_Destroy", "Grid"))
    )

 

 

        public ActionResult EditingInline_Read([DataSourceRequest] DataSourceRequest request)
        {
            return Json(productService.Read().ToDataSourceResult(request));
        }

        [AcceptVerbs("Post")]
        public ActionResult EditingInline_Create([DataSourceRequest] DataSourceRequest request, ProductViewModel product)
        {
            if (product != null && ModelState.IsValid)
            {
                productService.Create(product);
            }

            return Json(new[] { product }.ToDataSourceResult(request, ModelState));
        }

        [AcceptVerbs("Post")]
        public ActionResult EditingInline_Update([DataSourceRequest] DataSourceRequest request, ProductViewModel product)
        {
            if (product != null && ModelState.IsValid)
            {
                productService.Update(product);
            }

            return Json(new[] { product }.ToDataSourceResult(request, ModelState));
        }

        [AcceptVerbs("Post")]
        public ActionResult EditingInline_Destroy([DataSourceRequest] DataSourceRequest request, ProductViewModel product)
        {
            if (product != null)
            {
                productService.Destroy(product);
            }

            return Json(new[] { product }.ToDataSourceResult(request, ModelState));
        }

 

Make sure to review the  corresponding section of the documentation for further details on the editing functionality. Note that the above demo uses a sample service that is useful for the purpose of the demo website. Feel free to implement a service and persisting logic that matches your requirements.

Regards,
Aleksandar
Progress Telerik

[ahsan]

Hello, thanks for the reply. I should have stated that i am using HTML5/Javascript, the demo above is for asp net core, is there a way to implement this in html5/javascript?

 

thank you

[Mihaela]

Hello,

Would you confirm that you are using a Kendo UI for jQuery Grid?

Generally, the specified URLs in the Grid's DataSource are the CRUD endpoints to which the requests are sent. For example, when an existing Grid record is edited, the DataSource will pass the edited item to the server (it will trigger an Update request), then you can update the respective record in the database based on the received data in the Update method.

[ahsan]

I am yes, ive got the update to work locally however i am wanting to update my database. currently i update the database via the controller.

[Georgi Denchev]

Hello, Ahsan,

The Kendo UI for jQuery is a UI library. It is used for rendering purposes only.

In order to update a record inside your Database, you must use a server. It isn't possible to establish a database connection directly from the front-end portion of your application. This would in fact be an extremely big security issue.

The process of operations should be similar to this:

You create a Kendo Grid -> You add a DataSource with remote operations -> You provide an url to the Controller Action(on your server) that handles the Update -> the Controller communicates with the Database and if the data is valid, it updates it.

Here's a demo example where the CRUD operations are defined in JavaScript:

https://demos.telerik.com/kendo-ui/grid/editing-inline 

Regards,

Georgi