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,
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.
Hi Vasya,
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.
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; }
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.
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.