标签: kendo-grid

我有一个Kendo Grid,我希望一次只能扩展一行进行细节编辑.最简单的方法是什么？

@(Html.Kendo().Grid<MyModel>()
   .Name("MyGrid")
   .ClientDetailTemplateId("MyTemplate")
   .Columns(columns =>
   {
       columns.Bound(b => b.Code);
       columns.Bound(b => b.Name);
       columns.Bound(b => b.Description);
       ...
       columns.Command(cmd => { cmd.Edit(); cmd.Destroy(); });
   })
   .ToolBar(toolbar => toolbar.Create())
   .Editable(editable => editable.Mode(GridEditMode.InLine))
   .DataSource(dataSource => dataSource
      .Ajax()
      .Model(model => model.Id(a => a.Id))
      .Create(create => create.Action("Create", "SysMaint", new { id = Model.ProjectId }))
      .Read(read => read.Action("Read", "SysMaint", new { projectId = Model.ProjectId }))
      .Update(update => update.Action("Update", "SysMaint"))
      .Destroy(destroy => destroy.Action("Destroy", "SysMaint"))
   )
)

<script id="MyTemplate" type="text/kendo-tmpl">
    @(Html.Kendo().TabStrip()
       .Name("TabStrip_#=Id#")
       .SelectedIndex(0)
       .Items(items =>
           {
               items.Add().Text("A").LoadContentFrom("MyPartialA", …

我在kendo网格中应用自定义分页和排序.对于我的一个专栏,我得到一个数字文本框.当我在数值文本框中插入值时,它是整数,但是当从过滤器数字文本框中删除焦点时,它将转换为十进制.例如:如果我输入32,它仍然是32,但是当焦点被移除时,该值变为32.00.但我希望这个价值仍然是32.

所以任何人都可以帮我解决这个问题.

嗨,我对kendo UI非常新,所以在下面的修复中需要帮助,

我正在使用如下的kendo grid UI进行分页: <script> $(document).ready(function(){ $("#table3").kendoGrid({ dataSource: { pageSize: 10 }, pageable: true, enter code hereheight:300, sortable: true, }); $("#table3").show(); }); </script>

当用户在页面中编辑记录时,他被重定向到具有该记录详细信息的编辑页面,因此我需要当前页码,因为在页面中编辑记录后,我需要在保存该记录的详细信息后将用户重定向到同一页面.我在coldfusion页面中使用它.请帮忙.

提前致谢

我是剑道新手.我遇到模型绑定问题.当我用firebug调试时,它显示options.models是未定义的.由于这个原因,parrameterMap中的"if"条件始终为false,并且grid不会填充数据. 但是,当我删除parrameterMap部分时,它的工作原理. 我想,如果有人可以解释一下kendo dataSource中的参数映射,那将非常有用.谢谢.

    function GetDataSource() {
    var PrjKy = $("#cmbPrjNm").val();
    if (PrjKy == "") { PrjKy = 1; }

    var PrcsDetKy = 1;
    if (PrcsDetKy == "") { PrcsDetKy = 1; }

    var PrcsTypKy = $("#toDotype").val();
    if (PrcsTypKy == "") { PrcsTypKy = 1; }

    var AprPrtyKy = $("#cmbPiority").val();
    if (AprPrtyKy == "") { AprPrtyKy = 1; }

    var AprStsKy = $("#status").val();
    if (AprStsKy == "") { AprStsKy = 1; }

    var OrginAdrKy = …

我目前正在尝试使用远程数据填充kendo网格.Kendo有自己的功能来获取数据,但我想使用我创建的角度工厂.

所以我有一个工厂,它有一个功能"getSkills".此函数从我的api获取所有技能对象.

angular.module('MyApp').factory('Factory', function ($resource) {
    return $resource('/api/v1/skills/', {  },
        {
            getSkills: { method: 'GET', isArray: true }
        });
});    

在角度的SkillController中,我将这些获取的技能放在范围变量中.

$scope.skills = SkillFactory.getSkills();

我在这里初始化Kendo网格:

$scope.gridOptions = {
                dataSource: {
                    data: $scope.skills,
                    schema: {
                        model: {
                            fields: {
                                ID: { type: "number" },
                                Name: { type: "string" },
                                CreatedBy: { type: "number" },
                                CreatedDate: { type: "string" },
                                EditedBy: { type: "number" },
                                EditedDate: { type: "string" },
                                InUse: { type: "boolean" }
                            }
                        }
                    },
                    pageSize: 20
                },
                scrollable: …

我希望分页只显示我的记录比我的pageSize更多.有没有办法实现这种影响？

理想情况下,当在客户端上添加/删除数据时,分页机制将相应地显示/隐藏(再次,仅显示是否存在比页面大小更多的项目).

任何想法/解决方法？

更新

一旦我删除了高度设置代码,j4ro提供的答案似乎很有效.对我来说没有必要,但是你的里程可能会有所不同,因为我没有用更典型的用例来测试它.

dataBound: function () {
    if (this.dataSource.totalPages() === 1) {
        this.pager.element.hide();
    }
    else {
        this.pager.element.show();
    }
}

我有一个可分页和可过滤的网格,我设置为使用新的Kendo Grid Excel功能导出到excel.但是,即使我将AllPages设置为true,我也只得到前10个结果,无论我将pagesize设置为什么.删除Pageable属性给了我完整的结果.其他人有这个问题吗？

这是我网格的设置.

@(Html.Kendo().Grid(Model.CloudUsage)
.Name("PCloudUsages")
.ToolBar(toolbar =>
{
    toolbar.Excel().HtmlAttributes(new { @class = "toolbar-field" });
})
.Columns(columns =>
{
    columns.Bound(c => c.ProjectCode).Filterable(ftb => ftb.Cell(cell => cell.Operator("contains").ShowOperators(false)));
    columns.Bound(c => c.ProjectName).Title("ProjectName").Filterable(ftb => ftb.Cell(cell => cell.Operator("contains").ShowOperators(false)));
})
.Pageable(p => p.ButtonCount(5).PageSizes(new int[] { 10, 20, 50, 100 }))
.Filterable(ftb => ftb.Mode(GridFilterMode.Row))
.Sortable()
.Excel(excel => excel.FileName("CloudUsages.xlsx").Filterable(true).ProxyURL(Url.Action("ExportExcel", "Admin")).AllPages(true))
.DataSource(source => source
    .Ajax()
     .Model(m => m.Id(itm => itm.ProjectName))
     .Read(read => read.Action("PCloudUsages_Read", "Admin").Data("GetDates"))
     .Sort(sort => sort.Add(itm => itm.ProjectName).Descending())
     )
)

和控制器方法

public ActionResult ExportExcel(string contentType, string base64, string …

设置:

• ASP MVC项目
• 通过Razor的视图中的剑道网格
• 列自定义命令,调用...
• 使用refresh()URL打开Kendo窗口的JavaScript,将部分视图作为自定义窗体
• 表单有一个调用JavaScript的输入类型=按钮

障碍:

如何使用新模型(来自窗口/窗体javascript)更新Grid的行(dataItem？).我无法获得目标dataItem的句柄.Select()在此处不适用,因为未选中该行.相反,自定义按钮事件打开模态网格窗口,其中包含用于更新,关闭等的字段和命令.

我可以使用原生的网格编辑,但我想要完成的是一种完全自定义弹出窗口的方法,显示可用于呈现CRUD操作的局部视图.

顺便说一句:这样做的基本原理是优化网格行中的空间,通常使用不必要的按钮进行编辑和删除,使用Kendo本机控件属性进行布局.在我的案例中,我觉得这更好地呈现在一个单独的细节视图中,就像模型网格窗口一样.

同样,不使用Select(),我无法理解如何在Window/form JavaScript中获取调用它的Grid行的句柄,以便用新模型数据更新行.

谢谢你的时间.

我在Kendo UI网格上遇到了这个奇怪的问题.我有一个可过滤的网格,但它在模态内.但问题是当我过滤一个列(文本列)时,我无法在过滤器文本框中键入.这很奇怪,因为在所有浏览器中它都不起作用.这是我的例子repro

Jsfiddle演示在这里

<div class="container">
    <h3>Modal Example</h3>
    <div>
        <a href="#myModal1" role="button" class="btn" data-toggle="modal">Launch Modal</a>
    </div>

    <!-- Modal -->
    <div id="myModal1" class="modal hide" tabindex="-1" role="dialog">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            <h3>Kendo Not working on Modal</h3>
        </div>
        <div class="modal-body">
            <div id="grid" style="height:300px;"></div>
        </div>
        <div class="modal-footer">
            <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
            <button class="btn btn-primary">Save changes</button>
        </div>
    </div>
</div>

var sharedDataSource = new kendo.data.DataSource({
    data: [
        { id: 1, value: 10, item: "Item1" },
        { id: 2, value: 12, item: "Item2" },
        { …

在Angular 2的Kendo UI(beta)中,如何在选择特定行时触发事件？行本身没有指令或组件; 因此,如果没有行元素,则(click)="triggeredFunction()"无效.

这是我的网格:

<kendo-grid [data]="gridData" [selectable]="true">

  <kendo-grid-column field="ProductName">
    <template kendoHeaderTemplate let-column let-columnIndex="columnIndex">
     {{column.field}}({{columnIndex}})
    </template>
  </kendo-grid-column>     

  <kendo-grid-column field="ProductName">
    <template kendoCellTemplate let-dataItem>
      <kendo-dropdownlist [data]="listItems"></kendo-dropdownlist>
    </template>
  </kendo-grid-column>

</kendo-grid>

这是我的组件:

@Component({
 selector: "ultron",
 styleUrls: [String("./ultron.component.less")],
 templateUrl: "./ultron.component.html",
 })
 export class UltronComponent {

   private gridData: any[] = [{
      "ProductID": 1,
      "ProductName": "Chai",
      "UnitPrice": 18.0000,
      "Discontinued": true,
    }, {
      "ProductID": 2,
      "ProductName": "Chang",
      "UnitPrice": 19.0000,
      "Discontinued": false,
    }
  }];

  private listItems: Array<string> = ["@", "$", "#", "%"];

  public triggeredFunction(){ ... }

}