I'm trying to filter calendar MeetingAttendees which can have multiple users. I've built a filter and tested with various options, but it doesn't work. The basic example shows how to filter a calendar owner (which is a single value) and it works fine for me. But Attendees is an array and when I'm trying to filter that all my events disappear.
Here is my filter code:
var checked = $.map($("#teamMembers :checked"), function (checkbox) {
return parseInt($(checkbox).val());
});
var filter = {
logic: "or",
filters: $.map(checked, function (value) {
return {
operator: "eq",
field: "Attendees",
value: value
};
})
};
var scheduler = $("#scheduler").data("kendoScheduler");
scheduler.dataSource.filter(filter);
Attendees in MeetingViewModel are loaded as an array:
Attendees = meeting.MeetingAttendees.Select(m => m.AttendeeID).ToArray(),
Here is the scheduler configuration:
#(Html.Kendo().Scheduler<Itsws.Models.MeetingViewModel>()
.Name("scheduler")
.Date(DateTime.Today)
.Editable(editable =>
{
editable.TemplateName("CustomEditorTemplate");
})
.StartTime(new DateTime(DateTime.Today.Year, DateTime.Today.Month, DateTime.Today.Day, 7, 00, 00))
.Height(600)
.Views(views =>
{
views.DayView();
views.WeekView(weekView => weekView.Selected(true));
views.MonthView();
views.AgendaView();
views.TimelineView();
})
.Timezone("Etc/UTC")
.DataSource(d => d
.Model(m =>
{
m.Id(f => f.MeetingID);
m.Field(f => f.Title).DefaultValue("No title");
m.RecurrenceId(f => f.RecurrenceID);
m.Field(f => f.Title).DefaultValue("No title");
})
.Read("Meetings_Read", "Scheduler")
.Create("Meetings_Create", "Scheduler")
.Destroy("Meetings_Destroy", "Scheduler")
.Update("Meetings_Update", "Scheduler")
)
)
Apparently operator field can also be a function that does filter comparison. Here is the sample code generously provided by Telerik support.
More info here:
http://www.telerik.com/forums/how-to-filter-array-type-of-resource-(e-g-attendees)
<!DOCTYPE html>
<html>
<head>
<base href="http://demos.telerik.com/kendo-ui/scheduler/resources-grouping-vertical">
<style>html { font-size: 12px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.common.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.moonlight.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.dataviz.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.dataviz.moonlight.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.default.mobile.min.css" />
<script src="http://cdn.kendostatic.com/2015.1.408/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2015.1.408/js/kendo.all.min.js"></script>
<script src="http://cdn.kendostatic.com/2015.1.408/js/kendo.timezones.min.js"></script>
</head>
<body>
<div id="example" class="k-content">
<div id="team-schedule">
<div id="attendees">
<ul>
<li>Alex: <input type="checkbox" id="alex" value="1"></li>
<li>BoB: <input type="checkbox" id="bob" value="2"></li>
<li>Charlie: <input type="checkbox" id="charlie" value="3"></li>
</ul>
</div>
</div>
<div id="scheduler"></div>
</div>
<script>
$(function() {
$("#scheduler").kendoScheduler({
date: new Date("2013/6/13"),
height: 600,
views: [
"timelineMonth"
],
timezone: "Etc/UTC",
dataSource: {
batch: true,
transport: {
read: {
url: "http://demos.telerik.com/kendo-ui/service/meetings",
dataType: "jsonp"
},
update: {
url: "http://demos.telerik.com/kendo-ui/service/meetings/update",
dataType: "jsonp"
},
create: {
url: "http://demos.telerik.com/kendo-ui/service/meetings/create",
dataType: "jsonp"
},
destroy: {
url: "http://demos.telerik.com/kendo-ui/service/meetings/destroy",
dataType: "jsonp"
},
parameterMap: function(options, operation) {
if (operation !== "read" && options.models) {
return {models: kendo.stringify(options.models)};
}
}
},
schema: {
model: {
id: "meetingID",
fields: {
meetingID: { from: "MeetingID", type: "number" },
title: { from: "Title", defaultValue: "No title", validation: { required: true } },
start: { type: "date", from: "Start" },
end: { type: "date", from: "End" },
startTimezone: { from: "StartTimezone" },
endTimezone: { from: "EndTimezone" },
description: { from: "Description" },
recurrenceId: { from: "RecurrenceID" },
recurrenceRule: { from: "RecurrenceRule" },
recurrenceException: { from: "RecurrenceException" },
roomId: { from: "RoomID", nullable: true },
attendees: { from: "Attendees", nullable: true },
isAllDay: { type: "boolean", from: "IsAllDay" }
}
}
}
},
group: {
resources: ["Rooms", "Attendees"],
orientation: "vertical"
},
resources: [
{
field: "roomId",
name: "Rooms",
dataSource: [
{ text: "Meeting Room 101", value: 1, color: "#6eb3fa" },
{ text: "Meeting Room 201", value: 2, color: "#f58a8a" }
],
title: "Room"
},
{
field: "attendees",
name: "Attendees",
dataSource: [
{ text: "Alex", value: 1, color: "#f8a398" },
{ text: "Bob", value: 2, color: "#51a0ed" },
{ text: "Charlie", value: 3, color: "#56ca85" }
],
multiple: true,
title: "Attendees"
}
]
});
$("#attendees :checkbox").change(function(e) {
var checked = $.map($("#attendees :checked"), function(checkbox) {
return parseInt($(checkbox).val());
});
var scheduler = $("#scheduler").data("kendoScheduler");
scheduler.dataSource.filter({
field: "attendees",
operator: function(item, value) {
var found = true;
for (var i = 0; i < checked.length; i++) {
if (item.indexOf(checked[i]) < 0) {
found = false;
}
}
return found;
}
});
});
});
</script>
</body>
</html>
Related
I have created three input boxes that should filter the chart. The second option seems not to be working. I have not found any problem in the code so far.
//JSON query
var json_data = [
{
"mip": {
"id": 125,
"name": "One",
"code": "One"
},
"briefNetSpendInEuro": 2200,
"postNetSpendInEuro": 0,
"proposalSpendInEuro": 3530
},
{
"mip": {
"id": 125,
"name": "Two",
"code": "Two"
},
"briefNetSpendInEuro": 12052,
"postNetSpendInEuro": 2516,
"proposalSpendInEuro": 5358
},
{
"mip": {
"id": 531,
"name": "Three",
"code": "Three"
},
"briefNetSpendInEuro": 5391,
"postNetSpendInEuro": 9812,
"proposalSpendInEuro": null
}
]
var categories = [];
var series = [];
var brief = [];
var post = [];
var proposal = [];
//JSON manipulation to prepare the data for the highchart
json_data.forEach(function(element) {
categories.push(element.mip.code);
brief.push(element.briefNetSpendInEuro = element.briefNetSpendInEuro || 0);
post.push(element.postNetSpendInEuro = element.postNetSpendInEuro || 0);
proposal.push(element.proposalSpendInEuro = element.proposalSpendInEuro || 0);
});
//Filter creation
$(function() {
var chart = new Highcharts.Chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Spend per Media Group'
},
xAxis: {
categories: [{
"class": "One",
"name": "One"
}, {
"class": "Two",
"name": "Two"
}, {
"class": "Three",
"name": "Three"
}],
labels: {
formatter: function() {
return this.value.name;
},
useHTML: true
}
},
yAxis: {
min: 0,
title: {
text: 'Spend (EUR)'
}
},
tooltip: {
headerFormat: '<span style="font-size:10px">{point.key.name}</span><table>',
pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
'<td style="padding:0"><b>{point.y:.,0f} </b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
plotOptions: {
},
series: [{
name: 'Brief Net',
data: brief
}, {
name: 'Post Net',
data: post
}, {
name: 'Proposal',
data: proposal
}]
}, function() {
$('input[type=checkbox]').bind('click', function() {
togglePointsByClass(this.value, $(this).is(':checked'), chart)
});
});
var visibleArr = [0, 1, 2];
function togglePointsByClass(className, shouldShow, chart) {
var isChartDirty = false;
if (shouldShow) {
chart.xAxis[0].userOptions.categories.forEach(function(category, i) {
if (category.class === className) {
visibleArr.push(i);
}
});
} else {
chart.xAxis[0].userOptions.categories.forEach(function(category, i) {
if (category.class === className && visibleArr.indexOf(i) > -1) {
visibleArr.splice(visibleArr.indexOf(i), 1);
}
});
}
if (visibleArr.length) {
chart.xAxis[0].update({
min: Math.min.apply(null, visibleArr),
max: Math.max.apply(null, visibleArr)
})
}
}
$('#container').highcharts().redraw();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div class="row">
<div class="col-xs-12">
<div class="box-first box-container">
<div class="row">
<div class="col-xs-4">
<input type="checkbox" name="One" value="One" checked> One
</div>
<div class="col-xs-4">
<input type="checkbox" name="Two" value="Two" checked> Two
</div>
<div class="col-xs-4">
<input type="checkbox" name="Three" value="Three" checked> Three
</div>
</div>
</div>
</div>
</div>
<div id="container" style="min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto"></div>
The concept is to recalculate your series each time and determine which to show.
I took your initial calculation of data and turned it to a function like this, calling each time with the visibleArr.
const calcData = (arr) => {
const brief = [];
const proposal = [];
const post = [];
json_data.forEach((element, i) => {
if (arr.includes(i)) {
brief.push(element.briefNetSpendInEuro || 0);
post.push(element.postNetSpendInEuro || 0);
proposal.push(element.proposalSpendInEuro || 0);
}
});
return [{ name: 'Brief Net', data: brief },
{ name: 'Post Net', data: post },
{ name: 'Proposal', data: proposal }];
};
Take a look at this jsfiddle: http://jsfiddle.net/ueso3bc6/1/
In my project am showing js grid from partial view. so tried like this
View
<div id="searchgrid" class="col-lg-12">
#Html.Partial("ResultGrid", new List<SCM_MVC.Models.User>(), new ViewDataDictionary(this.ViewData) { { "index" , ViewData["Form"] } })
</div>
<script src="~/assets/js/jquery-1.10.2.js"></script>
<script>
var url = '#Url.Action("ResultGrid", "User", new { xEdit = ViewData["Form"]})';
$('#btnloadgrid').click(function () {
$('#searchgrid').load(url);
})
</script>
Partial View
#model IEnumerable<SCM_MVC.Models.User>
#{
/**/
/**/
#section head {
#*<link rel="stylesheet" type="text/css" href="~/SCM/jsgrid/css/demos.css" />*#
<link rel="stylesheet" type="text/css" href="~/SCM/jsgrid/css/jsgrid.css" />
<link rel="stylesheet" type="text/css" href="~/SCM/jsgrid/css/theme.css" />
<script src="~/SCM/jsgrid/js/jquery-1.8.3.js"></script>
<script src="~/SCM/jsgrid/src/jsgrid.core.js"></script>
<script src="~/SCM/jsgrid/src/jsgrid.load-indicator.js"></script>
<script src="~/SCM/jsgrid/src/jsgrid.load-strategies.js"></script>
<script src="~/SCM/jsgrid/src/jsgrid.sort-strategies.js"></script>
<script src="~/SCM/jsgrid/src/jsgrid.field.js"></script>
<script src="~/SCM/jsgrid/src/jsgrid.core.js"></script>
<script src="~/SCM/jsgrid/src/fields/jsgrid.field.text.js"></script>
<script src="~/SCM/jsgrid/src/fields/jsgrid.field.number.js"></script>
<script src="~/SCM/jsgrid/src/fields/jsgrid.field.select.js"></script>
<script src="~/SCM/jsgrid/src/fields/jsgrid.field.checkbox.js"></script>
<script src="~/SCM/jsgrid/src/fields/jsgrid.field.control.js"></script>
}
/**/
<table id="jsGrid"></table>
#section scripts {
<script src="http://js-grid.com/js/jsgrid.min.js"></script>
<script>
$(function () {
$("#jsGrid").jsGrid({
height: "70%",
width: "100%",
filtering: true,
editing: true,
inserting: true,
sorting: true,
paging: true,
autoload: true,
pageSize: 15,
pageButtonCount: 5,
deleteConfirm: "Do you really want to delete the user?",
controller: {
loadData: function (filter) {
return $.ajax({
type: "GET",
url: "/api/data",
data: filter,
dataType: "json"
});
},
insertItem: function (item) {
return $.ajax({
type: "POST",
url: "/api/data",
data: item,
dataType: "json"
});
},
updateItem: function (item) {
return $.ajax({
type: "PUT",
url: "/api/data/" + item.ID,
data: item,
dataType: "json"
});
},
deleteItem: function (item) {
return $.ajax({
type: "DELETE",
url: "/api/data/" + item.ID,
dataType: "json"
});
}
},
fields: [
{ name: "user_id", title: Resources.Resource.user_id, type: "text", width: 150 },
{ name: "username", title: Resources.Resource.user_name, type: "text", width: 50 },
{ name: "mailid", title: Resources.Resource.mailid, type: "text", width: 200 },
{ name: "role", title: Resources.Resource.role, type: "text", width: 50 },
{ name: "dept", title: Resources.Resource.dept, type: "text", width: 100 },
{ name: "designation", title: Resources.Resource.designation, type: "text", width: 100 },
{ name: "city", title: Resources.Resource.city, type: "text", width: 100 },
{ name: "country", title: Resources.Resource.country, type: "text", width: 100 },
{ type: "control" }
]
});
});
</script>
}
}
DataController
namespace SCM_MVC.Controllers
{
public class DataController : ApiController
{
// GET: Data
public IEnumerable<object> Get()
{
//ClientFilter filter = GetFilter();
//var result = DB.Client.Where(c =>
// (String.IsNullOrEmpty(filter.Name) || c.Name.Contains(filter.Name)) &&
// (String.IsNullOrEmpty(filter.Address) || c.Address.Contains(filter.Address)) &&
// (!filter.Married.HasValue || c.Married == filter.Married) &&
// (!filter.Country.HasValue || c.Country == filter.Country)
//);
Models.User xuser = new Models.User();
List<Models.User> xuserlist = new List<Models.User>();
//if (ViewData["index"] == null)
//{
// ViewData["index"] = xEdit;
//}
xuser.UserId = "US-0001";
xuser.UserName = "Robert";
xuser.Mailid = "robert#gmail.com";
xuser.Role = "Admin";
xuser.Designation = "Sales Admin";
xuser.Dept = "Sales";
xuser.State = "Tamil Nadu";
xuser.Country = "India";
xuserlist.Add(xuser);
return xuserlist;
}
}
}
UserController
public ActionResult ResultGrid(string xEdit)
{
Models.User xuser = new Models.User();
List<Models.User> xuserlist = new List<Models.User>();
xuser.UserId = "US-0001";
xuser.UserName = "Robert";
xuser.Mailid = "robert#gmail.com";
xuser.Role = "Admin";
xuser.Designation = "Sales Admin";
xuser.Dept = "Sales";
xuser.State = "Tamil Nadu";
xuser.Country = "India";
xuserlist.Add(xuser);
return PartialView(xuserlist);
}
But in Screen its not showing. What am doing wrong here?
Thanks
Am using Visual Studio 2017 ASP.Net MVC
I am trying to display ScheduleState for UserStories in a grid.
I am not able to display ScheduleState as editable bar, like we see in Rally, with DPCA bar-columns for each state.
For e.g. SimpleTreeGrid example on below link shows user-story schedule state as DPCA bar-columns.
https://help.rallydev.com/apps/2.1/doc/#!/example/simple-tree-grid
Code is as below.
<!DOCTYPE html>
<html>
<head>
<title>Custom Store Grid Example</title>
<script type="text/javascript" src="/apps/2.1/sdk.js"></script>
<script type="text/javascript">
Rally.onReady(function() {
Ext.define('Rally.example.CustomStoreGrid', {
extend: 'Rally.app.App',
componentCls: 'app',
launch: function() {
console.log('launch');
Ext.create('Rally.data.wsapi.Store', {
model: 'userstory',
autoLoad: true,
listeners: {
load: this._onDataLoaded,
scope: this
},
fetch: ['FormattedID', 'ScheduleState', 'ScheduleStatePrefix' ]
});
},
_onDataLoaded: function(store, data) {
console.log('_onDataLoaded data', data);
this.add({
xtype: 'rallygrid',
showPagingToolbar: false,
showRowActionsColumn: false,
editable: false,
store: Ext.create('Rally.data.custom.Store', {
data: data
}),
columnCfgs: [
{
xtype: 'templatecolumn',
text: 'ID',
dataIndex: 'FormattedID',
width: 100,
tpl: Ext.create('Rally.ui.renderer.template.FormattedIDTemplate')
},
{
text: 'Prefix',
dataIndex: 'ScheduleStatePrefix',
xtype: 'templatecolumn',
tpl: Ext.create('Rally.ui.renderer.template.ScheduleStateTemplate', { field: 'ScheduleStatePrefix'}),
},
{
text: 'State',
dataIndex: 'ScheduleState',
xtype: 'templatecolumn',
tpl: Ext.create('Rally.ui.renderer.template.ScheduleStateTemplate', { field: 'ScheduleState'}),
}
]
});
}
});
Rally.launchApp('Rally.example.CustomStoreGrid', {
name: 'Custom Store Grid Example'
});
});
</script>
<style type="text/css">
</style>
</head>
<body></body>
</html>
Does it need to be a custom store?
If not, the following _onDataLoaded works:
_onDataLoaded: function(store, data) {
console.log('_onDataLoaded data', data);
this.add({
xtype: 'rallygrid',
showPagingToolbar: false,
showRowActionsColumn: false,
editable: true,
store: store,
columnCfgs: [
{
text: 'ID',
dataIndex: 'FormattedID',
width: 100
},
{
text: 'Prefix',
dataIndex: 'ScheduleStatePrefix'
},
{
text: 'State',
dataIndex: 'ScheduleState'
}
]
});
}
});
I have to following code to show my user table, this is achieved by JTable.
<script type="text/javascript">
$(document).ready(function() {
$('#userTableContainer').jtable({
title: 'Users',
selecting: false,
paging: true,
pageSize: 15,
sorting: true,
addRecordButton: false,
saveUserPreferences: false,
create: false,
edit: false,
actions: {
listAction: 'user/getUsers.htm',
},
fields: {
username: {
title: 'username'
},
firstname: {
title: 'firstname'
},
lastname: {
title: 'lastname'
},
company: {
title: 'company'
}
}
});
$('#userTableContainer').jtable('load');
});
</script>
<div id="content">
<h1>Users</h1>
<br />
<div id="userTableContainer">
</div>
</div>
Is it possible to add a custom action event for every row?
So that i could submit a request like "user/showUser.htm" to my controller.
This should get you on your way:
$('#userTableContainer').jtable({
....
recordsLoaded: function(event, data) {
$('.jtable-data-row').click(function() {
var row_id = $(this).attr('data-record-key');
alert('clicked row with id '+row_id);
});
}
});
I think the popup edit mode is the nicest of the edit modes, but with a larger model the popup becomes very long which doesn't look nice.
I've found a solution for this and I'm curious on your ideas/feedback/enhancements for this solution.
I created two custom attributes:
public class NumberOfColumnsAttribute : Attribute, IMetadataAware
{
private readonly int _numberOfColumns;
public NumberOfColumnsAttribute(int numberOfColumns)
{
_numberOfColumns = numberOfColumns;
}
public void OnMetadataCreated(ModelMetadata metadata)
{
if (!metadata.AdditionalValues.ContainsKey("NumberOfColumns"))
{
metadata.AdditionalValues.Add("NumberOfColumns", _numberOfColumns);
}
}
}
public class ShowInColumnAttribute : Attribute, IMetadataAware
{
private readonly int _column;
public ShowInColumnAttribute(int column)
{
_column = column;
}
public void OnMetadataCreated(ModelMetadata metadata)
{
if (!metadata.AdditionalValues.ContainsKey("ShowInColumn"))
{
metadata.AdditionalValues.Add("ShowInColumn", _column);
}
}
}
Then use the [NumberOfColumns(m)] attribute above your edit model and use the [ShowInColumn(n)] attribute above a property (n=1 is assumed when no attribute is applied).
I created a Object.cshtml file in Views/Shared/EditorModels/ as follows.
#if (ViewData.TemplateInfo.TemplateDepth > 1)
{
#ViewData.ModelMetadata.SimpleDisplayText
} else {
for (var i = 1; i <= (int)(!ViewData.ModelMetadata.AdditionalValues.ContainsKey("NumberOfColumns") ? 1 : ViewData.ModelMetadata.AdditionalValues["NumberOfColumns"]);i++)
{
<div class="editor-column">
#foreach (var prop in ViewData.ModelMetadata.Properties.Where(pm => pm.ShowForEdit && !ViewData.TemplateInfo.Visited(pm) && ((int)(!pm.AdditionalValues.ContainsKey("ShowInColumn") ? 1 : pm.AdditionalValues["ShowInColumn"])) == i))
{
if (prop.HideSurroundingHtml) {
#Html.Editor(prop.PropertyName)
} else {
<div class="editor-label">
#Html.Label(prop.PropertyName)
#(prop.IsRequired ? "*" : "")
</div>
<div class="editor-field">
#Html.Editor(prop.PropertyName)
#Html.ValidationMessage(prop.PropertyName, "*")
</div>
}
}
</div>
}
<div class="editor-seperator"></div>
}
And the following lines of CSS:
.k-edit-form-container {
width: auto;
}
.editor-column {
width: 400px;
float: left;
}
.editor-seperator {
clear: both;
}
What do you think?
I think, this would be much simpler. Please run this script on wide screen.
var crudServiceBaseUrl = "//demos.telerik.com/kendo-ui/service",
dataSource = new kendo.data.DataSource({
transport: {
read: {
url: crudServiceBaseUrl + "/Products",
dataType: "jsonp"
},
update: {
url: crudServiceBaseUrl + "/Products/Update",
dataType: "jsonp"
},
destroy: {
url: crudServiceBaseUrl + "/Products/Destroy",
dataType: "jsonp"
},
create: {
url: crudServiceBaseUrl + "/Products/Create",
dataType: "jsonp"
},
parameterMap: function(options, operation) {
if (operation !== "read" && options.models) {
return {models: kendo.stringify(options.models)};
}
}
},
batch: true,
pageSize: 20,
schema: {
model: {
id: "ProductID",
fields: {
ProductID: { editable: false, nullable: true },
ProductName: { validation: { required: true } },
UnitPrice: { type: "number", validation: { required: true, min: 1} },
Discontinued: { type: "boolean" },
UnitsInStock: { type: "number", validation: { min: 0, required: true } }
}
}
}
});
$("#grid").kendoGrid({
dataSource: dataSource,
pageable: true,
height: 550,
toolbar: ["create"],
columns: [
{ field:"ProductName", title: "Product Name" },
{ field: "UnitPrice", title:"Unit Price", format: "{0:c}", width: "120px" },
{ field: "UnitsInStock", title:"Units In Stock", width: "120px" },
{ field: "Discontinued", width: "120px" },
{ command: ["edit", "destroy"], title: " ", width: "250px" }],
editable: "popup",
edit: fnMultipleLayoutForm
});
function fnMultipleLayoutForm(){
$(".k-edit-form-container").prepend('<div class="column1" style="display: inline-block; float: left;padding-right:30px"></div><div class="column2" style="display: inline-block;float: left;padding-right:30px;"></div>');
$(".k-edit-form-container").children(".k-edit-label, .k-edit-field").slice(0, parseInt($(".k-edit-form-container").children(".k-edit-label, .k-edit-field").length / 2)).appendTo(".column1");
$(".k-edit-form-container").children(".k-edit-label, .k-edit-field").appendTo(".column2");
$(".k-edit-form-container").css("width", "auto");
$('.k-window').css({ top: '50%', left: '50%', margin: '-' + ($('.k-window').height() / 2) + 'px 0 0 -' + ($('.k-window').width() / 2) + 'px' });
};
<script src="//kendo.cdn.telerik.com/2015.3.1111/js/jquery.min.js"></script>
<script src="//kendo.cdn.telerik.com/2015.3.1111/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2015.3.1111/styles/kendo.common.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2015.3.1111/styles/kendo.default.min.css" />
<div id="grid"></div>