标签: kendo-grid

<button class="k-button" id="batchGrid">
    Batch Edit</button>
<div id="example" class="k-content">
    <div id="batchgrid">
    </div>
</div>
<script>
    $("#batchGrid").click(function () {
        var crudServiceBaseUrl = "http://demos.kendoui.com/service",
                        dataSource = new kendo.data.DataSource({
                            transport: {
                                read: {
                                    url: crudServiceBaseUrl + "/Products",
                                    dataType: "jsonp"
                                },
                                update: {
                                    url: crudServiceBaseUrl + "/Products/Update",
                                    dataType: "jsonp"
                                },
                                destroy: {
                                    url: crudServiceBaseUrl + "/Products/Destroy",
                                    dataType: "jsonp"
                                },
                                create: {
                                    url: crudServiceBaseUrl + "/Products/Create",
                                    dataType: "jsonp"
                                },
                                parameterMap: function (options, operation) {
                                    if (operation !== "read" && options.models) {
                                        return { models: kendo.stringify(options.models) };
                                    } …

好吧，似乎有很多类似的问题，但我找不到可以回答这个特定问题的问题..所以这里是..

有一个可用的 Kendo UI 网格。我的数据源正在返回一个时间戳 - 这是返回到代码的 JSON 响应：

您会注意到下一行也是一个日期.. 由 MySQL 作为标准 DateTime 格式返回 - 我很乐意直接使用它。但我已将日期转换为我认为更通用的时间戳。（？？）

现在我需要做两件事 - 将时间戳格式化为可读日期并编辑日期，以便将其保存回数据源。但让我们先解决格式问题。

我当前显示列的代码如下所示：

    {   title: "Trial<br>Date", 
    field: "customer_master_converted_to_customer_date",
    format: "{0:d/M/yyyy}",
    attributes: {
        style: "text-align: center; font-size: 14px;"
    },
    filterable: true,
    headerAttributes: {
        style: "font-weight: bold; font-size: 14px;"
    }
},

虽然我试过了..

    toString(customer_master_converted_to_customer_date, "MM/dd/yyyy")

.. 以及它的几种变体 - 在格式字符串方面。是的，我试过输入：

    type: "date",

无论我做什么，我都只得到时间戳。

任何人？

我正在尝试上传 Kendo 网格中产品的图像（内联编辑）。在插入它工作正常。在更新中，它不允许我只更改图像。单击更新按钮后，除非我更改其他字段之一，否则它不会进入控制器。

因此，如果有一种方法可以强制更新按钮转到控制器，这将很有帮助。

@(Html.Kendo().Grid(Model)
    .Name("BrandGrid")
                    .Events(e => e.Edit("edit").DataBound("onDataBound").Cancel("onDataBound")) 
            .DataSource(dataSource => dataSource

                .Ajax()
                .ServerOperation(true)
                .Events(events => events.Error("error_handler"))


                .PageSize(10)
                   .Model(  model =>{
                       model.Id(p => p.BrandID);
                       model.Field(p => p.BrandID).Editable(false);


                   })

                   .Update(update => update.Action("Brand_Update", "Brands"))
                   .Create(insert => insert.Action("Brand_Insert", "Brands"))
                   .Read(read => read.Action("Brand_Read", "Brands"))
                   .Destroy(delete => delete.Action("Brand_Delete", "Brands"))

            )
         .Columns(columns =>
         {
             columns.Bound(p => p.BrandID).Groupable(false).Title(MyResources.LabelBrandID).HeaderHtmlAttributes(new { style = "text-align:" + MyResources.HeaderDirection });
             columns.Bound(p => p.BrandNameE).Title(MyResources.LabelBrandNameE).HeaderHtmlAttributes(new { style = "text-align:" + MyResources.HeaderDirection });
             columns.Bound(p => p.BrandNameA).Title(MyResources.LabelBrandNameA).HeaderHtmlAttributes(new { style = "text-align:" + MyResources.HeaderDirection });
             columns.Bound(p => …

我在我的项目中使用 kendo ui asp.net mvc Grid。

有没有办法在插入新数据时保持弹出编辑器打开？

我的应用程序正在运行时区为UTC+05:30 的服务器。我的客户端机器有UTC-05:00时区。

现在假设他进入1989年12月31日在一个文本框，并保存表单，当他在剑道网查看详细的日期显示为1989年12月30日，而不是1989年12月31日。

我通过更改电脑的时区来调试应用程序，在调试中我发现

1. 直到插入/更新语句被触发，日期才会改变。它保持为12/31/1989。
2. 在数据库中日期也存储为12/31/1989。
3. 当我从数据库中获取数据时，模型和控制器中的日期仍然是12/31/1989。
4. 但是当我使用以下查询以 JSON 格式将数据返回到剑道网格时，它在页面上显示日期为12/30/1989。

C＃

public ActionResult GetPatients([DataSourceRequest] DataSourceRequest request, int includePatientId = 0)
{
  return Json(this.patienModel.RetrieveActivePatients().ToDataSourceResult(request));
}

剑道格子

@(Html.Kendo().Grid<RxConnectEntities.Patient>
       ().Name("PatientList")
       .Columns(columns =>
       {
         columns.Bound(p => p.PatientID).Visible(false);
         columns.Bound(p => p.Name).Width(100);
         columns.Bound(p => p.Gender).Width(80);
         columns.Bound(p => p.DateOfBirth).Width(90)
                .Format("{0:MM/dd/yyyy}")
                .EditorTemplateName("DateOfBirth")
                .Filterable(false).HtmlAttributes(new { id = "gridDateOfBirth" })
                .ClientTemplate("#: kendo.toString(kendo.parseDate(data.DateOfBirth),'MM/dd/yyyy') #");
                columns.Bound(p => p.PhoneNumber).Title("Phone Number").Width(110);
                columns.Command(command =>
                {
                  command.Custom("Select").Click("OnSelectRow");
                  command.Custom("Edit").Text("Edit").Click("EditGrid"); …

我已经与这个问题斗争了很长一段时间，并且（仍然）无法使用其样式打印我的 div。

目前，我的脚本是：

$('#printMeButton').click(function () {
    //alert("a");
    var data = document.getElementById('thisPrintableTable').outerHTML;

    var mywindow = window.open('', data);
    mywindow.document.write('<html><head><title>Print Me!!!</title>');
    // mywindow.document.write('<link rel="stylesheet" type="text/css" href="Site.css" media="screen">');
    mywindow.document.write('</head><body>');
    mywindow.document.write(data);
    mywindow.document.write('</body></html>');

    mywindow.document.close();
    mywindow.focus();
    mywindow.print();
    mywindow.close();
    return true;

});

它嵌套在一个$(document).ready函数中。

当我包含所需的样式表（当前已注释掉）时，打印预览中不会出现任何内容。

我还有一些对表格外观有影响的脚本，因此，我相信这可能是将这些包含在弹出窗口中的关键。

我如何将其包含在新的弹出窗口中？

有人可以建议一种按原样打印的方法吗？

编辑历史

• 删除了末尾的空格 </head><body>
• 改为var datahaveouterHTML而不是innerHTML
• 更好地理解问题而改变的问题/细节

我正在设计具有 Onion 架构的应用程序，并且我想将 Kendo UI 中的网格与服务器端过滤排序和分页一起使用。我想避免手动将 DataSourceRequest 解析为动态 LinQ，而是使用 ToDataSourceResult。

我来到了工作解决方案，其中我的控制器包含以下内容：

    private ISalesService salesService;

    public HomeController(ISalesService salesService)
    {
        this.salesService = salesService;
    }

    public JsonResult Post([DataSourceRequest] DataSourceRequest request)
    {
        var sales = salesService.GetQueryableSales();

        return Json(sales , JsonRequestBehavior.AllowGet);

    } 

ISalesService 映射到我使用存储库的实现，代码如下：

    public IQueryable<SalesOrderHeader> GetQueryableSales()
    {
        if (context == null) 
            context = new AdventureWorks2012Context();

        return context.SalesOrderHeaders;
    }

这只是应用程序的一个骨架，因此在服务和存储库中都没有逻辑。这样我就可以避免手动解析 DataSourceRequest，但代价是将 IQueryable 暴露给 MVC 层。我想将 IQueryable 保留在存储库中，并在可能的情况下公开 IEnumerable，或者可能来自 Kendo UI 库的 DataSourceResult。

我尝试更改我的存储库调用如下：

    public DataSourceResult GetSales(DataSourceRequest request)
    {
        using (var c = new AdventureWorks2012Context())
        { …

我有一个用 Angular 2 制作的 Kendo UI 网格。它是 crud 应用程序的一部分，我有一个删除按钮。删除后我希望网格自动刷新。

这是显示事件通知的网格：

<kendo-grid [data]="EventsNotificationSetup">

        <kendo-grid-command-column title="" width="200">
            <template >
                <button (click)="EditModal.open()" kendoGridEditCommand  kendoButton  [icon]="'pencil'">Edit</button>
                <button (click) = deleteEventNotification(dataItem.id) kendoGridRemoveCommand kendoButton [primary]="true"  [icon]="'trash'">Remove</button>


            </template>
        </kendo-grid-command-column>

        </kendo-grid>

这是我从字面上删除记录的删除代码：

this._http.delete(this.link + notificationId,

            {
                headers: new Headers({
                    'Content-Type': 'application/json'
                })
            })
            .map(res => res.json()).subscribe();

在此之后，我再次创建了一个 http.get 来获取事件通知，但它不会自动更新网格，我必须刷新页面。

你知道我怎样才能刷新网格吗？

谢谢！

我一直在尝试将语言动态合并到 Kendo 控件中，但遇到了中文翻译的问题，这些翻译在 Sql Server 数据库中存储为 Unicode 列表。

存储在数据库中的翻译

通过使用 columntemplate属性，很快就启动并运行 Kendo Grid 以显示这些 Unicode 中文：

template: '#= Translation #'

剑道网格显示翻译

我遇到的问题是 Excel/PDF 导出。它们不呈现 Unicode 值，与 Kendo Grid 通过使用template. 相反，它们显示默认字体字符：

PDF 导出

CSV 导出

在对该问题进行研究后，我尝试了以下解决方案，但无济于事：

• 按照此建议设置网格控件的字体系列；（为了与网站的其余部分保持一致，我并不特别想这样做，也不明白为什么这会起作用，因为实际的 Kendo Grid 本身可以完美地显示汉字）：

  .k-widget {
      font-family: 'Arial Unicode MS';
  }
  

  Run Code Online (Sandbox Code Playgroud)

• 将列encoded属性设置为 true：

  { field: "AnalyteName", title: "Analyte", attributes: { "class": "customKendoGridCell"}, width: "25%", encoded: true, template: '#= TranslationField #' },
  

  Run Code Online (Sandbox Code Playgroud)

• 使用kendo.template：

  如果要在模板中呈现编码的 HTML 值，Kendo …

我正在寻找一种禁用角度剑道网格的方法。

用户不应能够在网格中添加/编辑/删除行。

那么，如何将我的 kendo-gird 标记为 readonly 或 disabled ？

我在官方文档中没有找到任何相关内容。