sitefinity 小部件初始化 KendoGrid

Question

在 sitefinity 中，我创建了一个小部件，我想初始化 KendoGrid 并填充数据。对于小部件，我需要将 javascript 添加到视图上还是有其他方法？

Answer 1

kendo 脚本和样式必须以一种或另一种方式包含在页面上。

您可以通过小部件的视图来完成，或者（如果您在很多地方使用它们）您可以将它们包含在主页模板中。

有些人还喜欢将它们捆绑到一个本地文件中，而不是从 kendo cdn 下载它们。

更新：

控制器:

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

   return View("Index", model);
}

索引视图

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

sitefinity 小部件初始化 KendoGrid

sitefinity widget initialize KendoGrid

sitefinity