chore: include theme changing sample
This commit is contained in:
Viktor Tachev
Родитель
41812a3eac
Коммит
e609df30e8
|
|
@ -0,0 +1,72 @@
|
|||
using System;
|
||||
using System.Collections.Generic;
|
||||
using System.Linq;
|
||||
using System.Threading.Tasks;
|
||||
using Kendo.Examples.Mvc.Models;
|
||||
using Kendo.Mvc.Extensions;
|
||||
using Kendo.Mvc.UI;
|
||||
using Microsoft.AspNetCore.Http;
|
||||
using Microsoft.AspNetCore.Mvc;
|
||||
|
||||
namespace Kendo.Examples.Mvc.Controllers.Grid
|
||||
{
|
||||
public class ClientThemeChangeController : Controller
|
||||
{
|
||||
public IActionResult ClientThemeChange ()
|
||||
{
|
||||
return View();
|
||||
}
|
||||
|
||||
public ActionResult Orders_Read([DataSourceRequest]DataSourceRequest request)
|
||||
{
|
||||
var result = Enumerable.Range(0, 50).Select(i => new OrderViewModel
|
||||
{
|
||||
OrderID = i,
|
||||
Freight = i * 10,
|
||||
OrderDate = new DateTime(2016, 9, 15).AddDays(i % 7),
|
||||
ShipName = "ShipName " + i,
|
||||
ShipCity = "ShipCity " + i
|
||||
});
|
||||
|
||||
var dsResult = result.ToDataSourceResult(request);
|
||||
return Json(dsResult);
|
||||
}
|
||||
|
||||
public IActionResult GetThemes()
|
||||
{
|
||||
var themes = new List<Theme>()
|
||||
{
|
||||
new Theme() { ThemeId = "default-v2", Name = "Default-v2" },
|
||||
new Theme() { ThemeId = "bootstrap-v4", Name = "Bootstrap v4" },
|
||||
new Theme() { ThemeId = "material-v2", Name = "Material-v2" },
|
||||
new Theme() { ThemeId = "default", Name = "Default" },
|
||||
new Theme() { ThemeId = "material", Name = "Material" },
|
||||
new Theme() { ThemeId = "moonlight", Name = "Moonlight" },
|
||||
new Theme() { ThemeId = "uniform", Name = "Uniform" },
|
||||
new Theme() { ThemeId = "bootstrap", Name = "Bootstrap v3" },
|
||||
new Theme() { ThemeId = "highcontrast", Name = "High Contrast" },
|
||||
new Theme() { ThemeId = "metroblack", Name = "Metro Black" },
|
||||
new Theme() { ThemeId = "silver", Name = "Sliver" },
|
||||
new Theme() { ThemeId = "blueopal", Name = "Blue Opal" },
|
||||
new Theme() { ThemeId = "flat", Name = "Flat" },
|
||||
new Theme() { ThemeId = "metro", Name = "Metro" },
|
||||
new Theme() { ThemeId = "office365", Name = "Office 365" },
|
||||
new Theme() { ThemeId = "black", Name = "Black" },
|
||||
new Theme() { ThemeId = "fiori", Name = "Fiori" },
|
||||
new Theme() { ThemeId = "materialblack", Name = "Material black" },
|
||||
new Theme() { ThemeId = "nova", Name = "Nova" },
|
||||
};
|
||||
return Json(themes);
|
||||
}
|
||||
[HttpPost]
|
||||
public IActionResult SetTheme(string selection)
|
||||
{
|
||||
CookieOptions cookie = new CookieOptions();
|
||||
cookie.Expires = DateTime.Now.AddMinutes(10);
|
||||
|
||||
Response.Cookies.Append("theme", selection, cookie);
|
||||
var returnUrl = Request.Headers["Referer"].ToString();
|
||||
return Json(new { result = "Redirect", url = returnUrl });
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
using System;
|
||||
using System.Collections.Generic;
|
||||
using System.Linq;
|
||||
using System.Threading.Tasks;
|
||||
|
||||
namespace Kendo.Examples.Mvc.Models
|
||||
{
|
||||
public class Theme
|
||||
{
|
||||
public string ThemeId { get; set; }
|
||||
public string Name { get; set; }
|
||||
}
|
||||
}
|
||||
|
|
@ -40,6 +40,7 @@ namespace Kendo.Examples.Mvc
|
|||
options.ViewLocationFormats.Add("/Views/Forms/{0}" + RazorViewEngine.ViewExtension);
|
||||
options.ViewLocationFormats.Add("/Views/MultiSelect/{0}" + RazorViewEngine.ViewExtension);
|
||||
options.ViewLocationFormats.Add("/Views/Scheduler/{0}" + RazorViewEngine.ViewExtension);
|
||||
options.ViewLocationFormats.Add("/Views/StylesAndLayout/{0}" + RazorViewEngine.ViewExtension);
|
||||
});
|
||||
|
||||
var connection = @"Server=(localdb)\mssqllocaldb;Database=Samples;Trusted_Connection=True;ConnectRetryCount=0";
|
||||
|
|
|
|||
|
|
@ -0,0 +1,180 @@
|
|||
@{
|
||||
var specialThemes = new string[] { "nova", "bootstrap", "fiori", "material", "materialblack", "office365" };
|
||||
var sassThemes = new string[] { "default-v2", "bootstrap-v4", "material-v2" };
|
||||
var commonThemeName = "common";
|
||||
var mainHref = "https://kendo.cdn.telerik.com/2019.3.917/styles/kendo.";
|
||||
var isThemeSelected = Context.Request.Cookies.TryGetValue("theme", out string selectedTheme);
|
||||
|
||||
if (!isThemeSelected)
|
||||
{
|
||||
selectedTheme = "default";
|
||||
}
|
||||
|
||||
var themeHref = mainHref + selectedTheme + ".min.css";
|
||||
var commonThemeHref = mainHref + commonThemeName + ".min.css";
|
||||
if (specialThemes.Any(x => x == selectedTheme))
|
||||
{
|
||||
commonThemeName += "-" + selectedTheme.Replace("materialblack", "material");
|
||||
}
|
||||
|
||||
if (sassThemes.Contains(selectedTheme))
|
||||
{
|
||||
<link href=@themeHref rel="stylesheet" type="text/css" />
|
||||
}
|
||||
else
|
||||
{
|
||||
<link href=@commonThemeHref rel="stylesheet" type="text/css" />
|
||||
<link href=@themeHref rel="stylesheet" type="text/css" />
|
||||
}
|
||||
}
|
||||
|
||||
<button id="configure" class="k-rpanel-toggle k-button k-primary btn-toggle">
|
||||
<span class="k-icon k-i-menu"></span>
|
||||
</button>
|
||||
|
||||
|
||||
@(Html.Kendo().DropDownList()
|
||||
.Name("themeSelector")
|
||||
.DataTextField("Name")
|
||||
.DataValueField("ThemeId")
|
||||
.OptionLabel("Select Theme")
|
||||
.Height(300)
|
||||
.AutoWidth(true)
|
||||
.DataSource(source =>
|
||||
{
|
||||
source.Read(read =>
|
||||
{
|
||||
read.Action("GetThemes", "ClientThemeChange");
|
||||
});
|
||||
}).Events(ev => ev.Change("themeSelection"))
|
||||
.HtmlAttributes(new { style = "float: right" })
|
||||
)
|
||||
|
||||
<br />
|
||||
<br />
|
||||
<br />
|
||||
|
||||
<script>
|
||||
function themeSelection(e) {
|
||||
var selectedTheme = e.sender.dataItem();
|
||||
$.post({
|
||||
url: "/ClientThemeChange/SetTheme",
|
||||
data: { selection: selectedTheme.ThemeId },
|
||||
success: function (data) {
|
||||
window.location = data.url;
|
||||
}
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<kendo-editor name="editor" aria-label="editor" style="height:400px">
|
||||
<tools>
|
||||
<tool name="insertImage" />
|
||||
<tool name="insertFile" />
|
||||
<tool name="bold" />
|
||||
<tool name="italic" />
|
||||
<tool name="underline" />
|
||||
<tool name="fontName">
|
||||
<tool-items>
|
||||
<tool-item text="Default site font" value="Arial,Verdana,sans-serif" />
|
||||
<tool-item text="Monospaced font" value="monospace" />
|
||||
</tool-items>
|
||||
</tool>
|
||||
</tools>
|
||||
<content>
|
||||
<p>
|
||||
Kendo UI Editor allows your users to edit HTML in a familiar, user-friendly way.<br />
|
||||
In this version, the Editor provides the core HTML editing engine, which includes basic text formatting, hyperlinks, lists,
|
||||
and image handling. The widget <strong>outputs identical HTML</strong> across all major browsers, follows
|
||||
accessibility standards and provides API for content manipulation.
|
||||
</p>
|
||||
<p>Features include:</p>
|
||||
<ul>
|
||||
<li>Text formatting & alignment</li>
|
||||
<li>Bulleted and numbered lists</li>
|
||||
<li>Hyperlink and image dialogs</li>
|
||||
<li>Cross-browser support</li>
|
||||
<li>Identical HTML output across browsers</li>
|
||||
<li>Gracefully degrades to a <code>textarea</code> when JavaScript is turned off</li>
|
||||
</ul>
|
||||
<p>
|
||||
Read <a href="http://docs.telerik.com/kendo-ui">more details</a> or send us your
|
||||
<a href="http://www.telerik.com/forums">feedback</a>!
|
||||
</p>
|
||||
</content>
|
||||
</kendo-editor>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<kendo-calendar name="calendar" selectable="multiple" select-dates="@(new DateTime[] {
|
||||
DateTime.Today,
|
||||
DateTime.Today.AddDays(5),
|
||||
DateTime.Today.AddDays(-5),
|
||||
DateTime.Today.AddMonths(1),
|
||||
DateTime.Today.AddMonths(-1)
|
||||
})">
|
||||
</kendo-calendar>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<p>
|
||||
<kendo-slider name="slider"
|
||||
increase-button-title="Right"
|
||||
decrease-button-title="Left"
|
||||
min="0" max="30"
|
||||
small-step="1"
|
||||
large-step="10"
|
||||
value="18" class="temperature" title="slider"></kendo-slider>
|
||||
</p>
|
||||
<p>
|
||||
<kendo-button name="TextButton" class="textButton">Button</kendo-button>
|
||||
</p>
|
||||
<p>
|
||||
<kendo-button name="PrimaryButton" class="textButton k-primary">Primary Button</kendo-button>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<p></p>
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<kendo-grid name="grid" height="400">
|
||||
<columns>
|
||||
<column field="OrderID" title="Order ID">
|
||||
<filterable enabled="false"></filterable>
|
||||
</column>
|
||||
<column field="Freight" title="Freight" />
|
||||
<column field="OrderDate" title="Order Date" format="{0:MM/dd/yyyy}" />
|
||||
<column field="ShipName" title="Ship Name" />
|
||||
<column field="ShipCity" title="Ship City" />
|
||||
<column>
|
||||
<commands>
|
||||
<column-command text="Edit" name="edit"></column-command>
|
||||
</commands>
|
||||
</column>
|
||||
</columns>
|
||||
<scrollable enabled="true" />
|
||||
<sortable enabled="true" />
|
||||
<pageable enabled="true" />
|
||||
<editable enabled="true" mode="popup" />
|
||||
<filterable enabled="true" />
|
||||
<datasource type="DataSourceTagHelperType.Ajax" page-size="20">
|
||||
<transport>
|
||||
<read url="@Url.Action("Orders_Read", "ClientThemeChange")" />
|
||||
</transport>
|
||||
<schema>
|
||||
<model id="OrderID">
|
||||
<fields>
|
||||
<field name="OrderID" type="number" editable="false"></field>
|
||||
<field name="OrderDate" type="date"></field>
|
||||
<field name="ShipName" type="string"></field>
|
||||
<field name="ShipCity" type="string"></field>
|
||||
<field name="Freight" type="number"></field>
|
||||
</fields>
|
||||
</model>
|
||||
</schema>
|
||||
</datasource>
|
||||
</kendo-grid>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
Загрузка…
Ссылка в новой задаче