Add command button on Grid Template

[Binh]

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?

[Alexander Valchev]

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