[david_mkdParticipant]

Hi Peter,

thanks again for your support in this issue

the “getdisplayrows” method do all the work.

this is the final code to share to people for selecting items on page and it works for sort and group mode enabled:

SelectPage: function(gridid, b) {

	var pi = $("#" + gridid).jqxGrid('getpaginginformation');
	var arrSel = $("#" + gridid).jqxGrid('selectedrowindexes').slice();
	var arrDisplayRows = $("#" + gridid).jqxGrid('getdisplayrows');

	/* get only the rowdata */
	var arrRows = [];
	for (var rws = 0; rws < arrDisplayRows.length; rws++) {

		if (arrDisplayRows[rws].boundindex != undefined) {
			arrRows.push(arrDisplayRows[rws]);
		}
	}

	/* now we select items on page */
	var rowsindex = 0
	var s = "";

	for (p = 0; p < pi.pagescount; p++) {

		if (p == pi.pagenum) {

			for (rr = rowsindex; rr < (rowsindex + pi.pagesize); rr++) {

				if (rr < arrRows.length) {

					if (b) {
						if ($.inArray($("#" + gridid).jqxGrid('getrowboundindexbyid', arrRows[rr].uid), arrSel) < 0) {
							$("#" + gridid).jqxGrid('selectrow', $("#" + gridid).jqxGrid('getrowboundindexbyid', arrRows[rr].uid));
						}
					}
					else {
						$("#" + gridid).jqxGrid('unselectrow', $("#" + gridid).jqxGrid('getrowboundindexbyid', arrRows[rr].uid));
					}
				}

			}
		}

		rowsindex = rowsindex + pi.pagesize;
	}

best regards,

David

[david_mkdParticipant]

Hi Peter,

thanks for your sugestion.

this is my method to do and it works well even with sortable columns:

	SelectPage: function(gridid, b) {

		var pi = $("#" + gridid).jqxGrid('getpaginginformation');
		var arrSel = $("#" + gridid).jqxGrid('selectedrowindexes').slice();
		var arrRows = $("#" + gridid).jqxGrid('getrows');
		var rowsindex = 0

		for (p = 0; p < pi.pagescount; p++) {

			if (p == pi.pagenum) {

				for (r = rowsindex; r < rowsindex + pi.pagesize; r++) {

					if (r < arrRows.length) {
						if (b) {
							if ($.inArray($("#" + gridid).jqxGrid('getrowboundindex', r), arrSel) < 0) {
								$("#" + gridid).jqxGrid('selectrow', $("#" + gridid).jqxGrid('getrowboundindex', r));
							}
						}
						else {
							$("#" + gridid).jqxGrid('unselectrow', $("#" + gridid).jqxGrid('getrowboundindex', r));
						}
					}
				}
			}

			rowsindex = rowsindex + pi.pagesize;
		}
	},

but this method fails if we use groupable = true when grouped by any column.

can you help me with that?

Best regards

[david_mkdParticipant]

Hi,

Change the cellclick content to this to avoid the “click on arrow” issue:

$('#jqxgrid').on("cellclick", function(event) {
  var columnindex = event.args.columnindex;
  var rowindex = event.args.rowindex;
  if (expandData[rowindex] == false) {
    if (event.args.datafield != null) {
      $('#jqxgrid').jqxGrid('showrowdetails', rowindex);
    } else {
      $('#jqxgrid').jqxGrid('hiderowdetails', rowindex);
    }
  } else {
    if (event.args.datafield != null) {
      $('#jqxgrid').jqxGrid('hiderowdetails', rowindex);
    } else {
      $('#jqxgrid').jqxGrid('showrowdetails', rowindex);                            
    }
  }

  expandData[rowindex] = !expandData[rowindex];
  
});

[david_mkdParticipant]

Hello there,

I tried using rowclick, but I had some problems if I use the property “sortable: true”

I prefer to use CellClick event instead of rowclick

Here is my suggestion to achieve this :

$("#jqxgrid").jqxGrid(
{
    width: 850,
    height: 250,
    source: dataAdapter,
    rowdetails: true,
    rowdetailstemplate: { rowdetails: "<div style='margin: 10px;'><ul style='margin-left: 30px;'><li class='title'></li><li>Notes</li></ul><div class='information'></div><div class='notes'></div></div>", rowdetailsheight: 200 },
    ready: function () {
        var data = $('#jqxgrid').jqxGrid('getrows');
        for (var i = 0; i < data.length; i++) {
            expandData.push(false);
        };

        $('#jqxgrid').on("cellclick", function(event) {
            var columnindex = event.args.columnindex;
            if (columnindex != 0) {
                var rowindex = event.args.rowindex;
                if (expandData[rowindex] == false) {
                    $('#jqxgrid').jqxGrid('showrowdetails', rowindex);
                    
                } else {
                    $('#jqxgrid').jqxGrid('hiderowdetails', rowindex);
                };

                expandData[rowindex] = !expandData[rowindex];
            };
        });

    },
    initrowdetails: initrowdetails,
    columns: [
            { text: 'First Name', datafield: 'firstname', width: 200 },
            { text: 'Last Name', datafield: 'lastname', width: 200 },
            { text: 'Title', datafield: 'title', width: 180 },
            { text: 'City', datafield: 'city', width: 100 },
            { text: 'Country', datafield: 'country' }
        ]
});

[Author]

Posts