Loading overlays added to Series/Details, Upcoming and History views.

pull/2/head
Mark McDowall 14 years ago
parent 7deea327b8
commit 26b7bc5c53

@ -588,6 +588,7 @@
<Content Include="Content\Images\Indexers\Unknown.png">
<CopyToOutputDirectory>Always</CopyToOutputDirectory>
</Content>
<Content Include="Content\Images\Loading.gif" />
<Content Include="Content\Images\Plus.png" />
<Content Include="Content\Images\spin.gif" />
<Content Include="Content\Images\ui-bg_diagonals-small_0_aaaaaa_40x40.png" />

@ -0,0 +1,11 @@
function grid_bind(args) {
var id = this.attributes[0].textContent;
var parent = $('#' + id).parent();
parent.children('.grid-loader').stop().css("top", "0px").fadeIn('slow');
}
function grid_bound(args) {
var id = this.attributes[0].textContent;
var parent = $('#' + id).parent();
$('.grid-container').children('.grid-loader').stop().fadeOut('slow');
}

@ -11,6 +11,7 @@ History
}).Render();}
}
@section MainContent{
<div class="grid-container">
@{Html.Telerik().Grid<HistoryModel>().Name("history")
.TableHtmlAttributes(new { @class = "Grid" })
.Columns(columns =>
@ -41,4 +42,6 @@ History
//.Filterable()
//.ClientEvents(c => c.OnRowDataBound("onRowDataBound"))
.Render();}
<span class="grid-loader"><img src="@Url.Content( "~/Content/Images/Loading.gif" )" alt="Loading"/> Loading...</span>
</div>
}

@ -85,7 +85,7 @@
clientEvents.OnDataBound("grid_bound");
})
.Sortable(rows => rows.OrderBy(epSort => epSort.Add(c => c.EpisodeNumber).Descending()).Enabled(true))
.Footer(false)
.Footer(true)
.DataBinding(
d =>
d.Ajax().Select("_AjaxSeasonGrid", "Series",
@ -131,13 +131,5 @@
function episodeDetailExpanded(e) {
$console.log("OnDetailViewExpand :: " + e.masterRow.cells[1].innerHTML);
}
function grid_bind(args) {
$('.grid-container').children('.grid-loader').stop().css("top", "0px").fadeIn('slow');
}
function grid_bound(args) {
$('.grid-container').children('.grid-loader').stop().fadeOut('slow');
}
</script>
}

@ -60,14 +60,6 @@
.center();
}
function grid_bind(args) {
$('.grid-container').children('.grid-loader').stop().css("top", "0px").fadeIn('slow');
}
function grid_bound(args) {
$('.grid-container').children('.grid-loader').stop().fadeOut('slow');
}
function openSeasonEditor(seriesId, seriesName) {
windowElement = null;
windowElement = $.telerik.window.create({

@ -49,6 +49,7 @@
.Add("Notification.js")
.Add("jquery-tgc-countdown-1.0.js")
.Add("MicrosoftAjax.js")
.Add("MicrosoftMvcValidation.js"))
.Add("MicrosoftMvcValidation.js")
.Add("gridLoad.js"))
.Render();}
</html>

@ -9,8 +9,8 @@ Upcoming
}
@section MainContent{
<div id="yesterday">
<h2>
Yesterday</h2>
<h2>Yesterday</h2>
<div class="grid-container">
@{Html.Telerik().Grid<UpcomingEpisodeModel>().Name("Yesterday").NoRecordsTemplate(
"No watched shows aired yesterday")
.TableHtmlAttributes(new { @class = "Grid" })
@ -31,17 +31,24 @@ Upcoming
"<div><b>Overview: </b><#= Overview #></div>" +
"</fieldset>"
))
.ClientEvents(clientEvents =>
{
clientEvents.OnDataBinding("grid_bind");
clientEvents.OnDataBound("grid_bound");
})
.DataBinding(data => data.Ajax().Select("_AjaxBindingYesterday", "Upcoming"))
.Sortable(rows => rows.OrderBy(epSort => epSort.Add(c => c.AirDate).Ascending()).Enabled(true))
//.Pageable(c => c.PageSize(20).Position(GridPagerPosition.Both).Style(GridPagerStyles.PageInput | GridPagerStyles.NextPreviousAndNumeric))
//.Filterable()
//.ClientEvents(c => c.OnRowDataBound("onRowDataBound"))
.Render();}
<span class="grid-loader"><img src="@Url.Content( "~/Content/Images/Loading.gif" )" alt="Loading"/> Loading...</span>
</div>
</div>
<br />
<div id="today">
<h2>
Today</h2>
<h2>Today</h2>
<div class="grid-container">
@{Html.Telerik().Grid<UpcomingEpisodeModel>().Name("Today").NoRecordsTemplate("No watched shows airing today.")
.TableHtmlAttributes(new { @class = "Grid" })
.Columns(columns =>
@ -61,14 +68,21 @@ Upcoming
"<div><b>Overview: </b><#= Overview #></div>" +
"</fieldset>"
))
.ClientEvents(clientEvents =>
{
clientEvents.OnDataBinding("grid_bind");
clientEvents.OnDataBound("grid_bound");
})
.DataBinding(data => data.Ajax().Select("_AjaxBindingToday", "Upcoming"))
.Sortable(rows => rows.OrderBy(epSort => epSort.Add(c => c.AirDate).Ascending()).Enabled(true))
.Render();}
<span class="grid-loader"><img src="@Url.Content( "~/Content/Images/Loading.gif" )" alt="Loading"/> Loading...</span>
</div>
</div>
<br />
<div id="tomorrow">
<h2>
Tomorrow</h2>
<h2>Tomorrow</h2>
<div class="grid-container">
@{Html.Telerik().Grid<UpcomingEpisodeModel>().Name("Tomorrow").NoRecordsTemplate(
"No watched shows airing tomorrow")
.TableHtmlAttributes(new { @class = "Grid" })
@ -89,14 +103,21 @@ Upcoming
"<div><b>Overview: </b><#= Overview #></div>" +
"</fieldset>"
))
.ClientEvents(clientEvents =>
{
clientEvents.OnDataBinding("grid_bind");
clientEvents.OnDataBound("grid_bound");
})
.DataBinding(data => data.Ajax().Select("_AjaxBindingTomorrow", "Upcoming"))
.Sortable(rows => rows.OrderBy(epSort => epSort.Add(c => c.AirDate).Ascending()).Enabled(true))
.Render();}
<span class="grid-loader"><img src="@Url.Content( "~/Content/Images/Loading.gif" )" alt="Loading"/> Loading...</span>
</div>
</div>
<br />
<div id="week">
<h2>
Future Forecast</h2>
<h2>Future Forecast</h2>
<div class="grid-container">
@{Html.Telerik().Grid<UpcomingEpisodeModel>().Name("Week").NoRecordsTemplate(
"No watched shows airing in the next week...")
.TableHtmlAttributes(new { @class = "Grid" })
@ -117,8 +138,15 @@ Upcoming
"<div><b>Overview: </b><#= Overview #></div>" +
"</fieldset>"
))
.ClientEvents(clientEvents =>
{
clientEvents.OnDataBinding("grid_bind");
clientEvents.OnDataBound("grid_bound");
})
.DataBinding(data => data.Ajax().Select("_AjaxBindingWeek", "Upcoming"))
.Sortable(rows => rows.OrderBy(epSort => epSort.Add(c => c.AirDate).Ascending()).Enabled(true))
.Render();}
<span class="grid-loader"><img src="@Url.Content( "~/Content/Images/Loading.gif" )" alt="Loading"/> Loading...</span>
</div>
</div>
}

Loading…
Cancel
Save