sitefinity widget initialize KendoGrid

Question

Within sitefinity I am create a widget that I want to initialize KendoGrid and populate the data. For the widget do I need to add the javascript onto the view or is there another way?

Answer 1

The kendo scripts and styles have to be included on the page one way or the other.

You do it either via the view of the widget or (if you use them on many places) you may include them in the main page template.

Some people like to also bundle them into a single local file, as opposed to downloading them from the kendo cdn.

Update:

Controller:

[HttpGet]
public ActionResult Index()
{                        
  // fill the model with data
   var model = InitializeModel();

   return View("Index", model);
}

Index view

@using Telerik.Sitefinity.Modules.Pages;
@using Telerik.Sitefinity.Frontend.Mvc.Helpers;
@using Newtonsoft.Json;
@using Telerik.Sitefinity.Services;
@using Telerik.Sitefinity.UI.MVC;

@model List<SitefinityWebApp.Mvc.Models.Country>

@if (!SystemManager.IsDesignMode)
{
    @Html.Script(ScriptRef.JQuery, "top")

    <script src="https://kendo.cdn.telerik.com/2017.3.913/js/kendo.web.min.js"></script>
    <link href="https://kendo.cdn.telerik.com/2017.3.913/styles/kendo.common-bootstrap.min.css" rel="stylesheet" />
    <link href="https://kendo.cdn.telerik.com/2017.3.913/styles/kendo.bootstrap.min.css" rel="stylesheet" />

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

    <script>
        var data = @Html.Raw(JsonConvert.SerializeObject(Model));

        $(function () {

            $("#grid").kendoGrid({
                dataSource: {
                    data: data,
                    schema: {
                        model: { id: "Id" } 
                    },
                    pageSize: 10
                },
                pageable: true,
                scrollable: false,
                persistSelection: true,
                sortable: true,
                columns: [
                    { selectable: true, width: "50px" },
                    { field: "Title", title: "Country" },
                    { field: "CountryCode", title: "Country Code" },
                    { field: "CurrencyCode", title: "Currency Code" },
                    { field: "Id" }]
            });

        })

    </script>
}