标签: kendo-asp.net-mvc

我在 MVC 应用程序中使用 Kendo Ui Grid。我希望在我的网格中显示多个国家/地区的统计数据。我从数据库检索数据的方式，我的网格将显示类似于以下内容的数据：

Country    Area       Population    GDP      GDP Growth
India      3288000    1220200000    1.848    6.8
USA        9827000    314686189     15.09    1.7

但我希望它显示如下而不是上面的格式：

Country          India         USA            
Area             3288000       9827000        
Population       1220200000    314686189
GDP              1.848         15.09    
GDP Growth       6.8           1.7      

我怎样才能实现这种换位？

根据 Telerik 网站上有关数据本地绑定的文档：

服务器 - 小部件在进行分页、排序和过滤时执行服务器端请求 (HTTP GET)。

Ajax - 小部件在进行分页、排序、过滤、分组或保存数据时将发出 Ajax 请求。

这是否意味着目前无法使用 Kendo 的 MVC Grid 在本地编辑数据？

我的目标是能够编辑网格，然后将整个页面以及模型的其他部分提交回服务器，并将数据全部保存在一起，而不是进行 ajax 调用来将数据保存在网格中。

使用下面的代码我可以加载网格，但是编辑单元格不会持续存在，并且当我转到后退页面时，数据不会绑定模型。

        @(Html.Kendo().Grid<LaborTimeViewModel>(Model.LaborTimes)
        .Name("Grid")
        .Columns(columns =>
        {
            columns.Bound(p => p.Procedure).ClientTemplate("#=Procedure ? Procedure.ProcedureDescription : ''#").EditorTemplateName("ProcedureEditor");
            columns.Bound(p => p.PerformedBy).ClientTemplate("#=PerformedBy ? PerformedBy.UserDescription : ''#").EditorTemplateName("UserEditor");
         columns.Bound(p => p.LaborTime).ClientTemplate("#if (LaborTime) {# #:kendo.toString(LaborTime.Hours, '00')#:#:kendo.toString(LaborTime.Minutes, '00')#:#:kendo.toString( '00')# #}#").EditorTemplateName("TimePickerEditor"); //.EditorTemplateName("NumericEditor");

        })
        .Editable(editable => editable.Mode(GridEditMode.InCell))
        .Pageable()
        .Sortable()
        .Scrollable()
        .DataSource(dataSource => dataSource
            .Ajax()
            .PageSize(20)
            .ServerOperation(false) 
            .Model(model =>
                {
                    model.Id(p => p.WONumber);
                    model.Id(p => p.PerformedBy);
                    model.Id(p => p.TimerStart); …

我保留了通用标题，因为我不在乎得到的答案是 jquery、javascript 还是专门针对 MVC。

我有这个代码来保存和加载网格：

$("#save").click(function() {
var grid = $("#grid").data("kendoGrid");

var dataSource = grid.dataSource;

var state = kendo.stringify(grid.getOptions());


$.ajax({
    method: "POST",
    url: "/ebol/savegrid",
    data: {
        data: state
    }
});
});

$("#load").click(function () {
var grid = $("#grid").data("kendoGrid");

var dataSource = grid.dataSource;

$.ajax({
    url: "/ebol/loadgrid",
    success: function (options) {
        if (options) {
            grid.setOptions(JSON.parse(options));
        }
    }
});
});

问题：我可以保存网格的状态（包括列顺序、过滤器等），但是当我使用加载按钮恢复它时，网格的命令列消失了。

如何在恢复过程中保留这些按钮？

我有一个带有自定义弹出编辑器的 mvc 网格，我想在其中显示日期时间。使用这种类型的绑定时如何格式化日期？

<span type="date" data-format="MM/dd/yyyy" data-bind="text: CreatedOn"></span>

但仍然显示为： Thu Jun 18 2020 12:43:48 GMT-0500 (Central Daylight Time)

我们可以将Kendo网格数据源配置为同步

  .DataSource(dataSource =>
           dataSource.Ajax()

  .Model(model =>
    {
  .Read(read => read.Action("Products_Read", "Home")))
  .......


  $("#grid").data("kendoGrid").dataSource.read();

这是一个Ajax异步调用.如果是这样,我们可以调用同步调用.请建议我一个解决方案.谢谢.

我有一个MVC Kendo Grid如下.它可以正常使用默认分页.

现在,我想做自定义分页.在控制器操作中,我们需要知道当前页面索引.它还应该设置网格的"总"计数.[即使数据库中有100条记录,实际数据源一次也只有2条记录.因此,网格必须使用"total"属性知道数据库中的记录总数.

查询一次只能返回数据库中的2条记录.

我们如何使用Kendo Grid的MVC包装器来执行此自定义服务器分页？

@using (Html.BeginForm())
{ 

    @(Html.Kendo().Grid<KendoUIMvcSample.Models.Sample>()    
    .Name("ssgrid222")
    .Columns(columns => {
        columns.Bound(p => p.SampleDescription).Filterable(false).Width(100);
        columns.Bound(p => p.SampleCode).Filterable(false).Width(100);
        columns.Bound(p => p.SampleItems).Filterable(false).Width(100);
    })
    .AutoBind(false)
    .Pageable()
    .Sortable()
    .Scrollable()
    .Filterable()
    .HtmlAttributes(new { style = "height:430px;" })
    .DataSource(dataSource => dataSource
        .Ajax()
        .PageSize(2)
        .Read(read => read.Action("Orders_Read", "Sample")
)
     )
  )
}

调节器

public ActionResult Orders_Read([DataSourceRequest]DataSourceRequest request)
        {

            int currentPageNumber = request.Page;
            return Json(GetOrders().ToDataSourceResult(request));
        }

我想将Kendo Grid文化更改为nl-NL。。我在互联网上进行了研究，他们建议我只需要包含该文化的dll。。我已经做到了，并且我也引用了相同的内容。我也使用Kendo.Culture（“ nl-NL”）; 还是行不通

有没有办法防止默认的ajax请求？我将在java脚本中进行所有配置之后刷新网格,然后我开始请求,但不知何故,这个kendo网格是在加载页面时自动请求数据.

@(Html.Kendo().Grid<Data>()
    .Name("grid")
    .HtmlAttributes(new { Class = "acceleratorGrid" })
    .TableHtmlAttributes(new { Class = "styled", cellpadding = "0", border = "0", margin = "0" })
    .Events(e => e.Change("onChange"))
    .DataSource(dataSource => dataSource // Configure the grid data source
                                .Ajax() // Specify that ajax binding is used
                                .Read(read => read.Action("Products_Read", "Home")) // Set the action method which will return the data in JSON format
    )
    .Columns(columns =>
                {

                    columns.Bound(product => product.ProductID).Template(@<text></text>).ClientTemplate("<input type='checkbox' onclick='return false' name='checkedRecords' />");
                    columns.Bound(product => product.ProductName);
                    columns.Bound(product => product.UnitsInStock);
                } …

我正在使用带有ASP.NET MVC助手的Kendo UI Grid和自动生成的列.

[DefaultValue(60 * 60)]我的视图模型中有注释,但剑道助手似乎并不尊重这一点.

我是否可以指定默认值(可能包含数据注释)而无需手动描述列？

在Edit和Destroy中,Kendo网格也有一个Select命令.但似乎这个操作没有配置.你知道我怎么用吗？任何更好的JS绑定方式,如自定义命令？请注意,它没有click事件.

这条线在我的Kendo网格,列部分.

columns.Command(command => { command.Select(); command.Edit(); command.Destroy(); });