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

Add command button on Grid Template

1 Answer 64 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Binh
Top achievements
Rank 1
Binh asked on 07 Apr 2014, 08:48 AM
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?

1 Answer, 1 is accepted

Sort by
0
Alexander Valchev
Telerik team
answered on 09 Apr 2014, 08:06 AM
Hi Binh,

I already replied to the support ticket which you submitted on the same subject. In order to avoid further duplication I kindly ask you to continue our conversation in the other thread. Thank you in advance for the understanding.

Regards,
Alexander Valchev
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
Grid
Asked by
Binh
Top achievements
Rank 1
Answers by
Alexander Valchev
Telerik team
Share this question
or