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

Custom Edit Button

1 Answer 274 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Mike
Top achievements
Rank 1
Mike asked on 18 Aug 2014, 02:53 PM
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?

1 Answer, 1 is accepted

Sort by
0
Alexander Valchev
Telerik team
answered on 20 Aug 2014, 07:51 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
Grid
Asked by
Mike
Top achievements
Rank 1
Answers by
Alexander Valchev
Telerik team
Share this question
or