CODEWITHSUNDEEP
javascriptmodel-view-controllerkendo-uikendo-grid
user6515495
user6515495

Reputation:

How to pass updated data from grid to controller

In my kendo grid the update button does not work after I edit through pop up editor ,"result" is a Ajax call response, since I do not use services I don't need the "read" part that's why I commented it,

DataSource Initialization:

dataSource = new kendo.data.DataSource({
    transport: {
        //read: {
            //    url: result,
            //    dataType: "json"
        //},
        update: {
            url: "/AdminTool/update_grid",
            dataType: "json"
        },                             
        parameterMap: function (options, operation) {
            if (operation !== "read" && options.models) {
                return { models: kendo.stringify(options.models) };
            }
        }
    },
    batch: true,
    pageSize: 20,
    schema: {
        model: {
            id: "DeviceIP",
            fields: {
                DeviceIP: { editable: false, nullable: true },
                Producer: { type: "string" },
                Model: { type: "string" },
                DeviceType: { type: "string" },
                Description: { type: "string" },
                Username: { type: "string" },
                Password: { type: "string" },
                PublicIP: { type: "string" },
            }
        }
    }
});

Kendo Grid Initialization:

$("#turbingrid").kendoGrid({
    dataSource: result,
    scrollable: false,
    columns: [
       { field: 'DeviceIP', title: 'DeviceIP', width: '100px', id: 'DeviceIP' },
       { field: 'Producer', title: 'Producer', width: '80px', editor: ProductNameDropDownEditor, },
       { field: 'Model', title: 'Model', width: '120px' },
       { field: 'DeviceType', title: 'DeviceType', width: '100px', editor:deviceTypesList },
       { field: 'Description', title: 'Description', width: '100px' },
       { field: 'Username', title: 'Username',width:'120px' },
       { field: 'Password', title: 'Password', width: '100px' },                                          
       { field: 'PublicIP', title: 'PublicIP', width: '120px' },
       { command: ["edit"], title: " ", width: "100px" }],
       editable: "popup",
       edit: function() {
               document.getElementsByName("DeviceIP")[0].disabled = true;
       },                          
       editable: "popup"
});

Column Editors:

function ProductNameDropDownEditor(container, options) {             
    $('<input  name="Producer" data-type="string"\">')
       .appendTo(container)
       .kendoDropDownList({
           valuePrimitive: true,
           dataSource: mydata,
           dataTextField: "Text",
           dataValueField: "Text",
    });                                           
}              

function deviceTypesList(container, options) {
    $('<input  name="DeviceType" data-type="string" \">')
        .appendTo(container)
        .kendoDropDownList({
            dataSource: mydata_deviceType,
            dataTextField: "Text",
            dataValueField: "Text",
            //dataValueField: "ProductName",
    });
}

My Controller:

 [HttpPost]
    public ActionResult update_grid(TurbineDvce frm)
    {
        try
        {
            // TODO: Add update logic here

            return RedirectToAction("Index");
        }
        catch
        {
            return View();
        }
    }

The Model I want to pass

 public class TurbineDvce
{
    public string TurbineId { get; set; }
    public string DeviceIP { get; set; }
    public string Producer { get; set; }
    public string Model { get; set; }
    public string DeviceType { get; set; }
    public string Comments { get; set; }
    public string Description { get; set; }
    public string Username { get; set; }
    public string Password { get; set; }

    public string PublicIP { get; set; }

}

Upvotes: 1

Views: 1653

Answers (2)

Pramesh
Pramesh

Reputation: 1244

your controller action method is expecting parameter name "frm". So it will be like

parameterMap: function(options, operations){
  if(operation !== "read" && options{
    return {frm: options}
  }
}

Upvotes: 0

Sandman
Sandman

Reputation: 2307

Use the parameterMap function to specify what data you wish to send to the controller function when editing each individual Kendo Grid row.

You can also specify within the function different methods of returning data based on the operation type.

In your case, an example would be like:

transport: {
    update: {
        url:"/AdminTool/update_grid",
        dataType: "json"
    },
    parameterMap: function (data, operation) {
        if(operation !== "read" && data) {
            return kendo.stringify(data);
        }
    }
}

Upvotes: 2

Related Questions