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

Add command button on Grid Template

1 Answer 166 Views

Grid

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

Binh asked on 07 Apr 2014, 08:48 AM

untitled.png

Hi

I was trying to make grid as attached in file using Kendo Grid, but delete command can't called destroy event to delete data. And i use text box to add new data on footer table, so it can always be shown even if user change grid paging. Is this possible to be done?

Here is my html code:

<div id="example" class="k-content">

<table id="grid">

<colgroup>

<col class="photo" />

<col class="details" />

<col />

</colgroup>

<thead>

<tr>

<th>

Picture

</th>

<th>

Details

</th>

<th>

ID

</th>

</tr>

</thead>

<tbody>

<tr>

<td colspan="3"></td>

</tr>

</tbody>

<tfoot>

<tr>

<td>

<input type="text">

</td>

<td>

<input type="text">

</td>

<td>

<input type="button" value="Add" />

</td>

</tr>

</tfoot>

</table>

<div id="pager"></div>

<script id="rowTemplate" type="text/x-kendo-tmpl">

<tr data-uid="#: id #">

<td class="photo">

<span class="title">#: productName #</span>

</td>

<td class="details">

<span class="title">#: category #</span>

</td>

<td class="employeeID">

<a class="k-button k-button-icontext" href="\#" onclick="deleteValue(this)"><span class="k-icon k-delete"></span></a>

</td>

</tr>

</script>

<script id="altRowTemplate" type="text/x-kendo-tmpl">

<tr class="k-alt" data-uid="#: id #">

<td class="photo">

<span class="title">#: productName #</span>

</td>

<td class="details">

<span class="title">#: category #</span>

</td>

<td class="employeeID">

<a class="k-button k-button-icontext" href="\#" onclick="deleteValue(this)"><span class="k-icon k-delete"></span></a>

</td>

</tr>

</script>

</div>

Here is my script code:

var dataSource;

$(document).ready(function () {

dataSource = new kendo.data.DataSource({

autoSync: true,

batch: true,

transport: {

read: {

url: "@Url.Action("Read", "Home")",

dataType: "json"

},

create: {

url: "@Url.Action("Save", "Home")",

dataType: "json",

type: "POST"

},

update: {

url: "@Url.Action("Save", "Home")",

dataType: "json",

type: "POST"

},

destroy: {

url: "@Url.Action("Delete", "Home")",

dataType: "json"

},

parameterMap: function (data, operation) {

if (operation != "read" && data.models) {

return { models: kendo.stringify(data.models) };

}

},

pageSize: 2

});

$("#grid").kendoGrid({

dataSource: dataSource,

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

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

pageable: {

previousNext: false

},

editable: "inline"

});

});

function deleteValue(sender) {

var products = dataSource.data();

dataSource.remove(products[0]);

dataSource.sync();

}

Is there anything that i missed?

Add command button on Grid Template

1 Answer, 1 is accepted