Use AutoBind and ServerOperation in same grid

[Wade]

Here is what I am trying to do.   I have a grid that is using the syntax @(Html.Kendo().Grid.... (razor).   We want to re-use the grid for different purposes. The columns are the same, the paging is the same etc.   The only difference is sometimes I want to pass in the dataset to bind to and at other times I want to make server calls to get results.

Scenario #1 - we have a predefined list of items we want to display.  The server call to render the page populates the model with the results and the grid should render those rows.  Additionally the sorting, filtering etc should not make a call back to the server since we have all the rows we need.  I can accomplish this by setting the .ServerOperation(false) parameter on the datasource.

Scenario #2 - we have a search page that has some inputs on it that allows us to enter data to reduce our results set.   When we first display the page we display the empty grid and do not want to make the ajax call to populate the grid, which can be accomplished by setting the AutoBind(false) property on the grid.  Then when we click the search button we invoke the grid.dataSource.Read() method. 

So the issue is that I get an error message for scenario 1 telling me 'Cannot set AutoBind if widget is populated during initialization'

I don't quite understand why this error is being thrown.  Seems like we should be able to configure that in this scn

What I would like to do is be able to either override or add configuration options to the grid at the time it is being rendered.   It is preferrable to not create the entire grid in javascript, nor do I really want to create 2 seperate grids since everything is identical with the exception of how the data is bound.  Perfect world would be able to send in parameters as part of the model to tell the grid how to bind.  Right now I have Model.AutoBind and Model.ServerOperation,  however with the limitation I have run into this will not work.    It seems like we should be able to set the AutoBind flag to false

Any suggestions on how to accomplish this?

@(Html.Kendo().Grid<Novus.MediaAccounting.Models.Buys.BuyModel>(Model.GridData)
      .Name(Model.GridName)
      .AutoBind(Model.AutoBind)
      .Deferred()
      .Resizable(resizing => resizing.Columns(true))
      .Scrollable()
      .Columns(columns =>
      {
        columns.Bound(o => o.Id)
          .ClientTemplate("<input name='selectedBuys' id='selectedBuys' type='checkbox' value='#= Id #' onclick='gridRowSelected(this);' />")
          .Template(
          @<text>
                        <input name="selectedBuys" type="checkbox" value="@item.Id" onclick="gridRowSelected(this);" />
                    </text>)
          .HeaderTemplate("<input type='checkbox' title='check all records' id='checkAll' onclick='gridCheckAll(\"BuysGrid\", this);' />")
          .Width(35)
          .HeaderHtmlAttributes(new { style = "text-align:center" })
          .HtmlAttributes(new { style = "text-align:center" })
          .Title(string.Empty)
          .Filterable(false)
          .Sortable(false);
        columns.Bound(o => o.Id)
          .ClientTemplate("<div class='btn-group'><a class='btn dropdown-toggle' data-toggle='dropdown' href='javascript:void(0)'>Action<span class='caret'></span></a>"
                          + "<ul class='dropdown-menu'>"
                          + "# if (ClientInvoicingStatusDisplay != 'Invoiced') {#"
                            + "<li><a href='" + Url.Action("EditBuy", "Buy") + "?buyId=#= Id #'" + "><i class='icon-pencil'></i> Edit Buy</a></li>"
                          + "#}#"
                          + "<li><a href='" + Url.Action("ViewDetails", "Buy") + "?buyId=#= Id #'" + "><i class='icon-eye-open'></i> View Details</a></li>"
                          + "<li><a href='" + Url.Action("BuyHistory", "Audit") + "?buyId=#= Id #'" + "><i class='icon-tasks'></i> Audit History</a></li>"
                          + "</ul></div>")
          .Template(
          @<text>
                            <div class="btn-group">
                                <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
                                    Action
                                    <span class="caret"></span>
                                </a>
                                <ul class="dropdown-menu">
                                    @if (item.ClientInvoicingStatusDisplay != "Invoiced")
                  {
                                        <li><a href="@Url.Action("EditBuy", "Buy", new { buyId = @item.Id })"><i class="icon-pencil"></i> Edit Buy</a></li>
                  }
                                    <li><a href="@Url.Action("ViewDetails", "Buy", new { buyId = @item.Id })"><i class="icon-eye-open"></i> ViewDetails</a></li>
                                    <li><a href="@Url.Action("BuyHistory", "Audit", new { buyId = @item.Id })"><i class="icon-tasks"></i> Audit History</a></li>
                                </ul>
                            </div>
                    </text>)
          .Title("")
          .Width(100)
          .Filterable(false)
          .Sortable(false)
          .HtmlAttributes(new { style = "overflow: visible;" });
        columns.Bound(o => o.BuyId)
          .Width(150);
        columns.Bound(o => o.BillMonth)
          .Width(80);
        columns.Bound(o => o.StatusDisplay)
          .Width(125);
        columns.Bound(o => o.ClientInvoicingStatusDisplay)
          .Width(125);
        columns.Bound(o => o.Payor)
          .Width(175);
        columns.Bound(o => o.MediaTypeDisplay)
          .Width(150);
        columns.Bound(o => o.ClientNetRate)
          .Width(100)
          .Format("{0:c}")
          .HtmlAttributes(new { style = "text-align: right;" });
        columns.Bound(o => o.PriorInvoicedAmount)
          .Width(110)
          .Format("{0:c}")
          .HtmlAttributes(new { style = "text-align: right;" });
        columns.Bound(o => o.NovusCompany)
          .Width(155);
        columns.Bound(o => o.InvoiceDate)
          .Width(110)
          .Format("{0:MM/dd/yyyy}");
      })
      .Filterable()
        .Sortable(sorting => sorting.SortMode(GridSortMode.MultipleColumn))
        .Pageable(page => page.PageSizes(new[] { 50, 100, 200 }).Refresh(true))
      .BindTo(Model.GridData)
      .DataSource(dataSource => dataSource
        .Ajax()
        .ServerOperation(Model.ServerOperation)
        .Read(read => read
          .Action(Model.Action, Model.Controller)
          .Data(Model.JavascriptDataFunction))
        //.Model(model => model.Id(p => p.Id))
        .Sort(sort => sort.Add(c => c.InvoiceDate))
        .PageSize(50)
      )
    )

Thank you,
Wade Sharp

[Daniel]

Hello Wade,

The Grid does not support the data to be set initially and to prevent the initial binding. In order to show an empty Grid and not make a request you should use the BindTo method or the GridBuilder to set the data initial data only when AutoBind is true e.g.

@{
    var gridBuilder = Html.Kendo().Grid<Novus.MediaAccounting.Models.Buys.BuyModel>()
        .Name(Model.GridName)
        ...
    ;

    if (Model.AutoBind)
    {
        gridBuilder.BindTo(Model.GridData);
    }
    else
    {
        gridBuilder.AutoBind(Model.AutoBind);
    }

    gridBuilder.Render();
}

Regards,
Daniel
the Telerik team