Getting value of hidden column in jsgrid

Question

I am using jsgrid with checkboxes for row selection such as below

$(function() {
   $("#jsGrid").jsGrid({
        ...
        headerTemplate: function() {
            return $("<input>").attr("type", "checkbox").attr("id", "selectAllCheckbox");
        },
        itemTemplate :  function(_, item) {
               return $("<input>").attr("type", "checkbox").attr("class", "singleCheckbox")
                .prop("checked", $.inArray(item, selectedItems) > -1)
                .on("change", function () {
                   $(this).is(":checked") ? selectItem(item) : unselectItem(item);
                });
            },
        }
        fields :[{
           { name: "unique_id", type: "text", width: 100, visible:false },
           { name: "some_name", type: "text", width: 100},
           ... 
        ]
  });

  $("#selectAllCheckbox").click(selectAllCheckBox);
});

The selectAllCheckBox function given below.

var selectAllCheckBox = function(item) {
        selectedItems = [];
        if(this.checked) { // check select status
            $('.singleCheckbox').each(function() {
                this.checked = true;
                selectItem($(this).parent().next().text());//line 1
            });
        }else {

            $('.singleCheckbox').each(function() {
                this.checked = false;
                unselectItem(item);
            });
            selectedItems = [];
        }
    }

I would like to collect all the selected unique_ids and process it on the server side. But, as unique_id is hidden, the code at line 1 always returns the values of some_name. How can I get the values of unique_id?

Answer 1

This is not answer.. i cant add the code in above comment, that has a related question. so adding it here.. what is wrong with this code. grid not loading. I am using adminLte plugin jsgrid in

https://adminlte.io/themes/v3/pages/tables/jsgrid.html

<script>
  $("#jsGrid").jsGrid({
    width: "100%",
    paging: true,
    selections: [],
     controller: {
            loadData: function() {

                var d = $.Deferred();

                $.ajax({
                type: 'GET',
                url: 'https://xkcd.com/info.0.json',
                dataType: "json",
                success: function (data) {
                    d.resolve(data);
                },
                error: function(e) {
                    alert("error: " + e.responseText);
                }

            });
            console.log("here test");
            return d.promise();

            }
        },
    fields: [{
        headerTemplate: function() {
            var grid = this._grid;
            return `<input class="all" type="checkbox" ${grid.selections.length==grid.loadData.length?'checked':''} />`;
        },
        itemTemplate: function(_, item) {
            return `<input class="single" value=${item.num} type="checkbox" _isall=${false} ${this._grid.selections.some(num=>num==item.num)?'checked':''} />`
        },
        width: 10,
        align: "center"
    }, { name: "year", type: "textarea", title: "year", width: 50 },
      { name: "month", type: "number", title: "month", width: 50, align: "center" },
      { name: "day", type: "number", title: "day", width: 50 , align: "center"},
      { name: "title", type: "textarea", title: "title", width: 50 , align: "center"}]
});

$('#jsGrid input[type=checkbox]').on('change', function() {
    var checkbox = $(this),
        grid = checkbox.closest('#jsGrid').data().JSGrid;

    if (checkbox.attr('class') == 'all') {
        let checked = checkbox.is(":checked");
        grid.selections = checked ? grid.data : [];
        $.each($('#jsGrid input[class=single]'), (i, el) => $(el).prop('checked', checked))
    } else {
        if (checkbox.is(":checked")) {
            grid.selections.push(grid.data.find(({
                feed_id
            }) => feed_id == checkbox.val()));
        } else {
            grid.selections = grid.selections.filter(({
                feed_id
            }) => feed_id != checkbox.val());
        }
        checkbox.closest('#jsGrid').find('input.all').prop('checked', grid.selections.length == grid.data.length);
    }
});

$('button.getrecord').on('click', function() {
    console.clear();
    console.log($('#jsGrid').data().JSGrid.selections);
});
</script>

Answer 2

In jsGrid docs, I have not found any method regarding or getting hidden column but you can do like below manually implementation to get the selected record/id.

I have taken a custom selections config inside of jsGrid object as array to store the selected row into that.

*I am pushing full object of particular record in selections array inside of jsGrid.

DEMO

$("#jsGrid").jsGrid({
    width: "100%",
    paging: true,
    selections: [],
    data: [{
        ClientId: 1,
        Client: "Aaaa Joseph"
    }, {
        ClientId: 2,
        Client: "Zzzz Brad"
    }, {
        ClientId: 3,
        Client: "Mr Nice Guy"
    }],
    fields: [{
        headerTemplate: function() {
            var grid = this._grid;
            return `<input class="all" type="checkbox" ${grid.selections.length==grid.data.length?'checked':''} />`;
        },
        itemTemplate: function(_, item) {
            return `<input class="single" value=${item.ClientId} type="checkbox" _isall=${false} ${this._grid.selections.some(ClientId=>ClientId==item.ClientId)?'checked':''} />`
        }
    }, {
        type: "text",
        width: 80,
        name: 'Client'
    }]
});

$('#jsGrid input[type=checkbox]').on('change', function() {
    var checkbox = $(this),
        grid = checkbox.closest('#jsGrid').data().JSGrid;

    if (checkbox.attr('class') == 'all') {
        let checked = checkbox.is(":checked");
        grid.selections = checked ? grid.data : [];
        $.each($('#jsGrid input[class=single]'), (i, el) => $(el).prop('checked', checked))
    } else {
        if (checkbox.is(":checked")) {
            grid.selections.push(grid.data.find(({
                ClientId
            }) => ClientId == checkbox.val()));
        } else {
            grid.selections = grid.selections.filter(({
                ClientId
            }) => ClientId != checkbox.val());
        }
        checkbox.closest('#jsGrid').find('input.all').prop('checked', grid.selections.length == grid.data.length);
    }
});

$('button.getrecord').on('click', function() {
    console.clear();
    console.log($('#jsGrid').data().JSGrid.selections);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.min.css" />
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid-theme.min.css" />

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.min.js"></script>
<button class="getrecord">Get Selected record</button>
<div id="jsGrid"></div>