Initialize comboBox column in jqxGrid

[jgarciasParticipant]

Hi team

I want this jqxGrid to be populated with data from a database table, however one of the columns is a jqxcomboBox object which is populated from another source.
The question is, how can I show in the comboBox the value stored in the database table? it sounds like some sort of search should be made in the comboBox in order to locate the value loaded in the grid cell for every row. Am I right or completely lost?

I already tried with the initeditor but it is useless because the comboBox updates itself after the comboBox cell is clicked, so the values are not shown when the grid is shown at once.

Can someone please provide me an example on how to do this?

This is the code for the grid:

   var mfgSource = {
      url: '/WebService1.asmx/getAllManufacturers',
      datatype: 'json',
      datafields: [
         { name: 'mfg_id', type: 'number' },
         { name: 'mfg_name', type: 'string' }
      ]
   }
   var mfgAdapter = new $.jqx.dataAdapter(mfgSource, {
      contentType: 'application/json; charset=utf-8',
      downloadComplete: function(data, textStatus, jqXHR) {
         return JSON.parse(data.d);
      }
   });

    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);
       }
    });            
    
    $("#grid").jqxGrid({
       source: dataAdapter,
       columnsresize: true,
       showfilterrow: true,
       filterable: true,
       sortable: true,
       altrows: true,
       showstatusbar: true,
       showtoolbar: false,
       editable: true,
       height: 320,
       width: '90%',
       selectionmode: 'singlecell',
       editmode: 'click',
       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: 'Manufacturer', dataField: 'mfg_id', displayField: 'mfg_name', width: 160, cellbeginedit: celledit, columntype: 'combobox',
             createeditor: function(row, column, editor) {
                editor.jqxComboBox({
                   source: mfgAdapter,
                   displayMember: 'mfg_name',
                   valueMember: 'mfg_id',
                   autoComplete: true,
                   dropDownHeight: 150,
                   promptText: "Please Choose:"
                });
             },
             cellvaluechanging: function(row, column, columntype, oldvalue, newvalue) {
                if (newvalue == "") return oldvalue;
             }
          },
          {
             text: 'Price', dataField: 'price', cellsalign: 'right', columntype: 'numberinput', cellsformat: 'c2', cellbeginedit: celledit, width: 90,
             createeditor: function(row, column, editor) {
                editor.jqxNumberInput({ symbol: ' ', spinButtons: false });
             }
          },
          { text: 'Units per box', dataField: 'units_per_box', cellsalign: 'right', cellbeginedit: celledit, width: 120 },
       ]
    });

[ivailoParticipant]

Hi jgarcias,

With local data your code seems to work well.
We also didn’t see the body of celledit function and this causes errors.
Maybe the problem is related with the returned result from the used service.

Here is the demo with local data.

Best Regards,
Ivailo Ivanov

jQWidgets Team
http://www.jqwidgets.com

[jgarciasParticipant]

Hi ivailo

Yes, I did not include the celledit function here because it is not part of my problem. I apologize for not getting rid of the code appropriately from the columns definition.

Back to my problem, what I need the comboBoxes to do is to show the items selected for each row. The comboBoxes work perfectly for the user to choose a value for each row, but if they later want to review or change something in a row the comboBoxes do not show the item saved.

I wish I could attach images to this post so that you could see the screenshots.

Please help me, this is driving me nuts !

[paulo.juniorParticipant]

Hello JGarcias,

   I saw the Post but into’m still not a solution how to handle this case, to recover the data in the independent lines is the same question that the Ivalo answered him today below. He is unable to recover the data on independent lines.

    The combobox with checkbox, works perfectly selection, however I am unable to retrieve selected data.

hugs,

[jgarciasParticipant]

Hi paulo

I can scarcely believe that this issue does not have a feasible solution. Let’s wait for word from someone of jqWidgets team, because a widget that cannot be updated programmatically withing a jqxGrid would be useless in many situations. I think there must be a way to solve this issue.

Ivailo,

The demo link you put for me leads to a “New document” in the jseditor and shows nothing.
Please guide us on how to show, in the comboBox, the item saved previously in the database for each row. We cannot figure it out so far and we urge this functionality to work.

[jgarciasParticipant]

Teammmmm !!

Anybodyyyyyyyyyy !!!

[jgarciasParticipant]

Dear all,

After some time I came across with another project where I decided to use jqWidgets and give it a try to the jqxGrid with Combobox columns that were able to show the description of the options previously saved in a database table, as well as changing those values according to the user will.

Reading this thread, and others similar to this, I realized that my code was not yet complete to accomplish the desired task. Let me elaborate on this for sake of other developers looking for a solution to achieve this functionality:

First of all, I have a data source from another table, defined as follows:

   sectionSrc = {
      type: 'get',
      url: '/section/getSections',
      datatype: 'json',
      datafields: [
         { name: 'sectionID', type: 'int' },
         { name: 'sectionNameEng', type: 'string' }
      ]
   };
   sectionAdapter = new $.jqx.dataAdapter(sectionSrc, { contentType: 'application/json' });

This data source will populate my combobox widget.

Now, I also have the data source for my grid:

   source = {
      type: 'get',
      url: '/question/getQuestions',
      datatype: 'json',
      datafields: [
         { name: 'sectionID', type: 'int', values: { source: sectionAdapter, value: 'sectionID', name: 'sectionNameEng' } },
         { name: 'sectionNameEng', type: 'string' },
         { name: 'fieldID', type: 'int' },
         { name: 'fieldType', type: 'string' },
         { name: 'score', type: 'int' },
      ]
   };
   dataAdapter = new $.jqx.dataAdapter(source, { contentType: 'application/json' });

The data comes from the join of 2 DB tables.
Pay attention to the definition of the first field (sectionID) and see the values attribute added to it. This attribute defines the source and properties that will populate the grid fields ‘sectionID’ and ‘sectionNameEng’.

In order to display the combobox appropriately, in the grid column, we should define the grid as follows:

   $("#grid").jqxGrid({
      altrows: true,
      sortable: true,
      source: dataAdapter,
      columnsresize: true,
      showstatusbar: true,
      selectionmode: 'singlecell',
      editmode: "click",
      editable: true,
      columns: [
         {
            text: 'Section', datafield: 'sectionID', displayfield: 'sectionNameEng', width: '250', columntype: 'combobox',
            createeditor: function (row, column, editor) {
               editor.jqxComboBox({
                  searchMode: 'none',
                  animationType: 'none',
                  source: sectionAdapter,
                  valueMember: 'sectionID',
                  displayMember: 'sectionNameEng'
               });
            },
            // 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: 'Question number', dataField: 'questionID' }, ...

The properties selectionmode, editmode and editable and the values assigned to them, play an important role here to allow the combobox to open with just one click.

The sectionID grid column needs the displayfield attribute to be set to another field able to save the text from selected item in the combobox, just to show it on the grid after the combobox gets closed.

It is also important to set the properties searchMode, valueMember and displayMember with the values you see in the code above so that the combobox is displayed correctly.
Proceed likewise for any other combobox column that you wish to add to your jqxGrid widget.

I hope this helps someone out there. Good luck!

Joaquin.

[jgarciasParticipant]

Sorry, I forgot to add and set one property to the combobox, in order to open it with only one click:

createeditor: function (row, column, editor) {
               editor.jqxComboBox({
                  <strong>autoOpen: true</strong>,
                  searchMode: 'none',
                  animationType: 'none',
                  source: sectionAdapter,
                  valueMember: 'sectionID',
                  displayMember: 'sectionNameEng'
               });
            },

Cheers.

[MartinParticipant]

Hello Joaquin,

Thank you for your contribution!

Best Regards,
Martin Yotov

jQWidgets team
https://www.jqwidgets.com

[Author]

Posts