Select to view content in your preferred language

jQuery grid select multiple rows

191
4
Jump to solution
a week ago
Mr_Kirkwood
Regular Contributor

How would you select multiple rows? I have an array of data that i select from a map (Several different OBJECTIDS). I would like to be able to select the rows in the grid that have the same OBJECTIDS.

Here are a few links of the example code i am trying to use to select multiple rows:

https://www.jqwidgets.com/community/topic/select-a-row-with-value-instead-of-index/ 

https://jsfiddle.net/jqwidgets/FQxrf/ 

Here is my code:

//using a button to create the row selection
$(“#selectRowByValue”).on(‘click’, function () {
    var rows = $(‘#roomUseTable’).jqxGrid(‘getrows’);
    console.log(rowsCount)
    var myroomEditData = [];
    for (var i = 0; i < rows.length; i++) {
        const valueObjectID = $(‘#roomUseTable’).jqxGrid(‘getcellvalue’, i, “OBJECTID”);
        console.log(“roomsAssignedData Data from the map”)
        console.log(roomsAssignedData)

        myroomEditData.push(
            valueObjectID
        );
        console.log(“myroomEditData”)
        console.log(myroomEditData)
        //comparing the data from the map to the data in the grid
        const intersection = myroomEditData.filter(element => roomsAssignedData.includes(element));
        console.log(intersection)

    };
});

 

This gives me the OBJECTIDs in the grid. My example shows 3 rows and it gives me back the three rows OBJECTIDs (myroomEditData). When I select the data in the map it gives me the OBJECTIDs of the data that it selected (roomsAssignedData) from a different piece of code. 

How would I pass more than one value to get it to select (value == "Ikura”)? The values are in my array (myroomEditData).  I tried (value ==  myroomEditData) but it only selects the 1st row even if that’s not the data selected in the map.

 

 

 

0 Kudos
1 Solution

Accepted Solutions
Edvinas_S
Esri Contributor

Your question is off-topic, but I'll help.

First, you need to enable selection of multiple rows when you define your grid.

$("#roomUseTable").jqxGrid({
    selectionmode: 'multiplerows',
    ...
})

 

And this is the select function, assuming that roomsAssignedData is an array.

$("#selectRowByValue").on("click", function () {
    // get all rows
    var rows = $("#roomUseTable").jqxGrid("getrows");

    for (var i = 0; i < rows.length; i++) {
        // if value of field 'OBJECTID' is in roomsAssignedData array
        if (roomsAssignedData.includes(rows[i].OBJECTID)) {
            // add row to selection
            $('#roomUseTable').jqxGrid('selectrow', i);
        }
    }
});

 

View solution in original post

4 Replies
Noah-Sager
Esri Regular Contributor

Hi @Mr_Kirkwood, thanks for posting your question here. Are you trying to use a jQuery grid with the ArcGIS Maps SDK for JavaScript? If so, you might want to check-out our FeatureTable:


https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-FeatureTable.html

https://developers.arcgis.com/javascript/latest/sample-code/widgets-featuretable-row-highlights/

 

 

0 Kudos
Mr_Kirkwood
Regular Contributor

I am using the Query grid with the ArcGIS Maps SDK for JavaScript, and it works great. The grid has more functionality like drop down quick viewing of the data (attachment SMV_B). I can set up custom filtering and querying (attachment SMV_C).  I can also set up the grid to zoom to the data with an onclick and customize the export to excel and other formats. 

I have used the FeatureTable and could not get the custom ability that I get from the grid. I will look at the examples you sent. 

Thanks for the information. 

p.s. I am using the ArcGIS Maps SDK for JavaScript for most of my application. 

0 Kudos
Edvinas_S
Esri Contributor

Your question is off-topic, but I'll help.

First, you need to enable selection of multiple rows when you define your grid.

$("#roomUseTable").jqxGrid({
    selectionmode: 'multiplerows',
    ...
})

 

And this is the select function, assuming that roomsAssignedData is an array.

$("#selectRowByValue").on("click", function () {
    // get all rows
    var rows = $("#roomUseTable").jqxGrid("getrows");

    for (var i = 0; i < rows.length; i++) {
        // if value of field 'OBJECTID' is in roomsAssignedData array
        if (roomsAssignedData.includes(rows[i].OBJECTID)) {
            // add row to selection
            $('#roomUseTable').jqxGrid('selectrow', i);
        }
    }
});

 

Mr_Kirkwood
Regular Contributor

Wow, that helps me out tremendously! I appreciate the help. Sorry it was off topic. I have posted in other forums to no avail.

Thank you! 

0 Kudos