Remove option from list dinamically

[Sergi Magret]

Hi,

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?

[YuvanShankar Arunagiri]

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 filterElement: HTMLElement = document.querySelector('.e-filter-input');

    let dropDownObj: DropDownList = getComponent(filterElement, 'dropdownlist') as DropDownList;

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

  }

  

  function change(args: any): void {

     let qbID: string = qryBldrObj.element.id + "_";

      let ruleElem: HTMLElement = document.getElementById(qbID + args.ruleID);

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

          fieldChange(ruleElem);

      }

  }

 

  function fieldChange(elem: HTMLElement): void {

      if (elem) {

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

          for (let i: number = 0; i < ddlgrp.length; i++) {

              let ddlObj: DropDownList = getComponent(ddlgrp[i] as HTMLElement, "dropdownlist") as DropDownList;

              ddlObj.beforeOpen = beforeOpen.bind(this,ddlgrp[i] as HTMLElement);

          }

      }

  }

 

  function beforeOpen(value: HTMLElement) {

      let resultvalue: RuleModel = qryBldrObj.rule;

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

      let rules: RuleModel[] = resultvalue.rules;

      let fieldValue = qryBldrObj.columns;

      let fieldData: any = extend([], fieldValue, [], false);

      let field = fieldData;

      result(rules, value, field, true);

      let ddlObj: DropDownList = getComponent(value as HTMLElement, "dropdownlist") as DropDownList;

      ddlObj.dataSource = field;

  }

 

  function result(rules: RuleModel[], value: HTMLElement, field: any, isGroupAllowed: boolean) {

      let rule: any = qryBldrObj.getRule(value);

      for (let i: number = 0; i < rules.length; i++) {

          if (rules[i].rules) {

              result(rules[i].rules, value, field, isGroupAllowed)

          } else {

              for (let j: number = 0; j < field.length; j++) {

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

                      field.splice(j,1); 

                  }

              }

          }

      }  

  }

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

Regards,

YuvanShankar A