Reset grid's row if checkbox is not checked

[jgarciasParticipant]

Hello there.

I am trying to clear the cells values of a row when a checkbox column is not checked. When the checkbox column is checked it allows for cells editing. This works fine, but when the check mark is removed then the values in the editable cells should be cleared (reset). This is what I have not got to work so far.

Any tip on how to achieve this?

Here is my code:

            var source = {
               url: '/WebService1.asmx/getdata',
               datatype: "json",
               datafields: [
                  { name: 'added', type: 'boolean' },
                  { name: 'drug_id', type: 'number' },
                  { name: 'drug_name', type: 'string' },
                  { name: 'category_name', type: 'string' },
                  { name: 'mfg_id', type: 'number' },
                  { name: 'price', type: 'number' },
                  { name: 'units_per_box', type: 'number' },
                  { name: 'mfg_name', type: 'string' }
               ]
            };
            var dataAdapter = new $.jqx.dataAdapter(source, {
                  contentType: 'application/json; charset=utf-8',
                  downloadComplete: function(data, textStatus, jqXHR) {
                  return JSON.parse(data.d);
               }
            });

            var celledit = function(row, datafield, columntype) {
               var checked = $('#grid').jqxGrid('getcellvalue', row, 'added');   // Is the checkbox checked?
               if (checked == false) {
                  $("#grid").jqxGrid('setcellvalue', row, "units_per_box", "0");   // Reset "units_per_box" in that row if checkbox is not checked.
                  if (datafield != 'added')   // to allow the checkbox to be clicked.
                     return false;   // do not allow editing in current cell
               }
            };

            $("#grid").jqxGrid({
               source: dataAdapter,
               columnsresize: true,
               showfilterrow: true,
               filterable: true,
               sortable: true,
               altrows: true,
               showstatusbar: true,
               showtoolbar: false,
               editable: true,
               height: 320,
               width: '90%',
               columns: [
                  { text: 'Added', dataField: 'added', columntype: 'checkbox', filterable: false, cellbeginedit: celledit, width: 50 },
                  { text: 'Drug id', dataField: 'drug_id', editable: false, width: 70 },
                  { text: 'Category', dataField: 'category_name', editable: false, width: 160 },
                  { text: 'Drug name', dataField: 'drug_name', editable: false, width: 450 },
                  { text: 'mfg id', dataField: 'mfg_id', hidden: true },
                  {
                     text: 'Manufacturer', dataField: 'mfg_name', width: 160, cellbeginedit: celledit, columntype: 'combobox',
                     createeditor: function(row, column, editor) {
                        // assign a new data source to the combobox.
                        editor.jqxComboBox({ source: mfgAdapter, autoComplete: true, dropDownHeight: 150, promptText: "Please Choose:" });
                     },
                     // update the editor's value before saving it.
                     cellvaluechanging: function(row, column, columntype, oldvalue, newvalue) {
                        // return the old value, if the new value is empty.
                        if (newvalue == "") return oldvalue;
                     }
                  },
                  { text: 'Price', dataField: 'price', cellsalign: 'right', columntype: 'numberinput', cellsformat: 'c2', cellbeginedit: celledit, width: 90 },
                  { text: 'Units per box', dataField: 'units_per_box', cellsalign: 'right', cellbeginedit: celledit, width: 120 }
               ]
            });

Thanks.

[jgarciasParticipant]

As you can see, I was using:

$("#grid").jqxGrid('setcellvalue', row, "units_per_box", "0");

in order to clear (reset) the value of the editable cells, but for sure I am doing something wrong or not using the right way.

[ivailoParticipant]

Hi jgarcias,

You also can try to use updaterow method.
Here is a simple demo.

Best Regards,
Ivailo Ivanov

jQWidgets Team
http://www.jqwidgets.com

[jgarciasParticipant]

Hi ivailo

Thanks for your reply. I have another question about this grid:
The rows, with the checkbox column checked, are saved in a database table and can be retrieved later and shown in the same grid.
The check mark is being shown correctly for the saved rows, but the editable columns data are not being shown, I mean, the saved values are not being shown.

What is missing in my code to show the saved data, in the editable columns? (comboBox, textBox and numberinput columns)

Thanks.

[jgarciasParticipant]

Ivailo

The last question applies only for the comboBox column. I found out that my stored procedure was not selecting the other 2 columns.

[ivailoParticipant]

Hi jgarcias,

Look at this topic if the problem is the same.

Best Regards,
Ivailo Ivanov

jQWidgets Team
http://www.jqwidgets.com

[Author]

Posts