Syncfusion ejGrid不显示来自Web Api源

Question

我有以下控制器编码如下，返回JSON：

public class CustomersController : ApiController
{
    public object Get()
    {
        NorthwindEntities db = new NorthwindEntities();
        var data = db.Customers.ToList();
        return data;
    }

我确保我的序列化程序使用JSON将其添加到我的WebApiConfig.cs文件中：

        config.Formatters.Remove(config.Formatters.XmlFormatter);
        config.Formatters.JsonFormatter.SupportedMediaTypes.Add(new MediaTypeHeaderValue("application/json"));
        config.Formatters.JsonFormatter.SerializerSettings.ReferenceLoopHandling = Newtonsoft.Json.ReferenceLoopHandling.Ignore;

现在我使用Syncfusion Javascript ejGrid尝试了以下代码：

        $('#Grid').ejGrid({
            dataSource: ej.DataManager({ url: "http://localhost:54027/api/Customers/" }),
            toolbarSettings: { showToolbar: true, toolbarItems: ["add", "edit", "delete", "update", "cancel"] },
            editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true },
            isResponsive: true,
            enableResponsiveRow: true,
            allowPaging: true,
            allowFiltering: true,
            allowGrouping: true,
            allowResizing: true,
            allowSorting: true,
            columns: [
                { field: "CustomerID", isPrimaryKey: true, headerText: 'CustomerID', validationRules: { required: true, minlength: 30 }, width: 100 },

                { field: "CompanyName", headerText: 'CompanyName', validationRules: { required: true, minlength: 30 }, width: 100 },
                { field: "ContactName", headerText: 'ContactName', validationRules: { required: true, minlength: 30 }, width: 100 },
                { field: "ContactTitle", headerText: 'ContactTitle', validationRules: { required: true, minlength: 30 }, width: 100 },
                { field: "Address", headerText: 'Address', validationRules: { required: true, minlength: 30 }, width: 100 },
                { field: "City", headerText: 'City', validationRules: { required: true, minlength: 30 }, width: 100 },
                { field: "Region", headerText: 'Region', validationRules: { required: true, minlength: 30 }, width: 100 },
                { field: "PostalCode", headerText: 'PostalCode', validationRules: { required: true, minlength: 10 }, width: 70, priority: 3 },
                { field: "Country", headerText: 'Country', validationRules: { required: true, minlength: 30 }, width: 100 },
                {
                    headerText: "Manage Records",
                    commands: [
                        { type: ej.Grid.UnboundType.Edit, buttonOptions: { contentType: "imageonly", prefixIcon: "e-edit" } },
                        { type: ej.Grid.UnboundType.Delete, buttonOptions: { contentType: "imageonly", prefixIcon: "e-delete" } },
                        { type: ej.Grid.UnboundType.Save, buttonOptions: { contentType: "imageonly", prefixIcon: "e-save" } },
                        { type: ej.Grid.UnboundType.Cancel, buttonOptions: { contentType: "imageonly", prefixIcon: "e-cancel" } }
                    ],
                    isUnbound: true
                }
            ]
        });

当我运行它时，网格是空的。我认为问题出在数据源中，因为Chrome控制台报告错误：无法读取属性＆＃39;长度＆＃39;未定义的。或许，因为列表是空的，它试图获得空的长度。

Answer 1

您应该将数据作为Item和Count返回，并且还需要在绑定数据源时设置适配器。我在这里发布了代码。

(function () { var scrollHandle = 0, scrollStep = 5, parent = $("#container"); //Start the scrolling process $(".panner").on("mouseenter", function () { var data = $(this).data('scrollModifier'), direction = parseInt(data, 10); $(this).addClass('active'); startScrolling(direction, scrollStep); }); //Kill the scrolling $(".panner").on("mouseleave", function () { stopScrolling(); $(this).removeClass('active'); }); //Actual handling of the scrolling function startScrolling(modifier, step) { if (scrollHandle === 0) { scrollHandle = setInterval(function () { var newOffset = parent.scrollLeft() + (scrollStep * modifier); parent.scrollLeft(newOffset); }, 10); } } function stopScrolling() { clearInterval(scrollHandle); scrollHandle = 0; } }());

<强> C＃

var dataManager = ej.DataManager({
            url:"/api/Orders",
            adaptor: new ej.WebApiAdaptor()
        });

如需更多参考，请浏览此链接。

https://help.syncfusion.com/js/grid/data-binding#webapi

此致 Sunil Prabakar C