preset drop down field and events to monitor

[jbrahyParticipant]

Hello,

I have a jqxGrid. The dataset powering it looks like this:

{
    "duplication_control_id": 1,
    "duplication_control": "Demo",
    "duplication_control_type_id": 1,
    "days": 90,
    "duplication_control_owner_list_group_id": 1,
    "duplication_control_routing_rule_group_id": 1,
    "duplication_control_manager_list_group_id": 1,
    "created_at": "2022-07-13 12:33:24",
    "updated_at": "2022-07-13 14:11:37",
    "deleted_at": null
} 

For many of the columns I have look up tables for the values. i.e. duplication_control_type_id relates to a table called duplication_control_types with two columns. duplication_control_type_id (int) and duplication_control_type (string).

When someone edits the row/column for any of these look ups I want to display the look up value instead of the id of the look up table.

Is there a demo for this? The look-up JSON would be something like this:

 
	[
		{
			"duplication_control_type_id": 1,
			"duplication_control_type": "Allow Duplicates"
		},
		{
			"duplication_control_type_id": 2,
			"duplication_control_type": "Global Deduplication"
		},
		{
			"duplication_control_type_id": 3,
			"duplication_control_type": "Group Deduplication"
		}
	] 

Here’s a sample column that I’m trying to use a drop-down list column. I took a few of your examples and tried to hack them together, but I’m not finding all the documentation for events like createeditor, and cellvaluechanging.

{
          text: 'Routing Rule Group',
          displayMember: 'routing_rule_group',
          valueMember: 'routing_rule_group_id',
          columntype: 'dropdownlist',
          datafield: 'routing_rule_group',
          width: 195,
          createeditor: function(row, column, editor) {
            // assign a new data source to the dropdownlist.
            editor.jqxDropDownList({
              displayMember: 'routing_rule_group',
              valueMember: 'routing_rule_group_id',
              autoDropDownHeight: true,
              source: routing_rules_group_data_adapter,
            });
          }, // 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;
            }
          },
        }

These were things I tried but didn’t work.

          displayMember: 'routing_rule_group',
          valueMember: 'routing_rule_group_id', 

[svetoslav_borislavovParticipant]

Hi,

Take a look at this example: https://jsfiddle.net/hexnz86r/.
In the example, the dataset contains a field with an id and there is also a lookup table. The grid matches the id with the appropriate label and displays it. Also when editing the ids are also matched with the lookup table.
Have a look also at this sample: https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/index.htm#demos/jqxgrid/gridkeyvaluescolumnwitharray.htm
If you have questions or need further assistance, please let me know!

Best regards,
Svetoslav Borislavov

jQWidgets Team
https://www.jqwidgets.com/

[jbrahyParticipant]

Thank you Svetoslav Borislavov, I think this is exactly what I’m looking for. I’m going to put it into a test and see how it works.

[jbrahyParticipant]

ok, so this is where I’m at. I definitely see the drop downs populating but I don’t see any text in them. I’m hoping that it’s just a little mistake somewhere that you can point out. I’m also going to re-read your examples and see what I can find.

<script type="application/javascript">
  $(document).ready(function() {

    let duplication_control_types_source = {
      datatype: 'json',
      datafields: [
        {
          name: 'duplication_control_type_id',
          type: 'int',
        }, {
          name: 'duplication_control_type',
          type: 'string',
        },
      ],
      url: '/cgi-bin/duplication_control_types/dataset?rand=' + Math.random().toString(),
    };
    let duplication_control_types_data_adapter = new $.jqx.dataAdapter(duplication_control_types_source);

    let publisher_group_source = {
      datatype: 'json',
      datafields: [
        {
          name: 'publisher_group_id',
          type: 'int',
        }, {
          name: 'publisher_group',
          type: 'string',
        },
      ],
      url: '/cgi-bin/publisher_groups/dataset/?rand=' + Math.random().toString(),
    };
    let publisher_groups_data_adapter = new $.jqx.dataAdapter(publisher_group_source);

    let color_groups_source = {
      datatype: 'json',
      datafields: [
        {
          name: 'color_group_id',
          type: 'int',
        }, {
          name: 'color_group',
          type: 'string',
        },
      ],
      url: '/cgi-bin/color_groups/dataset/?rand=' + Math.random().toString(),
    };
    let color_groups_data_adapter = new $.jqx.dataAdapter(color_groups_source);

    let product_groups_source = {
      datatype: 'json',
      datafields: [
        {
          name: 'product_group_id',
          type: 'int',
        }, {
          name: 'product_group',
          type: 'string',
        },
      ],
      url: '/cgi-bin/product_groups/dataset/?rand=' + Math.random().toString(),
    };

    let product_groups_data_adapter = new $.jqx.dataAdapter(product_groups_source);
    let duplication_controls_source = {
      datatype: 'json',
      datafields: [
        {
          name: 'duplication_control_id',
          type: 'int',
        }, {
          name: 'duplication_control',
          type: 'string',
        }, {
          name: 'duplication_control_type_id',
          type: 'int',
          values: {
            source: duplication_control_types_data_adapter.records,
            value: 'duplication_control_type_id',
            name: 'duplication_control_type',
          },
        }, {
          name: 'duplication_control_type',
          type: 'string',
        }, {
          name: 'publisher_group_id',
          type: 'int',
          values: {
            source: publisher_groups_data_adapter.records,
            value: 'publishers_group',
            name: 'publisher_groups_id',
          },
        }, {
          name: 'color_group_id',
          type: 'int',
          values: {
            source: color_groups_data_adapter.records,
            value: 'color_group_id',
            name: 'color_group',
          },
        }, {
          name: 'product_group_id',
          type: 'int',
          values: {
            source: product_groups_data_adapter.records,
            value: 'product_group_id',
            name: 'product_groups',
          },
        }, {
          name: 'created_at',
          type: 'datetime',
        }, {
          name: 'updated_at',
          type: 'datetime',
        }, {
          name: 'deleted_at',
          type: 'datetime',
        },
      ],
      url: '/cgi-bin/duplication_control/dataset/?rand=' + Math.random().toString(),
      updaterow: function(rowid, rowdata, commit) {
        // synchronize with the server - send update command
        // call commit with parameter true if the synchronization with the server is successful
        // and with parameter false if the synchronization failed.

        commit(true);
      },
    };

    let duplication_controls_data_adapter = new $.jqx.dataAdapter(duplication_controls_source, {
      autoBind: true,
    });

    $('#duplication_controls_table').jqxGrid({
      source: duplication_controls_data_adapter,
      editable: true,
      width: '100%',
      height: '100%',
      theme: 'dark',
      columns: [
        {
          text: 'Duplication Control',
          columntype: 'textbox',
          datafield: 'duplication_control',
          width: 120,
        }, {
          text: 'duplication_control_type',
          columntype: 'dropdownlist',
          datafield: 'duplication_control_type',
          width: 150,
          createeditor: function(row, value, editor) {
            editor.jqxDropDownList({
              source: duplication_control_types_data_adapter,
              displayMember: 'duplicate_control_type',
              valueMember: 'duplicate_control_type_id',
              autoDropDownHeight: true,
            });
          },
        }, {
          text: 'Owner List Group',
          displayMember: 'publisher_group',
          valueMember: 'publisher_group_id',
          columntype: 'dropdownlist',
          datafield: 'publisher_group',
          width: 150,
          createeditor: function(row, value, editor) {
            editor.jqxDropDownList({
              source: duplication_control_types_data_adapter,
              displayMember: 'duplicate_control_type',
              valueMember: 'duplicate_control_type_id',
              autoDropDownHeight: true,
            });
          },
        }, {
          text: 'Routing Rule Group',
          displayMember: 'color_group',
          valueMember: 'color_group_id',
          columntype: 'dropdownlist',
          datafield: 'color_group',
          width: 150,
          createeditor: function(row, value, editor) {
            editor.jqxDropDownList({
              source: duplication_control_types_data_adapter,
              displayMember: 'duplicate_control_type',
              valueMember: 'duplicate_control_type_id',
              autoDropDownHeight: true,
            });
          },
        }, {
          text: 'Manager List Group',
          columntype: 'dropdownlist',
          datafield: 'product_groups',
          width: 150,
          createeditor: function(row, value, editor) {
            editor.jqxDropDownList({
              source: duplication_control_types_data_adapter,
              displayMember: 'duplicate_control_type',
              valueMember: 'duplicate_control_type_id',
              autoDropDownHeight: true,
            });
          },
        }, {
          text: 'created_at',
          datafield: 'created_at',
          width: 150,
        }, {
          text: 'updated_at',
          datafield: 'updated_at',
          width: 150,
        },
      ],
    });
  });
</script>

<div class="container">
    <div class="row">
        <div class="col-12">
            <div id="duplication_controls_table"></div>
        </div>
    </div>
</div>

[jbrahyParticipant]

Where do these come from?

                	datafield: 'someForeignData',
                  displayfield: 'foreignDataLookup',

[svetoslav_borislavovParticipant]

Hi,

Your duplication_control_types_source, publisher_group_source, color_groups_source and product_groups_source are the sources for the lookup, so the data adapter, which you are creating should have the autoBind property set to true. You shouldn`t set the autoBind property to the duplication_controls_data_adapter.
For example:

let publisher_group_source = {
      datatype: 'json',
      datafields: [
        {
          name: 'publisher_group_id',
          type: 'int',
        }, {
          name: 'publisher_group',
          type: 'string',
        },
      ],
      url: '/cgi-bin/publisher_groups/dataset/?rand=' + Math.random().toString(),
    };
    let publisher_groups_data_adapter = new $.jqx.dataAdapter(publisher_group_source, { autoBind: true });

Next, you do not have the value to which you want to bind the data from the lookup. For example here:

{
    name: 'publisher_group_id',
    type: 'int',
    values: {
        source: publisher_groups_data_adapter.records,
        value: 'publishers_group',
        name: 'publisher_groups_id',
    },
}

.
This should look like for example:

{
    name: 'publisher_group_bound_with_lookup',
    value: 'publisher_group_id_from_dataset', //the id from the dataset
    values: {
        source: publisher_groups_data_adapter.records,
        value: 'publisher_group_id',
        name: 'publisher_group',
    },
}

Look, now you have a value from which you will bind (publisher_group_bound_with_lookup) and in the values object, I have swapped the values value with the names value.
NOTE THAT the publisher_group_id_from_dataset property should be defined as a datafield in the duplication_controls_source.

Next, here:

{
    text: 'Owner List Group',
    displayMember: 'publisher_group',
    valueMember: 'publisher_group_id',
    columntype: 'dropdownlist',
    datafield: 'publisher_group',
    width: 150,
    createeditor: function(row, value, editor) {
        editor.jqxDropDownList({
        source: duplication_control_types_data_adapter,
        displayMember: 'duplicate_control_type',
        valueMember: 'duplicate_control_type_id',
        autoDropDownHeight: true,
        });
    },
}

You are trying to display a datafield that you have not defined and you are passing the wrong data adapter for the editor`s lookup table source.
Your column should look like this:

{
    text: 'Owner List Group',
    displayMember: 'publisher_group_bound_with_lookup',
    columntype: 'dropdownlist',
    datafield: 'publisher_group_id_from_dataset',
    width: 150,
    createeditor: function(row, value, editor) {
        editor.jqxDropDownList({
        source: duplication_control_types_data_adapter,
        displayMember: 'duplicate_control_type',
        valueMember: 'duplicate_control_type_id',
        autoDropDownHeight: true,
        });
    },
}

I highly suggest you review the demo I gave you!
I will wait for your feedback to let me know the result!

Best regards,
Svetoslav Borislavov

jQWidgets Team
https://www.jqwidgets.com/

[Author]

Posts