How to control Max Rows in KendoUI Grid based on value in another control?

Question

Given the following form:

Is there a way I can lock the maximum row count of the grid based on the value in the CWT box above it?

This is using MVC Razor, with this code to generate the grid:

<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")
      )

The form field for CWT exists in the parent view to this view, and looks like:

        <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

You might have a look at this--seems appropriate even though a little dated.

I'd attach an event handler that listens to change() for your CWT IntegerTextBox. In that I'd pass in the value as your pagesize.

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

});