I have multiple grids loading on a page. I want to hide the entire page until all grids are loaded. The grids are dynamically loaded based off of a table. 

 In a partial view I do this for each category:

<div id="@gridName" style="display:none;"></div>            
            <script type="text/javascript">
    $(document).ready(function() {
        $("#@gridName").kendoGrid({
            dataSource: new kendo.data.DataSource({
                schema: {
                    model: {
                        id: "CostSheetDetailId",
                        fields: {
                            CostSheetDetailId: { editable: false },
                            FriendlyName: { nullable: false, type: "string", defaultValue: "" },
                            EquipmentModelId: { editable: true, nullable: false},
                            Unit: { type: "number", editable: true, defaultValue: "0" },
                            Price: { type: "number", editable: true, defaultValue: "0" },
                            Budget: { type: "number", editable: true, defaultValue: "0" },
                            Actual: { type: "number" },
                            CostSheetCategoryId: {nullable: false, type: "number", defaultValue: @Model.Category.CostSheetCategoryId },
                            CostSheetId: { nullable: false, type: "number", defaultValue: @Model.CostSheetId },
                            Tooltip: { nullable: true, type: "string" }
                        }
                    },
                    errors: "errorMsg"
                },
                error: function (e) {
                    if(e.errors !== undefined ) {
                        toastr.options = {
                            "positionClass": "toast-bottom-full-width"
                        };
                        toastr.error('There is an error: ' + e.errors, 'Uh Oh!');
                    }

                    this.cancelChanges();
                },
                transport: {
                    read: {
                        url: "/CostSheet/CostSheetCategoryDetailGet",
                        dataType: "json",
                        data: {
                            Id: @Model.CostSheetId,
                            CostSheetCategoryId: "@Model.Category.CostSheetCategoryId",
                            IsFixed: "@Model.Category.IsFixed"
                                    }
                                },
                                create: {
                                    url: "/CostSheet/CostSheetCategoryDetailCreate",
                                    dataType: "json",
                                    type: "POST",
                                    data: {
                                        __RequestVerificationToken: getAntiForgeryToken()
                                    }
                                },
                                update: {
                                    url: "/CostSheet/CostSheetCategoryDetailEdit",
                                    dataType: "json",
                                    type: "POST",
                                    data: {
                                        __RequestVerificationToken: getAntiForgeryToken()
                                    }
                                },
                                destroy: {
                                    url: "/CostSheet/CostSheetCategoryDetailDelete",
                                    dataType: "json",
                                    type: "POST",
                                    data: {
                                        __RequestVerificationToken: getAntiForgeryToken()
                                    }
                                },
                                parameterMap: function (data, operation) {
                                    if (operation === "update") {
                                        data.CreateDate = _dateToString(data.CreateDate);
                                        data.LastModDate = _dateToString(data.LastModDate);
                                    }
                                    return data;
                                }
                            }
                        }),
                        toolbar: ["create"],
                        sortable: true,
                        columns: [
                            { field: "EquipmentModelId", title: "Name", template: "# if (Tooltip != null) { #" +
                                    "<span data-toggle=\"tooltip\" title=\"#=Tooltip#\">#=FriendlyName#</span>" +
                                "# } else { #" +
                                    "<span data-toggle=\"tooltip\" title=\"#=Tooltip#\">#=FriendlyName#</span>" +
                                "# } #", editor: equipmentModelDropDownEditor },
                            { field: "Unit", title: "Unit", width: "180px", editor: unitNumericEditor },
                            { field: "Price", title: "Price", width: "180px", editor: priceNumericEditor, format: "{0:c}" },
                            { field: "Budget", title: "Budget", width: "180px", editor: budgetStaticEditor, format: "{0:c}", },
                            { field: "Actual", title: "Actual", widht: "180px" },
                            { command: ["edit", "destroy"], title: "&nbsp;", width: "211px" }
                        ],
                        editable: "inline",
                        dataBound: function(e) {
                            $('#@gridName').slideDown("slow");
                        }
                    });
                });
            </script>

How do I keep the page blank until all of them have loaded?

So I implemented inline editing on my grid, and it all works fine and saves fine. The only problem is that when I click the edit button, my drop downs start off on Index 0 (which is blank) but I want them to start on the value that was on the grid initially. So for example if I had two Rate Types, "Regular", and "Discount", and suppose that my row's rate type is "Discount". When I click the edit button, I expect the Dropdown to be defaulted to "Discount" which was the row's initial value, but instead it is just a blank value at index 0. Please help! Here is the code :

Gird :

      @(Html.Kendo().Grid<CirculationDatabase.DAL.Publication>()
            .Name("PubGrid")

            .Columns(columns =>
            {
                
                columns.Bound(p => p.PubName).Title("Publication").Width("300px").HeaderHtmlAttributes(new { style = "font-size:13px;" });
            })
           
            .Pageable()
            .Sortable()
            .Scrollable()
            .ClientDetailTemplateId("template")
            .HtmlAttributes(new { style = "height:730px;" })
            
            .DataSource(dataSource => dataSource
                .Ajax()
                .PageSize(20)
                .Events(events => events.Error("error_handler"))
                .Model(model => model.Id(p => p.Publication_ID))
                .Create(update => update.Action("EditingPopup_Create", "Grid"))
                .Read(read => read.Action("ReturnPublicationInfo", "Publication"))
                .Update(update => update.Action("EditingPopup_Update", "Grid"))
                .Destroy(update => update.Action("EditingPopup_Destroy", "Grid"))
            )
            
            .Events(events => events.DataBound("dataBound"))
           
        )

            <script id="template" type="text/kendo-tmpl">
                 @(Html.Kendo().TabStrip()
            .Name("tabStrip_#=Publication_ID#")
            .SelectedIndex(0)
            .Animation(animation => animation.Open(open => open.Fade(FadeDirection.In)))
            .Items(items =>
            {
                items.Add().Text("Domestic").Content(@<text>
             @(Html.Kendo().Grid<CirculationDatabase.DAL.proc_getPubGrid>()
                        .Name("subDomestic_#=Publication_ID#")
                        .Columns(columns =>
                        {
                            columns.Bound(x => x.PriceAmount).ClientTemplate("$" + "\\#=PriceAmount\\#");
                            columns.Bound(x => x.Rate).EditorTemplateName("rateEditor");
                            columns.Bound(x => x.DurationPeriod).Title("Duration (Months)").EditorTemplateName("durationEditor");
                            columns.Command(x => x.Edit());

                        })
                        
                           .Editable(editable => editable.Mode(GridEditMode.InLine))
                        
                        .DataSource(dataSource => dataSource
                            .Ajax()
                          
                            .PageSize(5)
                           .Events(events => 
                               {
                                   events.Error("error_handler");
                                       events.RequestEnd("onRequestEnd");
                                      
                               })
                .Model(model =>
                            {
                                model.Id(p => p.Price_ID);
                                model.Id(i => i.Duration_ID);
                                model.Field(i => i.DurationPeriod).DefaultValue(ViewData["DurationPeriod"] as CirculationDatabase.DAL.proc_getPubGrid);
                              
                            })
                .Create(update => update.Action("EditingPopup_Create", "Grid"))
                .Read(read => read.Action("ReturnPublicationInfoSubgrid", "Publication", new { pubID = "#=Publication_ID#", type = "Domestic" }))
                .Update(update => update.Action("UpdatePublicationInfo", "Publication").Data("dropDownValues"))
                .Destroy(update => update.Action("EditingPopup_Destroy", "Grid"))

                                )
                        
                        .Pageable()
                        .Sortable()
                        .ToClientTemplate())
               </text>);

                items.Add().Text("Foreign").Content(@<text>
             @(Html.Kendo().Grid<CirculationDatabase.DAL.proc_getPubGrid>()
                        .Name("subForeign_#=Publication_ID#")
                        .Columns(columns =>
                        {
                            columns.Bound(x => x.PriceAmount).ClientTemplate("$" + "\\#=PriceAmount\\#");
                            columns.Bound(x => x.Rate).EditorTemplateName("rateEditor");
                            columns.Bound(x => x.DurationPeriod).Title("Duration (Months)").EditorTemplateName("durationEditor");
                            columns.Command(x => x.Edit());

                        })

                         .Editable(editable => editable.Mode(GridEditMode.InLine))

                        .DataSource(dataSource => dataSource
                            .Ajax()
                           .PageSize(5)
                           .Model(model =>
                                       {
                                           model.Id(i => i.Price_ID);
                                        
                                 })
                              
                           .Events(events => 
                               {
                                   events.Error("error_handler");
                                       events.RequestEnd("onRequestEnd");
                               })
                            .Create(update => update.Action("EditingPopup_Create", "Grid"))
                            .Read(read => read.Action("ReturnPublicationInfoSubgrid", "Publication", new { pubID = "#=Publication_ID#", type = "Foreign" }))
                            .Update(update => update.Action("UpdatePublicationInfo", "Publication").Data("dropDownValues"))
                            .Destroy(update => update.Action("EditingPopup_Destroy", "Grid"))
                                )
                        .Pageable()
                        .Sortable()
                        .ToClientTemplate())
               </text>);
                    
            }).ToClientTemplate())
              
                </script>

 Edit Template :

@model CirculationDatabase.DAL.proc_getPubGrid


    @(Html.Kendo().DropDownList()
    .Name("Rate") 
    .DataTextField("Rate") 
    .DataValueField("Rate_ID") 
   
    .DataSource(source =>
    {
        source.Custom()
              .ServerFiltering(true)
              
              .Type("aspnetmvc-ajax") //Set this type if you want to use DataSourceRequest and ToDataSourceResult instances
              .Transport(transport =>
              {
                  transport.Read("populateRateDDL", "Publication");
                  
              })
              .Schema(schema =>
              {
                  schema.Data("Data") //define the [data](http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#configuration-schema.data) option
                        .Total("Total"); //define the [total](http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#configuration-schema.total) option
              });
    })
)

Controller :

using CirculationDatabase.DAL;
using Kendo.Mvc.UI;
using Kendo.Mvc.Extensions;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Data;

namespace CirculationDatabase.Controllers
{
   

    public class PublicationController : Controller
    {
        private readonly EntitiesModel db = new EntitiesModel();
        public ActionResult Publications()
        {

            if (Request.IsAuthenticated)
            {
                return View();
            }
            else
            {
                return RedirectToAction("Login", "Login");
            }
        }

        public ActionResult ReturnPublicationInfo([DataSourceRequest] DataSourceRequest gridRequest)
        {


            IList<proc_getPubs> myViewModels = new List<proc_getPubs>();
           

                foreach (proc_getPubs pub in db.Proc_getPubs())
                {
                    myViewModels.Add(pub);
                }
            

            return Json(myViewModels.ToDataSourceResult(gridRequest), JsonRequestBehavior.AllowGet);
        }

        public ActionResult ReturnPublicationInfoSubgrid([DataSourceRequest] DataSourceRequest gridRequest, int pubID, string type)
        {


            IList<proc_getPubGrid> myViewModels = new List<proc_getPubGrid>();
           
                foreach (proc_getPubGrid pub in db.Proc_getPubGrid(pubID, type))
                {
                    myViewModels.Add(pub);
                }
          

            return Json(myViewModels.ToDataSourceResult(gridRequest), JsonRequestBehavior.AllowGet);
        }
        
        
        public ActionResult populateRateDDL([DataSourceRequest] DataSourceRequest dropDownRequest)
        {
            IList<RateType> myViewModels = new List<RateType>();
           
                foreach (RateType rate in db.ExecuteStoredProcedure<RateType>("proc_getRateType", null))
                {
                    RateType r = new RateType()
                    {
                        Rate_ID = rate.Rate_ID,
                        Rate = rate.Rate
                    };
                    myViewModels.Add(r);
                }
          

            return Json(myViewModels.ToDataSourceResult(dropDownRequest), JsonRequestBehavior.AllowGet);
        }

        [HttpPost]
        public ActionResult populateDurationDDL([DataSourceRequest] DataSourceRequest dropDownRequest)
        {
            IList<Duration> myViewModels = new List<Duration>();

                foreach (Duration duration in db.ExecuteStoredProcedure<Duration>("proc_getDuration", null))
                {
                    Duration dur = new Duration()
                    {
                        Duration_ID = duration.Duration_ID,
                        DurationPeriod = duration.DurationPeriod
                    };
                    myViewModels.Add(dur);
                }
           
            
            return Json(myViewModels.ToDataSourceResult(dropDownRequest), JsonRequestBehavior.AllowGet);
        }

       [AcceptVerbs(HttpVerbs.Post)]
        public ActionResult UpdatePublicationInfo([DataSourceRequest] DataSourceRequest request, Price newPrice, string durationValue, string rateValue)
        {
            if (ModelState.IsValid)
            {

                Price priceToUpdate = db.Prices.FirstOrDefault(s => s.Price_ID == newPrice.Price_ID);
                priceToUpdate.Duration_ID = Convert.ToInt32(durationValue);
                priceToUpdate.Rate_ID = Convert.ToInt32(rateValue);
                priceToUpdate.PriceAmount = newPrice.PriceAmount;
                db.SaveChanges();
            }
            
            return Json(new[] { newPrice }.ToDataSourceResult(request, ModelState));
        }

        protected override void Dispose(bool disposing)
        {
            db.Dispose();
            base.Dispose(disposing);
        }

       
     
    }
}

Entity :

 public partial class proc_getPubGrid
{
private int _publication_ID;
public virtual int Publication_ID
{
get
{
return this._publication_ID;
}
set
{
this._publication_ID = value;
}
}

private string _pubName;
public virtual string PubName
{
get
{
return this._pubName;
}
set
{
this._pubName = value;
}
}

private decimal? _priceAmount;
public virtual decimal? PriceAmount
{
get
{
return this._priceAmount;
}
set
{
this._priceAmount = value;
}
}

private int? _durationPeriod;
public virtual int? DurationPeriod
{
get
{
return this._durationPeriod;
}
set
{
this._durationPeriod = value;
}
}

private string _rate;
public virtual string Rate
{
get
{
return this._rate;
}
set
{
this._rate = value;
}
}

private int? _duration_ID;
public virtual int? Duration_ID
{
get
{
return this._duration_ID;
}
set
{
this._duration_ID = value;
}
}

private int? _rate_ID;
public virtual int? Rate_ID
{
get
{
return this._rate_ID;
}
set
{
this._rate_ID = value;
}
}

private int? _price_ID;
public virtual int? Price_ID
{
get
{
return this._price_ID;
}
set
{
this._price_ID = value;
}
}

}

Hi, 

I want to make expand arrow on grid just to expand child items not to select this row.

I was trying to attach to event "detailExpand" but there I can only clear selection which I don't want to happen. 

When using the Kendo Grid with a virtual scroller I have noticed that when I roll the wheel on my Microsoft Mouse one click there is no action.  On the second click It will roll 4 rows.

Comparatively, in the Silverlight RadGrid View, the scroller moves 2 rows on each mouse click turn.

Is there a setting, in the Kendo grid to allow the mouse wheel to be more responsive?

I want to apply [ChildActionOnly] attribute to the action method used by kendo ui grid DataSource as in 

.DataSource(dataSource => dataSource           
            .Ajax()
            .Read(read => read.Action("Read", "Conrtoller")) 

but when I apply [ChildActionOnly] to Read(), everytrhing stops working

Hi,

I'm struggling to get a combination between a stackes bar and line chart. I have seen the examples (http://demos.telerik.com/kendo-ui/bar-charts/multiple-axes) basicly this is what I need. The only problem that I have json datasource (from a webapi).

How can I accomplish this.

> here is something needed I presume

Thanks