Sync with Kendo UI Professional

docs-aspnet/html-helpers/charts/chart-types/sankey-charts.md

@@ -0,0 +1,102 @@
+---
+title: Sankey Charts
+page_title: Sankey Charts
+description: "Learn the basics when working with the sankey charts in the {{ site.product }} suite which allows the users to create diagrams that visualize changing flows and their distribution between domains."
+slug: htmlhelpers_sankeycharts_aspnetcore
+position: 4
+---
+
+{% if site.core %}
+    {% assign Position = "/api/Kendo.Mvc.UI.Fluent/ChartCategoryAxisLabelsSettingsBuilder#positionkendomvcuichartaxislabelsposition" %}
+{% else %}
+    {% assign Position = "/api/Kendo.Mvc.UI.Fluent/ChartAxisLabelsBuilder#positionkendomvcuichartaxislabelsposition" %}
+{% endif %}
+
+## Sankey Charts
+
+The {{ site.product }} Sankey Chart allows you to create diagrams that visualize changing flows and their distribution between domains. Sankey diagrams suit a variety of use cases like the representation of website traffic, budget breakdowns, energy flow, and others.
+
+![Sankey Chart Overview](images/chart-sankey.png)
+
+## Configuration
+
+Sankey Chart visualize its data using Nodes (items) and Links (connections). You can add them using their respective collections. In addition to that, you can configure the links, legend, and tooltips displayed on the Sankey Diagram by using the following properties:
+
+ - [`Links`](/api/javascript/dataviz/ui/sankey/configuration/links)—Provides options to set the [`ColorType`](/api/javascript/dataviz/ui/sankey/configuration/links.colortypes) of the link to either `Static`, `Source`, or `Target`. It also allows you to control the opacity and highlighting of the link.
+ - [`Legend`](/api/javascript/dataviz/ui/sankey/configuration/legend)—Provides options to customize the appearance of the chart legend.
+ - [`Tooltip`](/api/javascript/dataviz/ui/sankey/configuration/labels)—Provides options to modify the the functionality of the chart element titles.
+
+ Here is a sample demonstration:
+
+```HtmlHelper
+    @(Html.Kendo().Sankey()
+        .Name("sankey")
+        .Theme("sass")
+        .Legend(l => l.Position(LegendPosition.Bottom))
+        .Links(l => l.ColorType(LinkColorType.Source))
+        .Data(d => d.Nodes(n =>
+        {
+            n.Add().Id(1).Label(l => l.Text("Source"));
+            n.Add().Id(2).Label(l => l.Text("Target"));
+        })
+        .Links(l =>
+        {
+            l.Add().SourceId(1).Value(12).TargetId(2);
+        }))
+        .Tooltip(t => t
+            .Delay(100)
+            .FollowPointer(true)
+ )
+```
+{% if site.core %}
+```TagHelper
+<kendo-sankey name="sankey" theme="sass">
+    <legend position="LegendPosition.Bottom"/>
+    <links color-type="LinkColorType.Source"/>
+     <data>
+          <nodes>
+              <node id="1">
+                    <label text="Source"></label>
+                </node>
+                <node id="2">
+                    <label text="Target"></label>
+                </node>
+          </nodes>
+            <links>
+                <link source-id="1" target-id="2" value="12">
+                </link>
+            </links>
+     </data>
+    <tooltip delay="100" follow-pointer="true"/>
+</kendo-sankey>
+```
+{% endif %}
+
+## Configuring the Link Colors
+
+The Sankey diagram provides different [`ColorTypes`](/api/javascript/dataviz/ui/sankey/configuration/links.colortypes) of the links. The supported LinkColorType values are:
+
+ * `Static`&mdash;The color is static and is determined by the link's color option.
+ * `Source`&mdash;The link color is the same as the source node color.
+ * `Target`&mdash;The link color is the same as the target node color.
+
+## Functionality and Features
+
+The {{ site.product }} Sankey Chart includes the following customizable elements:
+
+- Nodes&mdash;The node is a rectangular element that connects to other nodes.
+- Links&mdash;The lines that connect the nodes to each other. The greater the value of the link, the greater the width of the link will be.
+- Labels&mdash;The labels are the names of the nodes and are displayed on them or next to them.
+- Legend&mdash;The legend lists the labels of each link.
+- Title&mdash;The title displayed above the component.
+- Tooltip&mdash;The tooltip is displayed when hovering above the links and nodes.
+
+## Next Steps
+
+* [Basic Usage of the Sankey Chart (Demo)](https://demos.telerik.com/{{ site.platform }}/sankey-charts/index)
+
+## See Also
+
+* [Using the API of the Chart HtmlHelper for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/chart-api/index)
+* [Basic Usage of the Sankey Chart HtmlHelper for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/sankey-charts/index)
+* [Server-Side API](/api/chart)

docs/knowledge-base/grid-customize-text.md

@@ -0,0 +1,291 @@
+---
+title: Customizing Grid Text Across the Whole Component
+description: Learn how customize Grid text in all tree editing modes - incell, inline, and popup.
+type: how-to
+page_title: Customizing Grid Text Across the Whole Component - Kendo UI Grid for jQuery
+slug: grid-customize-text
+tags: grid, customize, text, kendo
+res_type: kb
+---
+## Environment
+| Product | Version |
+|-----------|----------------|
+| Grid for Progress® Kendo UI®  | 2024.1.319  |
+
+## Description
+
+The Grid allows you to customize its command, toolbar and editing buttons text. It also allows customization of the delete confirmation popup text and the filter menu text.
+
+## Solution
+
+The following example demonstrates how to customize the Grid text.
+
+```dojo
+  <h1>Incell editing mode</h1>
+    <div id="grid"></div>
+    <h1>Inline editing mode</h1>
+    <div id="grid-inline-edit"></div>
+    <h1>Popup editing mode</h1>
+    <div id="grid-popup-edit"></div>
+
+    <script>
+      $(document).ready(function() {
+        $("#grid").kendoGrid({
+          dataSource: {
+            data: createRandomData(80),
+            schema: {
+              model: {
+                fields: {
+                  Id: { type: "number" },
+                  FirstName: { type: "string" },
+                  LastName: { type: "string" },
+                  City: { type: "string" },
+                  Title: { type: "string" },
+                  IsCustomer: { type: "boolean" },
+                  BirthDate: { type: "date" },
+                  Age: { type: "number" }
+                }
+              }
+            },
+            pageSize: 10
+          },
+          height: 400,
+          scrollable: true,
+          sortable: true,
+          pageable: true,
+          groupable: {
+            messages: {
+              empty: "Custom message text"
+            }
+          },
+          editable: {
+            mode: "incell",
+            update: true,
+            destroy: true,
+            confirmation: "Are you sure you want to remove this item?" //text for the confirmation message
+          },
+          columns: [
+            {
+              field: "Id",
+              title: "ID",
+              width: "60px"
+            },
+            {
+              field: "FirstName",
+              title: "First Name"
+            },
+            {
+              field: "LastName",
+              title: "Last Name"
+            },
+            {
+              field: "City"
+            },
+            {
+              field: "Title"
+            },
+            {
+              field: "IsCustomer",
+              title: "Customer",
+              width: "100px"
+            },
+            {
+              field: "BirthDate",
+              title: "Birth Date",
+              template: '#= kendo.toString(BirthDate,"MM/dd/yyyy") #'
+            },
+            {
+              field: "Age",
+              width: "60px"
+            },
+            // adding command in the columns, name - the command name, text - text to be set on the button
+            {
+              command: { name: "destroy", text: "Custom Delete" },
+              title: "&nbsp;",
+              width: "160px"
+            }
+          ],
+          toolbar: [
+            //name - name of the available commands, text - text to be set on the button
+            { name: "create", text: "Custom Create" },
+            { name: "save", text: "Custom Save" },
+            { name: "cancel", text: "Custom Cancel" }
+          ],
+          // filter menu settings
+          filterable: {
+            name: "FilterMenu",
+            extra: true, // turns on/off the second filter option
+            messages: {
+              info: "Custom header text:", // sets the text on top of the filter menu
+              filter: "CustomFilter", // sets the text for the "Filter" button
+              clear: "CustomClear", // sets the text for the "Clear" button
+
+              // when filtering boolean numbers
+              isTrue: "custom is true", // sets the text for "isTrue" radio button
+              isFalse: "custom is false", // sets the text for "isFalse" radio button
+
+              //changes the text of the "And" and "Or" of the filter menu
+              and: "CustomAnd",
+              or: "CustomOr"
+            },
+            operators: {
+              //filter menu for "string" type columns
+              string: {
+                eq: "Custom Equal to",
+                neq: "Custom Not equal to",
+                startswith: "Custom Starts with",
+                contains: "Custom Contains",
+                endswith: "Custom Ends with"
+              },
+              //filter menu for "number" type columns
+              number: {
+                eq: "Custom Equal to",
+                neq: "Custom Not equal to",
+                gte: "Custom Is greater than or equal to",
+                gt: "Custom Is greater than",
+                lte: "Custom Is less than or equal to",
+                lt: "Custom Is less than"
+              },
+              //filter menu for "date" type columns
+              date: {
+                eq: "Custom Equal to",
+                neq: "Custom Not equal to",
+                gte: "Custom Is after or equal to",
+                gt: "Custom Is after",
+                lte: "Custom Is before or equal to",
+                lt: "Custom Is before"
+              }
+            }
+          }
+        });
+
+        $("#grid-inline-edit").kendoGrid({
+          dataSource: {
+            data: createRandomData(30),
+            schema: {
+              model: {
+                fields: {
+                  Id: { type: "number" },
+                  FirstName: { type: "string" },
+                  LastName: { type: "string" },
+                  City: { type: "string" },
+                  BirthDate: { type: "date" }
+                }
+              }
+            },
+            pageSize: 10
+          },
+          pageable: true,
+          height: 400,
+          toolbar: ["create"],
+          columns: [
+            { field: "Id", width: "60px" },
+            { field: "FirstName", title: "First Name" },
+            { field: "LastName", title: "Last Name" },
+            { field: "City" },
+            { field: "BirthDate", template: '#= kendo.toString(BirthDate,"MM/dd/yyyy") #' },
+            { command: [
+              {
+                name: "edit",
+                text: { // sets the text of the "Edit", "Update" and "Cancel" buttons
+                  edit: "CustomEdit",
+                  update: "CustomUpdate",
+                  cancel: "CustomCancel"
+                }
+              }, 
+              { name: "destroy", text: "Destroy" } // sets the text of the "Delete" button
+            ],
+             // sets the title and the width of the commands column
+             title: "&nbsp;", 
+             width: "300px"
+            }
+          ],
+          editable: "inline"
+        });
+
+        $("#grid-popup-edit").kendoGrid({
+          dataSource: {
+            data: createRandomData(30),
+            schema: {
+              model: {
+                fields: {
+                  Id: { type: "number" },
+                  FirstName: { type: "string" },
+                  LastName: { type: "string" },
+                  City: { type: "string" },
+                  BirthDate: { type: "date" }
+                }
+              }
+            },
+            pageSize: 10
+          },
+          pageable: true,
+          height: 400,
+          toolbar: ["create"],
+          columns: [
+            { field: "Id", width: "60px" },
+            { field: "FirstName", title: "First Name" },
+            { field: "LastName", title: "Last Name" },
+            { field: "City" },
+            { field: "BirthDate", template: '#= kendo.toString(BirthDate,"MM/dd/yyyy") #' },
+            { command: [
+              {
+                name: "edit",
+                text: { // sets the text of the "Edit", "Update" and "Cancel" buttons
+                  edit: "CustomEdit",
+                  update: "CustomUpdate",
+                  cancel: "CustomCancel"
+                }
+              }, 
+              { name: "destroy", text: "Destroy" } // sets the text of the "Delete" button
+            ],
+             // sets the title and the width of the commands column
+             title: "&nbsp;", 
+             width: "300px"
+            }
+          ],
+          editable: "popup"
+        });	
+      });
+
+      var firstNames = ["Nancy", "Andrew", "Janet", "Margaret", "Steven", "Michael", "Robert", "Laura", "Anne", "Nige"],
+          lastNames = ["Davolio", "Fuller", "Leverling", "Peacock", "Buchanan", "Suyama", "King", "Callahan", "Dodsworth", "White"],
+          cities = ["Seattle", "Tacoma", "Kirkland", "Redmond", "London", "Philadelphia", "New York", "Seattle", "London", "Boston"],
+          titles = ["Accountant", "Vice President, Sales", "Sales Representative", "Technical Support", "Sales Manager", "Web Designer",
+                    "Software Developer", "Inside Sales Coordinator", "Chief Techical Officer", "Chief Execute Officer"],
+          birthDates = [new Date("1948/12/08"), new Date("1952/02/19"), new Date("1963/08/30"), new Date("1937/09/19"), new Date("1955/03/04"), new Date("1963/07/02"), new Date("1960/05/29"), new Date("1958/01/09"), new Date("1966/01/27"), new Date("1966/03/27")];
+
+      function createRandomData(count) {
+        var data = [],
+            now = new Date();
+        for (var i = 0; i < count; i++) {
+          var firstName = firstNames[Math.floor(Math.random() * firstNames.length)],
+              lastName = lastNames[Math.floor(Math.random() * lastNames.length)],
+              city = cities[Math.floor(Math.random() * cities.length)],
+              title = titles[Math.floor(Math.random() * titles.length)],
+              birthDate = birthDates[Math.floor(Math.random() * birthDates.length)],
+              age = now.getFullYear() - birthDate.getFullYear(),
+              isCustomer = ((i%3) == 0) ? true : false;
+
+          data.push({
+            Id: i + 1,
+            FirstName: firstName,
+            LastName: lastName,
+            City: city,
+            Title: title,
+            BirthDate: birthDate,
+            Age: age,
+            IsCustomer: isCustomer
+          });
+        }
+        return data;
+      }
+    </script>
+```
+
+## See Also
+
+* [Grid API Reference](/api/javascript/ui/grid)
+* [Grid Batch Editing (Demo)](https://demos.telerik.com/kendo-ui/grid/editing)
+* [Grid Inline Editing (Demo)](https://demos.telerik.com/kendo-ui/grid/editing-inline)
+* [Grid Popup Editing (Demo)](https://demos.telerik.com/kendo-ui/grid/editing-popup)