Query regarding checkbox column in a grid.

[Apeksha SinghParticipant]

Hi,

I have a grid with a checkbox column.This column even contain checkbox in the header that select and deselect all rows in the grid.

1- I want it does not select non editable row.

2- If I have selected 5 items from 20 items to display using Show rows pageable property it should select only all the 5 items but it is selecting all the 20 items.

Please guide me regarding this as soon as possible.

I am adding my code below:-

                    var source =
                    {
                      localdata: data,
                      datatype: "json",
                      datafields:
                      [   { name: 'item', type: 'bool' },
                          { name: 'id', type: 'number' },
                          { name: 'name', type: 'string' },
                          { name: 'description', type: 'string' },
                          { name: 'purchase_unit_price', type: 'number' },
                          { name: 'purchase_chart_id', type: 'string' },
                          { name: 'purchase_tax_rate_id', type: 'string' },
                          { name: 'sale_unit_price', type: 'number' },
                          { name: 'sale_chart_id', type: 'string' },
                          { name: 'sale_tax_rate_id', type: 'string' }
                      ]
                    };
                    var dataAdapter = new $.jqx.dataAdapter(source);
                    var columnCheckBox = null;
                    var updatingCheckState = false;
                    // initialize jqxGrid
                    $("#item_table").jqxGrid(
                    {
                        width: '97.7%',
                        source: dataAdapter,
                        theme:'metro',
                        autoheight: true,
                        sortable: true,
                        altrows: true,
                        enabletooltips: true,
                        editable:true,
                        pageable: true,
                        selectionmode: 'none',
                        columns: [
                          { text: '', columntype: 'checkbox',datafield: 'item', width: '4%', renderer: function () {
                                  return '<div style="margin-left:5px; margin-top: 5px;"></div>';
                              },
                              rendered: function (element) {
                                  $(element).jqxCheckBox({ theme: 'metro', width: 16, height: 16, animationShowDelay: 0, animationHideDelay: 0 });
                                  columnCheckBox = $(element);
                                  $(element).on('change', function (event) {
                                      var checked = event.args.checked;
                                      if (checked == null || updatingCheckState) return;
                                      var rowscount = $("#item_table").jqxGrid('getdatainformation').rowscount;
                                      $("#item_table").jqxGrid('beginupdate');
                                      if (checked) {
                                          $("#item_table").jqxGrid('selectallrows');
                                      }
                                      else if (checked == false) {
                                          $("#item_table").jqxGrid('clearselection');
                                      }
                                      for (var i = 0; i < rowscount; i++) {
                                          $("#item_table").jqxGrid('setcellvalue', i, 'item', event.args.checked);
                                      }
                                      $("#item_table").jqxGrid('endupdate');
                                  });
                              }},
                          { text: 'Name', datafield:'name', width:'9%', editable:false},
                          { text: 'Id', datafield:'id', width:'9%',editable:false, hidden:true},
                          { text: 'Description', datafield: 'description', width:'10%',editable:false },
                          { text: 'Purchases Price', datafield: 'purchase_unit_price', cellsalign: 'right', cellsformat: 'c2', width: '13%',editable:false},
                          { text: 'Purchases Account', datafield: 'purchase_chart_id', width:'17%',editable:false },
                          { text: 'Tax', datafield: 'purchase_tax_rate_id', width:'13%',editable:false },
                          { text: 'Sales Price', datafield: 'sale_unit_price', cellsalign: 'right', cellsformat: 'c2', width: '10%',editable:false},
                          { text: 'Sales Account', datafield: 'sale_chart_id', width:'12%',editable:false},
                          { text: 'Tax', datafield: 'sale_tax_rate_id', width:'12%',editable:false}, 
                       ]
                    });

Thanks & Regards,

Apeksha

[DimitarParticipant]

Hello Apeksha,

Please check out the following forum topics which provide answers to your questions:

1) make only some rows not editable (checkable)

2) Grid Column jqxCheckBox

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[Apeksha SinghParticipant]

Hi Dimitar,

This examples are not proper according to my requirement.
Please tell me if I have a select all checkbox in header of a grid column then how I can stop it to select non editable row of the grid.
I am adding my code below :-

var source =
                    {
                      localdata: data,
                      datatype: "json",
                      datafields:
                      [   { name: 'item', type: 'bool' },
                          { name: 'id', type: 'number' },
                          { name: 'name', type: 'string' },
                          { name: 'description', type: 'string' },
                          { name: 'purchase_unit_price', type: 'number' },
                          { name: 'purchase_chart_id', type: 'string' },
                          { name: 'purchase_tax_rate_id', type: 'string' },
                          { name: 'sale_unit_price', type: 'number' },
                          { name: 'sale_chart_id', type: 'string' },
                          { name: 'sale_tax_rate_id', type: 'string' }
                      ]
                    };
					var cellbeginedit = function (row, datafield, columntype, value) {
						var value = $('#item_table').jqxGrid('getcellvalue', row, "name");
						if (value == "Furniture") {
						  return false;
						};
					}
					var cellsrenderer = function (row,columnfield, value, defaulthtml, columnproperties) {
						if (value == "Furniture") {
							return '<span style="color: #A6A6A6;">' + value + '</span>';
						 }
						 else {
							return '<span style="color: #020202;">' + value + '</span>';
						 }
					}
                    var dataAdapter = new $.jqx.dataAdapter(source);
                    var columnCheckBox = null;
                    var updatingCheckState = false;
                    // initialize jqxGrid
                    $("#item_table").jqxGrid(
                    {
                        width: '97.7%',
                        source: dataAdapter,
                        theme:'metro',
                        autoheight: true,
                        sortable: true,
                        altrows: true,
                        enabletooltips: true,
                        editable:true,
                        pageable: true,
                        pagesizeoptions: ['10', '20','30','40','50'],
                        selectionmode: 'none',
                        columns: [
                          { text: '', columntype: 'checkbox',datafield: 'item', width: '4%', cellbeginedit: cellbeginedit, renderer: function () {
                                  return '<div style="margin-left:5px; margin-top: 5px;"></div>';
                              },
                              rendered: function (element) {
                                  $(element).jqxCheckBox({ theme: 'metro', width: 16, height: 16, animationShowDelay: 0, animationHideDelay: 0 });
                                  columnCheckBox = $(element);
                                  $(element).on('change', function (event) {
                                      var checked = event.args.checked;
                                      if (checked == null || updatingCheckState) return;
                                      var rowscount = $("#item_table").jqxGrid('getdatainformation').rowscount;
                                      $("#item_table").jqxGrid('beginupdate');
                                      if (checked) {
                                          $("#item_table").jqxGrid('selectallrows');
                                      }
                                      else if (checked == false) {
                                          $("#item_table").jqxGrid('clearselection');
                                      }
                                      for (var i = 0; i < rowscount; i++) {
                                          $("#item_table").jqxGrid('setcellvalue', i, 'item', event.args.checked);
                                      }
                                      $("#item_table").jqxGrid('endupdate');
                                  });
                              }},
                          { text: 'Name', datafield:'name', width:'9%', editable:false ,cellbeginedit: cellbeginedit, cellsrenderer: cellsrenderer},
                          { text: 'Id', datafield:'id', width:'9%',editable:false, hidden:true, cellbeginedit: cellbeginedit, cellsrenderer: cellsrenderer},
                          { text: 'Description', datafield: 'description', width:'10%',editable:false, cellbeginedit: cellbeginedit, cellsrenderer: cellsrenderer },
                          { text: 'Purchases Price', datafield: 'purchase_unit_price', cellsalign: 'right', cellsformat: 'c2', width: '13%',editable:false, cellbeginedit: cellbeginedit, cellsrenderer: cellsrenderer},
                          { text: 'Purchases Account', datafield: 'purchase_chart_id', width:'17%',editable:false, cellbeginedit: cellbeginedit, cellsrenderer: cellsrenderer },
                          { text: 'Tax', datafield: 'purchase_tax_rate_id', width:'13%',editable:false, cellbeginedit: cellbeginedit, cellsrenderer: cellsrenderer },
                          { text: 'Sales Price', datafield: 'sale_unit_price', cellsalign: 'right', cellsformat: 'c2', width: '10%',editable:false, cellbeginedit: cellbeginedit, cellsrenderer: cellsrenderer},
                          { text: 'Sales Account', datafield: 'sale_chart_id', width:'12%',editable:false},
                          { text: 'Tax', datafield: 'sale_tax_rate_id', width:'12%',editable:false ,cellbeginedit: cellbeginedit, cellsrenderer: cellsrenderer}, 
                       ]
                    });

But in this cellsrenderer function is not working.
Please guide me regarding this asap.

Thanks & Regards,
Apeksha

[Author]

Posts