Changing QueryBuilder Columns Dynamically from AJAX Request

[Abaid-ur-Rehman Zulfi]

Hello,

I am trying to change query builder columns dynamically using AJAX request. Found code that initializes columns in JavaScript, however, it adds another QueryBuilder object to existing one & UI is disturbed

 

 $.ajax({

                    url: '/home/GetQBColumns',

                    type: 'Get',

                    data: { "module": args.value },

                       success: (function (data) {

                          

                           var columnData = [

                                    { field: 'EmployeeID', label: 'Employee ID', type: 'number' },

                                    { field: 'FirstName', label: 'First Name', type: 'string' },

                                    { field: 'TitleOfCourtesy', label: 'Title Of Courtesy', type: 'boolean', values: ['Mr.', 'Mrs.']},

                                    { field: 'Title', label: 'Title', type: 'string' },

                                    { field: 'HireDate', label: 'Hire Date', type: 'date', format: 'dd/MM/yyyy' },

                                    { field: 'Country', label: 'Country', type: 'string' },

                                    { field: 'City', label: 'City', type: 'string' }

                                ];

                           var qryBldrObj = new ej.querybuilder.QueryBuilder({

                            width: '70%',

                            //dataSource: employeeData,

                            columns: columnData,

                            //rule: importRules,

                           });

                             qryBldrObj.appendTo('#qb');

                                           })

                });

I have tried following code variations to remove existing querybuilder object without luck

 1: var qbObj = document.getElementById('qb').ej2_instances[0];

 qryObj.querybuilder.qryBldrObj = qryBldrObj;

  2: $('#qb').qbObj.remove();

Please let me know how to remove/delete existing querybuilder object  .

Thanks                    

[YuvanShankar Arunagiri]

Hi Abaid,

We have checked your reported issue and prepared the sample based on your requirement. please refer to the below code snippet and attached sample. Using the Columns property of query builder, we can achieve your requirement (changing the columns dynamically).

API link: https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.querybuilder.querybuilder.html#Syncfusion_EJ2_QueryBuilder_QueryBuilder_Columns

document.getElementById('importrules').onclick = function () {

        //After the AJAX request perform the below operation to dynamically changing columns

        var columns1 = [

            { field:"HireDate", label:"Hire Date", type:"date" },

            { field:"Country", label:"Country", type:"string" },

            { field:"City", label:"City", type:"string" }

        ];

        var querybuilderObj = ej.base.getInstance(document.getElementById("querybuilder"), ej.querybuilder.QueryBuilder);

        querybuilderObj.columns = columns1;

        querybuilderObj.reset();

    }

Get back to us if you need any further assistance on this. 

Regards,

YuvanShankar A

Attachment: ASP.NET_Core_Tag_Helper_Examples_c6607f70.zip

[Abaid-ur-Rehman Zulfi]

working perfectly! - Thank You very much!

[YuvanShankar Arunagiri]

You are welcome, Abaid. We are happy to hear that your requirement has been fulfilled. Please get back to us if you need any further assistance on this.

If that post is helpful, please consider Accepting it as the solution so that other members can locate it more quickly.