标签: kendo-grid

我们正在使用 Angular Kendo，并且在我们正在渲染的表格（网格）之一中，标题是可过滤的。其中一列绑定到布尔字段，但我们希望显示适当的字符串而不是原始布尔值（即 active 与 true）。每行中实际属性的显示很容易通过条件（即{{ boolean-property ? "label 1" : "label 2"}}）来处理，但标签有点棘手。现在，过滤器的外观如下：

我的目标是用更合适的东西更新标签，我检查了文档，我能找到的最接近的是格式属性，我不确定它如何适用于布尔值。

有谁知道如何设置过滤器菜单的标签？

我使用 Kendo UI for Angular。在剑道网格中我遇到问题:\n

当我在网格中添加新记录时，显示“valueField”而不是 textField。\n当新记录出现而不是单击时，如何更改它并设置可编辑模式？

我的代码：

                <kendo-grid [data]="gridData" [loading]="loading" [navigable]="true"\n                    (cellClick)="cellClickHandler($event)" (cellClose)="cellCloseHandler($event)" [height]="300"\n                    (save)="addAddressRecord($event)" (remove)="removeAddressRecord($event)">\n                    <kendo-grid-column field="isPrimary" editor="boolean" title="\xd8\xa7\xd8\xb5\xd9\x84\xdb\x8c" width="50px">\n                    </kendo-grid-column>\n                    <kendo-grid-column field="title" title="\xd8\xb9\xd9\x86\xd9\x88\xd8\xa7\xd9\x86"></kendo-grid-column>\n                    <kendo-grid-column field="geographicalRegionId" title="\xd9\x85\xd9\x86\xd8\xb7\xd9\x82\xd9\x87 \xd8\xac\xd8\xba\xd8\xb1\xd8\xa7\xd9\x81\xdb\x8c\xd8\xa7\xdb\x8c\xdb\x8c">\n                        <ng-template kendoGridEditTemplate let-dataItem="dataItem" let-column="column"\n                            let-formGroup="formGroup">\n                            <kendo-combobox (filterChange)="filterGeographicalRegion($event)" [filterable]="true"\n                                [data]="geographicalRegionId" textField="title" valueField="id"\n                                [valuePrimitive]="true" [formControl]="formGroup.get(\'geographicalRegionId\')">\n                            </kendo-combobox>\n                        </ng-template>\n                    </kendo-grid-column>\n                    <kendo-grid-column field="addressString" title="\xd8\xa7\xd9\x93\xd8\xaf\xd8\xb1\xd8\xb3">\n                    </kendo-grid-column>\n                    <kendo-grid-column field="postalCode" title="\xda\xa9\xd8\xaf \xd9\xbe\xd8\xb3\xd8\xaa\xdb\x8c">\n                        <ng-template kendoGridEditTemplate let-dataItem="dataItem" let-column="column"\n                            let-formGroup="formGroup">\n\n                            <input kendoTextBox [formControl]="formGroup.get(\'postalCode\')"\n                                (input)="($event)" />\n                        </ng-template>\n                    </kendo-grid-column>\n                    <kendo-grid-column field="phone" title="\xd8\xaa\xd9\x84\xd9\x81\xd9\x86">\n                    </kendo-grid-column>\n                    <kendo-grid-column field="fax" title="\xd9\x81\xd8\xa7\xda\xa9\xd8\xb3">\n                    </kendo-grid-column>\n                    <kendo-grid-column field="email" title="\xd8\xa7\xdb\x8c\xd9\x85\xdb\x8c\xd9\x84">\n …

如何将最小长度的验证添加到文本框并显示自定义错误消息？

我想验证以下内容:

• UserName的最小长度为6
• 密码和确认密码匹配
• 地址1是必需的

这是弹出模板的代码.模板中指定的最小长度不起作用,但maxlength工作正常.

<script id="popup_editor" type="text/x-kendo-template">
    <table cellpadding="0" cellspacing="0">
        <tr>
            <td>
                <label for="UserName"><b>UserName*</b></label>
            </td>
            <td>
                <div class="control-row">
                    <input type="text" 
                           name="UserName" 
                           id="UserName" 
                           class="k-input k-textbox"
                           required
                           **minLength**="6"
                           maxlength="8"
                           pattern="[a-zA-Z0-9]+"
                           validationMessage="Please enter username"/>
                    <span class="k-invalid-msg" data-for="UserName" ></span>
                </div>
            </td>
            <td></td>
            <td></td>
         </tr>
         <tr>
             <td>
                 <div>
                     <label for="Password"><b>Password*</b></label>
                 </div>
             </td>
             <td>
                 <div class="k-edit-label">
                     <input type="password" 
                            id="Password" 
                            name="Password"
                            class="k-input k-textbox"required
                            validationMessage="Please enter Password"/>
                     <span class="k-invalid-msg" data-for="Password"></span>
                 </div>
              </td>
              <td>
                  <div>
                      <label for="ConfirmPassword" style=""><b>Confirm Password</b></label>
                  </div>
              </td>
              <td>
                  <div class="k-edit-label">
                      <input type="password" 
                             id="ConfirmPassword" …

我正在使用KendoUi控件.我已经定义了dataSource之类的

  var dataSource = new kendo.data.DataSource({
   schema: {
    model: {
       id: "ProductID",
         fields: {
            ProductID: { type:"id" },
            ProductName: {type:"string"}
           }      
         }
       }          
     });

现在我的问题是我们可以定义fileds为array类似的

 var arry = [{ProductID:{type:"id"}}, {ProductName:{type:"string"}}];

现在我们可以定义dataSource了

 var dataSource = new kendo.data.DataSource({
   schema: {
    model: {
       id: "ProductID",
         fields: arry
         }
       }          
     });

可能吗？我尝试使用自定义列,但是我失败了,任何人都可以用剃刀给出一个简单的例子吗？

油漆工作:)

我想要这样的东西,列包括数据和一个按钮(带onclick)

//---Not Worked 1---

    columns.Command(command =>
    {
        command.Custom("Telefonlar? Göster").Click("telefonlariGoster");
        columns.Bound(x => x.Adres);
    }).Width(580);
....

//---Not worked 2---

        columns.Template(@<text>
            <label>@item.Adres</label>
            <input type="button" name="AdresGuncelle" value="AdresGuncelle" onclick="telefonlariGoster()" />
    </text>);

//Worked

columns.Bound(x => x.Adres)
     .ClientTemplate("#=Adres#" +
     "<input type='button' class='telefonlariGoster' style='float: right;' name='telefonlariGoster' value='Telefonlar? Güncelle' onclick='telefonlariGoster()'/>");

我有这个KendoUI网格,我想在其标题行中添加一个click事件,并获取单击的单元格的文本值:

@(Html.Kendo()
      .Grid<Timeshet.Web.Models.UserWeekModel>()
      .Name("grid")
      .Sortable(sortable => sortable.AllowUnsort(false))
      .Columns(columns =>
      {
              columns.Bound(t => t.Name);//.ClientTemplate("#=Name#" + " " + "<div class='jobDescriptionInfo-img' onclick='showDescription()' title='Job Description' >&nbsp;</div>");
              columns.Bound(t => t.JobDescription).Visible(false);
              columns.Bound(t => t.LastFri).ClientTemplate("#=LastFri#").HtmlAttributes(new { @class = "last-week" }).Hidden().Sortable(false);
              columns.Bound(t => t.Monday).ClientTemplate("#if (Monday.HasNotes) {#" + "#=Monday.Name#" + " " + "<div class='project-note-img' title='Project Notes' >&nbsp;</div>" + "#}else{#" + "#=Monday.Name#" + "#}#").Sortable(false).HtmlAttributes(new { @Class = "#=Monday.Style#" });
              columns.Bound(t => t.Tuesday).ClientTemplate("#if (Tuesday.HasNotes) {#" + "#=Tuesday.Name#" + " " + "<div class='project-note-img' title='Project Notes' >&nbsp;</div>" + "#}else{#" + …

我正在尝试最新的Kendo UI Web版本,以便在我们的应用程序中使用它,特别是Grid组件.

如所示在这里栅格能够自适应呈现在移动设备上,或在任何浏览器,如果移动属性被设置为"电话"或"片剂".但是,我无法在我的代码中使用它.

有没有人知道自适应渲染是否独立于Kendo UI Web中的移动应用程序功能,还是要求任何自适应网格作为Kendo UI移动应用程序的一部分运行？

我怀疑是后者.我当前的代码只是使用移动属性设置为"phone"的非移动网格示例,并且我没有实例化任何Kendo移动应用程序的实例(例如kendo.mobile.Application(document.body)).

谢谢,克里斯.

PS.在Tar​​as的回复之后,我有一些代码可以证明我的问题,改编自他:

<!DOCTYPE HTML>
<html>
<head>
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />

    <title></title>

    <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
    <script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>

    <script src="/assets/libraries/kendoui.web/2014.1.318/js/kendo.web.min.js"></script>
    <link href="/Assets/Libraries/KendoUI.Web/2014.1.318/styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
    <link href="/Assets/Libraries/KendoUI.Web/2014.1.318/styles/kendo.rtl.min.css" rel="stylesheet" type="text/css" />
    <link href="/Assets/Libraries/KendoUI.Web/2014.1.318/styles/kendo.default.min.css" rel="stylesheet" type="text/css" />

</head>

<body>

    <div id="grid"></div>
    <script>
        $("#grid").kendoGrid({
            columns: [
              { field: "name" },
              { field: "age" },
              { field: "name" },
              { field: "age" },
              { field: …

这可能吗？现在我有:

kendoGrid = gridObj.kendoGrid({
    dataSource: gridDataSource,
    editable: "popup",
});

哪个效果很好,但我希望编辑内联,只在弹出窗口中添加行,这可能吗？

根据Kendo UI/Angular文档(参见此处),网格不支持在实例化窗口小部件后重新定义列.这就是为什么剑道提供k-ng-delay关键字.这工作正常,但我需要多次重新定义网格列,而不仅仅是一次.有没有办法在Angular中以编程方式重新创建网格？或者有关如何多次重新定义网格列的任何其他想法？

我想更改Kendo Grid工具栏上"导出到Excel"按钮的标题,但是虽然我尝试应用了许多不同的建议,但仍然无法更新.怎么改变这个？

<script>
    var grid = $("#grid").kendoGrid({
                toolbar: ["excel"],
                excel: {
                    text: "Test 1", //did not make any sense
                    title: "Test 2", //did not make any sense
                    fileName: "Export.xlsx",
                    filterable: true
                },
                //code omitted for brevity

    }).data("kendoGrid");
</script>