Kendo UI Grid with datatype "json" for autosync entry

This blog help to you for updating your database using the editable list(i.e. kendo UI Grid) If you need functionality which provide to save your data without “Save Button” then use “Kendo UI Grid with “AutoSync” functionality. This editor works as MS-Excel. Changes are getting saved automatically.

Following are the Kendo dependency, so first have to include all files.

Following steps are guiding that how to use Kendo UI Grid with AutoSync functionality.

• 1) Make one div tag. And give id to it(e.g. id="grid")

• 2) Now make javascript for “Kendo UI Grid”

  • Following piece of the code help you to read, add, edit and remove the data from database. Here write your API path in “url” which handles these all functionality. So write the following javascript for datasource.

  • 

  • dataSource: It is used to display suggestions for the current value. And the above example is for the set. dataSource as an existing kendo.data.DataSource instance.
  • dataSource-transport: This option describes the remote service configuration like HTTP headers, URL etc. It can also be used to implement custom data loading and saving.
  • dataSource-transport-parameterMap: It converts the request parameters to a format suitable for the remote service. By default the data source sends the parameter using JQuery’s conventions. In parameterMap, You have to write “OPTIONS” instead of “OPTIONS.MODELS” and also in return statement you return “kendo.stringify(options)” instead of “{models: kendo.stringify(options.models)}”.

• 3) The other options are set for editor. Write your column names into models.
      Give id which is your primary key. And all column name into fields.

  • Following piece of code indicate you that what to write.

  • 

  • AutoSync: By default it is false. But if you set to true the data source would automatically save any changed data items using sync method.
  • Batch: If set to true the data source will batch CRUD operation requests. It means if updating any two data item would cause one HTTP request instead of two.
  • Fields: Define primary key and all column names which are you want in editor.
  • This example is add and update the database using Autosync option. So if you want to update / add data, when you change control from one column to other column then save your data in back end automatically.

  • Here not exists any Save Button to save data.

  • Here we take different data types column. Number, String, Boolean.

• 4) Now simply define all attribute which help to make grid user-friendly.
      Into columns attribute,write all field name which want to display.

  • 

  • We make one auto-complete column in Kendo Grid using KendoAutoComplete Widget. And other flavor is as text-area. For this, in editor write function name which provide this functionality.

  • 

  • Here first function is for kendoAutoComplete which is created from an input HTML tag.
  • In that, data-bind: This attribute is used to bind auto complete widget with field.
  • dataTextField: This is the field of the data item used when searching for suggestion. And it is text which matched with results.
  • dataTextField: This is the field of the data item used when searching for suggestion. And it is text which matched with results.
  • dataValueField: This is the field of the data item that provides the value of the autocomplete widget.
  • But Important Note is that “ When dataValueField is defined, the dataTextField option also should be set.”
  • In other function, simply write input HTML element and just specify the rows attribute to show it as “TextArea”.

Reference: Kendo UI Grid