Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
160
igGridSelection selectRow and selectedRows discrepancy
posted

Hi,

Using version 12.1 (3.12.1.2023), I have an MVC view which has a grid which needs to have all rows ticked and selected when the view loads.

I have been trying to use the selectRow method of igGridSelection for each row - the selection is shown correctly but the checkboxes are not ticked. Furthermore, the selectedRows method is bringing back an array where each row's index is NaN. 

If I then click a checkbox, the checkbox will be ticked but the selectedRows array will increase by one, this time with the correct index value. This is especially strange since I now have 7 items in selectedRows array from a grid with 6 rows.

It seems that the number of selected rows increases with every new tick. However, when you click on somewhere else on the row, the selectedRows array and the selection appearance appear to be completely fine.

Is there something that I can do to fix this or is this a bug?

I have attached the code for a simplified sample which I have been using to try to debug the problem.

Thanks for any help with this.

Si

___________________________________________________________________________


@using Infragistics.Web.Mvc;

 

<!-- Start of Loader Block -->

    @(Html.Infragistics().Loader()

.ScriptPath(Url.Content("~/Scripts/Ig"))

.CssPath(Url.Content("~/Content/Ig"))

        .Render()

     )

<!-- End of Loader Block -->

 

<script type="text/javascript">

 

    // Select all wheels when view loads

$(document).delegate("#grdWheels", "iggridrowsrendered", function (evt, ui) {

 

        var rows = $("#grdWheels").igGrid("allRows");

        debugger;

 

        for (var i = 0; i < rows.length; i++) {

            // ##TRY##

            //var selectorIndex = i + 1;

            //$("#grdWheels span.ui-igcheckbox-normal:eq(" + selectorIndex + ")>span").trigger("click");

 

$("#grdWheels").igGridSelection("selectRow", i);

        }

 

        // ##TRY##

        // $("#grdWheels span.ui-igcheckbox-normal:eq(0)>span").trigger("click");

    });

 

    // Show Debug info when check box changed

$(document).delegate("#grdWheels", "iggridrowselectorscheckboxstatechanged", function (evt, ui) {

        ShowSelection("CheckChange");

    });

 

    // Show Debug info when row selection changed

$(document).delegate("#grdWheels", "iggridselectionrowselectionchanged", function (evt, ui) {

        ShowSelection("RowSelect");

    });

 

    // Show Debug info

    function ShowSelection(firedFrom) {

        var selectList = $("#grdWheels").igGridSelection("selectedRows");

        //alert("There are " + selectList.length + " rows selected (" + firedFrom + ")");

        debugger;

        var details = "";

        for (var i = 0; i < selectList.length; i++) {

            var row = selectList[i];

 

            details = details + "Item " + i + "<br />";

            for (var key in row) {

details = details + key + " = " + row[key] + "<br />";

            }

            details = details + "<hr />";

        }

 

        document.getElementById("divDebug").innerHTML = "There are " + selectList.length + " rows selected (" + firedFrom + ")<br />" + details;

    }

 

</script>

 

<h2>Tyre History</h2>

@{

    // Setup the Wheels Grid to load asynchronously

    //GridModel wheelGridModel = GridHelper.GetAllFeaturesModel(true);

    GridModel wheelGridModel = new GridModel();

 

    GridFiltering filtering = new GridFiltering();

    wheelGridModel.Features.Add(filtering);

 

    GridSorting sorting = new GridSorting();

    wheelGridModel.Features.Add(sorting);

 

    GridPaging paging = new GridPaging();

    paging.PageSize = 50;

    wheelGridModel.Features.Add(paging);

 

    GridSelection selection = new GridSelection();

    selection.MultipleSelection = true;

    selection.Mode = SelectionMode.Row;

    wheelGridModel.Features.Add(selection);

 

    GridTooltips tooltips = new GridTooltips();

    wheelGridModel.Features.Add(tooltips);

 

    GridRowSelectors selectors = new GridRowSelectors();

 

    selectors.EnableCheckBoxes = true;

    selectors.RequireSelection = true;

    wheelGridModel.Features.Add(selectors);

 

    GridHiding hiding = new GridHiding();

    wheelGridModel.Features.Add(hiding);

 

    GridResizing resizing = new GridResizing();

    wheelGridModel.Features.Add(resizing);

 

    wheelGridModel.Width = "100%";

 

    wheelGridModel.Columns.Add(new GridColumn("Wheel", "Wheel", "Int32", "90px"));

    wheelGridModel.Columns.Add(new GridColumn("Position", "Position", "String", "105px"));

    wheelGridModel.Width = "265px";

    wheelGridModel.DataSourceUrl = Url.Action("GetDataAllWheels");

}

 

@using (Html.BeginForm(null, null, FormMethod.Post, new { id = "VehicleForm" }))

{

   

    @Html.Infragistics().Grid("grdWheels", wheelGridModel)

 

    <input type="button" onclick="ShowSelection('ButtonClick')" value="Show Selection" />

    <div id="divDebug" style="color:Red">{Debug info}</div>

}

 

 

  • 160
    posted

    I am not sure if my long text put people off replying so I will put it simply:-

    When calling the selectRow method like this:-

    $("#grdWheels").igGridSelection("selectRow", 1);

    The corresponding row is highlighted but not ticked and the selection is not correctly listed using this:-

    $("#grdWheels").igGridSelection("selectedRows");

    Is this a bug?