如何根据另一个控件中的值控制Kendo UI Grid中的Max Rows？

Question

考虑以下形式：

有没有办法可以根据上面CWT框中的值锁定网格的最大行数？

这是使用MVC Razor，用此代码生成网格：

<script src="@Url.Content("~/Scripts/kendo/2013.1.319/kendo.grid.min.js")" type="text/javascript" ></script>
<script src="@Url.Content("~/Scripts/kendo/2013.1.319/kendo.pager.min.js")" type="text/javascript" ></script>


<input type="hidden" name="Species_id" value='@ViewBag.SpeciesId' />

@(Html.Kendo().Grid<SpeciesRetainedSalmonViewModel>()
      .DataSource(dataSource =>
          dataSource.Ajax()
              .PageSize(10)
              .Batch(false)
              .Read(read =>
                  read.Action("SpeciesRetainedData_Read",
                      "Species",
                      new { speciesId = @ViewBag.SpeciesId }))
              .Create(create =>
                  create.Action("SpeciesRetainedData_Create",
                      "Species",
                      new {
                          species_Id = @ViewBag.SpeciesId,
                          speciesId = @ViewBag.SpeciesId
                      }))
              .Update(update =>
                  update.Action("SpeciesRetainedData_Update",
                      "Species",
                      new { speciesId = @ViewBag.SpeciesId }))
              .Destroy(delete =>
                  delete.Action("SpeciesRetainedData_Delete",
                      "Species",
                      new { speciesId = @ViewBag.SpeciesId }))
              .Model(model => model.Id(m => m.Id))
      )
      .Pageable(pager => pager
          .Numeric(true)
          .PreviousNext(true)
          .PageSizes(new[] { 10, 25, 50, 100 })
          .ButtonCount(5)
          .Messages(messages => messages.ItemsPerPage("Records / Page"))
      )
      .Sortable()
      .Scrollable()
      .Columns(columns => {
          columns.Command(command => command.Edit()).Width(180);
          columns.Bound(m => m.MarkType).EditorTemplateName("MarkType");
          columns.Bound(m => m.CWTLabels).HtmlAttributes("width: 100px;");
          columns.Command(command => command.Destroy()).Width(90);
      })
      .HtmlAttributes(new { style = "width: 100%;" })
      .ToolBar(tb =>
          tb.Create()
              .Text("Create")
              .HtmlAttributes(new { @class = "float-right submitposition" })
              .HtmlAttributes(new { @style = "margin: -43px 0px 0px 0px;" })
      )
      .Editable(editable => editable.Mode(GridEditMode.InLine))
      .Name("SpeciesRetained")
      )

CWT的表单字段存在于此视图的父视图中，如下所示：

        <tr>
            <td style="border-top: 1px solid rgba(0, 0, 0, .1);" colspan="3">
                <h4>Retained</h4>
            </td>
        </tr>
        <tr>
            <td colspan="3" style="padding-bottom: 10px;">
                <table style="-moz-column-gap: 0; -webkit-column-gap: 0; border-collapse: collapse; column-gap: 0; width: 100%;">
                    <tr>
                        <th class="labelCell-smaller" style="width: 15%;">&nbsp;</th>
                        <th class="dataCell" style="width: 8%;">Total</th>
                        <th class="dataCell" style="padding-left: 12px; text-align: left;">Marked</th>
                        <th class="dataCell" style="padding-left: 12px; text-align: left;">Unmarked</th>
                        <th class="dataCell" style="padding-left: 12px; text-align: left;">CWT</th>
                    </tr>
                    <tr>
                        <td class="labelCell-smaller"></td>
                        <td class="dataCell">@Html.DisplayFor(model => model.RetainedTotal)</td>
                        <td class="dataCell">@(Html.Kendo().IntegerTextBoxFor(model => model.RetainedMarked).Min(0))</td>
                        <td class="dataCell">@(Html.Kendo().IntegerTextBoxFor(model => model.RetainedUnmarked).Min(0))</td>
                        <td class="dataCell">@(Html.Kendo().IntegerTextBoxFor(model => model.RetainedCWT).Min(0))</td>
                    </tr>
                </table>
            </td>
        </tr>

        <tr>
            <td colspan="3">
                <h5>Retained - CWT</h5>
            </td>
        </tr>
        <tr>
            <td colspan="3">
                @Html.Partial("SpeciesRetainedGrid", Model.SpeciesRetained)
            </td>
        </tr>

Answer 1

你可能会看一下this - 看起来很合适，即使有点过时了。

我附加了一个事件处理程序，它监听CWT IntegerTextBox的change（）。在那里，我将值作为你的页面大小传递。

$("#RetainedCWT").kendoIntegerTextBox({
change: function() {
  var grid = $("#SpeciesRetained").data("kendoGrid");
  grid.dataSource.pageSize(this.val());
  grid.refresh();
}

}）;