Wrapper grid dynamic column binding issue

[RR]

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

<KendoGrid
     ref="ContactList"
     id="contactListView"
     :selectable="'multiple'"
     :reorderable="true"
     :sortable="false"
     :resizable="true"
     :scrollable-endless="true"
     :filterable="false"
     :columns="columnList.filter(x=>x.selected==true)"
     :editable="commonContactInfo.isGridEditable"
     @change="onContactRowClick"
     @save="saveContact"
     :data-source="ContactsListForSelection"
     @databound="onDatabound"
     :allowCopy="true"
   ></KendoGrid>

 

ColumnList is as follows.

let columns: any[] = [
      {
        width: 50,
        title: 'Select All',
        selectable: 'multiple',
        selected: true,
        disabled: false
      },
      {
        title: `First Name`,
        field: 'firstname',
        selected: true,
        disabled: true,
        isVisible: true,
        width: 150
      },
      {
        title: `Middle Name`,
        field: 'middlename',
        selected: true,
        disabled: false,
        isVisible: true,
        width: 150

      },
      {
        title: `Last Name`,
        field: 'lastname',
        selected: true,
        disabled: false,
        isVisible: true,
        width: 250
      },
      {
        title: `Initials`,
        field: 'initials',
        selected: true,
        disabled: false,
        isVisible: true,
        width: 250
      },
      {
        title: `Address`,
        field: 'address',
        selected: true,
        disabled: false,
        isVisible: true,
        width: 250
      }]

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

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;
        }

        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 = columnsList;
      Customcolumns.forEach((tc:any) => {
        defcolumns.push(tc);
      });

      this.ColumnsList= defcolumns;
      this.ColumnsList.forEach((e:any) => {
        e.selected = true;
      });
    }

columns are added like this because the data i have is as follows. datafieldvalue (see attached file)

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

Any suggestions?

[Dimitar]

Hello,

There are two approaches that you could try in your custom function where the list is updated:

1) Set the desired value through the set() method

$refs.contactListView.kendoWidget().dataSource.get(0).set("StringValueIsSet", true);

2) Rebind the dataSource with the new list through the setDataSource() method:

this.$refs.contactListView.kendoWidget().setDataSource(newList);

Regards,
Dimitar
Progress Telerik