Starting with v18.2, BootstrapGridView provides Context Menu out of the box: Context Menu Online Demo
For versions older than 18.2, use the approach below:
This example demonstrates how to implement BootstrapGridView context menu with items similar to ASPxGridView. These items include CRUD operations to Insert, Update, Delete data in BootstrapGridView's data source, operations to enable or disable FilterRow, SearchPanel and GroupPanel, and operations to change Visible property of BootstrapGridView's columns.
The Javascript dictionary object is used to save BootstrapGridView's elements visibility states on client side.
In page markup, handle the BootstrapClientGridView.Init event and add event handler for contextmenu event of BootstrapGridView's main element. This event handler is used to set the Enabled and Text properties of BootstrapPopupMenu items depending on BootstrapGridView's elements visibility and clicked item index. To get the clicked item index, perform the following steps:
1) Call ASPxClientUtils.GetEventSource method to obtain the object that fired the current event.
2) Convert the object to jQuery object.
3) In page markup, set the CssClasses.Row property to the "grid-row" and pass that parameter to the parents method of the jQuery object to get GridView row javascript object.
4) Use the GetPageIndex method and a private BootstrapClientGridView's pageRowSize field of with applied to the jQuery GridView row object index method.
To receive the clicked BootstrapGridView item's ID on the client side, use BootstrapClientGridView.GetRowKey method.
Then handle the BootstrapGridView's CustomCallback event to add the current BootstrapGridView's elements visibility states to its JSProperties, and to transfer them from the server to the client. Handle BootstrapClientGridView.EndCallback event to get access to its JSProperties and to write updated BootstrapGridView's elements visibility states to the javasript dictionary.
Handle the BootstrapClientPopupMenu.ItemClick event to perform an action depending on the selected item. Use the ASPxClientMenuItem.name property to determine the selected item name and switch the applied action.
To manipulate BootstrapGridView data on the client side use AddNewRow, StartEditRow and DeleteRowBootstrapClientGridView's methods.
To change BootstrapGridView's elements visibility states, call the BootstrapClientGridView.PerformCallback method.