CODEWITHSUNDEEP
sitefinity
user5843610
user5843610

Reputation:

sitefinity widget initialize KendoGrid

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?

Upvotes: 0

Views: 115

Answers (1)

Veselin Vasilev
Veselin Vasilev

Reputation: 3793

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>
}

Upvotes: 1

Related Questions