How do i let users add any column name like a textbox ?

[Ali]

hello people

in my app users create dynamic filters, so some of the data is not there yet. so i like to let the users input any column they want.

for example : i want to have these columns in the dropdown: title, price, description

but if the user wants he should be able to enter "url" in the field and it should be saved.

how do i do that ? i looked at the api and could not found a way :/

[Keerthikaran Venkatachalam]

Hi Ali,

We have reviewed your reported query and have prepared a sample that meets your requirements. By utilizing the fieldModel property of the QueryBuilder, you can filter and add a dynamic field to the column. Please refer to the provided code snippet and sample below.

    <ejs-querybuilder id="querybuilder" :dataSource="dataSource" ref="querybuilder" :fieldModel = "{allowFiltering: true, filtering: filtering, noRecordsTemplate: nTemplate}"  width="100%" :created="onQrybldrCreated"></ejs-querybuilder>

….

onclick: function (e) {

        var popupElem = e.currentTarget.closest(".e-popup");

        var filterInput = popupElem.getElementsByClassName('e-input-filter')[0];

        this.customValue = filterInput.value;

        let queryBuilderObj = getComponent(document.getElementById("querybuilder"), "query-builder");

        queryBuilderObj.columns.push({field: this.customValue, label: this.customValue, type: "string"});

        queryBuilderObj.refresh();

      },

Sample link: https://stackblitz.com/edit/snq558-kjabzq?file=src%2FApp.vue

Please let us know if you need any further assistance on this.

Regards,

KeerthiKaran K V