jqwidgets master grid code in jsfiddle Instructions: In the first grid, on butto

ID: 3847784 • Letter: J

Question

jqwidgets master grid code in jsfiddle

Instructions:

In the first grid, on button click for a particular row it should show the detail for that row only. So for instance, when I click on row 1 button, it will show the detail for that row. But now when I click on row 2’s button, it should refresh and show only the detail for this row. Note: Also do not change the logic for the multi selection using the checkbox column so the checkbox will perform as multiselect where it will let you see details for all selected rows. Another thing, I wanted to mention where once I click on the button it will show the detail for that row and now suppose I clicked on the checkbox for that same row it should not create duplicate details.

Code: Sorry I wanted to show my working code

https://jsfiddle.net/UbK74/728/

Problem I am facing is currently my code is keeping the detail for all rows. Even if I click on the button for certain row, it will keep the detail of the previously selected row.

Output needed:

If clicked on button for row 1:

If clicked on button for row 2, it should only show detail for this row.

Customers Contact Title Company Name Contact Name Alfreds Futterkiste Maria Anders Sales Representativ O Ana Trujillo Emparedados y helados Ana Trujillo Owner Go to page 1 Sh orders by customer Order ID OrderDate Shipped Date Ship Name 1050 1060 Go to page 1 Sh

Explanation / Answer

HTML

<body class='default'>
<div id='jqxWidget'>
<h3>
Customers</h3>
<div id="jqxgrid">
</div>
<h3>
Orders by Customer</h3>
<div id="ordersGrid">
</div>
</div>
</body>

JAVA CODE

                       // select all rows when the column's checkbox is checked.
                       if (checked) {
                           $("#jqxgrid").jqxGrid('setcellvalue', i, 'available');
                           for (var i=0; i<local_length; i++) {
                               $('#jqxgrid').jqxGrid('selectrow', i);
                           }
                       }
                       else if (checked == false) {
                       $("#jqxgrid").jqxGrid('setcellvalue', i, 'available');
                           for (var i=0; i<local_length; i++) {
                               if ($('#jqxgrid').jqxGrid('unselectrow', i)) {

                               }
                           }

                       }

                   // update cells values.
                   var startrow = pagenum * pagesize;
                   for (var i = startrow; i < startrow + pagesize; i++) {
                       var boundindex = $("#jqxgrid").jqxGrid('getrowboundindex', i);
                       $("#jqxgrid").jqxGrid('setcellvalue', boundindex, 'available', event.args.checked);
                   }

                       $("#jqxgrid").jqxGrid('endupdate');
                   });
                       return true;
                   }
},{ text: 'Company Name', datafield: 'CompanyName', width: 250, columntype: 'button',
buttonclick: function (row) {
$('#jqxgrid').jqxGrid('clearselection');
$('#jqxgrid').jqxGrid('selectrow', row);

}
},
{ text: 'Contact Name', datafield: 'ContactName', width: 150 },
{ text: 'Contact Title', datafield: 'ContactTitle', width: 180 },
{ text: 'City', datafield: 'City', width: 120 },
{ text: 'Country', datafield: 'Country'}
]
});

var local_length = source.localdata.length;
var updatePageState = function (pagenum) {
var datainfo = $("#jqxgrid").jqxGrid('getdatainformation');
var pagenum = datainfo.paginginformation.pagenum;
var pagesize = datainfo.paginginformation.pagesize;
var startrow = pagenum * pagesize;
// select the rows on the page.
$("#jqxgrid").jqxGrid('beginupdate');
var checkedItemsCount = 0;
for (var i = startrow; i < startrow + pagesize; i++) {
var boundindex = $("#jqxgrid").jqxGrid('getrowboundindex', i);
var value = $("#jqxgrid").jqxGrid('getcellvalue', boundindex, 'available');
if (value) checkedItemsCount++;
if (value) {
$("#jqxgrid").jqxGrid('selectrow', boundindex);
}
else {
$("#jqxgrid").jqxGrid('unselectrow', boundindex);
}
}

$("#jqxgrid").jqxGrid('endupdate');
if (checkedItemsCount == pagesize) {
columnCheckBox.jqxCheckBox({ checked: true });
}
else if (checkedItemsCount == 0) {
columnCheckBox.jqxCheckBox({ checked: false });
}
else {
columnCheckBox.jqxCheckBox({ checked: null });
}
}

// update the selection after sort.
$("#jqxgrid").on('sort', function (event) {
updatePageState();
});

// update the selection after page change.
$("#jqxgrid").on('pagechanged', function (event) {
updatePageState();
});

// select or unselect rows when a checkbox is checked or unchecked.
$("#jqxgrid").on('cellvaluechanged', function (event) {
if (event.args.value) {
$("#jqxgrid").jqxGrid('selectrow', event.args.rowindex);
}
else {
$("#jqxgrid").jqxGrid('unselectrow', event.args.rowindex);
}

// update the state of the column's checkbox. When all checkboxes on the displayed page are checked, we need to check column's checkbox. We uncheck it,
// when there are no checked checkboxes on the page and set it to intederminate state when there is at least one checkbox checked on the page.
if (columnCheckBox) {
var datainfo = $("#jqxgrid").jqxGrid('getdatainformation');
var pagesize = datainfo.paginginformation.pagesize;
var pagenum = datainfo.paginginformation.pagenum;
var selectedRows = $("#jqxgrid").jqxGrid('getselectedrowindexes');
var state = false;
var count = 0;
$.each(selectedRows, function () {
if (pagenum * pagesize <= this && this < pagenum * pagesize + pagesize) {
count++;
}
});

if (count != 0) state = null;
if (count == pagesize) state = true;
if (count == 0) state = false;

updatingCheckState = true;
$(columnCheckBox).jqxCheckBox({ checked: state });

updatingCheckState = false;
}
});

document.getElementById("selectall").onclick = function() {
           var rowscount = $("#jqxgrid").jqxGrid('getdatainformation').rowscount;
$("#jqxgrid").jqxGrid('beginupdate');
           if ( this.checked ) {
$("#jqxgrid").jqxGrid('setcellvalue', i, 'available', true, false);
               for (var i=0; i<local_length; i++) {
       $('#jqxgrid').jqxGrid('selectrow', i);
   }
           }
           else{
           $("#jqxgrid").jqxGrid('setcellvalue', i, 'available', true, false);
   for (var i=0; i<local_length; i++) {
       if ($('#jqxgrid').jqxGrid('unselectrow', i)) {

       }
   }

           }
};
// Orders Grid
// prepare the data
var dataFields = [
{ name: 'CustomerID' },
{ name: 'OrderID' }
];
var source =
{
datafields: dataFields,
localdata: [{ "CustomerID": "ALFKI", "OrderID": "1050" }, { "CustomerID": "ALFKI", "OrderID": "1060" }, { "CustomerID": "ANATR", "OrderID": "1080"}]

       };
var dataAdapter = new $.jqx.dataAdapter(source);
dataAdapter.dataBind();


var records = new Array();
$("#jqxgrid").on('rowselect', function (event) {
var customerID = event.args.row.CustomerID;

var length = dataAdapter.records.length;
for (var i = 0; i < length; i++) {
var record = dataAdapter.records[i];
if (record.CustomerID == customerID) {
records[records.length] = record;
}
}
var dataSource = {
datafields: dataFields,
localdata: records
}
var adapter = new $.jqx.dataAdapter(dataSource);

// update data source.
$("#ordersGrid").jqxGrid({ source: adapter });
});
$("#jqxgrid").on('rowunselect', function (event) {
var customerID = event.args.row.CustomerID;
var len = records.length;
var newRecords = new Array();
var cnt = 0;

for (var i = 0; i < len; i++) {
var record = records[i];
if (record.CustomerID != customerID) {
newRecords[cnt++] = records[i];
}
}

records = newRecords;

return array;
};

function changeSelection() {
var rowindexes = $('#jqxgrid').jqxGrid('getselectedrowindexes');
var selectedRows = getRows(records, rowindexes);
source.localdata = selectedRows;
$("#ordersGrid").jqxGrid('updatebounddata');
};

$("#jqxgrid").on('rowunselect', function (event) {
changeSelection();
});

$("#jqxgrid").on('rowselect', function (event) {
changeSelection();
});
*/
$("#ordersGrid").jqxGrid(
{
width: "100%",
//height: 520,
               columnsresize: true,
               filterable: true,
               sortable: true,
               //FILTER ARROW CAUSED PROBLEMS WITH CHECKBOX
               showfilterrow: true,
pageable: true,
               enablebrowserselection: true,
               pagesize: 5,
               editable: true,
               selectionmode: "none",
               autoheight: true,
               altrows: true,
keyboardnavigation: false,
columns: [
{ text: 'OrderID', datafield: 'OrderID', width: 100 },
{ text: 'OrderDate', datafield: 'OrderDate', cellsformat: 'd', width: 150 },
{ text: 'Shipped Date', datafield: 'ShippedDate', cellsformat: 'd', width: 150 },
{ text: 'Ship Name', datafield: 'ShipName' }
]
});
//$("#customersGrid").jqxGrid('selectrow', 0);

Navigate

jqwidgets master grid code in jsfiddle Instructions: In the first grid, on butto

js A 10.0-kg block is released from rest at point in the figure below. The track

Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.

jqwidgets master grid code in jsfiddle Instructions: In the first grid, on butto

Question

Explanation / Answer

Related Questions

Navigate