[Solved] How to implement loading panel for asp.net mvc telerik grid

[Pavan]

I have a radgrid some thing like this. I am making an Ajax call to controller

 <%=
        this.Html.Telerik().Grid<DailyPlannerGridRecord>().Name("TravelGrid").DataKeys(keys => keys.Add(c => c.Id)).
          Footer(false).ToolBar(
            commands =>
              {
                commands.Template(
                  "<a id='addGroundButton' class='t-button t-button-icontext t-grid-add' href='"
                  + this.ResolveClientUrl("~/") + "Ground/AddGround?selectedDate=" + this.Session["selectedDateEdit"]
                  +
                  "'><span class='t-icon t-add'></span>Add Ground</a> <a id='addAirButton' class='t-button t-button-icontext t-grid-add' href='"
                  + this.ResolveClientUrl("~/") + "Air/AddAir?selectedDate=" + this.Session["selectedDateEdit"]
                  +
                  "'><span class='t-icon t-add'></span>Add Air</a> <a id='addHotelButton' class='t-button t-button-icontext t-grid-add' href='"
                  + this.ResolveClientUrl("~/") + "Hotel/AddHotel?selectedDate=" + this.Session["selectedDateEdit"]
                  + "'><span class='t-icon t-add'></span>Add Hotel</a>");
              }).ClientEvents(
                events => events.OnDataBound("Grid_onDataBound_travel")).DataBinding(
                  dataBinding =>
                  dataBinding.Ajax().Select(
                    "TravelSelectAjaxEditing", "Travel", new { selectedDate = this.ViewData["selectedDate"] })).
          Columns(
            columns =>
              {
                columns.Bound(p => p.Image).Format(
                  "<img src='" + this.ResolveClientUrl("~/") + "Images/" + "{0}.PNG'/>").Encoded(false).Title("").Width(
                    24);
                columns.Bound(p => p.Line1).Title("Title").Template(p => p).ClientTemplate(
                  "<div style='background-Color:<#= BgColor #>'> <#= Line1 #></div>");


                columns.Bound(p => p.AttachmentIsPersonal).Format(
                  "<img src='" + this.ResolveClientUrl("~/") + "Images/" + "{0}.png'/>").Width(47).Title("").Encoded(
                    false);
                columns.Bound(p => p.AttachmentImage).Format(
                  "<img src='" + this.ResolveClientUrl("~/") + "Images/" + "{0}.png'/>").Width(30).Title("").Encoded(
                    false);
                columns.Template(m => m).ClientTemplate(
                  "<a href='" + this.ResolveClientUrl("~/")
                  +
                  "<#= TravelType #>/Edit<#= TravelType #>/<#= Id #>?selectedDate=<#= SelectedDate #>' class='t-button t-grid-edit t-button-icon t-button-icon t-button-bare'><span class='t-icon t-edit'></span></a><a href='"
                  + this.ResolveClientUrl("~/")
                  +
                  "<#= TravelType #>/DeleteItem/<#= Id #>?selectedDate=<#= SelectedDate #>' onClick='return onDelete()' class='t-button t-grid-delete t-button-icon t-button-icon t-button-bare'><span class='t-icon t-delete'></span></a>")
                  .Width(75).Title("Actions");
              }).Editable(editing => editing.Mode(GridEditMode.PopUp))%>

By default when the grid is loading it display the No Records Template.  Instead I want to have some loading panel until the request is processed.

Is it possible to do that. Demo would be really appreciated

[Petur Subev]

Hi Pavan,

To change the NoRecordsTemplate while loading the data via Ajax you can follow the instructions in this thread.

Regards,
Petur Subev
the Telerik team

[Pavan]

That is how I implemented it. I am just curious to know is it possible to have telerik rad ajax panel in mvc. If I include them they are server controls and I need to include scripmanager too. This totally negates the concept of MVC. Please let me know any work around

[Dimo]

Hi Pavan,

You can implement a custom loading panel by using the OnDataBinding and OnDataBound events of the MVC Grid. You should create and position some HTML element in the first event and remove it in the second event. For example:

Html.Telerik().Grid()
      .ClientEvents(e => e.OnDataBinding("showProgress").OnDataBound("hideProgress"))

function showProgress(e)
{
    $("<div class='my-loading'> </div>").insertBefore(this.firstChild);
}

function hideProgress(e)
{
    $(".my-loading").remove();
}

.my-loading
{
    position:absolute;
    z-index:1;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:#ff0;
    filter:alpha(opacity=50);
    opacity:.5;
}

Regards,
Dimo
the Telerik team