Jon,I am having a similar issue.&& Anyone
figure this out?I have the following markup:
&div id="tabContainer" style="height: 500"&
&&& &div id="tabDetail"&
&&&&&&& &ul&
&&&&&&&&&&& &li class="k-state-active"&Employee Management&/li&
&&&&&&&&&&& &li&Transfer History&/li&
&&&&&&&&&&& &li&Compensation&/li&
&&&&&&&&&&& &li&Dashboard&/li&
&&&&&&&&&&& &li&Reporting&/li&
&&&&&&& &/ul&
&&& &/div&
and the corresponding
$("#tabDetail").kendoTabStrip( {
&&& contentUrls:
&&&&&&& "html/Workforce/Page1.htm",
&&&&&&& "html/Workforce/Page2.htm",
&&&&&&& "html/Workforce/Page3.htm",
&&&&&&& "html/Workforce/Page4.htm",
&&&&&&& "html/Workforce/Page5.htm",
&&&&&&& "html/Workforce/Page6.htm"
I would like not to have
to be forced in to managing the resize if possible.Anyone?
Hi guys,To accomplish this you could use the
following CSS:
#tabstrip {
/* tabstrip element */
&&& height: 500px;
&&& position: relative;
.k-tabstrip
.k-content {
&&& position: absolute;
&&& top: 41px;
&&& bottom: 0;
As an alternative
approach, instead of setting the tab strip's element height, I would suggest
setting the height of the content. Thus way the tab strip's parent container
will automatically resize.
.k-tabstrip
.k-content {
&&& height: 500px;
Regards, Alexander
the Telerik team
Join us on our journey to create the world's most
complete HTML 5 UI Framework -
Alexander,Thanks for this reply.&& I will
check it out.&& I was hoping there was a way to do it where it would size as the
window is re-sized rather than hard coding the height or adjusting via JS.&& Is
that possible?
Hi Steven,This is possible, to achieve it I
suggest modifying the styles in this way:
#tabstrip {
/* tabstrip element */
&&& position: absolute;
&&& top: 0;
&&& bottom: 0;
&&& left: 0;
&&& right: 0;
&&& width: auto;
&&& height: auto;
.k-tabstrip
.k-content {
&&& position: absolute;
&&& top: 41px;
&&& bottom: 0;
I hope this
helps.Regards, Alexander Valchev
the Telerik team
Join us on our journey to create the world's most
complete HTML 5 UI Framework -
Yes, this works but if you have a grid on the Tab that
contains an embedded TabStrip in the detail Template as I have it tries to apply
the .k-tabstrip .k-content settings to that as
well, with bad consequences obviously.Any ideas how we just get the
.k-tabstrip
.k-content {
&&& position: absolute;
&&& top: 41px;
&&& bottom: 0;
apply ONLY to the root #tabstrip ??
Hello Gary,Of course, you can use a
instead of a , and use the root TabStrip ID instead of
its CSS class.Greetings, Dimo
the Telerik team
Join us on our journey to create the world's most
complete HTML 5 UI Framework -引入jszip.min.js
toolbar设置excel命令
设置excelExport函数，可以对导出的列进行自定义处理
在弹出的编辑界面打印
引入jQuery.print.js，支持jquery打印
监听onEdit方法，增加打印按钮
onEdit: function () {
return function onEdit(e) {
var container = e.container
console.log('container', container)
var print = $('&a class="k-button k-button-icontext k-primary"&&span class="k-icon"&&/span&打印&/a&');
print.bind('click', {data: container}, printData)
$(container).find("div.k-edit-buttons").append(print);
grid每一行增加自定义按钮
在grid的column定义中，command元素增加按钮
command: [
name: "增加二维码",
click: function (e) {
console.log('add qr')
title: "操作",
width: "100px"
kendo ui富媒体编辑器替换成ueditor
引入ueditor的相关样式和js文件
ueditor.css
ueditor.config.js
ueditor.all.js
kendo ui的富媒体编辑采用ueditor
function myEditor(container, options) {
$('&textarea id="editor" style="height:440 width:960" name="content"&&/textarea&')
.appendTo(container);
var content = options.model.content
UE.delEditor('editor')
var editor = new UE.getEditor('editor');
editor.ready(function () {
editor.setContent(content)
在kendo ui列中引入自定义的编辑器
field: "content",
width: '20%',
title: "页面内容",
headerAttributes: {
canHidden: false
attributes: {
style: "text-align:"
editor: myEditor,
hidden: true,
template: function (dataItem) {
return "内容详情";
增加save方法，改写参数值的变化逻辑
由于kendo ui有自己的一套 值是否变化的逻辑，并且kendo ui不会自动识别第三方富媒体编辑器的值，需要需要重写 参数变化的逻辑。
save: function (data) {
console.log('enter save. before', data)
var model = data.model
var editor = new UE.getEditor('editor');
if (editor) {
var content = editor.getContent()
model.dirty = true
model.content = content
console.log('enter save. after', data)
return true
&&相关文章推荐
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：58655次
积分：2283
积分：2283
排名：第15097名
原创：176篇
转载：19篇
(7)(3)(6)(5)(2)(9)(3)(7)(19)(13)(3)(7)(5)(5)(2)(10)(1)(3)(4)(14)(8)(3)(2)(6)(7)(4)(2)(3)(6)(5)(4)(6)(6)(5)第一章：数据交互
提醒：博客开篇之作。望指导。不喜随便喷。
什么也不说，先上图。
就kendoui官网有详细的API说明，不做过多累赘，以下图中用到的控件为例:
& &页面简洁得体，是我个人比较偏爱的。主要来讲讲和GridOnLineEdit结合Angular和BreezeJs的应用。
& &1.Breeze.js
& & &?功能：负责处理前端和后端程序的通讯。
& 用法：到官网下载Breeze包。在页面引入上图中JS。
& & & & & 添加Breeze.WebApi2.dll引用。&在后端控制器添加BreezeController特性。&
& & & & & & &&
[BreezeController(MaxAnyAllExpressionDepth = 2)]
public class AppointmentsController : BaseController
readonly EFContextProvider&AppointmentContext& _contextProvider = new EFContextProvider&AppointmentContext&();
readonly EFContextProvider&LookupContext& _lookupContextProvider = new EFContextProvider&LookupContext&();
readonly EFContextProvider&SetupScreeningSiteContext& _siteContextProvider = new EFContextProvider&SetupScreeningSiteContext&();
readonly EFContextProvider&LookupScreeningParameterContext& _screenCentreContextProvider = new EFContextProvider&LookupScreeningParameterContext&();
TransactionSettings transactionSettings = null;
/// &summary&
/// Gets the context provider.
/// &/summary&
/// &value&
/// The context provider.
/// &/value&
public EFContextProvider&AppointmentContext& ContextProvider
get { return _contextP }
/// &summary&
/// Gets or sets the transaction settings.
/// &/summary&
/// &value&
/// The transaction settings.
/// &/value&
public TransactionSettings TransactionSettings
get { return transactionS }
set { transactionSettings = }
/// &summary&
/// Returns metadata string serialized from data context.
/// &/summary&
/// &returns&string&/returns&
[AccessRightAuthorize(AccessRight.DEFAULT_SITE)]
//[AccessRightAuthorize(AccessRight.APPOINT_READ)]
public string Metadata()
string metadata = string.E
metadata = _contextProvider.Metadata();
return ControllerHelper.attachDisplayNameToMetadata(metadata);
catch (Exception ex)
if (this.HandleException(ex))
breeze 后台代码示例
public getScreeningCentreById(centreId: number, forceRemote: boolean): breeze.promises.IPromise&App.DataAccess.Setups.ScreeningParameterModel.IEntityCentre& {
var query = this.entityQuery
.from("GetScreeningCentreParametersById")
.withParameters({ centreId: centreId });
return this.manager.executeQuery(query)
.then((data) =& {
return data.results[0];
JS 数据查询
breaze.js的语法类似LINQ。
列举简单例子：
this.entityQuery.from("数据集合/后台方法名").withParameters("参数1，参数2，&&&&&&").
& & & & & & & & & & & & where("查询条件").orderByDesc("排序属性").inlineCount();
this.manager.executeQueryLocally(query)
this.manager.executeQuery(query)
是不是非常眼熟。当执行这段代码的时候。才会去数据拿数据。manager是breeze在JS中定义的Entity。类似EF的概念。
executeQueryLocally是查询在缓存中的数据。默认只要查过的数据都会存在manager缓存中。executeQuery不会取缓
存数据。每次都会去执行后台代码，从数据库拿。
　　当用户发起数据请求，系统会自动去找到改页面对应的控制器。通过Metadata()方法，拿到所需要的所有数据结构并且
返回给前端。
& & （注意:如果第一次是更新操作，没有拿数据结构，则必须先执行查询操作，否则会报错。)
& & &页面所有操作的数据会缓存浏览器然后通过SaveChanges方法更新到数据库。参数"JObject saveBundle& 是JSON对象
& & &。之前通过Metadata()拿到的所有结构和数据都会在里面。(优点：减少代码量，缺点：性能是个question.),当然，你也
& & &可以选择存储过程。至于Breeze.WebApi2.dll 的内部实现，这节我们后面的章节会详细说明。
通过这一系列的准备工作。就可以进行数据交互了。
2.数据展示。Grid
& & 拿到数据之后绑定到Kendo Ui就是几个参数配置的事情。但是，由于使用了Breeze，拿到的数据时beeze Entity的数据结构
& & 形式的JSON，不被KendoUI&Grid的schema所认识，我得和你搞好关系，你才能帮我办事。怎么办，重写Schema，先变成
& & 你认识的样子再说。于是就有了下面这段：
//#region Breeze kendo grid extention Methods
public createSchema = (resourceName: string): any =& {
var schema: App.Shared.IBreezeKendoGridSchema = {
total: function (data) {
return data.
var typeObj = this.service.domainManager.getTypeByResourceName(resourceName);
} catch (ex) {
var model: App.Shared.IBreezeKendoGridModel = {
fields: {},
if (typeObj.keyProperties) {
if (typeObj.keyProperties.length == 1) {
model.id = typeObj.keyProperties[0].
} else if (typeObj.keyProperties.length & 1) {
var msg = "Multiple-key ID not supported";
this.logError(msg, "createSchema");
//typeObj.keyProperties.forEach(function (keyProp) {
model.id[keyProp.name] = keyProp.
typeObj.dataProperties.forEach(function (prop) {
var type = "string";
if (prop.dataType.isNumeric) {
type = "number";
else if (prop.dataType.isDate) {
type = "date";
else if (prop.dataType.getName() == "Boolean") {
type = "boolean";
model.fields[prop.name] = {
type: type,
defaultValue: prop.defaultValue,
nullable: prop.isNullable
schema.model =
//#endregion
createSchema
做完整容之后，按照Kendo UI官网配置来，就有了下面的图片。&
备注：个人认为这套架构最大的优点就是无需业务层的任何数据操作代码。大大的减少代码量。提高了开发效率。与此同时，由于
& & & & 数据操作代码和展示层都是TypeScript实现。几乎全站所有的代码，可以轻而易举的Copy。辛辛苦苦多少个日夜，一建
& & & & Copy全带走。
阅读(...) 评论()关于Breeze.js+Angular.js+KendoUI+BootStrap+TypeScript+EF4.5的使用心得记录之一
发布时间: 10:10:11
第一章：数据交互
提醒：博客开篇之作。望指导。不喜随便喷。
什么也不说，先上图。
就kendoui官网有详细的API说明，不做过多累赘，以下图中用到的控件为例:
& &页面简洁得体，是我个人比较偏爱的。主要来讲讲和GridOnLineEdit结合Angular和BreezeJs的应用。
& &1.Breeze.js
& & &?功能：负责处理前端和后端程序的通讯。
& 用法：到官网下载Breeze包。在页面引入上图中JS。
& & & & & 添加Breeze.WebApi2.dll引用。&在后端控制器添加BreezeController特性。&
& & & & & & &&
[BreezeController(MaxAnyAllExpressionDepth = 2)]
public class AppointmentsController : BaseController
readonly EFContextProvider&AppointmentContext& _contextProvider = new EFContextProvider&AppointmentContext&();
readonly EFContextProvider&LookupContext& _lookupContextProvider = new EFContextProvider&LookupContext&();
readonly EFContextProvider&SetupScreeningSiteContext& _siteContextProvider = new EFContextProvider&SetupScreeningSiteContext&();
readonly EFContextProvider&LookupScreeningParameterContext& _screenCentreContextProvider = new EFContextProvider&LookupScreeningParameterContext&();
TransactionSettings transactionSettings = null;
/// &summary&
/// Gets the context provider.
/// &/summary&
/// &value&
/// The context provider.
/// &/value&
public EFContextProvider&AppointmentContext& ContextProvider
get { return _contextP }
/// &summary&
/// Gets or sets the transaction settings.
/// &/summary&
/// &value&
/// The transaction settings.
/// &/value&
public TransactionSettings TransactionSettings
get { return transactionS }
set { transactionSettings = }
/// &summary&
/// Returns metadata string serialized from data context.
/// &/summary&
/// &returns&string&/returns&
[AccessRightAuthorize(AccessRight.DEFAULT_SITE)]
//[AccessRightAuthorize(AccessRight.APPOINT_READ)]
public string Metadata()
string metadata = string.E
metadata = _contextProvider.Metadata();
return ControllerHelper.attachDisplayNameToMetadata(metadata);
catch (Exception ex)
if (this.HandleException(ex))
breeze 后台代码示例
public getScreeningCentreById(centreId: number, forceRemote: boolean): breeze.promises.IPromise&App.DataAccess.Setups.ScreeningParameterModel.IEntityCentre& {
var query = this.entityQuery
.from("GetScreeningCentreParametersById")
.withParameters({ centreId: centreId });
return this.manager.executeQuery(query)
.then((data) =& {
return data.results[0];
JS 数据查询
breaze.js的语法类似LINQ。
列举简单例子：
this.entityQuery.from("数据集合/后台方法名").withParameters("参数1，参数2，&&&&&&").
& & & & & & & & & & & & where("查询条件").orderByDesc("排序属性").inlineCount();
this.manager.executeQueryLocally(query)
this.manager.executeQuery(query)
是不是非常眼熟。当执行这段代码的时候。才会去数据拿数据。manager是breeze在JS中定义的Entity。类似EF的概念。
executeQueryLocally是查询在缓存中的数据。默认只要查过的数据都会存在manager缓存中。executeQuery不会取缓
存数据。每次都会去执行后台代码，从数据库拿。
　　当用户发起数据请求，系统会自动去找到改页面对应的控制器。通过Metadata()方法，拿到所需要的所有数据结构并且
返回给前端。
& & （注意:如果第一次是更新操作，没有拿数据结构，则必须先执行查询操作，否则会报错。)
& & &页面所有操作的数据会缓存浏览器然后通过SaveChanges方法更新到数据库。参数"JObject saveBundle& 是JSON对象
& & &。之前通过Metadata()拿到的所有结构和数据都会在里面。(优点：减少代码量，缺点：性能是个question.),当然，你也
& & &可以选择存储过程。至于Breeze.WebApi2.dll 的内部实现，这节我们后面的章节会详细说明。
通过这一系列的准备工作。就可以进行数据交互了。
2.数据展示。Grid
& & 拿到数据之后绑定到Kendo Ui就是几个参数配置的事情。但是，由于使用了Breeze，拿到的数据时beeze Entity的数据结构
& & 形式的JSON，不被KendoUI&Grid的schema所认识，我得和你搞好关系，你才能帮我办事。怎么办，重写Schema，先变成
& & 你认识的样子再说。于是就有了下面这段：
//#region Breeze kendo grid extention Methods
public createSchema = (resourceName: string): any =& {
var schema: App.Shared.IBreezeKendoGridSchema = {
total: function (data) {
return data.
var typeObj = this.service.domainManager.getTypeByResourceName(resourceName);
} catch (ex) {
var model: App.Shared.IBreezeKendoGridModel = {
fields: {},
if (typeObj.keyProperties) {
if (typeObj.keyProperties.length == 1) {
model.id = typeObj.keyProperties[0].
} else if (typeObj.keyProperties.length & 1) {
var msg = "Multiple-key ID not supported";
this.logError(msg, "createSchema");
//typeObj.keyProperties.forEach(function (keyProp) {
model.id[keyProp.name] = keyProp.
typeObj.dataProperties.forEach(function (prop) {
var type = "string";
if (prop.dataType.isNumeric) {
type = "number";
else if (prop.dataType.isDate) {
type = "date";
else if (prop.dataType.getName() == "Boolean") {
type = "boolean";
model.fields[prop.name] = {
type: type,
defaultValue: prop.defaultValue,
nullable: prop.isNullable
schema.model =
//#endregion
createSchema
做完整容之后，按照Kendo UI官网配置来，就有了下面的图片。&
备注：个人认为这套架构最大的优点就是无需业务层的任何数据操作代码。大大的减少代码量。提高了开发效率。与此同时，由于
& & & & 数据操作代码和展示层都是TypeScript实现。几乎全站所有的代码，可以轻而易举的Copy。辛辛苦苦多少个日夜，一建
& & & & Copy全带走。
来源:/marktoy/p/4546217.html}