This is a migrated thread and some comments may be shown as answers.

PivotGrid columns and rows display name

1 Answer 51 Views
This is a migrated thread and some comments may be shown as answers.
Marius
Top achievements
Rank 1
Marius asked on 26 Sep 2018, 06:59 AM

Hello

I have a data source that has names that are not that readable to the end user, but in the pivot grid data source, I am having issues setting the display name different than the data source name. 

In this example, I have changed the name of the "ProductName" to something that resembles our data source :

https://stackblitz.com/edit/kwmg6k 

And now the data is not shown, how can I specify a field to get the data, and a name for the draggable column or row title?

//Marius

1 Answer, 1 is accepted

Sort by
0
Dimitar
Telerik team
answered on 28 Sep 2018, 06:47 AM
Hello Marius,

On the following StackBlitz example you can find a modified version of the initial code. With it, the PivotGrid correctly displays the related products data and the name of the draggable column buttons is also changed.

To correctly map the column, use the <kendo-pivot-column></kendo-pivot-column> component:
  <kendo-pivotdatasource ref="pivotdatasource"
           :data="data"
           :schema-model="schemaModel"
           :schema-cube="schemaCube"
           :measures="measures">
<kendo-pivot-column :name="'CategoryName'" :expand="true"></kendo-pivot-column>
<kendo-pivot-column :name="'l_Product_021_Name'"></kendo-pivot-column>
<kendo-pivot-row :name="'Discontinued'" :expand="true"></kendo-pivot-row>
</kendo-pivotdatasource>

Regarding changing the name of the specific columns, currently this could be achieved through the DataBound event:
<kendo-pivotgrid id="pivotgrid"                 
        :data-source-ref="'pivotdatasource'"                
        @dataBound="onDataBound"
        :height="570">
</kendo-pivotgrid>
 
methods: {
  onDataBound: function(e) {
    var fields = e.sender.columnFields.add(this.rowFields).add(this.measureFields);
 
    fields.find(".k-button")
      .each(function(_, item) {
        item = $(item);           
        var text = item.data("name").split(".").slice(-1) + "";
             
        if(text == "l_Product_021_Name") {
          item.contents().eq(0).replaceWith("ProductName");
        }             
      });
    }
  }
}

You can check out additional examples with the Pivot Grid here:


Regards,
Dimitar
Progress Telerik
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Asked by
Marius
Top achievements
Rank 1
Answers by
Dimitar
Telerik team
Share this question
or