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

Remove option from list dinamically


In our case we need to be able to let the user select each option only once. To do so we would like to remove and add the selected/unselected options from the list of available options (i.e. the dropdown) dinamically.

We've tried removing/adding options from the list given to `QueryBuilder.columns` on the `change` event but it gives quite a lot of errors because we think that then it does not find the selected column in said array.

Is there any way to accomplish our requirement or we should try something else other than modifying the dropdown?

1 Reply

YA YuvanShankar Arunagiri Syncfusion Team November 24, 2022 12:36 AM

Hi Sergi,

We have prepared the sample based on your requirement. Please refer to the below code snippet and sample link.. Using the created and change event, we have taken the field dropdown-list instance. Using that instance, we have changed the field column data dynamically.

function created(): void {

    let filterElementHTMLElement = document.querySelector('.e-filter-input');

    let dropDownObjDropDownList = getComponent(filterElement'dropdownlist'as DropDownList;

    dropDownObj.beforeOpen = beforeOpen.bind(this,filterElement);



  function change(argsany): void {

     let qbIDstring = qryBldrObj.element.id + "_";

      let ruleElemHTMLElement = document.getElementById(qbID + args.ruleID);

      if (args.type === "insertRule") {





  function fieldChange(elemHTMLElement): void {

      if (elem) {

         let ddlgrpNodeListOf<Element> = elem.querySelectorAll("input[id *= 'filterkey']");

          for (let inumber = 0i < ddlgrp.lengthi++) {

              let ddlObjDropDownList = getComponent(ddlgrp[ias HTMLElement"dropdownlist"as DropDownList;

              ddlObj.beforeOpen = beforeOpen.bind(this,ddlgrp[ias HTMLElement);





  function beforeOpen(valueHTMLElement) {

      let resultvalueRuleModel = qryBldrObj.rule;

      //let resultvalue: RuleModel = qryBldrObj.getGroup(value); unique field type within the group.

      let rulesRuleModel[] = resultvalue.rules;

      let fieldValue = qryBldrObj.columns;

      let fieldDataany = extend([], fieldValue, [], false);

      let field = fieldData;


      let ddlObjDropDownList = getComponent(value as HTMLElement"dropdownlist"as DropDownList;

      ddlObj.dataSource = field;



  function result(rulesRuleModel[], valueHTMLElementfieldanyisGroupAllowedboolean) {

      let ruleany = qryBldrObj.getRule(value);

      for (let inumber = 0i < rules.lengthi++) {

          if (rules[i].rules) {


          } else {

              for (let jnumber = 0j < field.lengthj++) {

                  if (rules[i].field === field[j].field && rule.field !== field[j].field) {







Sample link: https://stackblitz.com/edit/hjgqq1?file=index.ts


YuvanShankar A

Live Chat Icon For mobile
Up arrow icon