how to add grid column values dynamically using jquery?

Question

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: "&nbsp;", 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.

"when ever Add Record event firing that time i have to add default column value "IsAdded" likewise edit and delete." It isn't clear what you try to achieve, here. You may want to spend a bit more time to write down what you really meant. — Stefano Magistri
– Stefano Magistri, Commented Sep 3, 2015 at 14:41

Dion D. · Accepted Answer · 2015-09-09 07:48:52Z

2

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: "&nbsp;",
      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");
  }
}

edited Sep 9, 2015 at 7:48

answered Sep 3, 2015 at 15:21

Dion D.

2,5962 gold badges18 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

bagya Over a year ago

Thanks for you help. another one thing i have to do while clicking edit button i have to add Operation context value " IsUpdate" and for delete button "IsDelete". I tried inside of edit event which one you suggested. it's not working.How can i achieve? pleae help me.

Dion D. Over a year ago

So this value will be added after CRUD operation? You can see on datasource transport documentation and use events create, update and destroy..

bagya Over a year ago

CRUD Operation(ADD,EDIT,DELETE) These three values we have to send with grid dataSource based on the Events. 'IsAdded' - This must be add while adding new record to the Grid. After adding if user editing that record that time also it should be same as 'IsAdded' not 'IsUpdate'. 'IsUpdate' - This must be add at the time of existing record editing(existing records from Database showing in the grid not the currently added record). 'IsDelete' - This must be add 'IsDelete' but it should hide records showing in grid but it should not delete the records from grid dataSource.

bagya Over a year ago

I am new to Kendo. I am waiting for your reply. Thanks

bagya Over a year ago

I tried it's working fine. my another requirement is that OperationContext column should add dynamically and also want to hidden that column. I tried hidden true it's hiding from grid but it's showing in popup editor. Please help me to achieve this also.

|

Collectives™ on Stack Overflow

how to add grid column values dynamically using jquery?

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related