Conditional Filter on Line 1

[Joel]

I have the following grid.  However, I was given the requirement that we shouldn't have the search exposed full time.  We should only display it when we have more than 1 page worth of data.  How do I accomplish this?

@using Portal.Configuration
@using Portal.Models

@{
    ViewData["Title"] = "Customers";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>Customers</h2>

<p>
    <a asp-action="Create">Create New</a>
</p>
<div class="row">
    <div class="col-xs-18 col-md-12">
        @(Html.Kendo().Grid<Customer>()
                      .Name("grid")
                      .Columns(columns =>
                      {
                          columns.Command(command => command
                              .Custom("Detail")
                              .Click("goDetail"))
                              .Width(Glossary.ButtonWidth);
                          columns.Bound(p => p.Name)
                              .Filterable(ftb => ftb.Cell(cell => cell.Operator("contains")
                                  .ShowOperators(false)
                                  .SuggestionOperator(FilterType.Contains)));
                          columns.Bound(p => p.ProfileId)
                              .Filterable(ftb => ftb.Cell(cell => cell.Operator("contains")
                                  .ShowOperators(false)
                                  .SuggestionOperator(FilterType.Contains)));
                          columns.Bound(p => p.DatabaseStatus.Name).Title("Database Status")
                              .Filterable(ftb => ftb.Cell(cell => cell.Operator("contains")
                                  .ShowOperators(false)
                                  .SuggestionOperator(FilterType.Contains)));
                          columns.Bound(p => p.AddTimestamp).Format("{0:MM/dd/yyyy}");
                      })
                      .Pageable()
                      .Sortable()
                      .Scrollable()
                      .Filterable(ftb => ftb.Mode(GridFilterMode.Row))
                      .HtmlAttributes(new { style = "height:550px;" })
                      .DataSource(dataSource => dataSource
                          .Ajax()
                          .PageSize(20)
                          .Read(read => read.Action("IndexJson", "Customers"))
                      )
        )

        <script type="text/javascript">

            function goDetail(e) {
                e.preventDefault();
                var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
                window.location.href = '@Url.Action("Details", "Customers")/' + dataItem.Id;
            }

            function error_handler(e) {
                if (e.errors) {
                    var message = "Errors:\n";
                    $.each(e.errors,
                        function (key, value) {
                            if ('errors' in value) {
                                $.each(value.errors,
                                    function () {
                                        message += this + "\n";
                                    });
                            }
                        });
                    alert(message);
                }
            }
        </script>
    </div>
</div>

[Georgi]

Hi Joel,

Based on the provided information I assume that the requirement is to hide the filter row when the total of the data is less than the page size. Please correct me if I am wrong.

A possible solution is to hide the filter row within the DataBound event handler when the total is less than the pageSize.

e.g.

// attach event handler

.Events(x=> x.DataBound("onDataBound"))


// event handler

    function onDataBound(e) {
        if (this.dataSource.total() <= this.dataSource.pageSize()) {
            this.wrapper.find('.k-filter-row').hide();
        } else {
            this.wrapper.find('.k-filter-row').show();
        }
    }

Regards,
Georgi
Progress Telerik