Obtain data from checked rows in iggrid with checkboxes

Question

I currently have a grid that stores the data of the selected row in an array when it is clicked. This method works perfectly fine, however I'm trying to change it so I can select multiple rows with a checkbox and be able to store all that date in my array. Basically, instead of adding one row at a time in my array, I want to be able to add multiple rows checked in it. I don't know if you guys follow me but please look into my code so we can find a way to do that.

Here it is,

Javascript :

$('#GridBindContact').on('iggridselectionactiverowchanged', function (event, args) {
  $("#PrimaryKey").val(args.row.element[0].cells[1].textContent);
  $("#ContactToBind_Numcon").val(args.row.element[0].cells[1].textContent);
  $("#ContactToBind_FullName").val(args.row.element[0].cells[2].textContent + ' ' +     args.row.element[0].cells[3].textContent);
  $("#ContactToBind_Titcon").val(args.row.element[0].cells[4].textContent);
  $("#ContactToBind_Tel1con").val(args.row.element[0].cells[5].textContent);
  $("#ContactToBind_Tel2con").val(args.row.element[0].cells[6].textContent);
  $("#ContactToBind_Emailcon").val(args.row.element[0].cells[7].textContent);
  $("#ContactToBind_NumEmployees").val(args.row.element[0].cells[8].textContent);
  $("#ContactToBind_NameEmployees").val(args.row.element[0].cells[9].textContent);
  $("#ContactToBind_Added").val(true);
  $(".ui-button-text").trigger("click");
});

In my view :

@(Html.Infragistics.Grid(Of Contact)(Model.Results).ID("GridBindContact").
    AutoGenerateColumns(False).
    Width("100%").
    Height("400px").
    ResponseDataKey("Results").
    Columns(Sub(column)
            column.For(Function(e) e.Numcon).Template("${Numcon}").HeaderText("Num")
            column.For(Function(e) e.Pnmcon).Template("${Pnmcon}").HeaderText("Pnm").Width("10%")
            column.For(Function(e) e.Namemcon).Template("${Namecon}").HeaderText("Name").Width("15%")
            column.For(Function(e) e.Titcon).Template("${Titcon}").HeaderText("Title").Width("20%")
            column.For(Function(e) e.Tel1con).Template("${Tel1con}").HeaderText("Tel1")
            column.For(Function(e) e.Tel2con).Template("${Tel2con}").HeaderText("Tel2")
            column.For(Function(e) e.Emailcon).Template("${Emailcon}").HeaderText("Email")
            column.For(Function(e) e.NumEmployees).HeaderText("Num Emp")
            column.For(Function(e) e.NameEmployees).HeaderText("Name Emp")
            End Sub).
    Features(Sub(features)
             features.Sorting().Type(OpType.Local)
             features.RowSelectors.EnableCheckBoxes(True).RowSelectorsColumnWidth("50px").EnableRowNumbering(False)
             features.Selection().Mode(SelectionMode.Row).MultipleSelection(True).AddClientEvent("activeRowChanging", "activeRowChanging")
             features.Updating().EditMode(GridEditMode.None).EnableAddRow(False).EnableDeleteRow(False)
             End Sub).Render())

<form action="#" id="ajaxForm" method="post">
    @Html.HiddenFor(Function(x) x.PrimaryKey)
    @Html.HiddenFor(Function(x) x.ContactToBind.Numcon)
    @Html.HiddenFor(Function(x) x.ContactToBind.FullName)
    @Html.HiddenFor(Function(x) x.ContactToBind.Titcon)
    @Html.HiddenFor(Function(x) x.ContactToBind.Tel1con)
    @Html.HiddenFor(Function(x) x.ContactToBind.Tel2con)
    @Html.HiddenFor(Function(x) x.ContactToBind.Emailcon)
    @Html.HiddenFor(Function(x) x.ContactToBind.NumEmployees)
    @Html.HiddenFor(Function(x) x.ContactToBind.NameEmployees)
</form>

I already added the feature to have checkboxes in my grid, but got nothing to handle them yet !

///////////////////////////////////////////////////////////////////////////////////////////

Little edit so I can clear up some things

Let me try to elaborate a little more for what I want to be able to do exactly. I want to be able to add the data from all rows that are checked in a row array as a batch. That said, let's say I checked three rows. When I press the 'OK' button, it should store the information from all three rows in my array.

If all succeed, my array should have three 'elements'. For example, array[0] would contain the data from the first row that is checked. This would allow me to access each cells and store the 'textContent' from them in 'ContactToBind' which is what I'm using to store each cell information at the moment.

I hope that clears it up a little bit !

Thanks alot for your help.

Guillaume

zeppelin · Answer 1 · 2014-09-08T10:16:33.623

You can use .igGrid( "allRows" ); to get all the rows in your Grid, Save it in a variable named "myRows". Then write javascript code to traverse through "myRows" you got from .igGrid( "allRows" ) and check the value of each row's combo box. If the current row has its combo box "checked", put this current row in your array. at the end of the loop you will have all the rows in your array which were checked.

If you dont know how to traverse through the "allRows" which you stored in "myRows" variable, use console.log(myRows) and check the object structure in your browser's console window. You would be able to see how to get to the checkbox columns, It would be something like this but I am not sure please check yourself using console.log:

for(var i = 0 ; i < myRows.length ; i ++ )
{
myRows[i].cells....(select the checked combobox)
if yes then store myRows[i] in your array;
}

Obtain data from checked rows in iggrid with checkboxes

1 Answers1