setRulesFromSql does not use value for dropdown but text (label)

[Peter Esser]

Hi Syncfusion,

The querybuilder is awesome! We are implementing this in Vue and encounter an issue. When using the method setRulesFromSQL with a dropdown, the value from the SQL does not correspond to the value in the dropdown. It looks like the mapping is based on the "label"/"text" instead of the value.

To demonstrate this, we created this sandbox: https://codesandbox.io/s/vue-querybuilder-dropdown-vxc78?file=/src/App.vue

The two buttons on top show the behavior.

As the SQL contains the value, it should be also the value which can be used for the dropdown object. When using the output "SQL" as input "SQL", the dropdown is empty instead of showing the correct item from the list.

Secondly, when using a different fieldmap, eg

    fields: { text: 'Game', value: 'Id' },

for the dropdownlist within the querybuilder, the value does not work (sql outputs "undefined"). We can workaround this last issue by supplying a datasource which has the default "text" and "value" properties, but it would be nice if this mechanism works as well in the querybuilder.

 

[Mohan Kumar Ramasamy]

Hi Peter, 

 

We have checked your reported query.  We have resolved your reported issue using set the dropdown list field settings Please refer below code snippets. 

 

data: function () { 

    return { 

      isLabel: false, 

      labelFields: { text: "text", value: "text" }, 

      valueFields: { text: "text", value: "value" }, 

                  } 

                  } 

                   

                   dropdownTemplate: { 

        create: () => { 

          return createElement("input", { attrs: { type: "text" } }); 

        }, 

        destroy: (args) => { 

          let dropdownlist = getComponent( 

            document.getElementById(args.elementId), 

            "dropdownlist" 

          ); 

          if (dropdownlist) dropdownlist.destroy(); 

        }, 

        write: (args) => { 

          let ds = 

            args.field === "assigned_roles.id" 

              ? this.roleOptions 

              : this.jobOptions; 

          let dropDownObj = new DropDownList({ 

            dataSource: ds, 

            value: args.values, 

            fields: this.isLabel ? this.labelFields : this.valueFields, 

            allowFiltering: true, 

            filtering: function (e) { 

              var query = new Query(); 

              query = 

                e.text != "" 

                  ? query.where("text", "contains", e.text, true) 

                  : query; 

              e.updateData(ds, query); 

            }, 

            change: (e) => { 

              this.$refs.querybuilder.$el.ej2_instances[0].notifyChange( 

                e.itemData.value, 

                e.element 

              ); 

            }, 

          }); 

          dropDownObj.appendTo("#" + args.elements.id); 

                                   

                                    loadRuleByTextlabels() { 

      this.isLabel = true; 

      console.log("Load by labels"); 

      this.$refs.querybuilder.ej2Instances.setRulesFromSql( 

        "assigned_roles.id = 'manager' AND job_description_user.job_description_id != 'Chief Sales Officer'" 

      ); 

    }, 

    loadRuleByValues() { 

      this.isLabel = false; 

      console.log("Load by values"); 

      this.$refs.querybuilder.ej2Instances.setRulesFromSql( 

        "assigned_roles.id = 1 AND job_description_user.job_description_id != 'cso'" 

      ); 

 

For your reference, we have prepared a sample based on this. Please refer below link. 

 

Link: https://codesandbox.io/s/vue-querybuilder-dropdown-forked-9xr1j  

 

Please let us know, if you need any further assistance. 

 

Regards, 

Mohan kumar R