We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Changing QueryBuilder Columns Dynamically from AJAX Request


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



                    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,





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  .


3 Replies 1 reply marked as answer

YA YuvanShankar Arunagiri Syncfusion Team January 13, 2023 09:37 AM UTC

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;



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


YuvanShankar A

Attachment: ASP.NET_Core_Tag_Helper_Examples_c6607f70.zip

Marked as answer

AZ Abaid-ur-Rehman Zulfi January 13, 2023 02:10 PM UTC

working perfectly! - Thank You very much!

YA YuvanShankar Arunagiri Syncfusion Team January 16, 2023 06:30 AM UTC

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.

Live Chat Icon For mobile
Up arrow icon