Hi Team,
I have created a grid in MVC controller using GridModel and passing the same to the view.
I have created a context menu, my requirement is to select multiple rows and right click (open context menu) and do certain operations like Export to Excel (selected rows), Copy selected rows, etc.
$(document).contextmenu({ selector: ".ui-iggrid-selectedcell.ui-state-active", preventSelect: false, menu: [ { title: "Export to Excel", cmd: "exportToExcel" }, { title: "Copy Selected Rows", cmd: "copySelectedRows" } ],
select: function (event, ui) {
switch (ui.cmd) {
case "exportToExcel": var selectedRows = $("#gridCategory").igGridSelection('selectedRow');
//do something on selected rows
}
But I get the below error:
Uncaught Error: cannot call methods on igGridSelection prior to initialization; attempted to call method 'selectedRow'
I have used a table as well instead of div as the grid container.
Also, the context menu appears behind the igGrid and not in front of the grid.
Please help me in resolving the issue.
Thank you.
Please let me know if you need any further details from me.
-Regards,
Agraj
Hi Vasya,
Thank you for your response.
Now, the context menu is coming in front after setting it in the beforeOpen event. Thank you.
But still, when I click the item in the context menu, I get the same error. The grid binds properly, but as soon as I click the item in context menu, I get the error in the console window of the browser:
Is it because I am creating and binding the grid in the controller and just passing it in the view?
Hello Agraj,
My suggestion regarding z-index is to set it in the beforeOpen event of the context menu to ensure that it is going to be correctly set and respectively the context menu is going to be visible. For example:
$(document).contextmenu({ delegate: ".ui-iggrid-selectedcell.ui-state-active", autoFocus: true, preventSelect: false, menu: [ { title: "Copy Selected Rows", cmd: "copyRows" }, { title: "Export To Excel", cmd: "exportToExcel" } ], beforeOpen: function (event, ui) { ui.menu.zIndex( $(event.target).zIndex() + 1); }, select: function (event, ui) { var $target = ui.target; switch (ui.cmd) { case "copyRows": var selectedRow = $("#grid").igGridSelection('selectedRow'); alert("Selected Row Index: " + selectedRow.index); break; } } });
Regarding the selection issue I can not reproduce it on my side.
I made a small, isolated sample, using your code and I am attaching it for your reference. On my side it is working as expected and no exception is thrown.
Could you please test it on your side and let me know what is the result. If the issue is still reproducible on your end please feel free to get back to me with steps to reproduce.
For my sample I am using the latest service release available for version 15.2.
I hope you find this information and sample helpful.
Please let me know if you need any further assistance with this matter.
Any updates on the issue I am facing?
I have placed the test application on the below location:
https://www.dropbox.com/s/uona174kpe1wa6k/TestInfragistics.zip?dl=0
Please have a look.
Thank you foe getting back to me.
I still need a small working sample because everything with the code snippet provided looks fine and I need to debug it and find what is causing this unusual behavior.
I am looking forward to receiving your sample.