All geek questions in one place

How to use Kendo Grid Ajax Read event on request

I have a page with DropDownList and Telerik Kendo UI Grid Control. When the first temporary page opens, DropDownList does not have an element in it. When the user selects a value in DropDownList only then, the Grid should make an Ajax call to the server and upload the corresponding data.

My code works fine when the user selects an item in DropDownList, but the problem is that the first time the page opens. DropDownList has no value, and the Grid should not call the server.

My question is: how can I prevent the grid from making a call to the server if there is no element in DropDowList?

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

Thanks so much for your time and help.

+4
source share
1 answer

There is an autobind function for the grid. You can use this to determine whether to read when the page loads first. This should work (assuming selectedIndex determines if the dropdown value is selected):

 @(Html.Kendo().Grid<OrderViewModel>() .Name("Orders") .HtmlAttributes(new {style = "height: 500"}) .AutoBind(selectedIndex > 0) //rest of your grid declaration
+4
source

Source: https://habr.com/ru/post/1441391/

More articles:


All Articles