Can't find the right XML(A) to feed the Pivot Grid

[Lars-Erik]

Hi,

I'm evaluating the pivot grid as an alternative to writing a proprietary multidimensional grid. (No-brainer ;) )

However, I can't seem to find the right way to tweak the XML for it to use it.
I've followed an ADOMD example I found here: https://www.telerik.com/support/code-library/bind-to-adomd-client.

I'm sure I've just messed up what I try to feed it with regards to text/xml/xmla in the different fields, but it still eludes me.
Any hints appreciated.

Here's my vue file, and below it the header of a response:

01.<template>

02.    <div>

03.        <div>Hello world!</div>

04. 

05.        <kendo-pivotdatasource ref="pivotdatasource"

06.                               :transport="transport"

07.                               :type="'xmla'"

08.                               :schema-type="'xml'"

09.                               :schema-cube="schemaCube"

10.                               :measures="measures">

11.            <kendo-pivot-column :name="'[Grossister].[Navn].Members'"></kendo-pivot-column>

12.            <kendo-pivot-row :name="'[Organisasjon].[Organisasjon].Members'"></kendo-pivot-row>

13.        </kendo-pivotdatasource>

14. 

15.        <kendo-pivotconfigurator id="configurator"

16.                                 class="hidden-on-narrow"

17.                                 :data-source-ref="'pivotdatasource'"

18.                                 :filterable="true"

19.                                 :height="570">

20.        </kendo-pivotconfigurator>

21. 

22.        <kendo-pivotgrid id="pivotgrid"

23.                         class="hidden-on-narrow"

24.                         :data-source-ref="'pivotdatasource'"

25.                         :filterable="true"

26.                         :columnWidth="120"

27.                         :height="570">

28.        </kendo-pivotgrid>

29.    </div>

30.</template>

31.<script>

32.        import Vue from "vue";

33.        import '@progress/kendo-ui';

34. 

35.        import {

36.            PivotGrid,

37.            PivotConfigurator

38.        } from '@progress/kendo-pivotgrid-vue-wrapper';

39. 

40.        export default {

41.            name: "kendo-test",

42.            props: ["report"],

43.            components: {

44.                PivotGrid,

45.                PivotConfigurator

46.            },

47.            data: function () {

48.                return {

49.                    measures: ['[Measures].[Antall linjer]'],

50.                    schemaCube: {

51.                        dimensions: {

52.                            Grossister: { caption: 'Alle grossister' },

53.                            Organisasjon: { caption: 'Alle medlemmer' },

54.                        },

55.                        measures: {

56.                            'Antall linjer': { field: 'Antall linjer', aggregate: 'sum' },

57.                        }

58.                    },

59.                    transport: {

60.                        connection: {

61.                            catalog: "NRATabularDW",

62.                            cube: "Model"

63.                        },

64.                        read: {

65.                            url: "/api/report/kendoquery",

66.                            dataType: "xml",

67.                            contentType: "text/xml",

68.                            type: "POST",

69.                            error: function (e) {

70.                                debugger;

71.                            },

72.                            dataFilter: function(data, type) {

73.                                return data;

74.                            }

75.                        },

76.                        discover: {

77.                            url: "/api/report/kendodiscover",

78.                            dataType: "xml",

79.                            contentType: "text/xml",

80.                            type: "POST"

81.                        }

82.                    }

83.                }

84.            },

85.            methods: {

86. 

87.            }

88.        }

89.</script>

01.<soap:Envelope xmlns:soap="http://www.w3.org/2003/05/soap-envelope/">
02.    <soap:Body>
03.        <ExecuteResponse>
04.            <return>
05.                <root xmlns="urn:schemas-microsoft-com:xml-analysis:mddataset" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:msxmla="http://schemas.microsoft.com/analysisservices/2003/xmla">
06.                    <xs:schema targetNamespace="urn:schemas-microsoft-com:xml-analysis:mddataset" elementFormDefault="qualified" xmlns="urn:schemas-microsoft-com:xml-analysis:mddataset" xmlns:xs="http://www.w3.org/2001/XMLSchema" xmlns:msxmla="http://schemas.microsoft.com/analysisservices/2003/xmla">
07.                        ...
08.                    </xs:schema>
09.                    <OlapInfo>...</OlapInfo>
10.                    <Axes>...</Axes>
11.                    <CellData>...</CellData>
12.                </root>
13.            </return>
14.        </ExecuteResponse>
15.    </soap:Body>
16.</soap:Envelope>

[Lars-Erik]

I managed to run the example I linked.
Turns out the data returned from the server should have Content-Type: text/html.
Works with the vue component now.

Figures!

I suggest accepting a response of type text/xml since it actually is that.

[Dimitar]

Hello Lars-Erik,

I am glad that you have managed to resolve the issue.

After investigating this further, I can confirm that there are in fact missing props in the Vue implementation for the dataSource transport.connection.catalogue and transport.connection.cube. I have logged this in the official Kendo UI GitHub repository and you can start tracking the progress that we make on it from issue #4574.

As a workaround for the time being, you could setup the dataSource of the PivotGrid to work with XML as follows:

<kendo-pivotgrid id="pivotgrid"
   class="hidden-on-narrow"
   :data-source="pivotdatasource"
   :filterable="true"
    :columnWidth="120"
    :height="570">
</kendo-pivotgrid>

new Vue({
    el: '#vueapp',
    data: function() {
        return {
            pivotdatasource: {
              type: "xmla", //define the type
              columns: [{ name: "[Date].[Calendar]" }], //specify a dimesion on columns
              rows: [{ name: "[Product].[Category]" }], //specify a dimesion on rows
              measures: ["[Measures].[Internet Sales Amount]"], //specify a measure to display
              transport: {
                  connection: {
                      catalog: "Adventure Works DW 2008R2", //specify the name of the catalog
                      cube: "Adventure Works" //specify the name of the cube
                  },
                  read: {
                      url: "https://demos.telerik.com/olap/msmdpump.dll", //define the URL of the service
                      dataType: "text",
                      contentType: "text/xml",
                      type: "POST"
                  }
              },
              schema: {
                  type: "xmla" //specify the type of the schema
              }
            }
        }
    }
})

The above is also demonstrated on the following StackBlitz Demo.

In addition to the above, as a small token of gratitude for helping us discover this issue, I have updated your Telerik Points accordingly.

Regards,
Dimitar
Progress Telerik

[Lars-Erik]

Thanks. :)