CODEWITHSUNDEEP
javascriptjquerykendo-uikendo-grid
bagya
bagya

Reputation: 399

how to add grid column values dynamically using jquery?

I have to add value one of the grid column dynamically. Actually it's adding but its adding as a another row. but it's need to add in same row.

Here the simple grid example code and link http://jsfiddle.net/bagya1985/xojke83s/3/

$("#grid").kendoGrid({
                    "dataSource": {
                      "schema": {
                        "model": {
                          "id": "id",   
                          "fields": {       
                            "OperationContext": {
                              "type": "string",                              
                              "editable": "false"
                            }
                          }
                        }
                      }                     
                    },
                    "editable": "popup",
                    "toolbar": [
                      {
                        "name": "create",
                        "text": "Add a New Record"
                      }
                    ],
                    "columns": [
                      {

                        "field": "Name",
                        "title": "Name"
                      },
                      {
                        "field": "Age",
                        "title": "Age"

                      },
                      {
                        "field": "OperationContext",
                        "title": "Operation Context"
                      },
                      { command: ["edit", "destroy"], title: " ", width: "250px" }
                         ]
                        });

          $(".k-grid-add").on("click", function () {

              var grid = $("#grid").data("kendoGrid").dataSource.data([{OperationContext: "IsAdded"}]);
                 console.log(grid);            
           });

Please help anyone to achieve this.

Upvotes: 0

Views: 2121

Answers (1)

Dion D.
Dion D.

Reputation: 2596

Just saw your fiddle makes me understand what do you want to achieve, if you want to add like default value (dynamically) for your model whenever you click add button you can try to do experiment with Grid's edit event. You can access current row object from it and modify its value using set method.

Try this code, taken and modified from your fiddle

  $("#grid").kendoGrid({
    dataSource: {
      schema: {
        model: {
          id: "id",
          fields: {
            OperationContext: {
              type: "string",
              editable: "false"
            }
          }
        }
      }
    },
    editable: "popup",
    toolbar: [{
      name: "create",
      text: "Add a New Record"
    }],
    columns: [{
      field: "Name",
      title: "Name"
    }, {
      field: "Age",
      title: "Age"
    }, {
      field: "OperationContext",
      title: "Operation Context"
    }, {
      command: ["edit", "destroy"],
      title: " ",
      width: "250px"
    }],
    edit: function (e) {
      var model = e.model;

      if (model.isNew()) { // add new record
        model.set("OperationContext", "IsAdded");
      }
    }
  });

Dojo

Here read some their documentation for futher development.

UPDATE

If you want to update that property after record is saved, change edit event to save event, and model.isNew() will help you determine is model newly added or taken from database(remote service).

For delete operation its need a little bit tweak with remove event. You should prevent it to remove the data from data source and then take advantage of data source filter to only display data which have OperationContext not equal with IsDeleted.

See updated dojo and I encourage you to read their documentation about Grid, people here usually don't do your homework

UPDATE

Please help me without id property or how to add id property dynamically for all rows

new datasource model schema

dataSource: {
  schema: {
    model: {
      id: "id",
      fields: {
        OperationContext: { type: "string", editable: "false" },
        Local: { type: "bool", editable: "false", defaultValue: true }
      }
    }
  }
}

then your edit function

edit: function (e) {
  var model = e.model;

  if (model.Local) {
    model.set("OperationContext", "IsAdded");
  }
}

Upvotes: 2

Related Questions