标签: kendo-grid

使用Kendo UI Grid和MVC 4,我无法找到一种方法将摘要总计(财务)放在网格底部的选择列中.

这可能吗？

我有一个用javaScript渲染的Kendo UI网格.我希望字符串列有一个选项("包含")而没有第二个过滤器.到目前为止,这么好,我写道

        $("#MyGrid").kendoGrid({
            // other bits of configuration here
            filterable: {
                extra:false, 
                operators: {
                    string:{ contains: "Contains"}
                }
            },
            // more bits of configuration here
        });

作为网格定义的一部分.结果看起来很好(我只有一个选项,所以下拉是多余的).

但是,无论如何,过滤器仍然执行equals操作而不是contains操作(这是唯一可用的操作).

我花了一段时间试图解决这个问题,并且我一直在圈子里走,因为我发现的代码要么不起作用,要么没有意义,或者两者兼而有之.

任何人都可以告诉我如何将过滤器默认为"包含"而不是"等于"？

默认情况下,kendo网格将展开以填充其包含的div.它只是一个表元素,所以本质上.

<table role="grid">
<colgroup>
<col style="width:200px"> // etc
<colgroup>
<thread>
// content
</thread>
</table>

但是,当您添加更多cols(或者太多)时,它们会来回缩放以适应.我想要溢出水平滚动条.

为此,我添加了一些在启动,添加和重新排序时运行的代码.

  this._initWidths = function () {
     var totalWidth = 0;
     for (var i = 0; i < grid.columns.length; i++) {
        var width = grid.columns[i].width;
        $('#myGrid .k-grid-header-wrap colgroup col').eq(i).css('width', width + 'px');
        $('#myGrid .k-grid-content colgroup col').eq(i).css('width', width + 'px');
        totalWidth = totalWidth + width;
     }
     table.css('width', totalWidth + 'px');
  };

然而,剑道似乎有自己的逻辑,反对这一点.Colgroup条目将开始被删除,搞乱一切.

有什么办法可以阻止这个吗？有没有更好的方法来做我想要的？

谢谢.

我的KendoUIASP.NET MVC应用程序有一个基本的Grid,它使用ajax绑定进行读取.我想对此进行增强,以便网格上方的表单用于帮助选择应在网格中显示的数据.这是一个标准的搜索表单,其中包含名字,姓氏,出生日期,客户来源等基本字段以及搜索按钮.当按下搜索按钮时,我想强制网格通过传入上面引用的字段的搜索模型来获取符合控制器条件的数据.

搜索表单包含在_CustomerSearch局部视图中.

通过点击OnDataBinding客户端事件并更新那里的参数值然后手动进行Ajax调用来获取数据,我之前已经使用Telerik MVC扩展实现了这种事情.看来KendoUI不会以同样的方式运行.

视图

@Html.Partial("_CustomerSearch", Model)
<hr>
@(Html.Kendo().Grid<ViewModels.CustomerModel>()    
    .Name("Grid")
    .Columns(columns =>
    {
        columns.Bound(p => p.Id).Hidden(true);
        columns.Bound(p => p.FirstName);
        columns.Bound(p => p.LastName);
        columns.Bound(p => p.DateOfBirth).Format("{0:MM/dd/yyyy}");
        columns.Bound(p => p.IsActive);
    })
    .Scrollable()
    .Filterable()
    .Sortable()
    .DataSource(dataSource => dataSource
        .Ajax()
        .Read(read => read.Action("_Search", "Customer"))
    )
)

调节器

public ActionResult _Search([DataSourceRequest]DataSourceRequest request)
{
    return Json(DataService.GetCustomers2().ToDataSourceResult(request));
}

我设想控制器看起来像这样,但找不到任何以这种方式实现的任何示例,这是我需要帮助的.

public ActionResult _Search([DataSourceRequest]DataSourceRequest request, CustomerSearchModel customerSearchModel)
{
    return Json(DataService.GetCustomers2(customerSearchModel)
               .ToDataSourceResult(request));
}

是否存在等同于Kendo Grid的onEditComplete的事件,其中事件仅在编辑了单元格的内容后触发？

文档提到"编辑"事件,但是一旦单元格进入编辑模式,这就会触发(因此这相当于onBeginEdit).

我发现的具有所需行为的最接近事件是"保存"事件,但此事件仅在更改单元格内容时触发.我希望一旦单元格退出编辑模式,就会触发一个事件.

网格的editmode设置为incell.

我在asp.net mvc中使用kendo Ui为create Grid编写此代码

  @(Html.Kendo().Grid(Model)
      .Name("Grid")

      .Columns(columns =>
                   {
                       columns.Bound(p => p.Id).Groupable(false).Visible(false);
                       columns.Bound(p => p.BrandName);
                       columns.Bound(p => p.BrandAbbr);
                       columns.Bound(p => p.SrcImage);

                       columns.Command(command => command.Custom("ViewDetails").Click("showDetails"));
                      })

    .ToolBar(toolbar =>
                    {
                        toolbar.Custom().Action("Create","Users").Text("add");                          
                    }
        )
        .Groupable()
        .Pageable()
        .Sortable()
.Scrollable()

        .Filterable()
        .HtmlAttributes(new {style = "height:500px;"})
        .Selectable(selectable => selectable
            .Mode(GridSelectionMode.Multiple)
            .Type(GridSelectionType.Row))  

        .DataSource(dataSource => dataSource
                                    .Server()                           
                                    .Model(model => model.Id(item => item.Id))

      ))   

我想当用户点击ViewDetails警报BrandId值栏时,请帮助我.谢谢所有

我希望能够调用一个将Kendo网格滚动到所选行的函数.我已经尝试了一些方法,但没有一个方法有效,

比如我试过这个:

var grid = $("#Grid").data("kendoGrid"),
    content = $(".k-grid-content");
content.scrollTop(grid.select());

我也试过这个:

var gr = $("#Grid").data("kendoGrid");
var dataItem = gr.dataSource.view()[gr.select().closest("tr").index()];
var material = dataItem.id;
var row = grid.tbody.find(">tr:not(.k-grouping-row)").filter(function (i) {
    return (this.dataset.id == material);
});
content.scrollTop(row);

有人能指出我正确的方向吗？:)

---编辑---

由于其他原因,我无法绑定到更改事件,因此我必须能够调用函数将列表滚动到所选行.这就是我试着用@Antonis为我提供的答案.

var grid = $("#Grid").data("kendoGrid")
grid.element.find(".k-grid-content").animate({  
    scrollTop: this.select().offset().top  
 }, 400);

当我尝试这个时,它在列表中向下滚动但不向所选行滚动.我通过调用scrollTop以错误的方式使用网格对象吗？

这个也是:

var grid = $("#ItemGrid").data("kendoGrid");
grid.scrollToSelectedRow = function () {
    var selectedRow = this.select();
    if (!selectedRow) {    
        return false;    
    }
    this.element.find(".k-grid-content").animate({
        scrollTop: selectedRow.offset().top  
    }, 400);
    return true;
    };

grid.scrollToSelectedRow();

问题在于Kendo网格的性能缓慢,当尝试加载1000多条记录时,网格需要大约8秒才能加载.我可以看到控制器在3秒内返回json数据,然后kendo网格需要时间来填充.

我有一个500个记录的PageSize并使用了DataSourceRequest,因此每个页面的数据只会从控制器返回.但仍然没有快乐.

任何人都可以建议我如何提高电网性能.

请在下面找到我的代码

 @(Html.Kendo().Grid<Model>()
.Name("KendoTestGrid")     
.Columns(columns =>
{

    columns.Bound(p => p.Column5)
          .Width("18%")             
          .ClientTemplate("#= formatResult(format(column5, '')) #")
          .EditorTemplateName("Column5")
          .ClientFooterTemplate("<span href='\\#'  id='total'>Total : </span>");             
    columns.Bound(p => p.Column6)
         .EditorTemplateName("Column6")
         .ClientTemplate("#= format(column6, '') #")                       
         .ClientFooterTemplate("<span href='\\#' id='spanfooter'></span>")             
         .Width("23%");
    columns.Bound(p => p.column7)             
         .ClientTemplate("<span href='\\#'  id='#=Id #'>#= format(Column7,'')#</span>")
         .ClientFooterTemplate("<span href='\\#'  id='spansum'></span>")
         .HtmlAttributes(new { Class = "number" })
         .Width("18%");
    columns.Bound(p => p.column8)
         .EditorTemplateName("column8")            
         .ClientFooterTemplate("Total:")
         .ClientFooterTemplate("<span href='\\#'  id='TotalSum1'></span>")           
         .Width("23%");      
})

.DataSource(dataSource => dataSource
    .Ajax()      
    .Batch(true)
    .ServerOperation(true)      
    .Read(read => read.Action("Action", "Controller").Data("getData"))
    .Create(c => c.Action("Action", "Controller").Data("getData2"))
    .Update(update => update.Action("Action", …

我需要在kendoGrid中选择一个特定的行,但不要选择data-uid(当再次加载网格dataSource时更改data-uid),而是选择行itemID.我看到了帖子,但是他们只选择uid的行,这不是我需要的,我实际上需要重新启动HTML5应用程序,当加载网格时,应该选择一个特定的项目.这就是我一直看到的

演示:jsfiddle.net/ruse​​v/qvKRk/3/

例如,对象有OrderID as ID,并且每次加载网格时,它都是相同的,不像uid,我想知道如何能够选择一行OrderID,而不是uid.

我想以编程方式设置Kendo UI网格列宽.我使用以下代码:

function setColumnWidths(grid, options) {
    for (var i = 0; i < options.columns.length; i++) {
        grid.columns[i].width = options.columns[i].width;
    }
}

在执行语句后在chrome中调试时,grid.columns [i] .width似乎被适当地设置为新值,但是GUI中没有任何变化,列宽保持不变.我错过了什么？