Query regarding Grid.

[Apeksha SinghParticipant]

Hi,

I have a query regarding grid column that is can we have images and checkboxes both in one column, in this column the tittle also contain a checkbox that select and deselect all the rows.

I want to show a row locked from editing or deleting by using a lock icon replacing the checkboxes.

I am using jquery-1.8.2.min.js and jQWidgets v2.6.1 Release.

Please reply me as soon as possible

Thanks & Regards,

Apeksha

[Peter StoevKeymaster]

Hi,

It is not possible to display other content in a Checkbox Column. It can contain only Checkboxes.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[Apeksha SinghParticipant]

Hi Peter,

Fine if we can’t display any other content in a Checkbox Column, but can we make a complete row which have a checkbox column non editable including the checkbox to be disabled in respect of a particular row id and any one column value.

Please reply me as soon as possible

Thanks & Regards,
Apeksha

[Peter StoevKeymaster]

Hi,

There is such sample Online which shows how to disable the rows editing – http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/disableeditingofrows.htm?web

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[Apeksha SinghParticipant]

Hi Peter,

I have seen this example before an implemented it to but I also have a select all and unselect all checkbox in the header of grid that select and deselect all the checkboxes. The code that I am using for this particular column is given below :-

columns: [
{ text: ”, columntype: ‘checkbox’, datafield: ‘item’, width: ‘9%’, renderer: function () {
return ‘

‘;
},
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 = $(gridid).jqxGrid(‘getdatainformation’).rowscount;
$(gridid).jqxGrid(‘beginupdate’);

if (checked) {
$(gridid).jqxGrid(‘selectallrows’);
}
else if (checked == false) {
$(gridid).jqxGrid(‘clearselection’);
}

for (var i = 0; i < rowscount; i++) {
$(gridid).jqxGrid('setcellvalue', i, 'item', event.args.checked);

}

$(gridid).jqxGrid('endupdate');
});
}

},

I want this code do not check the non editable checkboxes.
And is there any other way to disable the row rather than this.

Thanks & Regards,
Apeksha

[Apeksha SinghParticipant]

Hi Peter,

This is the code for the grid that contain checkbox column :

                    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}, 
                       ]
                    });

You can see that I have a checkbox in the header of 1st column that select all row and deselect it.
I want that it does not select any non editable row.

Please guide me regarding this as soon as possible.

Thanks & Regards,
Apeksha

[Author]

Posts