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:
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?
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?