This is a migrated thread and some comments may be shown as answers.

How to use Kendo Grid Ajax Read event on demand

1 Answer 558 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Vlad
Top achievements
Rank 1
Vlad asked on 22 Oct 2012, 10:41 PM

Hi All,

I have page with DropDownList and Telerik's Kendo UI Grid Control. When first time page is opened DropDownList has no item selected in it. When user selects value in DropDownList only then Grid should make Ajax call to the server and load corresponding data.

My code works fine when user selects item in DropDownList, but the problem is that first time when page is opened I there is no value in DropDownList and Grid should not make a call to the server.

My question is how can I prevent grid not to make a call to the server if there is no item selected in DropDowList?

Thanks a lot.

<div>
@Html.Kendo().DropDownList().Name("broker").DataTextField("GrandParentName").DataValueField("Id").BindTo(Model).SelectedIndex(@selectedIndex).Events(e => e.Change("brokerChanged"))
    </div>
 
    @(Html.Kendo().Grid<OrderViewModel>()
          .Name("Orders")
          .HtmlAttributes(new {style = "height: 500"})
          .Columns(c =>
              {
                  c.Bound(p => p.Id)
                      .Width(50)
                      .Title("")
                      .Sortable(false)
                      .IncludeInMenu(false)
                      .ClientTemplate((@Html.ActionLink("Edit", "Index", "Splits", new {Id = "OrderId"}, null).ToHtmlString().Replace("OrderId", "#=Id#")));
                  c.Bound(p => p.TradeDate)
                      .Title("Trd Dt")
                      .Format("{0:d}")
                      .Width(90)
                      .HtmlAttributes(new {style = "text-align: right"});
                  c.Bound(p => p.Price)
                      .Title("Price")
                      .Format("{0:n}")
                      .Width(100)
                      .HtmlAttributes(new {style = "text-align: right"});
                  c.Bound(p => p.Status)
                      .Title("Status");
                  c.Bound(p => p.Notional)
                      .Title("Notional")
                      .Format("{0:n}")
                      .HtmlAttributes(new {style = "text-align: right"});
              })
          .Sortable()
          .Scrollable()
          .ColumnMenu()
          .Pageable(x =>
              {
                  x.Enabled(true);
                  x.PreviousNext(false);
                  x.PageSizes(false);
                  x.Info(true);
                  x.Input(false);
                  x.Numeric(false);
                  x.Refresh(true);
                  x.Messages(y => y.Display("{2} Order(s)"));
              })
          .Resizable(resize => resize.Columns(true))
          .Reorderable(reoder => reoder.Columns(true))
          .DataSource(ds => ds.Ajax()
                            .ServerOperation(false)
                            .Read(read => read.Action("Action", "MyController").Data("selectedBrokerId")))
          )
 
<script type="text/javascript">
    function brokerChanged() {
        var grid = $("#Orders").data("kendoGrid");
        grid.dataSource.read();
    }
 
    function selectedBrokerId() {
        var obj = { brokerId: $("#broker").data("kendoDropDownList").value() };
 
        return obj;
    }
</script>

1 Answer, 1 is accepted

Sort by
0
Vladimir Iliev
Telerik team
answered on 24 Oct 2012, 06:15 AM
Hi Vlad,


To disable the initial load you should disable the Autobind configuration option of the Grid:

.AutoBind(false)
.DataSource(dataSource => dataSource       
        .Ajax()...

 
Kind Regards,
Vladimir Iliev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
Grid
Asked by
Vlad
Top achievements
Rank 1
Answers by
Vladimir Iliev
Telerik team
Share this question
or