This is a migrated thread and some comments may be shown as answers.

Override Create/Edit buttons

3 Answers 939 Views

Grid

This is a migrated thread and some comments may be shown as answers.

Dave asked on 02 Oct 2012, 01:43 PM

Hi,

I'm using the grid control in my MVC 4 application to display selected columns of records.

I don't want to edit or create items from the grid, (i.e.the grid's built in popup/inline capabilities)

I want to transition to another page to do my creates and edits.

Can I override the default behavior of the create and edit buttons?

Below is an example of my grid:

$(function () {

// select the employeesGrid empty div and call the

// kendoGrid function to transform it into a grid

var grid = $("#employeesGrid").kendoGrid({

// specify the columns on the grid

columns: [

{ title: "", template: "<input type='checkbox' />" },

{ field: "FirstName", title: "First Name" },

{ field: "LastName", title: "Last Name" },

"Title",

"City",

{ field: "BirthDate", title: "Birthday", template: '#= kendo.toString(BirthDate,"MM/dd/yyyy") #' },

{ command: ["edit", "destroy"], title: " " }

],

// the datasource for the grid

dataSource: new kendo.data.DataSource({

// the transport tells the datasource what endpoints

// to use for CRUD actions

transport: {

read: "api/employees",

update: {

// get the id off of the model object that

// kendo ui automatically passes to the url function

url: function (employee) {

return "api/employees/" + employee.Id

},

type: "POST"

},

destroy: {

// get the id off of the model object that

// kendo ui automatically passes to the url function

url: function (employee) {

return "api/employees/" + employee.Id

},

type: "DELETE"

},

parameterMap: function (options, operation) {

// if the current operation is an update

if (operation === "update") {

// create a new JavaScript date object based on the current

// BirthDate parameter value

var d = new Date(options.BirthDate);

// overwrite the BirthDate value with a formatted value that WebAPI

// will be able to convert

options.BirthDate = kendo.toString(new Date(d), "MM/dd/yyyy");

}

// ALWAYS return options

return options;

}

},

// the schema defines the schema of the JSON coming

// back from the server so the datasource can parse it

schema: {

// the array of repeating data elements (employees)

data: "Data",

// the total count of records in the whole dataset. used

// for paging.

total: "Count",

model: {

id: "Id",

fields: {

// specify all the model fields, along with validation rules and whether or

// not they can be edited or nulled out.

FirstName: { editable: false },

LastName: { editable: true, nullable: false, validation: { required: true } },

Address: { editable: true, nullable: false, validation: { required: true } },

City: { editable: true, nullable: false, validation: { required: true } },

BirthDate: { editable: true, type: "date" }

}

},

// map the errors if there are any. this automatically raises the "error"

// event

errors: "Errors"

},

error: function (e) {

console.log(e.statusText);

},

// the number of records to show per page

pageSize: 3,

// do paging on the server

serverPaging: true

}),

// paging is enabled in the grid

pageable: true,

// editing happens inline, one row at a time.

editable: "popup",

groupable: true

}).data("kendoGrid");

});

Override Create/Edit buttons

3 Answers, 1 is accepted