Question

我有一个带有三列的Kendo Ui Grid，其中第一列是复选框，另一列包含文本。我遇到的问题是复选框呈现缓慢。虽然网格是渲染的，并且数据填充速度非常快，但我必须等待几秒钟才能渲染复选框。而且我正在等待，我可以看到列中有数字，在复选框呈现之前。我在考虑转换它，以便使用javascript代码创建它以查看它是否会更快。有没有人看到我的代码会导致它渲染速度变慢或性能提升，或者在javascript中执行它会更快。

<td id="typeGrid">
 @(Html.Kendo().Grid(Model.TypeList)
 .Name("TypeList")
 .Columns(columns =>
 {
   columns.Bound("myID").Sortable(false).Width("35px")
     .ClientTemplate("<input type='checkbox'  name='typeId' value=#=myID#>")
     .Title("<input type='checkbox' onclick='checkAll(event)'>");
   columns.Bound("Name").Title("Name");
   columns.Bound("Type").Title("Type");
   })             
 .Sortable()                                                            
 .Resizable(resize => resize.Columns(true))
 .Selectable(select => select.Mode(GridSelectionMode.Multiple))
 .DataSource(dataSource => dataSource
      .Ajax()
      .ServerOperation(false)
      )
  )
 </td>

修改

仔细检查后，我注意到在我的投递框渲染之前，模板中的输入复选框不会呈现。在下拉框渲染之前，下拉框渲染是否会导致模板无法应用？它们都使用相同的对象。

<td id="PermType" style="vertical-align: top;">
  @(Html.Kendo().DropDownList()
    .Name("theTypeList") 
    .DataTextField("Type Name") 
    .DataValueField("myTypeID")    
    .BindTo(Model.myTypeList)                                 )
</td>

// the code above for the grid goes after this

我的模特

 public class myModel
{      
    public List<subType> TypeList { get; set; }
    public List<mainType> myTypeList { get; set; }

    public class subType
    {
        public int myID { get; set; }
        public string Name { get; set; }          
        public string Type { get; set; }
         public int mainTypeID { get; set; }

    }

    public class mainType
    {           
        public string myTypeID { get; set; }  
        //other property

    }

}

Answer 1

在DataSource您为“方法”设置Ajax但是您将对象传递给Grid。我认为这可能会导致问题。

根据评论进行修改

尝试将您的数据源更改为此（我认为语法可能稍微偏离，但intellisense应该可以提供帮助）：

@(Html.Kendo().Grid(Model.TypeList)
 .Name("TypeList")
 .Columns(columns =>
 {
   columns.Bound(x => x.myID).Sortable(false).Width("35px")
     .ClientTemplate("<input type='checkbox'  name='typeId' value='#=myID#'>")
     .Title("<input type='checkbox' onclick='checkAll(event)'>");
   columns.Bound(x => x.Name).Title("Name");
   columns.Bound(x => x.Type).Title("Type");
   })             
 .Sortable()                                                            
 .Resizable(resize => resize.Columns(true))
 .Selectable(select => select.Mode(GridSelectionMode.Multiple))
 .DataSource(dataSource => dataSource
      .Model(mdl => mdl.Id(x => x.myID))
  )

我怀疑这是因为我从未使用的Selectable()。

Kendo Ui ASP Grid渲染速度慢

1 个答案: