Update cell value from another cell in jqxGrid

[jgarciasParticipant]

Hi Team

I did not get an answer in my last post, so I decided to try to solve my problem in another way.

This is a small application that will capture information to generate a purchase request document, using a jqxGrid widget.
The idea is that if the user provides the code of the product then the rest of the product information will be displayed in the next columns, but in the case the user does not know the product code then he can navigate to or click on the product name column and start typing whatever he remembers of the product name. A jqxInput widget with autocomplete capability will help the user to find the product.

All this sounds good so far, but when the product code is provided by the user, the PRODUCT NAME is NOT displayed in its corresponding cell. The cell editor should appear initialized at once with the value retrieved from the database, but this is not happening.

How can I make it work?

Here is my code:

   var datarow = {};
   var jsonDrugs = {};
   var drugName = '';

   // Data source for the autocomplete input.
   var source = {
      url: '/WebService1.asmx/getAllDrugs',
      datatype: "json",
      datafields: [
         { name: 'drug_id' },
         { name: 'category_name' },
         { name: 'drug_name' },
      ]
   };
   var dataAdapter = new $.jqx.dataAdapter(source, {
      contentType: 'application/json; charset=utf-8',
      downloadComplete: function(data, textStatus, jqXHR) {
         return JSON.parse(data.d);
      }
   });
   jsonDrugs = dataAdapter;

   // Data source for the grid.
   gridData = { };
   var gridSource = {
      localdata: gridData,
      datatype: "local",
      datafields: [
         { name: 'drug_id', type: 'string' },
         { name: 'category_name', type: 'string' },
         { name: 'drug_name', type: 'string' },
         { name: 'quantity', type: 'number' }
      ],
      addrow: function(rowid, rowdata, position, commit) {
         commit(true);
      }
   };
   gridAdapter = new $.jqx.dataAdapter(gridSource);

   $('#grid').jqxGrid({
      source: gridAdapter,
      columnsresize: true,
      showfilterrow: true,
      filterable: true,
      sortable: true,
      altrows: true,
      showstatusbar: true,
      showtoolbar: false,
      editable: true,
      editMode: 'click',
      selectionmode: 'singlecell',
      height: 320,
      width: 740,
      columns: [
         { text: 'Drug Id', datafield: 'drug_id', width: 60, columntype: 'textbox' },
         { text: 'Category', datafield: 'category_name', width: 150, editable: false },
         {
            text: 'Drug name', datafield: 'drug_name', width: 430, columtype: 'textbox', 
            createeditor: function(row, column, editor) {
               editor.jqxInput({
                  source: jsonDrugs,
                  width: 420,
                  height: 22,
                  displayMember: 'drug_name',
                  placeHolder: 'Enter a drug name',
                  searchMode: 'startswithignorecase',
                  items: 10
               });
            }
         },
         {
            text: 'Quantity', datafield: 'quantity', width: 68, columntype: 'numberinput',
            initeditor: function(row, cellvalue, editor, celltext, pressedChar) {
               editor.jqxNumberInput({
                  inputMode: 'simple',
                  min: 0,
                  spinButtons: false
               });
            }
         }
      ],
      ready: function() {
         // Add the first row to the grid.
         datarow['drug_id'] = '';
         datarow['category_name'] = '';
         datarow['drug_name'] = '';
         datarow['quantity'] = '';
         $("#grid").jqxGrid('addrow', null, datarow);
         $("#grid").jqxGrid('begincelledit', 0, "drug_id");
      }
   });

   $("#grid").on('cellvaluechanged', function(event) {
      var args = event.args;
      var datafield = args.datafield;
      var rowIndex = args.rowindex;
      var value = args.newvalue;
      drugName = '';
      
      // If the product code was entered.
      if (datafield == 'drug_id') {
         // Check for duplicated values in the grid.
         var duplicated = false;
         var rowCount = $('#grid').jqxGrid('getdatainformation').rowscount;
         var lineCount = 0;
         for (var i = 0; i < rowCount; i++) {
            var data = $('#grid').jqxGrid('getrowdata', i);
            if (data.drug_id == value) {
               lineCount++;
               duplicated = (lineCount == 2);
            }
         }
         if (duplicated) {
            alert('Drug is already included in this document.');
         }
         else {
            jQuery.ajax({
               url: '/WebService1.asmx/getDrugById',
               type: 'post',
               datatype: 'json',
               contentType: 'application/json',
               data: '{drug_id:"' + value + '"}',
               success: function(response) {
                  var row = JSON.parse(response.d);
                  if (row.Table.length > 0) {
                     $("#grid").jqxGrid('setcellvalue', rowIndex, "category_name", row.Table[0].category_name);
                     $("#grid").jqxGrid('setcellvalue', rowIndex, "drug_name", row.Table[0].drug_name);
                  }
                  else {
                     alert('Drug code not found.');
                     $("#grid").jqxGrid('begincelledit', rowIndex, "drug_id");
                  }
               }
            });
         }
      }
      else {   // If quantity is entered
         var drugId = $('#grid').jqxGrid('getcellvalue', rowIndex, "drug_id");
         var drugName = $('#grid').jqxGrid('getcellvalue', rowIndex, "drug_name");
         if (drugId != '' && drugName != '') {
            if (datafield == 'quantity') {
               if (value > 0) {
                  // Add new row to the grid.
                  var newrow = {};
                  newrow['drug_id'] = '';
                  newrow['category_name'] = '';
                  newrow['drug_name'] = '';
                  newrow['quantity'] = '';
                  $("#grid").jqxGrid('addrow', null, newrow);
                  var rc = $("#grid").jqxGrid('getdatainformation').rowscount;
                  $("#grid").jqxGrid('begincelledit', rc-1, "drug_id");
               }
            }
         }
      }
   });

[Peter StoevKeymaster]

Hi,

Look at:http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/cascadingediting.htm?arctic. The demo demonstrates how to update a cell value from another cell in jqxGrid. I would not suggest you to make begincelledit within cellvaluechanged if you want to avoid infinite loops. Also about what should be displayed in the cell – with custom editors this is something which you should implement, too. This should happen within the initeditor column function which is called when an editor is displayed and has arguments such as the current cell’s value.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[jgarciasParticipant]

Hi Peter

I got rid of the cellvaluechanged function and I have modified the grid columns definition as follows:

      columns: [
         {
            text: 'Drug Id', datafield: 'drug_id', width: 60, columntype: 'textbox',
            cellvaluechanging: function(row, datafield, columntype, oldvalue, newvalue) {
               if (newvalue != oldvalue) {
                  // Check for duplicated values in the grid.
                  var duplicated = false;
                  var rowCount = $('#grid').jqxGrid('getdatainformation').rowscount;
                  var lineCount = 0;
                  for (var i = 0; i < rowCount; i++) {
                     var data = $('#grid').jqxGrid('getrowdata', i);
                     if (data.drug_id == newvalue) {
                        lineCount++;
                        duplicated = (lineCount == 2);
                     }
                  }
                  if (duplicated) {
                     alert('Drug is already included in this document.');
                  }
                  else {
                     jQuery.ajax({
                        url: '/WebService1.asmx/getDrugById',
                        type: 'post',
                        datatype: 'json',
                        contentType: 'application/json',
                        data: '{drug_id:"' + newvalue + '"}',
                        success: function(response) {
                           var datarow = JSON.parse(response.d);
                           if (datarow.Table.length > 0) {
                              // -------------------------------------
                              // Update category and drug name columns
                              // -------------------------------------
                              $("#grid").jqxGrid('setcellvalue', row, "category_name", datarow.Table[0].category_name);
                              $("#grid").jqxGrid('setcellvalue', row, "drug_name", datarow.Table[0].drug_name);
                              drugName = datarow.Table[0].drug_name;
                           }
                           else {
                              alert('Drug code not found.');
                              $("#grid").jqxGrid('begincelledit', row, "drug_id");
                           }
                        }
                     });
                  }
               }
            }
         },
         { text: 'Category', datafield: 'category_name', width: 150, editable: false },
         {
            text: 'Drug name', datafield: 'drug_name', width: 430, columtype: 'textbox', 
            initeditor: function(row, cellvalue, editor, celltext, pressedChar) {
               // -------------------------------------
               // Update the drug name column
               // -------------------------------------
               editor.val(drugName);
               editor.jqxInput({
                  source: jsonDrugs,
                  width: 420,
                  height: 22,
                  displayMember: 'drug_name',
                  placeHolder: 'Enter a drug name',
                  searchMode: 'startswithignorecase',
                  items: 10
               });
            }
         },
         {
            text: 'Quantity', datafield: 'quantity', width: 68, columntype: 'numberinput',
            initeditor: function(row, cellvalue, editor, celltext, pressedChar) {
               editor.jqxNumberInput({
                  inputMode: 'simple',
                  min: 0,
                  spinButtons: false
               });
            },
            cellvaluechanging: function(row, datafield, columntype, oldvalue, newvalue) {
               var drugId = $('#grid').jqxGrid('getcellvalue', row, "drug_id");
               var drugName = $('#grid').jqxGrid('getcellvalue', row, "drug_name");
               if (drugId != '' && drugName != '') {
                  if (newvalue > 0) {
                     // -----------------------------------------------
                     // Add new row to the grid if newvalue is not cero
                     // -----------------------------------------------
                     var newrow = {};
                     newrow['drug_id'] = '';
                     newrow['category_name'] = '';
                     newrow['drug_name'] = '';
                     newrow['quantity'] = '';
                     $("#grid").jqxGrid('addrow', null, newrow);
                     var rc = $("#grid").jqxGrid('getdatainformation').rowscount;
                     $("#grid").jqxGrid('begincelledit', rc-1, "drug_id");
                  }
               }
            }
         }
      ],

This code works fine only if the user passes twice by the drug code column, I mean, firing two times the drug_id column cellvaluechanging event.
There must be something I am missing here to make it work fine.

Can you identify what is wrong with my code?

Thanks

[jgarciasParticipant]

Peter

Any advise on this?

[Author]

Posts