title: DevExpress: Angular Paginated DxTagBox not pre populating values
body: <p>I have been scratching my head since the last so many days for the solution of an issue but unable to find it. Following is the description of the problem related to the dx tag box. <a href="https://js.devexpress.com/Documentation/ApiReference/UI_Widgets/dxTagBox/" rel="nofollow noreferrer">https://js.devexpress.com/Documentation/ApiReference/UI_Widgets/dxTagBox/</a></p>
  
  <p>Problem Description: I need to add custom values to the dxtagbox that are not already the members of the dxtagbox list. Following are my html and ts codes to achieve this thing. I have tried multiple things but no success up till now.</p>
  
  <p><strong>common.component.html</strong></p>
  
  <pre><code>&lt;div class="row"&gt;
  &lt;div class="form-group col-md-12 mt-2"&gt;
    &lt;label&gt;Region&lt;/label&gt;
    &lt;dx-tag-box id="region-lookup" [dataSource]="regionListLookup" class="time-box" [showClearButton]="true"
      style="height: auto !important;" [acceptCustomValue]="true"
      [applyValueMode]="'useButtons'" (onKeyUp)="onEmptyingList($event)" (onValueChanged)="onClearingList($event)" [showSelectionControls]=true
      [searchEnabled]="true" [value]="regions"
      displayExpr="Value" valueExpr="Key"&gt;
    &lt;/dx-tag-box&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p><strong>common.component.ts</strong></p>
  
  <pre><code>regions = [];
  populateRegionslookup() {
   this.regionListLookup = {
    paginate: true,
    store: new CustomStore({
      key: 'Key',
      load: async (loadOptions) =&gt; {
        console.log('this: ', this);
        console.log('loadOptions: ', loadOptions);
        const paginatedData = { Text: loadOptions.searchValue, PageNo: loadOptions.skip, PageSize: loadOptions.take};
        const result = await this.reportsService.getRegionsMetaData(paginatedData)
          .toPromise();
        console.log('this.reportsService.getRegionsMetaData("{' + loadOptions.searchValue + ' })', result);
        result.map((resultItem) =&gt; {
          resultItem.Value = `${resultItem.Key} - ${resultItem.Value}`;
          return resultItem;
        });
        return result;
      },
      byKey: (key) =&gt; {
        console.log('from byKey: ', key);
        //code to return from api by key
      }
    })
   };
  }
  onEmptyingList(event) {
   if (event.event.key == 'Backspace' || event.event.key == 'Delete') {
     //For Tagbox
     if(event.element.id == 'region-lookup') {
       this.taggedRegions = event.value;
       this.timeReportsSearchModel.Region = this.taggedRegions;
       this.missingOfficeTagBoxComponent &amp;&amp; this.missingOfficeTagBoxComponent.instance.getDataSource().reload();
     }
    }
  }
  
  onClearingList(event) {
   //For Tag Box
   if(event.element.id == 'region-lookup') {
     this.taggedRegions = event.value;
     this.timeReportsSearchModel.Region = this.taggedRegions;
     this.missingOfficeTagBoxComponent &amp;&amp; this.missingOfficeTagBoxComponent.instance.getDataSource().reload();
    }
  }
  
  constructor(){
   this.regions = ["customValue1","customValue2","customValue3","customValue4"]
   this.populateRegionslookup();
  }
  </code></pre>
  
  <p>Here, I want to forcefully add "regions" array value to the tagbox although these values are not coming from the api that is used to populate the tagbox items. I am not even able to type in the custom values in the tagbox on ui as shown in the devexpress' documentation.</p>
  
  <p>Is there any way to achieve this or Am I just wasting my time and i should try some other approach?</p>
  
  <p>Kindly help me out. Thanks</p>