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

Inline editing with detail template calling create function/mvc action

2 Answers 429 Views

Grid

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

Michael asked on 02 Aug 2012, 12:55 PM

Hi,

I have a grid with inline editing enabled set as a template for a master grid. However when i click on the Edit button, make a change and then Update the create function is called (3 times). I have checked the forums and the closest possible answer was that the other user had additional ',' characters in their javascript. I seem to have no extra character.

I can successfully use the edit command in the outer grid and in other pages / grids that have no detail records.

Please see below for the full .cshtml file i am using with MVC4 / .NET 4.5RC.

Thanks,

@section scripts {

@Scripts.Render("~/bundles/kendo")

@Styles.Render("~/Content/kendo")

<script src="~/Scripts/kendo/2012.2.710/cultures/kendo.culture.en-GB.min.js"></script>

<script type="text/javascript">

//set current culture to the "en-GB" culture script.

kendo.culture("en-GB");

</script>

}<style>

.ysiFieldLabel {

width: 100px;

text-align: right;

padding-right: 5px;

}

.ysiFieldControl {

width: 12.4em;

}

</style>

@section featured {

<section>

<div class="k-content">

<div id="grid"></div>

</div>

</section>

}

<script type="text/x-kendo-template" id="detailTemplate">

<div class="tabstrip">

<ul>

<li class="k-state-active">

Details

</li>

<li>

Projects

</li>

</ul>

<div>

<div class='details'>

<ul>

<li><label>Name: </label>#= Name #</li>

</ul>

</div>

<div>

<div class="projects"></div>

</div>

</script>

<script type="text/x-kendo-template" id="toolbarTemplate">

<div class="toolbar">

<div class="toolbar" style="float:left">

<a class="k-button k-button-icontext">

<span class="k-icon k-add" />

New

</a>

</div>

</script>

<script>

$(document).ready(function () {

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

dataSource: {

transport: {

read: {

url: '/Releases/ReleaseItems?projectId=@(Model.TFSProject.Id)',

dataType: "json",

contentType: "application/json; charset=utf-8"

},

create: {

url: '@Url.Action("ReleaseItemCreate", "Releases")',

dataType: "json",

contentType: "application/json; charset=utf-8",

type: "POST"

},

destroy: {

url: '@Url.Action("ReleaseItemDestroy", "Releases")',

dataType: "json",

contentType: "application/json; charset=utf-8",

type: "POST"

},

parameterMap: function (data, operation) {

// if (operation !== "read" && options.models) { // batch mode

return kendo.stringify(data);

// }

}

},

schema: {

type: "json",

data: "Items", total: "TotalItemCount",

model: {

id: "Id",

fields: {

Id: { type: "number", editable: false },

Name: { type: "string", editable: false },

ApplicationName: { type: "string", editable: false },

Version: { type: "string", editable: false },

ReleaseDate: { type: "date", editable: false },

ProjectId : { type: "number" }

}

},

pageSize: 3,

serverPaging: true,

serverFiltering: false,

serverSorting: false

},

height: 500,

filterable: true,

sortable: false,

pageable: true,

columnMenu: true,

resizable: true,

toolbar: kendo.template($("#toolbarTemplate").html()),

editable: "inline",

detailTemplate: kendo.template($("#detailTemplate").html()),

detailInit: detailInit,

columns: [

{ field: "Id", title: "Id", filterable: true, width: "10px" },

{ field: "Name", title: "Name", filterable: false, width: "80px" },

{ field: "ApplicationName", title: "ApplicationName", width: "100px" },

{ field: "Version", title: "Version", width: "80px" },

{ field: "ReleaseDate", title: "ReleaseDate", width: "100px", format: "{0:G}" },

{ command: ["destroy", { template: '<a class="k-button k-buttonicon-text"><span class="k-icon k-i-custom"></span>Build</a>', click: buildProject }], title: " ", width: "100px" }

]

});

function buildProject() {

}

function detailInit(e) {

var detailRow = e.detailRow;

detailRow.find(".tabstrip").kendoTabStrip({

animation: {

open: { effects: "fadeIn" }

}

});

detailRow.find(".projects").kendoGrid({

dataSource: {

transport: {

read: "/Releases/ReleaseItemProjects?id=" + e.data.Id + "&projectId=@(Model.TFSProject.Id)",

create: {

url: '@Url.Action("ReleaseProjectItemCreate", "Releases")',

dataType: "json",

contentType: "application/json; charset=utf-8",

type: "POST"

},

update: {

url: '@Url.Action("ReleaseProjectItemUpdate", "Releases")',

dataType: "json",

contentType: "application/json; charset=utf-8",

type: "POST"

},

parameterMap: function (data, operation) {

// if (operation !== "read" && options.models) { // batch mode

return kendo.stringify(data);

// }

}

},

schema: {

type: "json",

data: "Items", total: "TotalItemCount",

model: {

fields: {

ReleaseProjectId: { type: "number", editable: false },

ReleaseProjectName: { type: "string", editable: false },

ReleaseProjectVersion: { type: "string", editable: false },

Type: { type: "string", editable: false },

Build: { type: "boolean", editable: true },

ProjectId: { type: "number", editable: false },

ReleaseId: { type: "number", editable: false }

}

},

pageSize: 5,

serverPaging: true,

serverFiltering: false,

serverSorting: false

},

scrollable: false,

sortable: false,

pageable: true,

filterable: false,

columnMenu: true,

columns: [

{ field: "ReleaseProjectName" },

{ field: "ReleaseProjectVersion" },

{ field: "Type" },

{ field: "Build", width: "50px", template: '<input type="checkbox" #= Build ? checked="checked" : "" # disabled="disabled" ></input>' },

{ command: ["edit"], title: " ", width: "220px" }

],

editable: "inline",

});

}

</script>

Inline editing with detail template calling create function/mvc action

2 Answers, 1 is accepted