have a kendo mvc grid with one of the column as client template images. Whenever images are clicked I would like to open jquery context menu which has links to other pages. Now, I have implemented my code this way.
and in my javascript I would like to use jquery contextmenu..The standard form of using context menu by jquery team is like this:
Now I would like pass the class name of the particular image to the contextmenu . I have tried onclick on the client template to pass it, but When I nest function with jquery context menu function.. Its throwing me errors. How can I access directly clicked element class name in the context menu function.
@(Html.Kendo().Grid<
FlightListViewModel
>()
.Name("Flights")
.Events(builder => builder.DataBound("gridDataBound"))
.DataSource(dataSource => dataSource
.ServerOperation(false)
.Read(read => read.Action("Index", "Flights"))
.PageSize(50)
)
.HtmlAttributes(new { style = "height:220px;" })
.Columns(col =>
{
col.Bound(customer=> customer.Name).Width(280);
col.Template(t => t.ClassName).ClientTemplate("<
img
class
=
'activate-menu'
src
=
'/Content/Images/flipo.jpg'
style
=
'cursor: pointer;'
/>").Title("").Width(40);
}).Sortable()
.Scrollable()
.Pageable(pageable => pageable.ButtonCount(1))
.ColumnMenu()
.Filterable()
)
$.contextMenu({
selector:
'.activate-menu'
,
trigger:
'left'
,
autoHide:
false
,
callback:
function
(key, options) {
if
(key ==
"Book"
) {
$(
'body'
).css(
'cursor'
,
'wait'
);
$.post(
"/CustomerInformation/SetId"
, { code: className},
function
(data) {
window.location.href =
"/Hotels/CInformation/Index"
;
});
}
},
items: {
"Book"
: {
name:
"Book"
, icon1:
"Booking"
}
}
});
Now I would like pass the class name of the particular image to the contextmenu . I have tried onclick on the client template to pass it, but When I nest function with jquery context menu function.. Its throwing me errors. How can I access directly clicked element class name in the context menu function.