Add how-to demos for the pivotgrid widget

Author: ggkrustev

web/pivotgrid/how-to/filter-dimension.md

@@ -0,0 +1,51 @@
+---
+title: Filter a dimension
+page_title: Filter a dimension
+description: Filter a dimension
+---
+
+# Filter a dimension
+
+The example below demonstrates how use the data source [filter](docs.telerik.com/kendo-ui/api/javascript/data/datasource#configuration-filter) option to filter the result set
+
+#### Example:
+
+```html
+<div id="example">
+    <div id="pivotgrid"></div>
+
+    <script>
+        $(document).ready(function () {
+            var pivotgrid = $("#pivotgrid").kendoPivotGrid({
+                filterable: true,
+                columnWidth: 200,
+                height: 580,
+                dataSource: {
+                    type: "xmla",
+                    columns: [{ name: "[Date].[Calendar]", expand: true }, { name: "[Product].[Category]" } ],
+                    rows: [{ name: "[Geography].[City]" }],
+                    measures: ["[Measures].[Internet Sales Amount]"],
+                    transport: {
+                        connection: {
+                            catalog: "Adventure Works DW 2008R2",
+                            cube: "Adventure Works"
+                        },
+                        read: "http://demos.telerik.com/olap/msmdpump.dll"
+                    },
+                    schema: {
+                        type: "xmla"
+                    },
+                    error: function (e) {
+                        alert("error: " + kendo.stringify(e.errors[0]));
+                   },
+                   filter: {
+                       field: "[Date].[Calendar]",
+                       operator: "endswith",
+                       value: "2005"
+                   }
+                }
+            }).data("kendoPivotGrid");
+        });
+    </script>
+</div>
+```

web/pivotgrid/how-to/modify-measure-tag-caption.md

@@ -0,0 +1,67 @@
+---
+title: Modify the measure tag caption
+page_title: Modify the measure tag caption
+description: Modify the measure tag caption
+---
+
+# Modify the measure tag caption
+
+The example below demonstrates how to the measure tags in the header and modify their captions
+
+#### Example:
+
+```html
+<div id="example">
+    <div id="pivotgrid"></div>
+
+    <script>
+        $(document).ready(function () {
+            var pivotgrid = $("#pivotgrid").kendoPivotGrid({
+                filterable: true,
+                columnWidth: 200,
+                height: 580,
+                dataSource: {
+                    type: "xmla",
+                    columns: [{ name: "[Date].[Calendar]", expand: true }, { name: "[Product].[Category]" } ],
+                    rows: [{ name: "[Geography].[City]" }],
+                    measures: ["[Measures].[Internet Sales Amount]"],
+                    transport: {
+                        connection: {
+                            catalog: "Adventure Works DW 2008R2",
+                            cube: "Adventure Works"
+                        },
+                        read: "http://demos.telerik.com/olap/msmdpump.dll",
+                      parameterMap: function(options, type) {
+                        var query = kendo.data.transports.xmla.fn.options.parameterMap(options, type);
+
+                        //modify the query here if needed
+
+                        return query;
+                      }
+                    },
+                    schema: {
+                        type: "xmla"
+                    },
+                    error: function (e) {
+                        alert("error: " + kendo.stringify(e.errors[0]));
+                    }
+                },
+                dataBound: function() {
+                  var tags = this.wrapper.find(".k-settings-measures > span.k-button");
+
+                  tags.each(function() {
+                    var tag = $(this);
+                    var name = tag.text().split(".");
+                    var caption = name[name.length - 1];
+
+                    caption = caption.substring(1, caption.length - 1);
+
+                    //update text node
+                    tag[0].childNodes[0].nodeValue = caption;
+                  });
+                }
+            }).data("kendoPivotGrid");
+        });
+    </script>
+</div>
+```