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
Hello Agraj,
Thank you for posting in our community.
I believe the reason why the context menu appears behind grid is that the z-index of the menu is lower than the z-index of the grid container. Z-index property specifies the stack order of an element. An element with greater stack order is always in front of an element with a lower stack trace. Some further reference could be found ta the following link:
http://www.w3schools.com/cssref/pr_pos_z-index.asp
In regards to the exception issue I will ned a running sample to debug on mi side in order to investigate this further and find the root cause of this behavior. Could you please isolate the issue in a small sample, removing all the code that is not directly related to this matter and send it back to me. This is going to be hihly appreciated and helpful.
Please feel free to continue sending updates to this case at any time.
Hi Vasya,
Trying to increase the z-index was the first thing I did before even raising this request, changed it to 1000, than also the context menu was displaying at the back of grid.
Regarding the context menu click issue, everything which was related, I have mentioned in the issue. I have that js function, which results in the error as soon as I click it. You can take any simple hierarchical grid for this purpose.
Please let me know if you still need a running sample because I would be adding the same code in that application.
Thanking you in anticipation.
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.
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?
I do not believe that this exception is thrown because the grid model is defined in the controller.
I modified the previously provided sample in order to have the grid model defined in the controller. On my side everything is still working as expected.
Also, you please try using one of the following approaches for calling SelectedRow method:
$("#" + $("#grid1").igGrid("id")).igGridSelection('selectedRow'); or $("#grid1").igGrid("widget").igGridSelection('selectedRow');
$("#" + $("#grid1").igGrid("id")).igGridSelection('selectedRow');
or
$("#grid1").igGrid("widget").igGridSelection('selectedRow');
If after trying my suggestion you are still experiencing the issue Please try modifying my sample in order to reproduce the issue and send it back to me for further investigation.
Looking forward to hearing from you.
Thank you for your answer.
Okay, got what the issue was. I had multi-selection of rows enabled. When I disable the multi-selection, this works for a single row.
This works for a single row but not for a group of rows, say, I selected 5 rows randomly and want to export the selected rows to excel.
This exception is being thrown when the selection mode is set to multiple, is that correct?
Please keep in mind that when multiple selection is enabled the method for retrieving selected row is selectedRows (not selectedRow in singular). Please try retrieving selected rows as following and let me know what is the result.
case "copyRows": var selectedRows = $("#grid1").igGridSelection('selectedRows'); alert("Selected Row Index: " + selectedRow[0].index); break; }
I am glad that you managed to achieve your requirement.
We do have many online samples, and for every control we do have some MVC scenario samples available under control name on our Sample browser web site: http://www.igniteui.com/
Additionally, almost every functionality listed in our help topic has code snippets for both JavaScript and Razor. For example, the Selection article snippets are defined as following:
In Java Script: $("#grid1").igGrid({ dataSource: products, responseDataKey: 'Records', tabIndex: 1, features: [{ name: 'Selection', mode: 'row', multipleSelection: true, activation: true }]}); In Razor: @{ Html. Infragistics(). Grid(Model). ID("grid1"). PrimaryKey("ProductID"). Features(features => { features. Selection(). Mode(SelectionMode.Row). MultipleSelection(true). Activation(true); }). Virtualization(false). DataSourceUrl(Url.Action("SelectionApiGetData")). DataBind(). Render()}
In Java Script:
$("#grid1").igGrid({ dataSource: products, responseDataKey: 'Records', tabIndex: 1, features: [{ name: 'Selection', mode: 'row', multipleSelection: true, activation: true }]});
In Razor:
@{ Html. Infragistics(). Grid(Model). ID("grid1"). PrimaryKey("ProductID"). Features(features => { features. Selection(). Mode(SelectionMode.Row). MultipleSelection(true). Activation(true); }). Virtualization(false). DataSourceUrl(Url.Action("SelectionApiGetData")). DataBind(). Render()}
Please let me know if you have any additional questions or comments.
That's great. Finally, I got it working, will try now to do the functions like copying the selected rows and exporting to excel.
Also, do we have samples which shows grid features/events created using the C#/controller code, the way, I created the grid?
Thank you so much for your help.