Hi,
I'm trying to add a DropDownButton to te first cell of all rows in a Grid. The problem is that the DropDownButton does not want to load, even if I place it in the "created" event.
I'm using a rowTemplate. How can I add a dropdownbutton (with custom actions) to this template?
Alternative solution would be to open the context menu of the grid when clicking on a button in my grid.
<script>
$(function() {
var grid = new ejs.grids.Grid({
dataSource: @Html.Raw(ViewBag.employees),
allowPaging: true,
allowSorting: true,
rowTemplate: '#rowTemplate',
columns: [
{ columnName: 'Id', field: 'Id', visible: false },
{ columnName: 'FirstName', field: 'FirstName', visible: false },
{ columnName: 'LastName', field: 'LastName', visible: false },
{ columnName: 'Email', field: 'Email', visible: false }
],
created: function() {
var items = [
{
text: 'Detail'
},
{
text: 'Send Message'
},
{
text: 'Delete'
}];
// initialize DropDownButton control
var drpDownBtn = new ejs.splitbuttons.DropDownButton({items: items});
// Render initialized DropDownButton.
drpDownBtn.appendTo('.employee-button');
}
});
grid.appendTo('#employee-grid');
//var gridObj = document.getElementById("employee-grid").ej2_instances[0];
//gridObj.sortColumn('Id', 'ascending'):
});
</script>
<script id="rowTemplate" type="text/x-template">
<tr class="">
<td>
<div class="col-sm-2">
<button class="employee-button">Options</button>
</div>
<div class="col-sm-3">
${FirstName}
</div>
<div class="col-sm-3">
${LastName}
</div>
<div class="col-sm-3">
${Email}
</div>
</td>
</tr>
</script>
