chore(demos): modify Notification and Window examples (#26)
This commit is contained in:
Neli Kondova
GitHub
Родитель
ed48f37829
Коммит
07eb2ee2c9
|
|
@ -0,0 +1,13 @@
|
|||
using System;
|
||||
using System.Collections.Generic;
|
||||
using System.Linq;
|
||||
using System.Threading.Tasks;
|
||||
|
||||
namespace Telerik.Examples.RazorPages.Models
|
||||
{
|
||||
public class NotificationModel
|
||||
{
|
||||
public string Text { get; set; }
|
||||
public DateTime Time { get; set; }
|
||||
}
|
||||
}
|
||||
|
|
@ -9,52 +9,49 @@
|
|||
|
||||
<h1>NotificationIndex</h1>
|
||||
|
||||
<button id="showNotification" class="k-button">Show notification</button>
|
||||
<button id="hideAllNotifications" class="k-button">Hide All Notifications</button>
|
||||
|
||||
@(Html.Kendo().Notification()
|
||||
.Name("notification")
|
||||
.Width("12em")
|
||||
.Events(ev => ev.Show("onShow").Hide("onHide"))
|
||||
.Width("20em")
|
||||
.Templates(t =>
|
||||
{
|
||||
t.Add().Type("time")
|
||||
.ClientTemplate("<div style='padding: .6em 1em'>Time is: <span class='timeWrap'>#: time #</span></div>");
|
||||
t.Add().Type("info")
|
||||
.ClientTemplate("<div>TEXT: <span class='custom-style'>#: text #</span> </div> <div>TIME: <span class='custom-style'>#: time #</span> </div>");
|
||||
})
|
||||
)
|
||||
|
||||
<div class="demo-section">
|
||||
<p>
|
||||
<button id="showNotification" class="k-button">Show notification</button>
|
||||
|
||||
<button id="hideAllNotifications" class="k-button">Hide All Notifications</button>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
|
||||
function onShow(e) {
|
||||
console.log("event :: show (" + $(e.element).find(".timeWrap").text() + ")");
|
||||
}
|
||||
|
||||
function onHide(e) {
|
||||
console.log("event :: hide (" + $(e.element).find(".timeWrap").text() + ")");
|
||||
}
|
||||
|
||||
$(document).ready(function () {
|
||||
|
||||
var notification = $("#notification").data("kendoNotification");
|
||||
|
||||
$("#showNotification").click(function () {
|
||||
var d = new Date();
|
||||
notification.show({ time: kendo.toString(d, 'HH:MM:ss.') + kendo.toString(d.getMilliseconds(), "000") }, "time");
|
||||
$.ajax({
|
||||
url: '/Notification/NotificationIndex?handler=Read',
|
||||
type: "POST",
|
||||
contentType: "application/json; charset=utf-8",
|
||||
headers: {
|
||||
RequestVerificationToken: $('input:hidden[name="__RequestVerificationToken"]').val()
|
||||
},
|
||||
dataType: "json",
|
||||
success: function (response) {
|
||||
// Show notification based on the returned data from the server
|
||||
var notification = $("#notification").getKendoNotification();
|
||||
notification.show({
|
||||
text: response.Text,
|
||||
time: kendo.toString(new Date(response.Time), "dd MMMM yy hh:mm tt")
|
||||
}, "info");
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
$("#hideAllNotifications").click(function () {
|
||||
var notification = $("#notification").getKendoNotification();
|
||||
notification.hide();
|
||||
});
|
||||
});
|
||||
</script>
|
||||
<style>
|
||||
.k-notification {
|
||||
color: white;
|
||||
.custom-style {
|
||||
font-weight: bold;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@ using System.Linq;
|
|||
using System.Threading.Tasks;
|
||||
using Microsoft.AspNetCore.Mvc;
|
||||
using Microsoft.AspNetCore.Mvc.RazorPages;
|
||||
using Telerik.Examples.RazorPages.Models;
|
||||
|
||||
namespace Telerik.Examples.RazorPages.Pages.Notification
|
||||
{
|
||||
|
|
@ -13,5 +14,15 @@ namespace Telerik.Examples.RazorPages.Pages.Notification
|
|||
{
|
||||
|
||||
}
|
||||
|
||||
public JsonResult OnPostRead()
|
||||
{
|
||||
NotificationModel model = new NotificationModel()
|
||||
{
|
||||
Text = "Notification Text",
|
||||
Time = DateTime.Now
|
||||
};
|
||||
return new JsonResult(model);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -12,14 +12,8 @@
|
|||
@(Html.Kendo().Window()
|
||||
.Name("window")
|
||||
.Title("About Alvar Aalto")
|
||||
.Content(@<text>
|
||||
<p>
|
||||
Alvar Aalto is one of the greatest names in modern architecture and design.
|
||||
Glassblowers at the iittala factory still meticulously handcraft the legendary
|
||||
vases that are variations on one theme, fluid organic shapes that let the end user
|
||||
decide the use. Interpretations of the shape in new colors and materials add to the
|
||||
growing Alvar Aalto Collection that remains true to his original design.
|
||||
</p>
|
||||
.Content(@<text>
|
||||
@Model.Text
|
||||
</text>)
|
||||
.Actions(actions => actions
|
||||
.Minimize()
|
||||
|
|
|
|||
|
|
@ -4,14 +4,16 @@ using System.Linq;
|
|||
using System.Threading.Tasks;
|
||||
using Microsoft.AspNetCore.Mvc;
|
||||
using Microsoft.AspNetCore.Mvc.RazorPages;
|
||||
using Telerik.Examples.RazorPages.Models;
|
||||
|
||||
namespace Telerik.Examples.RazorPages.Pages.Window
|
||||
{
|
||||
public class WindowIndexModel : PageModel
|
||||
{
|
||||
public string Text = String.Empty;
|
||||
public void OnGet()
|
||||
{
|
||||
|
||||
Text = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi facilisis, tortor in imperdiet iaculis, lacus sem placerat mi, eu pellentesque lectus nisl a tortor. Praesent efficitur ipsum quis neque vestibulum, id condimentum nisl bibendum. Nulla dictum efficitur eros id volutpat. Nam tellus sem, condimentum at lacinia eu, porta a mi. Fusce varius suscipit ullamcorper. Sed ac luctus tellus. Aenean efficitur purus pellentesque, accumsan mi ut, porttitor purus. Nulla efficitur, lacus quis pellentesque pellentesque, neque enim iaculis ligula, vel volutpat mi odio id nibh. Suspendisse laoreet commodo magna vitae tempus. Curabitur vitae massa tortor. In nisi turpis, tristique vitae volutpat in, iaculis non lacus. Morbi quis augue risus. Mauris porttitor, sem ut cursus pretium, diam turpis vulputate eros, vitae ullamcorper arcu lacus vel libero.";
|
||||
}
|
||||
}
|
||||
}
|
||||
Загрузка…
Ссылка в новой задаче