How to use Kendo Grid Ajax Read event on demand

[Vlad]

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>

[Vladimir Iliev]

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