Custom Edit Button

[Mike]

I am attempting to us a drop down menu (bootstrap) treatment for inline grid commands, but am having difficulty making it work. Attached is a screen shot of the intended presentation.

For the screen shot I created a row template with the following code:

<script id="rowTemplate" type="text/x-kendo-tmpl">
                    <tr data-id="#: id #">
                        <td class="name">#: name #</td>
                        <td class="id" align="right">#: id #</td>
                        <td class="status" align="right">#: status #</td>
                        <td class="redemptions md-hide sm-hide xs-hide xxs-hide" align="right">#: redemption #</td>
                        <td class="startDate xxs-hide" align="right">#=kendo.format("{0:MM-dd-yyyy}", startDate)#</td>
                        <td class="endDate xxs-hide" align="right">#=kendo.format("{0:MM-dd-yyyy}", endDate)#</td>
                        <td class="options" style="overflow: visible" >
                            <div id="main-tag-controller" class="btn-group">
                                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                                    <span class="caret"></span>
                                    <span class="sr-only">Toggle Dropdown</span>
                                </button>
                                <ul class="dropdown-menu pull-right" role="menu">
                                    <li><a href="" role="itemAction" data-value="00" data-id="#: id #"><i class="fa fa-file-text-o"></i> Details</a></li>
                                    <li><a href="" role="itemAction" data-value="01" data-id="#: id #"><i class="fa fa-bar-chart-o"></i> Report</a></li>
                                    <li><a href="" role="itemAction" data-value="02" data-id="#: id #"><i class="fa fa-pencil-square-o"></i> Edit Promotion</a></li>
                                    <li><a href="" role="itemAction" data-value="03" data-id="#: id #"><i class="fa fa-files-o"></i> Copy Promotion</a></li>
                                    <li><a href="" role="itemAction" data-value="04" data-id="#: id #"><i class="fa fa-times"></i> Cancel Promotion</a></li>
                                    <li><a href="" role="itemAction" data-value="05" data-id="#: id #"><i class="fa fa-eye-slash"></i> Hide Promotion</a></li>
                                </ul>
                            </div>
                        </td>
                    </tr>
</script>

My intent was to bind the built-in commands to the appropriate drop down action, but can not figure out how to accomplish that.

Any recommendations?

[Alexander Valchev]

Hello Mike,

The Grid table rows are rendered dynamically when the DataSource's data is retrieved which is why you should delegate the click event handler for custom menu buttons on the Grid's element via jQuery .on() method. For example:

(assuming that the edit button will have class custom-edit-button)

var grid = $("#grid").data("kendoGrid");

grid.element.on("click", ".custom-edit-button", function(e) {
  var row = $(e.target).closest("tr");

  grid.editRow(row);
});

I hope this approach will fit in your scenario.

Regards,
Alexander Valchev
Telerik