### Install KendoQsBoilerplate using Package Manager Console

Source: https://github.com/telerik/kendo-ui-core/blob/master/docs-aspnet/html-helpers/helper-basics/build-team-efficiency-dashboard/getting-up-and-running.md

Use this command in the Package Manager Console to install the quick start boilerplate for your project.

```powershell
PM> Install-Package KendoQsBoilerplate
```

--------------------------------

### Full Implementation Example

Source: https://github.com/telerik/kendo-ui-core/blob/master/docs/knowledge-base/display-aggregation-from-contextmenu-in-grid.md

This comprehensive example demonstrates the complete setup, including Kendo UI Grid and ContextMenu initialization, data source configuration with aggregates, and the event handling logic for displaying aggregations.

```javascript
<div id="example">
      <ul id="context-menu">
        <li>Total
        </li>
        <li>Average
        </li>
      </ul>
      <div id="grid"></div>
      <script>
        $(document).ready(function() {
          $("#grid").kendoGrid({
            dataSource: {
              type: "odata-v4",
              transport: {
                read: "https://demos.telerik.com/service/v2/odata/Orders"
              },
              schema: {
                model: {
                  fields: {
                    OrderID: { type: "number" },
                    Freight: { type: "number" },
                    ShipName: { type: "string" },
                    OrderDate: { type: "date" },
                    ShipCity: { type: "string" }
                  }
                }
              },
              pageSize: 10,
              aggregate: [
                { field: "Freight", aggregate: "sum" },
                { field: "Freight", aggregate: "average" },
                { field: "OrderID", aggregate: "sum" },
                { field: "OrderID", aggregate: "average" }
              ]
            },
            sortable: true,
            filterable: true,
            pageable: true,
            sort: function(e) {
              let originalEvent = event;

              if($(originalEvent.target).is("#menuTarget")) {
                e.preventDefault();
              }
            },
            columns: [
              {
                field:"OrderID",
                headerTemplate: "<span id='menuTarget' class='k-icon k-i-more-vertical'></span><a class='k-link' href='#'>Amount</a>",
                footerTemplate: "<span class='ft'></span>",
              },
              {
                field: "ShipCity",
                title: "Ship City",
                footerTemplate: "<span class='ft'></span>",
              },
              {
                field: "Freight",
                title: "Freight",
                footerTemplate: "<span class='ft'></span>",
              }
            ]
          });

          $("#context-menu").kendoContextMenu({
            target: "#grid",
            filter: "td",
            alignToAnchor: true,
            copyAnchorStyles: false,
            showOn: "click",
            select: function(e){

               var colindex = $(e.target).index()
               var currentField = $("#grid").data('kendoGrid').options.columns[colindex].field
               var selected = e.item.innerText
               var aggregates = $("#grid").data('kendoGrid').dataSource.aggregates()
               var aggregatesCurrentField = aggregates[currentField];
              	console.log(aggregatesCurrentField);
               var currentAggr = ''

               if(selected == 'Total' && aggregatesCurrentField){
                 currentAggr = aggregatesCurrentField.sum
               } else if(selected == 'Average' && aggregatesCurrentField){
                 currentAggr = aggregatesCurrentField.average
               } else {
                 currentAggr = 'No such aggr'
               }
                
               var content = selected + ": " + currentAggr;
              $('.ft:eq('+ colindex +')').text(content)             

            }
          });
        });
      </script>
    </div>
```

--------------------------------

### Run Kendo CLI Setup with NPX

Source: https://github.com/telerik/kendo-ui-core/blob/master/docs/intro/installation/kendo-cli.md

Execute the Kendo CLI setup command without a prior global installation by using `npx`. This is an alternative for running the command directly.

```sh
npx @progress/kendo-cli kendo jquery setup
```

--------------------------------

### Complete MVVM Example

Source: https://github.com/telerik/kendo-ui-core/blob/master/docs/framework/mvvm/get-started.md

This example shows a complete Kendo UI MVVM setup, including the HTML view, the JavaScript view-model, and the binding call.

```html
<div id="view">
  <input data-bind="value: name" />
  <button data-bind="click: displayGreeting">Display Greeting</button>
</div>

<script>
  var viewModel = kendo.observable({
    name: "John Doe",
    displayGreeting: function() {
      var name = this.get("name");
      kendo.alert("Hello, " + name + "!!!");
    }
  });

  kendo.bind($("#view"), viewModel);
</script>
```

--------------------------------

### Get Resources for a Scheduler Slot

Source: https://github.com/telerik/kendo-ui-core/blob/master/docs/api/javascript/ui/scheduler.md

Retrieves the resources associated with a specific scheduler slot. This example demonstrates how to get resources by clicking a button that targets the first slot.

```javascript
    <button id="getResource">Get Resource for Slot</button>
    <div id="scheduler"></div>
    <script>
      $("#scheduler").kendoScheduler({
        date: new Date("2013/6/6"),
        group: {
          resources: ["Rooms"],
        },
        resources: [
          {
            field: "roomId",
            name: "Rooms",
            dataSource: [
              { text: "Meeting Room 101", value: 1, color: "#6eb3fa" },
              { text: "Meeting Room 201", value: 2, color: "#f58a8a" },
            ],
          },
        ],
      });
      
      $("#getResource").click(function () {
        var scheduler = $("#scheduler").data("kendoScheduler");

        var element = scheduler.view().content.find("tr:first td:first");

        var slot = scheduler.slotByElement(element);

        var resource = scheduler.resourcesBySlot(slot);

        for (var key in resource) {
          /* The result can be observed in the DevTools(F12) console of the browser. */
          console.log("resouce - {" + key + ": " + resource[key] + " }");
        }
      });
    </script>
```

--------------------------------

### Basic Polyline with Start Cap

Source: https://github.com/telerik/kendo-ui-core/blob/master/docs/api/javascript/dataviz/diagram/polyline.md

Demonstrates how to create a polyline with an 'ArrowStart' type start cap. This example shows the basic setup for adding a start cap to a polyline.

```javascript
<div id="diagram"></div>
<script>
  $("#diagram").kendoDiagram({
    shapes: [{
      visual: function() {
        var group = new kendo.dataviz.diagram.Group();
        group.append(new kendo.dataviz.diagram.Polyline({
          points: [{x: 0, y: 0}, {x: 50, y: 0}, {x: 100, y: 100}],
          startCap: {
            type: "ArrowStart",
            fill: {
              color: "orange",
              opacity: 0.7
            }
          }
        }));
        return group;
      }
    }]
  });
</script>
```

--------------------------------

### Create a basic column sparkline

Source: https://github.com/telerik/kendo-ui-core/blob/master/docs/api/javascript/dataviz/ui/sparkline.md

Initializes a Kendo UI Sparkline widget with a column type and sample data. This is a fundamental example for getting started with sparklines.

```javascript
    <div id="sparkline"></div>
    <script>
    $("#sparkline").kendoSparkline({
        type: "column",
        series: [{
            data: [10, 15, 8, 12],
            gap: 0.5
        }]
    });
    </script>
```

--------------------------------

### Example Workflow: New Kendo Project

Source: https://github.com/telerik/kendo-ui-core/blob/master/docs/intro/installation/node-setup-windows-nvm.md

This workflow demonstrates setting up Node 24 for a new Kendo project, including installation, activation, and verification.

```sh
nvm install 24
nvm use 24
node -v
```

--------------------------------

### Initialize OTPInput with Basic Configuration

Source: https://github.com/telerik/kendo-ui-core/blob/master/docs/controls/otpinput/get-started.md

Initializes the OTPInput component on an input element with group lengths, placeholder, and type configuration. This is the final result of the getting started guide.

```html
<input id="otpinput" />
```

```javascript
    $("#otpinput").kendoOTPInput({
      items: [
          {
              groupLength: 3
          },
          {
              groupLength: 2
          },
          {
              groupLength: 3
          }
      ],
      placeholder: "X",
      type: "number"
    });
```

--------------------------------

### Build and Integrate Bundle

Source: https://github.com/telerik/kendo-ui-core/blob/master/docs-aspnet/installation/npm.md

Run npm install and npm run build commands to install dependencies and create the bundle. Then, reference the bundle in your layout file.

```bash
npm install && npm run build
```

```html
<script src="~/bundle.js"></script>
```

--------------------------------

### Virtualization Configuration

Source: https://github.com/telerik/kendo-ui-core/blob/master/docs/api/javascript/ui/multicolumncombobox.md

This example demonstrates the basic setup for enabling virtualization in the MultiColumnComboBox, including setting the item height.

```APIDOC
## MultiColumnComboBox Virtualization

### Description

This section covers the configuration of the `virtual` option for the Kendo UI MultiColumnComboBox, which is essential for handling large datasets efficiently.

### Configuration Options

#### `virtual.itemHeight` (Number)

*   **Description**: Specifies the height of each item in the virtualized list. This is crucial for the virtualization calculations to work correctly.
*   **Default**: `null` (auto-calculated)

#### `virtual.mapValueTo` (String)

*   **Description**: Determines how the `valueMapper` resolves values. It can be set to either `"index"` (default) or `"dataItem"`. This option controls whether the `valueMapper` should resolve a value to an item's index or to the actual data item.
*   **Default**: `"index"`

#### `virtual.valueMapper` (Function)

*   **Description**: A function that the widget calls when it receives a value that has not yet been fetched from the server. The function should accept an options object containing the value(s) and is responsible for returning the respective data item(s) index/indices. This is optional and required only if the widget has an initial value or if the `value()` method is used.
*   **Default**: `null`

### Example Usage

```javascript
$("#multicolumncombobox").kendoMultiColumnComboBox({
    virtual: {
        itemHeight: 40,
        mapValueTo: "dataItem",
        valueMapper: function(options) {
            // Implement custom value mapping logic here
            options.success([]);
        }
    },
    dataTextField: "text",
    dataValueField: "value",
    dataSource: {
        transport: {
            read: function(options) {
                // Simulate a large dataset
                var data = [];
                for(var i = 0; i < 10000; i++) {
                    data.push({ text: "Item " + i, value: i });
                }
                options.success(data);
            }
        }
    },
    columns: [
        { field: "text", title: "Text" },
        { field: "value", title: "Value" }
    ]
});
```
```

--------------------------------

### Set Default Series Type to Pie in Chart Wizard

Source: https://github.com/telerik/kendo-ui-core/blob/master/docs/api/javascript/ui/chartwizard.md

Configure the initial chart setup by defining the starting series type. This example sets the default series type to 'pie'.

```javascript
$("#chartwizard").kendoChartWizard({
    dataSource: [
    [
        { field: 'Product Name', value: 'Calzone' },
        { field: 'Quantity', value: 1 },
        { field: 'Price', value: 12.39 },
        { field: 'Tax', value: 2.48 },
        { field: 'Total', value: 14.87 }
        ],
    ],
    defaultState: {
        seriesType: 'pie'
    }
});
```

--------------------------------

### Set Up a Kendo UI for jQuery Project

Source: https://github.com/telerik/kendo-ui-core/blob/master/docs/intro/installation/kendo-cli.md

Scaffold the necessary setup for a Kendo UI for jQuery project within your current project folder. This command guides you through initial configuration and dependency installation.

```sh
kendo jquery setup
```

--------------------------------

### Full Implementation Example

Source: https://github.com/telerik/kendo-ui-core/blob/master/docs/knowledge-base/export_listview_to_excel.md

A complete example demonstrating the integration of the ListView, export button, and workbook generation for saving to Excel.

```javascript
<div id="example">
    <button id="btn">Export</button>
    <div id="listView"></div>

    <script type="text/x-kendo-template" id="template">
        <div class="product">
            <img src="https://demos.telerik.com/kendo-ui/content/web/foods/#= ProductID #.jpg" alt="Kendo UI for jQuery ListView #: ProductName #" />
            <h3>#:ProductName#</h3>
            <p>#:kendo.toString(UnitPrice, "c")#</p>
        </div>
    </script>

    <script>
        $(function () {
            var rows = [{
                cells: [
                    // The first cell.
                    { value: "ProductID" },              
                    // The second cell.
                    { value: "ProductName" },
                    // The third cell.
                    { value: "UnitPrice" }
                ]
            }];

            $('#btn').on('click', function(){
                var listViewDS = $("#listView").data("kendoListView").dataSource;

                listViewDS.fetch(function () {
                    var data = this.data();
                    for (var i = 0; i < data.length; i++) {
                    // Push single row for every record.
                        rows.push({
                          cells: [
                            { value: data[i].ProductID },
                            { value: data[i].ProductName },
                            { value: data[i].UnitPrice }
                          ]
                        });
                    }
                });

                var workbook = new kendo.ooxml.Workbook({
                    sheets: [{
                        columns: [
                          // Column settings (width).
                          { autoWidth: true },
                          { autoWidth: true },
                          { autoWidth: true }
                        ],
                        // The title of the sheet.
                        title: "Products",
                        // The rows of the sheet.
                        rows: rows
                    }]
                });

                // Save the file as an Excel file with the xlsx extension.
                workbook.toDataURLAsync().then(function(dataURL) {
                  kendo.saveAs({
     				 dataURI: dataURL,
     				 fileName: "Test.xlsx"
    			  });
                });
            })

            $("#listView").kendoListView({
              dataSource: {
                transport: {
                    read: {
                        url: "https://demos.telerik.com/service/v2/core/Products"
                    }
                },
                pageSize: 21
              },
              template: kendo.template($("#template").html()),
              pageable: true
            });
        });
    </script>

    <style>
        #listView {

```

--------------------------------

### Complete FX Initialization and Playback

Source: https://github.com/telerik/kendo-ui-core/blob/master/docs/controls/fx/get-started.md

A complete example demonstrating the initialization of Kendo UI FX, applying multiple effects, and playing them.

```javascript
<div id="foo">
    I will be faded out and zoomed out.
</div>

<script>
    var effectWrapper = kendo.fx($("#foo"));
    var fadeOutEffect = effectWrapper.fadeOut();
    fadeOutEffect.add(effectWrapper.zoomOut());
    fadeOutEffect.play();
</script>
```

--------------------------------

### Define and Render Local Kendo UI Template

Source: https://github.com/telerik/kendo-ui-core/blob/master/docs/framework/templates/load-remote.md

This example shows how to define a Kendo UI template directly within an HTML file and then render it using JavaScript. It's suitable for simple templates or when getting started.

```javascript
    <ul id="feedItems"></ul>

    <!--Define template in the page to render each feed item name as a list item-->
    <script type="text/x-kendo-template" id="feedItemTemplate">
        # for (var i = 0; i < data.length; i++) { #
            <li>
            #= data[i].Name #
      		</li>
        # } #
    </script>

    <script>
      var template = kendo.template($("#feedItemTemplate").html());
      var data = [{Name: "Anton"}, { Name: "Michael"}, { Name: "John"}];
      var result = template(data); //Execute the template
      $("#feedItems").html(result); //Append the result
    </script>
```

--------------------------------

### Get start date of a Kendo UI Gantt Task

Source: https://github.com/telerik/kendo-ui-core/blob/master/docs/api/javascript/data/gantttask.md

Demonstrates how to get the start date of a Gantt task, which specifies when the task begins.

```javascript
var task = new kendo.data.GanttTask({
    id: 1,
    title: "Task1",
    start: new Date("2014/6/17 9:00"),
    end: new Date("2014/6/17 11:00")
});
/* The result can be observed in the DevTools(F12) console of the browser. */
console.log(task.start); // outputs the start date
```

--------------------------------

### Initializing an Options Store

Source: https://github.com/telerik/kendo-ui-core/blob/master/docs/api/javascript/drawing/options-store.md

Demonstrates how to create a new instance of OptionsStore with initial nested configuration values.

```javascript
var options = new kendo.drawing.OptionsStore({
    foo: {
        bar: true
    }
});
```

--------------------------------

### start

Source: https://github.com/telerik/kendo-ui-core/blob/master/docs/api/javascript/data/schedulerevent.md

Gets or sets the date at which the scheduler event starts.

```APIDOC
## start `Date`

### Description
The date at which the scheduler event starts.

<div class="meta-api-description">
How do I set the start time of an event in Kendo UI Scheduler? Control or retrieve the starting date and time of a scheduling event to define when the event begins, enabling sorting, filtering, or repositioning of events based on their start timestamp; configure or access the event's commencement moment to manage timelines, adjust schedules, set event durations, or synchronize with calendars by manipulating the initial time marker that determines event placement and sequencing within scheduling systems.
</div>
```

--------------------------------

### Complete DateInput Initialization Example

Source: https://github.com/telerik/kendo-ui-core/blob/master/docs/controls/dateinput/get-started.md

A comprehensive example demonstrating the initialization of the DateInput with various configurations including value, min/max dates, format, and styling. This shows a fully configured component.

```javascript
    $("#dateinput").kendoDateInput({
      value: new Date(2024, 0, 3),
		min: new Date(2024, 0, 1),
		max: new Date(2024, 5, 30),
      format: "yyyy-MM-dd",
      size: "medium",
      rounded: "large",
      fillMode: "solid"
    });
```

--------------------------------

### Full Kendo UI Chart Implementation with Panes and Label Positioning

Source: https://github.com/telerik/kendo-ui-core/blob/master/docs/knowledge-base/chart-label-position-pane-category-axis.md

This example demonstrates the complete setup for a Kendo UI Chart with multiple panes and category axis labels positioned at the 'start' of each pane. Ensure the chart container and script tags are correctly set up.

```javascript
<div id="chart"></div>
<script>
  $("#chart").kendoChart({
    series: [
      { data: [1, 2, 3] },
      { data: [1, 2, 3, 4], axis: "bottom" }
    ],
    valueAxis: [
      { pane: "top-pane" },
      { pane: "bottom-pane", name: "bottom" }
    ],
    panes: [
      { name: "top-pane" },
      { name: "bottom-pane" }
    ],
    categoryAxis: [{
      categories: ["Category 1", "Category 2", "Category 3", "Category 4"],
      pane: "bottom-pane",
      labels: {
        position: "start"
      },
    },{
      categories: ["Category 1", "Category 2", "Category 3", "Category 4"],
      pane: "top-pane",
      labels: {
        position: "start"
      },
    }]
  });
</script>
```

--------------------------------

### Create and Navigate to Project Directory

Source: https://github.com/telerik/kendo-ui-core/blob/master/docs-aspnet/getting-started-core/first-steps-cli.md

Use the command line to create a new directory for your project and navigate into it.

```batch
mkdir MyASPNETCoreProject
cd MyASPNETCoreProject
```

--------------------------------

### Customize Start Label in DateRangePicker

Source: https://github.com/telerik/kendo-ui-core/blob/master/docs/api/javascript/ui/daterangepicker.md

Specifically customizes the text displayed for the start date label in the DateRangePicker. This example changes it to 'The Start'.

```javascript
    $("#daterangepicker").kendoDateRangePicker({
        "messages": {
            "startLabel": "The Start"
        }
     })
```

--------------------------------

### startTime

Source: https://github.com/telerik/kendo-ui-core/blob/master/docs/api/javascript/ui/scheduler.md

Sets the start time for the week and day views in the Scheduler. Events starting after this time will be displayed.

```APIDOC
## startTime `Date`

### Description
The start time of the week and day views. The scheduler will display events starting after the `startTime`.

### Parameters
* **startTime** (Date) - The start time for the week and day views.
```

--------------------------------

### Set Connection Start Cap Stroke Color

Source: https://github.com/telerik/kendo-ui-core/blob/master/docs/api/javascript/dataviz/ui/diagram.md

Customize the outline color of the starting point of connectors. This example sets the start cap stroke color to 'purple'.

```javascript
    <div id="diagram"></div>
    <script>
    $("#diagram").kendoDiagram({
        connectionDefaults: {
            startCap: {
                stroke: {
                    color: "purple",
                    width: 2,
                },
                type: "ArrowStart"
            }
        },
        shapes: [
            { id: "1", x: 100, y: 100, content: { text: "Shape 1" } },
            { id: "2", x: 300, y: 100, content: { text: "Shape 2" } }
        ],
        connections: [
            { from: "1", to: "2" }
        ]
    });
    </script>
```

--------------------------------

### Full Kendo UI Grid and ContextMenu Implementation

Source: https://github.com/telerik/kendo-ui-core/blob/master/docs/knowledge-base/grid-copy-row-text-select-context-menu.md

This example demonstrates the complete setup for a Kendo UI Grid with an integrated context menu. It includes data source configuration, grid setup, and context menu initialization with copy functionality.

```javascript
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.7.1/clipboard.min.js"></script>

<div id="grid"></div>
<ul id="context-menu">
  <li id="copyText">Copy Text</li>
</ul>

<script>
  $(document).ready(function () {

      var crudServiceBaseUrl = "https://demos.telerik.com/service/v2/core",
          dataSource = new kendo.data.DataSource({
          transport: {
              read:  {
                  url: crudServiceBaseUrl + "/Products"
              },
              update: {
                  url: crudServiceBaseUrl + "/Products/Update",
                  type: "POST",
              contentType: "application/json"
              },
              destroy: {
                  url: crudServiceBaseUrl + "/Products/Destroy",
                  type: "POST",
              contentType: "application/json"
              },
              create: {
                  url: crudServiceBaseUrl + "/Products/Create",
                  type: "POST",
              contentType: "application/json"
              },
              parameterMap: function(options, operation) {
                  if (operation !== "read" && options.models) {
                      return kendo.stringify(options.models);
                  }
              }
          },
          pageSize: 20,
          schema: {
            model: {
              id: "ProductID",
              fields: {
                ProductID: {
                  editable: false,
                  nullable: true
                },
                ProductName: {
                  validation: {
                    required: true
                  }
                },
                UnitPrice: {
                  type: "number",
                  validation: {
                    required: true,
                    min: 1
                  }
                },
                Discontinued: {
                  type: "boolean"
                },
                UnitsInStock: {
                  type: "number",
                  validation: {
                    min: 0,
                    required: true
                  }
                }
              }
            }
          }
        });

    $("#grid").kendoGrid({
      dataSource: dataSource,
      pageable: true,
      height: 550,
      selectable: "multiple",
      columns: [
        "ProductName",
        {
          field: "UnitPrice",
          title: "Unit Price",
          format: "{0:c}",
          width: "120px"
        },
        {
          field: "UnitsInStock",
          title: "Units In Stock",
          width: "120px"
        },
        {
          field: "Discontinued",
          width: "120px"
        }
      ],
      editable: "inline"
    });

    $("#context-menu").kendoContextMenu({
      target: "#grid",
      filter: "tr[role='row']",  //2

```

--------------------------------

### Set Polyline Start Cap Fill Color

Source: https://github.com/telerik/kendo-ui-core/blob/master/docs/api/javascript/dataviz/diagram/polyline.md

Change the fill color of the start cap for a polyline. This example sets the start cap to an 'ArrowStart' type with a green fill.

```javascript
    <div id="diagram"></div>
    <script>
      $("#diagram").kendoDiagram({
        shapes: [{
          visual: function() {
            var group = new kendo.dataviz.diagram.Group();
            group.append(new kendo.dataviz.diagram.Polyline({
              points: [{x: 0, y: 0}, {x: 50, y: 0}, {x: 100, y: 100}],
              startCap: {
                type: "ArrowStart",
                fill: "green"
              }
            }));
            return group;
          }
        }]
      });
    </script>
```

--------------------------------

### Example Workflow: Older Project

Source: https://github.com/telerik/kendo-ui-core/blob/master/docs/intro/installation/node-setup-windows-nvm.md

This workflow shows how to switch to Node 22 for compatibility with an older project.

```sh
nvm use 22
node -v
```

--------------------------------

### Full Kendo UI Gantt Initialization Example

Source: https://github.com/telerik/kendo-ui-core/blob/master/docs/controls/gantt/get-started.md

A comprehensive example demonstrating the initialization of the Kendo UI Gantt with data binding, toolbar, filtering, and editing functionalities.

```html
    <div id="gantt"></div>
```

```javascript
    <script>
      let myDataArray = [
        {
            id: 1,
            orderId: 0,
            parentId: null,
            title: "Task1",
            start: new Date("2023/9/13 9:00"),
            end: new Date("2023/9/13 11:00")
        },
        {
            id: 2,
            orderId: 1,
            parentId: null,
            title: "Task2",
            start: new Date("2023/9/13 12:00"),
            end: new Date("2023/9/13 14:00")
        },
        {
            id: 3,
            orderId: 2,
            parentId: null,
            title: "Task3",
            start: new Date("2023/9/13 13:00"),
            end: new Date("2023/9/13 15:00")
        }
      ];

      // Target the div element by using jQuery and then call the kendoGantt() method.
      $("#gantt").kendoGantt({
        height: "400px",
        toolbar: [
            { name: "append" },
            { name: "pdf" }
        ],
        // Enable the filtering functionality.
        filterable: true,
        // Enable the editing functionality (incell by default).
        editable: true,
        dataSource: {
          data: myDataArray,
          
        }
      });
    </script>
```

--------------------------------

### Set and Get Arc Start Angle

Source: https://github.com/telerik/kendo-ui-core/blob/master/docs/api/javascript/geometry/arc.md

Shows how to create an Arc with a specified start angle and then access its value. The start angle is measured in decimal degrees clockwise, with 0 pointing right.

```javascript
var geom = kendo.geometry;
var arc = new geom.Arc([70, 70], {
    radiusX: 35,
    radiusY: 25,
    startAngle: 120,
    endAngle: 300
});
console.log(arc.startAngle); // 120
```

--------------------------------

### Specify Toolbar Commands as Array of Objects

Source: https://github.com/telerik/kendo-ui-core/blob/master/docs/api/javascript/ui/scheduler.md

This example shows how to specify toolbar commands using an array of objects, enabling the 'pdf' command.

```APIDOC
## toolbar (Array|Object)

### Description
Configures the toolbar of the Kendo UI Scheduler using an array of objects for command definitions.

### Method
Configuration Option

### Parameters
#### Toolbar Commands (Array of Objects)
- **{ name: "pdf" }** (object) - Defines the PDF export command.

### Request Example
```javascript
$("#scheduler").kendoScheduler({
  toolbar: [ { name: "pdf" } ],
  date: new Date("2013/6/6"),
  dataSource: [
    {
      id: 1,
      start: new Date("2013/6/6 08:00 AM"),
      end: new Date("2013/6/6 09:00 AM"),
      title: "Interview"
    }
  ]
});
```
```

--------------------------------

### messages.editor.start

Source: https://github.com/telerik/kendo-ui-core/blob/master/docs/api/javascript/ui/scheduler.md

Customizes the text displayed for the 'Start' label in the scheduler event editor.

```APIDOC
## messages.editor.start

### Description
Customizes the text displayed for the 'Start' label in the scheduler event editor. This label indicates the beginning time of an event.

### Parameters
This configuration is part of the `messages.editor` object.

- **start** (String) - The custom text for the 'Start' label.

### Request Example
```javascript
$("#scheduler").kendoScheduler({
  date: new Date("2013/6/6"),
  messages: {
    editor: {
      start: "Start of the event"
    }
  },
  dataSource: [
    {
      id: 1,
      start: new Date("2013/6/6 08:00 AM"),
      end: new Date("2013/6/6 09:00 AM"),
      title: "Interview"
    }
  ]
});
```
```

--------------------------------

### Customize Start Cap Stroke Width

Source: https://github.com/telerik/kendo-ui-core/blob/master/docs/api/javascript/dataviz/diagram/connection.md

Adjusts the thickness of the stroke at the start of a Kendo UI diagram connection. This example sets the `width` property of the start cap's stroke to 3.

```javascript
var Shape = kendo.dataviz.diagram.Shape;
$("#diagram").kendoDiagram();
var diagram = $("#diagram").data("kendoDiagram");
var shape1 = diagram.addShape( new Shape({x:100, y: 100}));
var shape2 = diagram.addShape( new Shape({x:300, y: 100}));

var connection = new kendo.dataviz.diagram.Connection(shape1, shape2, {
  startCap: {
    type: "arrow",
    stroke: {
      width: 3
    }
  },
  selectable: false
});

diagram.addConnection(connection);
```

--------------------------------

### Initialize TaskBoard with Data Configuration

Source: https://github.com/telerik/kendo-ui-core/blob/master/docs/controls/taskboard/get-started.md

Initialize the TaskBoard with sample data and configure fields for status, order, and category. This setup is useful for displaying and managing tasks with distinct states and priorities.

```javascript
    <div id="taskBoard"></div>

    <script>
        var cardsData = [
            { id: 1, title: "Campaigns", order: 1, description: "Create a new landing page for campaign", status: "todo", color: "orange" },
            { id: 2, title: "Newsletters", order: 2, description: "Send newsletter", status: "todo", color: "blue" },
            { id: 3, title: "Ads Analytics", order: 3, description: "Review ads performance", status: "todo", color: "green" },
            { id: 4, title: "SEO Analytics", order: 4, description: "Review SEO results", status: "inProgress", color: "blue" },
            { id: 5, title: "Customer Research", order: 5, description: "Interview focus groups", status: "inProgress", color: "orange" },
            { id: 6, title: "Testimonials & Case Studies", order: 6, description: "Publish new case study", status: "done", color: "green" },
            { id: 7, title: "Content", order: 7, description: "Plan content for podcasts", status: "done", color: "green" },
            { id: 8, title: "Customer Journey", order: 8, description: "Update virtual classrooms' experience", status: "done", color: "blue" },
        ];

        $("#taskBoard").kendoTaskBoard({
            columns: [
                { text: "To-Do", status: "todo" },
                { text: "In Progress", status: "inProgress" },
                { text: "Done", status: "done" }
            ],
            dataSource: {
                data: cardsData,
                schema: {
                    model: {
                        id: "id",
                        fields: {
                            id: { type: "number" },
                            order: { type: "number", defaultValue: 0 },
                            title: { field: "title", defaultValue: "No title" },
                            description: { field: "description", validation: { required: true } },
                        }
                    }
                }
            },
            dataStatusField: "status", // The field of the data item that provides the status of the card.
            dataOrderField: "order", // The field used to order cards (number based).
            dataCategoryField: "color", // The category field of the card.
            height: 750
        });
    </script>
```

--------------------------------

### views.workWeekStart

Source: https://github.com/telerik/kendo-ui-core/blob/master/docs/api/javascript/ui/scheduler.md

Configures the starting day of the work week. This option is relevant for 'day' and 'week' views.

```APIDOC
## views.workWeekStart `Number`

### Description
The start of working week (index based).

> The `workWeekStart` option is supported when [views.type](/api/javascript/ui/scheduler#configuration-views.type) is set to "day" or "week".

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
None

### Response
#### Success Response (200)
None

#### Response Example
None

### Example - set the start day of the work week to Tuesday
```javascript
$("#scheduler").kendoScheduler({
  date: new Date("2013/6/6"),
  views: [
    { type: "week", workWeekStart: 2 }
  ],
  dataSource: [
    {
      id: 1,
      start: new Date("2013/6/6 08:00 AM"),
      end: new Date("2013/6/6 09:00 AM"),
      title: "Interview"
    }
  ]
});
```
```

--------------------------------

### Get Arc Start Angle

Source: https://github.com/telerik/kendo-ui-core/blob/master/docs/api/javascript/geometry/arc.md

Retrieves the starting angle of an arc in decimal degrees. Useful for calculating rotations or setting angular positioning.

```javascript
var geom = kendo.geometry;
var arc = new geom.Arc([55, 65], {
    radiusX: 28,
    radiusY: 18,
    startAngle: 150,
    endAngle: 330
});
var startAngle = arc.getStartAngle();
console.log(startAngle); // 150
```

--------------------------------

### Full Example: Pager Initialization with DataSource and Page Sizes

Source: https://github.com/telerik/kendo-ui-core/blob/master/docs/controls/pager/get-started.md

A complete example demonstrating the initialization of the Pager widget, binding it to a DataSource, and configuring page sizes. This includes setting up the DataSource with data and a page size.

```javascript
    <div id="pager"></div>

    <script>
        var dataSource = new kendo.data.DataSource({
            data: [
            { productName: "Tea", category: "Beverages" },
            { productName: "Coffee", category: "Beverages" },
            { productName: "Ham", category: "Food" },
            { productName: "Bread", category: "Food" }
            ],
            pageSize: 2
        });

        $("#pager").kendoPager({
            dataSource: dataSource,
            pageSizes: [2, 3, 4, "all"]
        });

        dataSource.read();
    </script>     
```

--------------------------------

### views.startDate

Source: https://github.com/telerik/kendo-ui-core/blob/master/docs/api/javascript/ui/scheduler.md

Configures the start date of the year view. The Scheduler will display 12 months starting from the `startDate`. This option is supported when `views.type` is set to 'year'.

```APIDOC
## views.startDate `Date`

### Description
Configures the start date of the year view. The Scheduler will display 12 months starting from the `startDate`.

> The `startDate` option is supported when `views.type` is set to "year".

### Parameters
#### Path Parameters
None
#### Query Parameters
None
#### Request Body
None

### Request Example
```javascript
<div id="scheduler"></div>
<script>
$("#scheduler").kendoScheduler({
  views: [
    {
      type: "year",
      startDate: new Date("2021/2/1")
    }
  ],
  dataSource: [
    {
      id: 1,
      start: new Date("2021/2/2 08:00 AM"),
      end: new Date("2021/2/2 09:00 AM"),
      title: "Interview"
    }
  ]
});
</script>
```

### Response
None

### Error Handling
None
```

--------------------------------

### workDayStart

Source: https://github.com/telerik/kendo-ui-core/blob/master/docs/api/javascript/ui/scheduler.md

Sets the start of the work day when the "Show business hours" button is clicked.

```APIDOC
## workDayStart `Date`

### Description
Sets the start of the work day when the "Show business hours" button is clicked.

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
None

### Response
#### Success Response (200)
None

#### Response Example
None

### Example - set the workDayStart of the scheduler
```javascript
$("#scheduler").kendoScheduler({
  date: new Date("2013/6/6"),
  workDayStart: new Date("2013/1/1 09:00 AM"),
  dataSource: [
    {
      id: 1,
      start: new Date("2013/6/6 08:00 AM"),
      end: new Date("2013/6/6 09:00 AM"),
      title: "Interview"
    }
  ]
});
```
```

--------------------------------

### Configure Start Adornment with Icon

Source: https://github.com/telerik/kendo-ui-core/blob/master/docs/controls/promptbox/adornments.md

Use the `startAffixTemplate` option to render content at the start of the PromptBox input. This example adds a paperclip icon.

```javascript
    $("#promptbox").kendoPromptBox({
        startAffixTemplate: () => kendo.ui.icon("paperclip")
    });
```

--------------------------------

### Runnable Example: Kendo UI Grid Initialization

Source: https://github.com/telerik/kendo-ui-core/blob/master/docs/knowledge-base/how-to-set-initial-column-width-minresizablewidth-kendo-ui-grid.md

This example demonstrates initializing a Kendo UI Grid with a `dataBound` event handler that resizes the first column to its `minResizableWidth`. It includes data source configuration, sorting, resizing, and pagination.

```html
<div id="grid"></div>

      <script>
        $(document).ready(function() {
          $("#grid").kendoGrid({
            dataSource: {
              transport: {
                read: "https://demos.telerik.com/service/v2/core/Orders"
              },
              schema: {
                model: {
                  fields: {
                    OrderID: { type: "number" },
                    ShipCountry: { type: "string" },
                    ShipCity: { type: "string" },
                    ShipName: { type: "string" },
                    OrderDate: { type: "date" },
                    ShippedDate: { type: "date" }
                  }
                }
              },
              pageSize: 15
            },
            height: 550,
            sortable: true,
            resizable: true,
            pageable: true,
            dataBound: function(e){
              let grid = e.sender;     
              grid.resizeColumn(grid.columns[0], grid.columns[0].minResizableWidth);
            },
            columns: [
              {
                field: "OrderDate",
                title: "Order Date",
                format: "{0:MM/dd/yyyy}",
                minResizableWidth: 200
              },
              {
                field: "ShipCountry",
                title: "Ship Country",

              },
              {
                field: "ShipName",
                title: "Ship Name"
              },
              {
                field: "ShippedDate",
                title: "Shipped Date",
                format: "{0:MM/dd/yyyy}"                
              },
              {
                field: "OrderID",
                title: "ID"               
              }
            ]
          });

        });
      </script>
```

--------------------------------

### GradientStop Initialization and Opacity

Source: https://github.com/telerik/kendo-ui-core/blob/master/docs/api/javascript/drawing/gradient-stop.md

Demonstrates how to create GradientStop instances with different opacity values, ranging from fully transparent (0) to fully opaque (1).

```APIDOC
## GradientStop

### Description
Represents a stop in a gradient fill, defining a color and its position along the gradient.

### Constructor
`new GradientStop(options)`

### Parameters
#### options `Object`
Configuration options for the gradient stop.
- **offset** (Number) - Required - The position of the stop along the gradient, ranging from 0 to 1.
- **color** (String) - Required - The color of the stop in a valid CSS color format.
- **opacity** (Number) - Optional - The opacity of the stop, ranging from 0 (transparent) to 1 (opaque). Defaults to 1.

### Example
```javascript
var draw = kendo.drawing;

// Creating gradient stops with different opacity values
var transparentStop = new draw.GradientStop({
    offset: 0,
    color: "#ff0000",
    opacity: 0 // Completely transparent
});

var semiTransparentStop = new draw.GradientStop({
    offset: 0.5,
    color: "#ff0000",
    opacity: 0.5 // Semi-transparent
});

var opaqueStop = new draw.GradientStop({
    offset: 1,
    color: "#ff0000",
    opacity: 1 // Completely opaque
});

console.log(transparentStop.options.opacity); // 0
console.log(semiTransparentStop.options.opacity); // 0.5
console.log(opaqueStop.options.opacity); // 1
```
```

--------------------------------

### values

Source: https://github.com/telerik/kendo-ui-core/blob/master/docs/api/javascript/ui/rangeslider.md

Gets or sets the start and end values of the RangeSlider. It accepts either an array as a parameter or two parameters—start and end, and returns an object array with the start and end selection values.

```APIDOC
## values

### Description
The values method gets or sets the start and end values of the **RangeSlider**. It accepts either an an array as parameter or two parameters—start and end, and returns an object array with the start and end selection values.

### Method
`values(selectionStart, selectionEnd)` or `values(Array)`

### Parameters
#### selectionStart `Number`
The selection start value of the RangeSlider.

#### selectionEnd `Number`
The selection start value of the RangeSlider.

### Returns
`Array` The value of the RangeSlider.

### Request Example
```javascript
var rangeSlider = $("#rangeslider").getKendoRangeSlider();
rangeSlider.values(1, 5);
```
```

--------------------------------

### Configure DatePicker Start View and Depth

Source: https://github.com/telerik/kendo-ui-core/blob/master/docs/controls/datepicker/nav-depth.md

Use the 'start' and 'depth' options to set the initial view and control navigation. This example configures the DatePicker to start and navigate by year, allowing month selection.

```javascript
    <input id="datePicker" />

    <script>
        $("#datePicker").kendoDatePicker({
            start: "year",
            depth: "year"
        });
    </script>
```

--------------------------------

### Create a Complete Drawing Scene

Source: https://github.com/telerik/kendo-ui-core/blob/master/docs/framework/drawing/get-started.md

This example shows how to import namespaces, create a path, an image, and text, group them, and render them on a drawing surface.

```javascript
    <div id="surface" style="width: 250px; height: 165px;"></div>
    <script>
      // Import the Drawing API namespaces.
      var geom = kendo.geometry;
      var draw = kendo.drawing;

      // Create the square border by drawing a straight path.
      var path = new draw.Path({
        stroke: {
          color: "#9999b6",
          width: 2
        }
      });

      // The path is constructed using a chain of commands.
      path.moveTo(0, 0)
        .lineTo(150, 0).lineTo(150, 65).lineTo(0, 65)
        .close();

      // This rectangle defines the image position and size.
      var imageRect = new geom.Rect(
        new geom.Point(5, 5),
        new geom.Size(50, 50)
      );

      // Create the image. Uses a URL to create a bitmap image.
      var imageUrl = "https://demos.telerik.com/kendo-ui/content/dataviz/diagram/people/diego.jpg";
      var image = new draw.Image(imageUrl, imageRect);

      // Create the text. The point defines the top left corner from where the text will be drawn.
      var text = new draw.Text(
        "Diego Roel",
        new geom.Point(60, 25),
        { font: "bold 15px Arial" }
      );

      // Place all the shapes in a group so they can be treated as a single entity.
      var group = new draw.Group();
      group.append(path, image, text);

      // Translate the group to make the coordinates of the element relative.
      group.transform(
        geom.transform().translate(50, 50)
      );

      // Create a drawing surface and render the scene.
      var surface = draw.Surface.create($("#surface"));
      surface.draw(group);
    </script>
```

--------------------------------

### Initialize Responsive Panel with TagHelper

Source: https://github.com/telerik/kendo-ui-core/blob/master/docs-aspnet/html-helpers/layout/responsivepanel/overview.md

Demonstrates the basic initialization of the Responsive Panel using the Kendo UI TagHelper.

```taghelper
<kendo-responsivepanel name="sidebar" breakpoint="1000">
    <p>This content will collapse if the width is less than 1000px</p>
</kendo-responsivepanel>
```

--------------------------------

### Configure Start Cap Fill Color Object

Source: https://github.com/telerik/kendo-ui-core/blob/master/docs/api/javascript/dataviz/diagram/polyline.md

Configure the start cap fill color using an object with a 'color' property. This example sets the start cap to an 'ArrowStart' type with a purple fill.

```javascript
    <div id="diagram"></div>
    <script>
      $("#diagram").kendoDiagram({
        shapes: [{
          visual: function() {
            var group = new kendo.dataviz.diagram.Group();
            group.append(new kendo.dataviz.diagram.Polyline({
              points: [{x: 0, y: 0}, {x: 50, y: 0}, {x: 100, y: 100}],
              startCap: {
                type: "ArrowStart",
                fill: {
                  color: "purple"
                }
              }
            }));
            return group;
          }
        }]
      });
    </script>
```

--------------------------------

### Set Start Cap Type to FilledCircle

Source: https://github.com/telerik/kendo-ui-core/blob/master/docs/api/javascript/dataviz/diagram/connection.md

Specifies the visual marker for the start of a Kendo UI diagram connection. This example sets the `startCap.type` to 'FilledCircle'.

```javascript
var Shape = kendo.dataviz.diagram.Shape;
$("#diagram").kendoDiagram();
var diagram = $("#diagram").data("kendoDiagram");
var shape1 = diagram.addShape( new Shape({x:100, y: 100}));
var shape2 = diagram.addShape( new Shape({x:300, y: 100}));

var connection = new kendo.dataviz.diagram.Connection(shape1, shape2, {
  startCap: {
    type: "FilledCircle"
  },
  selectable: false
});

diagram.addConnection(connection);
```

--------------------------------

### Initialize Responsive Panel with HtmlHelper

Source: https://github.com/telerik/kendo-ui-core/blob/master/docs-aspnet/html-helpers/layout/responsivepanel/overview.md

Demonstrates the basic initialization of the Responsive Panel using the Kendo UI HtmlHelper.

```htmlhelper
@(Html.Kendo().ResponsivePanel()
    .Name("sidebar")
    .Breakpoint(1000)
    .Content("<p>This content will collapse if the width is less than 1000px</p>")
)
```