Search code examples
javascriptjqueryjsgrid

Get id from tr created using js-grid, property path changes every time

So i'm using js-grid to populate a generic grid. I have 4 visible columns and 1 hidden id column. I am trying to pass the unique id per row into another function. However, when I dive into the property path of a object return by using jquery. The key that I need to get to is nested in a key that seems to change every time i return the object.

Here's the JS grid code...
$("#jsGrid").jsGrid({
        width: "100%",
        height: "25rem",

        autoload: true,
        inserting: false,
        editing: false,
        sorting: false,
        paging: true,
        pageloading: true,

        data: data,

        fields: [
            { name: "ID", type: "text", width: 25, align: "center", visible: false },
            { name: "Date", type: "text", width: 25, align: "center" },
            { name: "Color", type: "text", width: 25, align: "center" },
            { name: "type", type: "text", width: 25, align: "center" },
        { name: "other", type: "text", width: 25, align: "center" }
        ]
});

Here's some sample data...
var data = [
    { "ID": "123", "Date": "3/15/19", "color": "Brown", "type": "something", "other": "7 mins" },
    { "ID": "124", "Date": "3/15/19", "color": "Red", "type": "something", "other": "15 mins" },
    { "ID": "125", "Date": "3/15/19", "color": "Blue", "type": "something", "other": "15 mins" },
    { "ID": "126", "Date": "3/15/19", "color": "Blue", "type": "something", "other": "7 mins" },
    { "ID": "127", "Date": "3/15/19", "color": "Black", "type": "something", "other": "20 mins" },
    { "ID": "128", "Date": "3/15/19", "color": "Gold", "type": "something", "other": "5 mins" },
    { "Date": "TOTAL", "color": "", "type": "", "other": "74 mins"}
];

Here's the code I use to get the <tr> object using console
$(".jsgrid-table > tbody > tr:not('[class*=totalsRow]')");

Here's what I see. The key/keys that changes are in the attached image and starts with the word jQuery.

enter image description here

Solution

  • So i have tried your code. Based on what you have given me, i had to write custom method to achieve it. 

    var k = $('.jsgrid-table > tbody > tr');

Items = GetMatchingProperties(k, 'jQuery'); //'jQuery' This is the word that matches
console.log(Items);



function GetMatchingProperties(items, attribName) {
    var list = [];
    $(items).each(function(i, t) {
        var $t = $(t);
        var keys = Object.keys($t[0]);
        var JQueryKey = keys.filter(function(x){
            if(x.match(attribName)){
                return x;
            }
        });
        $.each(JQueryKey, function(i, v){
            list.push( $t[0][v] );
        });
    });
    return list;
}