I need "index" from object which "SelectedRow" returns, but there is no property called index, it is quite different object than it return in the Grid API and Events" example. I used exactly the same .js libraries which are used in that example, but still without any success. Please help
The second picture is inside that [Object, HTMLDivElement]
Here is my code (important parts)
@Scripts.Render("~/bundles/jquery") @Scripts.Render("~/bundles/jqueryui")@Scripts.Render("~/bundles/modernizrForIG") @Scripts.Render("~/Content/Scripts/jquery.event.drag.js")
@Scripts.Render("~/Content/Scripts/knockout-2.3.0.debug.js") <!-- Infragistic --> @Styles.Render("~/Content/css/IG/themes/metro/infragistics.theme.css") @Styles.Render("~/Content/css/IG/structure/infragistics.css") @Scripts.Render("~/Content/Scripts/IG/modules/infragistics.util.js") @Scripts.Render("~/Content/Scripts/IG/infragistics.core.js") @Scripts.Render("~/Content/Scripts/IG/infragistics.lob.js") @Scripts.Render("~/Content/Scripts/IG/infragistics.loader.js") @Scripts.Render("~/Content/Scripts/IG/modules/infragistics.ui.editors.js") @Scripts.Render("~/Content/Scripts/IG/modules/i18n/regional/infragistics.ui.regional-cs.js") @Scripts.Render("~/Content/Scripts/IG/extensions/infragistics.ui.editors.knockout-extensions.js") @Scripts.Render("~/Content/Scripts/IG/extensions/infragistics.datasource.knockoutjs.js")
@section featured{ <fieldset> <legend>xxx</legend> <button id="igButtDetail" class="Button ButtonGreen IconInfo">Detail</button> <table id="orderIncomingOverview"> <tr> <th>xx</th> <td> <label for="startDate">xx</label></td> <td> <input id="startDate" data-bind="igDateEditor: { value: startDate, updateMode: 'immediate' }" /> </td> <td> <label for="endDate">xx</label></td> <td> <input id="endDate" data-bind="igDateEditor: {value: endDate}" /> </td> <td> <select data-bind="options: stateList, value: orderIncomingState, optionsValue: 'idState', optionsText: 'name'"></select> </td> <td> <button class="Button ButtonGreen IconSearch" onclick="LoadGrid()">Hledat</button> </td> </tr> </table> <div id="orderIncomingOverviewGrid"></div> </fieldset>
}
@section scripts{ <script> var viewModel = { startDate: ko.observable(), endDate: ko.observable(), stateList: ko.observable(), orderIncomingState: ko.observable() };
$.ig.loader({ scriptPath: '/Content/Scripts/IG/', cssPath: '/Content/css/IG/', resources: "igEditors, igGrid.Selection", regional: 'cs', ready: function () { viewModel.stateList(GetStateList()); GetDefaultValues(); } }); $(function () { $("#startDate").igDatePicker({});
$("#endDate").igDatePicker({}); });
function GetDefaultValues() { jQuery.support.cors = true; $.ajax({ url: 'apiurl', type: 'GET', dataType: 'json', success: function (data) { viewModel.startDate(GetDateFromDatetime(data.startDate)); viewModel.endDate(GetDateFromDatetime(data.endDate)); viewModel.orderIncomingState(data.state); ko.applyBindings(viewModel); }, error: function (jqXHR, textStatus, errorThrown) { HandleError(jqXHR, textStatus, errorThrown); } }); }
var gridData; var columns = [columns def, not important]; var features = [ { name: "Selection", mode: "row", multipleSelection: true }, { name: "Filtering", mode: "simple", columnSettings: [ { columnKey: "state", allowFiltering: false } ] }, { name: "Sorting", type: "local" } ];
function LoadGrid() { ApplicationBusy('Načítání dat'); $.ajax({ url: 'apiurl', type: 'Post', data: JSON.stringify({ startDate: viewModel.startDate(), endDate: viewModel.endDate(), state: viewModel.orderIncomingState() }), contentType: "application/json", dataType: 'json', success: function (data) { gridData = data; $("#orderIncomingOverviewGrid").igGrid({ dataSource: gridData, responseDataKey: "results", regional: "cs", primaryKey: "idOrderIncoming", columns: columns, height: 600, width: 1200, features: features, renderCheckboxes: true, autoGenerateColumns: false }); ApplicationFine(); }, error: function (jqXHR, textStatus, errorThrown) { ApplicationFine(); HandleError(jqXHR, textStatus, errorThrown); } }); }; $("#igButtDetail").on({ click: function (e) { var row = $("#orderIncomingOverviewGrid").igGridSelection("selectedRow");
} });
} </script>}
Thank you. You made my day!
Hello,
Calling grid features' API when the grid is initialized on a DIV element is different than when it's initialized on a TABLE element. It's a known limitation which is described here. In short, you can modify your "selectedRow" call to:
$("#orderIncomingOverviewGrid_table").igGridSelection("selectedRow");
which should solve the issue.
Thank you for using Infragistics forums!
Best regards,
Stamen Stoychev