Kendo Control(Dynamics)
21.Kendo Button:
Write the below code in view
<div>
@(Html.Kendo().Button()
.Name("btnShare")
.Content("Share")
.HtmlAttributes(new { type = "button", @class = "btn btn-primary",
style = "height:30px; width:120px; border-radius:0;padding: 3px;" })
.Events(e => e.Click("btnShare_Click"))
)
</div>
<script>
function btnShare_Click() {
//write code here according to requirement
}
</script>
22.Toolbar:
Write the below code in view
Index.cshtml
@(Html.Kendo().ToolBar()
.Name("ToolBar")
.Items(items =>
{
items.Add()
.Type(CommandType.Button)
.Id("btn_new")
.Text("Upload")
.HtmlAttributes(new { @title = "Upload", style = "text-decoration:none", @class = "btn
btn-success btn-large"});
})
)
// Here we are adding button in toolbar
23.Upload
Write the below code in view
<div>
@(Html.Kendo().ToolBar()
.Name("ToolBar")
.Items(items =>
{
items.Add()
.Type(CommandType.Button)
.Id("btn_new")
.Text("Upload")
.HtmlAttributes(new {@title = "Upload", style = "text-decoration: none", @class = "btn
btn-success btn-large"});
})
)
@(Html.Kendo().Window().Name("AddDetails")
.Title("Upload Document")
.Visible(false)
.Modal(true)
.Content(@<text>
<div style="width:100%;" id="fieldlist">
<form id="Addform">
<div id="save-container">
<div class="col-md-11">
<div>
@Html.Label("Document ReferenceName : ", htmlAttributes: new { @class = "control-label"})
</div>
<div>
@(Html.Kendo().TextBox()
.Name("txtFIleReferenceName")
. HtmlAttributes(new { placeholder = "Enter Reference Name", required = "required", validationmessage = "*", maxlength = "50", @class = "form-control", style = "width:100%"})
)
</div>
</div>
<div class="col-md-11">
<div>
@Html.Label(" Upload Document:", htmlAttributes: new {@class = "control-label"})
</div>
<div>
@if (@TempData["Photo"] != null)
{
<a href=""><img id="output" src="@TempData["Photo"]" height="50" width="50" /></a>
}
else
{
<a href=""><img id="output" src="~/img/pr-pic3.jpg" height="50" width="50" /></a>
}
@(Html.Kendo().Upload()
.Name("files")
.Multiple(true)
.Events(events => events
.Select("onSelect"))
.Async(a => a.Save("SubmitDocs", "Document")
// ControllerNameà"Document" and ActionNameà"Document"
.AutoUpload(true))
)
</div>
</div>
<div class="col-md-11" style="text-align: right;">
@(Html.Kendo().Button()
.Name("btnSave")
.Content("Save")
.HtmlAttributes(new { type = "button", @class = "btn btn-primary", style = "height:30px; width: 100px ; padding: 3px ; border-radius : 0 ; " })
.Events(e => e.Click("btnSave_Click"))
)
</div>
</div>
</div>
</form>
</div>
</text>)
</div>
<script>
$(document).on("click", "#btn_new", function () {
debugger
$("#AddDetails").data("kendoWindow").open().center();
// AddDetails is the name of the kendo window define above in kendo Window Controls
$("#btnSave").kendoButton({}).data("kendoButton").enable(true);
})
function onSelect(e) {
debugger
var output = document.getElementById('output');
output.src = URL.createObjectURL(event.target.files[0]);
$(".k-upload-files.k-reset").find("li").remove();
}
function btnSave_Click() {
debugger
var validator = $("#save-container").kendoValidator().data("kendoValidator");
if (validator.validate()) {
var doctypeModel = {
Upload_ReferenceName: $('#txtFIleReferenceName').val(),
}
var model = {
"MasterUpload": doctypeModel
}
$.ajax({
type: "POST",
url: '/Document/InsertDocDetails',
data: model,
datatype: "json",
cache: false,
success: function (data) {
},
});
var wnd = $("#AddDetails").data("kendoWindow");
wnd.center().close();
kendo.alert("Document Added successfully!");
return true;
}
else {
return false;
}
}
</script>
Write the below code in controller to save the uploaded file
public ActionResult SubmitDocs(HttpPostedFileBase files)
{
var supportedTypes = new[] {"txt", "doc", "docx", "pdf", "ells", "xlsx"};
var fileExtension = System.IO.Path.GetExtension(files.FileName).Substring(1);
var dd = bs.UploadImageAsyn(files).Result;
Session["Docs"] = dd;
Session["DocExt"] = fileExtension;
if (fileExtension == "docx" || fileExtension == "txt" || fileExtension == "doc")
{
Session["fileType"] = "WORD";
}
else if (fileExtension == "pdf")
{
Session["fileType"] = "PDF";
}
else
{
Session["fileType"] = "EXCEL";
}
objMasterUpload.Upload_FileSize = files.ContentLength + "" + "KB";
Session["fileLength"] = objMasterUpload.Upload_FileSize;
Session["fileName"] = files.FileName;
return Content("");
}
public ActionResult InsertDocDetails(Master_Upload MasterUpload)
{
cache.KeyDelete("cacheUploadDocuments");
string loginid = Session["Loginid"].ToString();
Master_Upload obj = new Master_Upload();
if (Session["Docs"]!= null)
{
obj.Login_User_ID = Convert.ToInt32(loginid);
obj.Upload_ImageThumbNailLink = Convert.ToString(Session["Docs"]);
obj.Upload_ReferenceName = MasterUpload.Upload_ReferenceName;
obj.Upload_FileType = Convert.ToString(Session["fileType"]);
obj.Upload_FileSize = Convert.ToString(Session["fileLength"]);
}
//masterUpload
skill = client.PostAsJsonAsync("MasterUpload", obj).Result;
// MasterUpload is a name of the api through which data will save in database.
return null;
}
24.Kendo Menu
Write the below code in view
Index.cshtml
@(Html.Kendo().Menu()
.Name("menu")
.Items(item =>
{
item.Add()
.Text("General Ledger")
.Items(children =>
{
children.Add().Text("Account")
.Items(item1 =>
{
item1.Add().Text("Sales account");
item1.Add().Text("Profit account");
});
children.Add().Text("Budget")
.Items(item2 =>
{
item2.Add().Text("Budget Report");
});
children.Add().Text("journal entry")
.Items(item3 =>
{
item3.Add().Text("journal setup");
});
children.Add().Text("opening balance");
});
item.Add()
.Text("Account Payable")
.Items(children =>
{
children.Add().Text("Bills");
children.Add().Text("Select bills to pay");
children.Add().Text("Account Adjustment");
children.Add().Text("Approve payment");
children.Add().Text("view payment request");
});
item.Add()
.Text("Account Receivable")
.Items(children =>
{
children.Add().Text("Invioce");
children.Add().Text("Receive payment");
});
item.Add()
.Text("Order entry")
.Items(children =>
{
children.Add().Text("sales Order");
children.Add().Text("Sales Invoice");
});
item.Add()
.Text("Purchase")
.Items(children =>
{
children.Add().Text("Purchase Order requisition");
children.Add().Text("Purchase Order receiver");});
item.Add()
.Text("Cash Management")
.Items(children =>
{
children.Add().Text("Fund Transfer");
children.Add().Text("Deposit");
});
item.Add().Text("Company");
})
)
</div>
25. Panel Bar:
Write the below code in view
Index.cshtml
<div id="example">
<div class="demo-section k-content">
<div id="panelbar"></div>
</div>
<script>
debugger;
var homogeneous = new kendo.data.HierarchicalDataSource({
transport: {
read: {
url: "/Puja/Get",
dataType: "json"
}
},
schema: {
model: {
id: "Id",
hasChildren: "HasEmployees"
}
}
});
debugger;
$("#panelbar").kendoPanelBar({
dataSource: homogeneous,
dataTextField: "Puja_Name"
});
</script></div>
Write the below code in controller
public ActionResult Get()
{
var data = GetPujaData().ToList();
var query = (from a in data
where a.Id >=1
select new
{
a.Id,
a.Puja_Name,
}).ToList();
return Json(query, JsonRequestBehavior.AllowGet);
}
26. TREE VIEW:
Write the below code in view(.cshtml) page
<div id="example">
@(Html.Kendo().TreeView()
.Name("treeview")
.DataTextField("ProductName")
.LoadOnDemand(false)
.ExpandAll(true)
.Checkboxes(check=>check.Name("checkedItems"))
.AutoScroll(false)
.DataSource(dataSource => dataSource
.Read(read => read
.Action("ProductBind ", "Home")
)
)
.Events(ev => ev.DataBound("treeViewDataBound"))
.ToHtmlString()
)
</div>
<script>
function treeViewDataBound(e) {
e.sender.expand(e.node);
}
</script>
Write the below code in home controller
HttpClient client = new HttpClient();
public List< Product > LstAllProductClass = new List< Product >();
Product product= null;
public List<Product> GetAllProduct ()
{
HttpResponseMessage GetProduct = client.GetAsync("api/Product").Result;
if (GetProduct.IsSuccessStatusCode)
{
LstAllProductClass = GetProduct.Content.ReadAsAsync<List< Product >>().Result.ToList();
return LstAllProductClass.Where(a => a.IsActive == true && a.IsDelete == false).OrderByDescending(a => a.InsertedOn).ToList();
}
else
{
return null;
}
}
public ActionResult ProductBind([DataSourceRequest] DataSourceRequest req)
{
try
{
var data = GetAllProduct().ToList();
var query = (from a in data
select new {
a.ProductId,
a.ProductName
}).ToList();
if (query.Count > 0)
{
return Json(query, JsonRequestBehavior.AllowGet);
}
else
{
return null;
}
}
catch (Exception ex)
{
return Json(ex.Message);
}
}
27. Editor:
Step:1: create table
Step:2: entity update
Step:3: in webapi folder we create a class in model directory.
public class Criterion
{
public string Text {get; set;}
public dynamic Value {get; set;}
public Type Type {get; set;}
}
Step:4: add controller.
public class HomeController : Controller
{
public ActionResult Index()
{
var model = new[]
{
new Criterion {Text = "some integer", Value = 2},
new Criterion {Text = "some boolean", Value = true},
new Criterion {Text = "some string", Value = "foo"},
};
return View(model);
}
}
Step:5: right click on index-> add view
@model IList<Criterion>
@using (Html.BeginForm())
{
for (int i = 0; i < Model.Count; i++)
{
<div>
@Html.LabelFor(x => x[i], Model[i].Text)
@Html.EditorFor(x => x[i].Value, "Criterion_" + Model[i].Value.GetType().Name)
</div>
}
<button type="submit">OK</button>
}
Now for each type that you want to handle you could define a corresponding editor template
~/Views/Shared/EditorTemplates/Criterion_String.cshtml:
@model string
@Html.TextBoxFor(x => x)
~/Views/Shared/EditorTemplates/Criterion_Boolean.cshtml:
@model bool
@Html.CheckBoxFor(x => x)
~/Views/Shared/EditorTemplates/Criterion_Int32.cshtml:
@model int
@{
var items = Enumerable
.Range(1, 5)
.Select(x => new SelectListItem
{
Value = x.ToString(),
Text = "item " + x
});
}
@Html.DropDownListFor(x => x, new S0065lectList(items, "Value", "Text", Model))
28. Pivot Grid:
Step:1: create table
Step:2: entity update
Step:3: add controller (ToyController.cs)
public static HtmlString ReportWithPivot<T>(this IEnumerable<T> source, string cssClass, string rowField, string dataField, AggregateFunction aggregate, params string[] columnFields) where T : class
{
DataTable dt = source.ToDataTable();
return dt.ReportWithPivot(cssClass, rowField, dataField, aggregate, columnFields);
}
public static HtmlString ReportWithPivot(this DataTable source, string cssClass, string rowField, string dataField, AggregateFunction aggregate, params string[] columnFields)
{
Pivot p = new Pivot(source);
DataTable dt = p.PivotData(rowField, dataField, aggregate, columnFields);
return dt.Report(cssClass, columnFields.Length, dt.Columns.Cast<DataColumn>().Select(x => x.ColumnName).ToArray());
}
public static void PivotHeader(this Table table, string separator, int pivotLevel)
{
TableRow row = table.Rows[0];
if (row.TableSection == TableRowSection.TableHeader)
{
TableRow r = new TableRow();
var headers = row.Cells.Cast<tablecell>().Select(x => x.Text);
for (int i = 0; i < pivotLevel; i++)
{
r = new TableRow();
r.TableSection = TableRowSection.TableHeader;
foreach (var x in headers)
{
string headerText = GetNthText(x, i, separator);
if (r.Cells.Count > 0 && r.Cells[r.Cells.Count - 1].Text == headerText)
r.Cells[r.Cells.Count - 1].ColumnSpan++;
else
r.Cells.Add(new TableHeaderCell {Text = headerText, ColumnSpan = 1});
}
table.Rows.AddAt(i, r);
}
}
table.Rows.Remove(row);
}
</tablecell>
29. Spread Sheet:
Step:1: create a database and a table.
Step:2: update entity
Step:3: after create a class and controller, in controller right click on index-> add view.
@(Html.Kendo().Spreadsheet()
.Name("spreadsheet")
.HtmlAttributes(new {style = "width:100%; height: 700px"})
.Toolbar(true)
.Sheetsbar(true)
.Sheets(sheets =>
{
sheets.Add()
.Name(Model.ViewName)
.DataSource<Datum>(ds => ds
.Ajax()
.Batch(true)
.Read("Spreadsheet_Read", "Data", new {moduleId = Model.ModuleId, viewId = Model.ViewId})
.Update("Spreadsheet_Update", "Data")
.Events(e => e.Change("onChange").Error("OnError"))
.Model(m =>
{
if (Model.GridColumns!= null)
{
m.Id(p =>p.Id);
foreach (MyColumnSettings col in Model.GridColumns)
{
m.Field(col.PropertyName,col.ColType).Editable(col.Editable);
}
}
})
)
.Columns(columns =>
{
columns.Add().Width(100);
if (Model.GridColumns != null)
{
foreach (MyColumnSettings col in Model.GridColumns)
{
columns.Add().Width(col.Width);
}
}
})
.Rows(rows =>
{
rows.Add().Height(40).Cells(cells =>
{
cells.Add().Bold(true).TextAlign(SpreadsheetTextAlign.Center).Value("Id").Enable(false);
if (Model.GridColumns != null)
{
foreach (MyColumnSettings col in Model.GridColumns)
{
cells.Add().Bold(true).TextAlign(SpreadsheetTextAlign.Center)
.Value(col.Title).Enable(col.Editable);
}
}
});
});
}))
30. Tree List
Write the below code in view(.cshtml) page
Html.Kendo().TreeList<Kendo.Mvc.Examples.Models.TreeList.EmployeeDirectoryModel>()
.Name("treelist")
.Toolbar(toolbar => toolbar.Create())
.Columns(columns =>
{
columns.Add().Field(e => e.FirstName).Width(190).Expandable(true);
columns.Add().Field(e => e.LastName).Width(100);
columns.Add().Field(e => e.Position).Width(190);
columns.Add().Title("Edit").Width(220).Command(c =>
{
c.Edit();
c.Destroy();
});
})
.Filterable()
.Sortable()
.Editable()
.DataSource(dataSource => dataSource
.Create(create => create.Action("Create_TreeList", "Dialog"))
.Read(read => read.Action("All_TreeList", "Dialog"))
.Update(update => update.Action("Update_TreeList", "Dialog"))
.Destroy(delete => delete.Action("Destroy_TreeList", "Dialog"))
.Model(m => {
m.Id(f => f.EmployeeId);
m.ParentId(f => f.ReportsTo);
m.Expanded(true);
m.Field(f => f.FirstName);
m.Field(f => f.LastName);
m.Field(f => f.Position);
})
)
.Height(540)
.ToHtmlString()
)
Write the below code in home controller
using Kendo.Mvc.Examples.Models;
using Kendo.Mvc.Examples.Models.TreeList;
using Kendo.Mvc.Extensions;
using Kendo.Mvc.UI;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace Kendo.Mvc.Examples.Controllers
{
public partial class DialogController : Controller
{
private EmployeeDirectoryService employeeDirectory;
public DialogController()
{
employeeDirectory = new EmployeeDirectoryService(new SampleEntities());
}
[Demo]
public ActionResult TreeList_Integration()
{
return View();
}
public JsonResult All_TreeList([DataSourceRequest] DataSourceRequest request)
{
var result = GetDirectory().ToTreeDataSourceResult(request,
e => e.EmployeeId,
e => e.ReportsTo,
e => e
);
return Json(result, JsonRequestBehavior.AllowGet);
}
public JsonResult Destroy_TreeList([DataSourceRequest] DataSourceRequest request, EmployeeDirectoryModel employee)
{
if (ModelState.IsValid)
{
employeeDirectory.Delete(employee, ModelState);
}
return Json(new[] { employee }.ToTreeDataSourceResult(request, ModelState));
}
public JsonResult Create_TreeList([DataSourceRequest] DataSourceRequest request, EmployeeDirectoryModel employee)
{
if (ModelState.IsValid)
{
employeeDirectory.Insert(employee, ModelState);
}
return Json(new[] { employee }.ToTreeDataSourceResult(request, ModelState));
}
public JsonResult Update_TreeList([DataSourceRequest] DataSourceRequest request, EmployeeDirectoryModel employee)
{
if (ModelState.IsValid)
{
employeeDirectory.Update(employee, ModelState);
}
return Json (new [] { employee }.ToTreeDataSourceResult(request, ModelState));
}
private IEnumerable<EmployeeDirectoryModel> GetDirectory()
{
return employeeDirectory.GetAll();
}
}
}
40. Masked Text Box
Write the below code in view(.cshtml)
<div id="example">
<div class="demo-section k-content">
<ul id="fieldlist">
<li>
<h4 for="phone_number">Phone number:</h4>
<input id="phone_number" value="555 123 4567" />
</li>
<li>
<h4 for="credit_card">Credit Card number:</h4>
<input id="credit_card" value="1234 1234 1234 1234" />
</li>
<li>
<h4 for="ssn">Social security number:</h4>
<input id="ssn" value="003-12-3456" />
</li>
<li>
<h4 for="postcode">UK postcode:</h4>
<input id="postcode" value="W1N 1AC"/>
</li>
</ul>
</div>
<script>
$(document).ready(function() {
$("#phone_number").kendoMaskedTextBox({
mask: "(999) 000-0000"
});
$("#credit_card").kendoMaskedTextBox({
mask: "0000 0000 0000 0000"
});
$("#ssn").kendoMaskedTextBox({
mask: "000-00-0000"
});
$("#postcode").kendoMaskedTextBox({
mask: "L0L 0LL"
});
});
</script>
32. Validator
Write the below code in view(.cshtml) page
<div id="tickets">
<form id="ticketsForm">
<ul id="fieldlist">
<li>
<label for="fullname" class="required">Your Name</label>
<input type="text" id="fullname" name="fullname" class="k-textbox" placeholder="Full name" required validationMessage="Enter {0}" style="width: 220px;" />
</li>
<li>
<label for="search" class="required">Movie</label>
<input type="search" id="search" name="search" required validationMessage="Select movie" style="width: 220px;" /><span class="k-invalid-msg" data-for="search"></span>
</li>
<li>
<label for="date" class="required">Date</label>
<input type="text" id="date" name="date"
min="5/6/2017" data-max-msg="Enter date after '5/6/2017''"
pattern="\d+\/\d+\/\d+" validationMessage="Enter full date"
style="width: 220px;" /><span class="k-invalid-msg" data-for="date"></span>
</li>
<li>
<label for="time">Start time</label>
<select name="time" id="time" required data-required-msg="Select start time" style="width: 220px;" >
<option>14:00</option>
<option>15:30</option>
<option>17:00</option>
<option>20:15</option>
</select>
<span class="k-invalid-msg" data-for="time"></span>
</li>
<li>
<label for="amount">Amount</label>
<input id="amount" name="Amount" type="text" min="1" max="10" value="1" required data-max-msg="Enter value between 1 and 10" style="width: 220px;" />
<span class="k-invalid-msg" data-for="Amount"></span>
</li>
<li>
<label for="email" class="required">Email</label>
<input type="email" id="email" name="Email" class="k-textbox" placeholder="e.g. myname@example.net" reqired data-email-msg="Email format is not valid" style="width: 220px;"/>
</li>
<li>
<label for="tel" class="required">Phone</label>
<input type="tel" id="tel" name="tel" class="k-textbox" pattern="\d{10}" placeholder="Enter a ten digit number" required
validationMessage="Enter at least ten digits" style="width: 220px;" />
</li>
<li class="accept">
<label>Terms of Service</label>
<input type="checkbox" name="Accept" required validationMessage="Acceptance is required" /> <p>I accept the terms of service.</p>
</li>
<li class="confirm">
<button class="k-button k-primary" type="submit">Submit</button>
</li>
<li class="status">
</li>
</ul>
</form>
</div>
<script>
$(document).ready(function() {
var data = [
"12 Angry Men",
"Il buono, il brutto, il cattivo.",
"Inception",
"One Flew Over the Cuckoo's Nest",
"Pulp Fiction",
"Schindler's List",
"The Dark Knight",
"The Godfather",
"The Godfather: Part II",
"The Shawshank Redemption"
];
$("#search").kendoAutoComplete({
dataSource: data,
separator: ", "
});
$("#time").kendoDropDownList({
optionLabel: "--Start time--"
});
$("#amount").kendoNumericTextBox();
$("#date").kendoDateInput();
var validator = $("#ticketsForm").kendoValidator().data("kendoValidator"),
status = $(".status");
$("form").submit(function(event) {
event.preventDefault();
if (validator.validate()) {
status.text("Hooray! Your tickets has been booked!")
.removeClass("invalid")
.addClass("valid");
} else {
status.text("Oops! There is invalid data in the form.")
.removeClass("valid")
.addClass("invalid");
}
});
});
</script>
33.Tabstrip
Write the below code in view page(.cshtml)
@(Html.Kendo().TabStrip()
.Name("tabstrip")
.Animation(animation =>
animation.Open(effect =>
effect.Fade(FadeDirection.In)))
.Items(tabstrip =>
{
tabstrip.Add().Text("Paris")
.Selected(true)
.Content(@<text>
<div class="weather">
<h2>17<span>ºC</span></h2>
<p>Rainy weather in Paris.</p>
</div>
<span class="rainy"> </span>
</text>);
tabstrip.Add().Text("New York")
.Content(@<text>
<div class="weather">
<h2>29<span>ºC</span></h2>
<p>Sunny weather in New York.</p>
</div>
<span class="sunny"> </span>
</text>);
tabstrip.Add().Text("Moscow")
.Content(@<text>
<div class="weather">
<h2>16<span>ºC</span></h2>
<p>Cloudy weather in Moscow.</p>
</div>
<span class="cloudy"> </span>
</text>);
tabstrip.Add().Text("Sydney")
.Content(@<text>
<div class="weather">
<h2>17<span>ºC</span></h2>
<p>Rainy weather in Sidney.</p>
</div>
<span class="rainy"> </span>
</text>);
})
)
</div>
<style>
.sunny, .cloudy, .rainy {
display: block;
margin: 30px auto 10px;
width: 128px;
height: 128px;
}
.cloudy{
background-position: -128px 0;
}
.rainy{
background-position: -256px 0;
}
.weather {
margin: 0 auto 30px;
text-align: center;
}
#tabstrip h2 {
font-weight: lighter;
font-size: 5em;
line-height: 1;
padding: 0 0 0 30px;
margin: 0;
}
#tabstrip h2 span {
background: none;
padding-left: 5px;
font-size: .3em;
vertical-align: top;
}
#tabstrip p {
margin: 0;
padding: 0;
}
</style>
34. Dialog
Write the below code in view(.cshtml) page
@(Html.Kendo().Dialog()
.Name("dialog")
.Title("Software Update")
.Content("<p>A new version of <strong>Kendo UI</strong> is available. Would you like to download and install it now?<p>")
.Width(400)
.Modal(false)
.Actions(actions =>
{
actions.Add().Text("Skip this version");
actions.Add().Text("Remind me later");
actions.Add().Text("Install update").Primary(true);
})
.Events(ev => ev.Close("onClose").Open("onOpen"))
)
@(Html.Kendo().Button()
.Name("showDialogBtn")
.HtmlAttributes(new { style = "display:none;", @class = "hide-on-narrow" })
.Content("Click here to open the dialog")
.Events(ev => ev.Click("showDialog"))
)
</div>
<script>
function onClose() {
$("#showDialogBtn").fadeIn();
}
function onOpen() {
$("#showDialogBtn").fadeOut();
}
function showDialog() {
$('#dialog').data("kendoDialog").open();
}
</script>
<style>
#example {
min-height: 350px;
}
</style>
35. Notification
Write the below code in view(.cshtml) page
@(Html.Kendo().Notification()
.Name("popupNotification")
)
//For opening the notification
<script>
$(document).ready(function() {
var d = new Date();
popupNotification.show(kendo.toString(d, 'HH:MM:ss'))});
</script>
36. MediaPlayer
Write the below code in view (.cshtml) page
<div class="demo-section k-content wide" style="max-width: 644px;">
@(Html.Kendo().MediaPlayer()
.AutoPlay(true)
.Navigatable(true)
.Media(m => m
.Title("Recap of Progress Ringing The Bell at Nasdaq (2016)")
.Source("https://www.youtube.com/watch?v=tc3xhD24iTU")
)
.Name("mediaPlayer")
.HtmlAttributes(new { style = "height:360px" })
)
</div>
37. PlayList
Write below code in view(.cshtml) page
<div class="demo-section k-content wide" style="max-width: 925px;">
@(Html.Kendo().MediaPlayer()
.Name("mediaPlayer")
.AutoPlay(true)
.HtmlAttributes(new { style = "height:360px" })
)
<div class="k-list-container playlist">
@(Html.Kendo().ListView<Kendo.Mvc.Examples.Models.Video>(Model)
.Name("listView")
.TagName("ul")
.ClientTemplateId("template")
.DataSource(dataSource => dataSource
.ServerOperation(false)
)
.Selectable()
.Events(e => e
.Change("onChange")
.DataBound("onDataBound")
)
)
</div>
</div>
<script>
function onChange() {
var index = this.select().index();
var dataItem = this.dataSource.view()[index];
$("#mediaPlayer").data("kendoMediaPlayer").media(dataItem);
}
function onDataBound() {
this.select(this.element.children().first());
}
</script>
<script type="text/x-kendo-template" id="template">
<li class="k-item k-state-default" onmouseover="$(this).addClass('k-state-hover')"
onmouseout="$(this).removeClass('k-state-hover')">
<span>
<img src="#:poster#" />
<h5>#:title#</h5>
</span>
</li>
</script>
<style>
.k-mediaplayer {
float: left;
box-sizing: border-box;
width: 70%;
}
.playlist {
float: left;
height: 360px;
overflow: auto;
width: 30%;
}
@@media(max-width: 800px) {
.playlist,
.k-mediaplayer {
width: 100%;
}
}
.playlist ul, .playlist li {
list-style-type: none;
margin: 0;
padding: 0;
}
.playlist .k-item {
border-bottom-style: solid;
border-bottom-width: 1px;
padding: 14px 15px;
}
.playlist .k-item:last-child {
border-bottom-width: 0;
}
.playlist span {
cursor: pointer;
display: block;
overflow: hidden;
text-decoration: none;
}
.playlist span img {
border: 0 none;
display: block;
height: 56px;
object-fit: cover;
width: 100px;
float: left;
}
.playlist h5 {
display: block;
font-weight: normal;
margin: 0;
overflow: hidden;
padding-left: 10px;
text-align: left;
}
</style>
Write the below code in controller
using Kendo.Mvc.Examples.Models;
using Kendo.Mvc.Extensions;
using Kendo.Mvc.UI;
using System.Collections.Generic;
using System.Web.Mvc;
namespace Kendo.Mvc.Examples.Controllers
{
public partial class MediaPlayerController : Controller
{
[Demo]
public ActionResult Playlist()
{
return View(GetVideos());
}
public ActionResult Videos_Read([DataSourceRequest] DataSourceRequest request)
{
return Json(GetVideos().ToDataSourceResult(request));
}
private static IEnumerable<Video> GetVideos()
{
List<Video> videos = new List<Video>();
videos.Add(new Video()
{
title = "Telerik Platform - Enterprise Mobility. Unshackled.",
poster = "http://img.youtube.com/vi/N3P6MyvL-t4/1.jpg",
source = "https://www.youtube.com/watch?v=N3P6MyvL-t4"
});
videos.Add(new Video()
{
title = "Learn How York Solved Its Database Problem",
poster = "http://img.youtube.com/vi/_S63eCewxRg/1.jpg",
source = "https://www.youtube.com/watch?v=_S63eCewxRg"
});
videos.Add(new Video()
{
title = "Responsive Website Delivers for Reeves Import Motorcars",
poster = "http://img.youtube.com/vi/DYsiJRmIQZw/1.jpg",
source = "https://www.youtube.com/watch?v=DYsiJRmIQZw"
});
videos.Add(new Video()
{
title = "Digital Transformation: A New Way of Thinking",
poster = "http://img.youtube.com/vi/gNlya720gbk/1.jpg",
source = "https://www.youtube.com/watch?v=gNlya720gbk"
});
videos.Add(new Video()
{
title = "Take a Tour of the Telerik Platform",
poster = "http://img.youtube.com/vi/rLtTuFbuf1c/1.jpg",
source = "https://www.youtube.com/watch?v=rLtTuFbuf1c"
});
videos.Add(new Video()
{
title = "Why Telerik Analytics - Key Benefits for your applications",
poster = "https://i.ytimg.com/vi/CpHKm2NruYc/1.jpg",
source = "https://www.youtube.com/watch?v=CpHKm2NruYc"
});
return videos;
}
}
}
Comments
Post a Comment