Question

我有一个带工具栏的Kendo网格，我如何将它放在网格后面。

我已快速搜索并在堆栈中找到了this，但我的命令栏仍显示在网格上方。

我不知道这里出了什么问题，有人可以指点我正确的方向吗？代码：

 <div id="divDependentDetails" >
  @if (Model.IsDependentGridEnabled)
  {
@(Html.Kendo().Grid(Model.DependentDetailsList)
            .Name("DependentGrid")
            .Events(e => e.SaveChanges("DependentGridSave")

            )
                   .Columns(columns =>
                   {
                       columns.ForeignKey(p => p.TitleCode, Model.TitleList, "TitleCode", "TitleDescription").Title("Title");
                       columns.Bound(p => p.FirstName).Title("First Name");
                       columns.Bound(p => p.MiddleName).Title("Middle Name");
                       columns.Bound(p => p.LastName).Title("Last Name"); ;
                       columns.ForeignKey(p => p.Gender, Model.GenderList, "TitleCode", "TitleDescription").Title("Gender");
                       columns.ForeignKey(p => p.RelationShipCode, Model.RelationShipList, "RelationShipCode", "RelationShipName").Title("Relationship");
                       columns.Bound(p => p.DepDOB).Format("{0:dd-MMM-yyyy}").Title("Date of Birth");
                       columns.Bound(p => p.RelationShipStartDate).Format("{0:dd-MMM-yyyy}").Title("Relationship Start Date");
                       columns.Bound(p => p.RelationShipEndDate).Format("{0:dd-MMM-yyyy}").Title("Relationship End Date");
                       columns.Bound(p => p.EmailAddress).Title("Email");
                       columns.Bound(p => p.DepPassportNumber).Title("Passport Number");
                       columns.Bound(p => p.DepPassportExpDate).Format("{0:dd-MMM-yyyy}").Title("Passport Expiry");
                       columns.Command(command => command.Destroy());
                   })

                    .ToolBar(toolBar =>
                    {
                        toolBar.Create().Text("Add");
                        toolBar.Save().SaveText("Submit").CancelText("Reset");
                    })
                   .Editable(editable => editable.Mode(GridEditMode.InCell))

                   .Sortable()
                   .Resizable(resize => resize.Columns(true))
                   .Filterable()
                   .DataSource(dataSource => dataSource
                       .Ajax()
                        .Batch(true)
                       .ServerOperation(false)
                       .Model(model =>
                       {
                           model.Id(m => m.DependantDetialId);

                       })
                       .Update(update => update.Action("DependentDetails_Update", "EmployeeSelfService")
                 )
                 .Create(create => create.Action("DependentDetails_Create", "EmployeeSelfService")
         )
                 .Destroy(delete => delete.Action("DependentDetails_Destroy", "EmployeeSelfService")
             )
                 .Events(e => e.RequestEnd("DependentGrid_onComplete")
                 )
                   )
                   )

  }
</div>
<script>
    $("#DependentGrid").find(".k-grid-toolbar").insertAfter($("#DependentGrid .k-grid-content"));
</script>

Answer 1

我得到了...在探索渲染的HTML之后，我发现其中没有“.k-grid-content”，只有“.k-grid”，它工作得很好....

<script>

// $("#DependentGrid").find(".k-grid-toolbar").insertAfter($("#DependentGrid .k-grid-content"));  --- not working

// Working Line 

$("#DependentGrid").find(".k-grid-toolbar").insertAfter($("#divDependentDetails .k-grid"));
</script>

将剑道工具栏放在网格底部

1 个答案: