Wrapper grid dynamic column binding issue

[RR]

 

hi, 

I have used vue wrapper grid, columns binding as a list.  Columns are binded. 

 

ColumnList is as follows.

 

I use a seperate method to change this column list. later. There I add new columns to the grid as well. 

createContactGridWithCustomFields(customFields: []) {

   if (this.commonContactInfo.customFieldsForGroups.length > 0) {
     let Customcolumns: any[] = [];
     let field = '';
     let cusFieldId = '';
     this.commonContactInfo.customFieldsForGroups.forEach((cf:CustomFieldsDto) => {
       if (cf.pkFieldId !== undefined) {
         cusFieldId = cf.pkFieldId;
       }
       console.log('cfid:', cusFieldId);
       this.commonContactInfo.fetchedContactsList.forEach((cont:ContactDto) => {
         Object.keys(cont.customFields).forEach(k => {
           if (this.commonHelper.getPlainGuidString(k) === cusFieldId) {
             if (cont.customFields[k].DataType === 'DateValue') {
               console.log(cont.customFields[k].DateValue);
               field = 'customFields[' + k + '].DateValue';
             }
             if (cont.customFields[k].DataType === 'StringValue') {
               console.log(cont.customFields[k].StringValue);
               field = 'customFields[' + k + '].StringValue';
             }
             if (cont.customFields[k].DataType === 'IntValue') {
               console.log(cont.customFields[k].IntValue);
               field = 'customFields[' + k + '].IntValue';
             }
           }
         });
       });

       Customcolumns.push({
         title: cf.fieldName,
         field: field, // 'customFields[' + field + '].DateValue',
         selected: true,
         disabled: true,
         isVisible: true,
         width: 150
       });
     });

     let defcolumns = this.helperService.loadGridColumns();
     Customcolumns.forEach((tc:any) => {
       defcolumns.push(tc);
     });
   }
 }

 

columns are added like this because the data i have is as follows. datafieldvalue

 Issue is after this even the columns are added the data in not binding.

Any suggestions?

[Plamen]

Hello,

Here you can find one example how to use dynamic columns in Kendo Vue Wrapper - https://stackblitz.com/edit/2v8gaj-9hq1dr?file=index.js.

You could also check an example with the Native Kendo Grid for Vue that was where dynamic columns are an easy task-  https://stackblitz.com/edit/wanzoc-n7zn9y?file=index.js .

 

Regards,
Plamen
Progress Telerik