Questions on Kendo UI for jQuery Forum

1 answer

317 views

I have a Kendo UI grid to which I want to pass a Model that has data in it. Whenever I do sorting or pagination, I do not want to refresh , so I am trying to do ajax

@using Kendo.Mvc.UI.Fluent

@model IEnumerable<Models.TrainingVideo>

@{

ViewBag.Title = "Video Management";

}

<div style="margin-top: 30px;">

@Html.Kendo().Grid(Model).Name("WatchVideoGrid").Columns(columns =>

{

columns.Bound(x => x.Name);

columns.Bound(x => x.Description);

columns.Bound(x => x.LastUpdateDate);

columns.Command(commands => commands.Custom("EditVideoCommand")

.Text("Edit")

.DataRouteValues(route => route.Add(o => o.VideoUID).RouteKey("videoId"))

.Action("EditSelectedVideo", "Home"));

columns.Command(commands => commands.Custom("DeleteVideoCommand")

.Text("Delete")

.DataRouteValues(route => route.Add(o => o.VideoUID).RouteKey("videoId"))

.Action("DeleteSelectedVideo", "Home"));

columns.Command(commands => commands.Custom("ReplaceVideoCommand")

.Text("Replace")

.DataRouteValues(route => route.Add(o => o.VideoUID).RouteKey("videoId"))

.Action("ReplaceSelectedVideo", "Home"));

}).Pageable().Sortable().Scrollable().Filterable())

public PartialViewResult _VideoManagement()

{

Videos videos = new Videos();

return PartialView(videos.VideoList);

}

where VideoList is List<TrainingVideo> and it works this way without ajax binding, however I am trying to do Ajax

and Here is my ajax version

@Html.Kendo().Grid(Model).Name("WatchVideoGrid").Columns(columns =>

{

columns.Bound(x => x.Name);

columns.Bound(x => x.Description);

columns.Bound(x => x.LastUpdateDate);

columns.Command(commands => commands.Custom("EditVideoCommand")

.Text("Edit")

.DataRouteValues(route => route.Add(o => o.VideoUID).RouteKey("videoId"))

.Action("EditSelectedVideo", "Home"));

columns.Command(commands => commands.Custom("DeleteVideoCommand")

.Text("Delete")

.DataRouteValues(route => route.Add(o => o.VideoUID).RouteKey("videoId"))

.Action("DeleteSelectedVideo", "Home"));

columns.Command(commands => commands.Custom("ReplaceVideoCommand")

.Text("Replace")

.DataRouteValues(route => route.Add(o => o.VideoUID).RouteKey("videoId"))

.Action("ReplaceSelectedVideo", "Home"));

}).Pageable().Sortable().Scrollable().Filterable().DataSource(builder => builder.Ajax().Read(read=>read.Action("VideoListRead","Home")))

and controller has

public ActionResult VideoListRead([DataSourceRequest] DataSourceRequest request)

{

Videos videos = new Videos();

return Json(videos.VideoList.ToDataSourceResult(request));

}

I followed the demo closely but could not make it work. Do you see any discrepancies?

Grid

answered on 05 Aug 2013

1 answer

67 views

BUG FOUND: PopOver immediately dismisses on Mobile Safari when triggered by a Tabstrip item

http://jsbin.com/ofawul/3#/

This one's been bugging me but I finally isolated the scenario where is consistently occurs. Please refer to the jsbin link. The last item 'More' has a popover attached to it. This works ok on desktop browsers, but while I ran this in mobile safari, the popover appears then fades away immediately. I tried several workarounds (e.preventDefault() on the close of the popover, etc.) but with no success.

PopOver (Mobile)

answered on 05 Aug 2013

2 answers

147 views

Get Scheduler TimeSlot on kendoDropTarget

Hi i have a grid and i need to plan a scheduler from this.
How can i get the timeslot where i dragged?

var grid = $("#requestGrid").data("kendoGrid");

var scheduler = $("#ganttScheduler").data("kendoScheduler");

var itemUID;

grid.table.kendoDraggable({

cursorOffset: {

top: 5,

left: 5

},

filter: "tbody > tr",

group: "Grid",

hint: function (e) {

itemUID = e.attr(kendo.attr("uid"));

return $('<div class="k-grid k-widget"><table><tbody><tr>' + e.html()+ '</tr></tbody></table></div>');

}

});

scheduler.element.kendoDropTarget({

group: "Grid",

drop: function (e) {

alert("Dragged row 'uid': " + itemUID);

//in case you need the model(data item) for this row

var model = grid.dataSource.getByUid(itemUID);

var aa = $(e.toElement).text();

itemUID = null;

}

});

Drag and Drop

answered on 05 Aug 2013

1 answer

207 views

In progress icon

This is probably pretty trival but I haven't found the answer yet. When I set a grid to popup mode is there an easy way to show an in-progress icon? Until the form is submitted?

Grid

answered on 05 Aug 2013

3 answers

240 views

With or without Twitter Bootstrap?

Hi,

I was trying to use kendoUI together twitter bootstrap, but there seems to bee just too many rendering glitches and problems :(.

What do you recommend? should users use it together, and if yes, what pitfalls should they avoid (for me the co-existence looks quite fragile) ?

The main problems seems to arise from the fact that the number of available kendoUI components is quite small compared to e.g. Sencha ExtJS, so Twitter Bootstrap et. co. seems to supply quite allot of this missing stuff, but than it breaks the existing ones :(.

regards.

General Discussions

answered on 05 Aug 2013

1 answer

177 views

Sparkline chart height not getting set and unable to display baseline + notes(icons for line information)

I am facing an issue with sparkline chart's height.
It is not set by height,min-height,line-height.
Also the labels and base axis are also not displayed.

Sparkline

answered on 05 Aug 2013

1 answer

185 views

Changing existing themes.

Hello,

I'm attempting to make a small change to the file: kendo.dataviz.black.min.css

The section changed in kendo.dataviz.black.min.css is the following:
.k-chart .k-mask
{
/*orginal background-color*/
/*background-color: #3d3d3d;*/
background-color: #171717;
filter: alpha(opacity=70);
-moz-opacity: .70;
opacity: .70;
}

The references to the files are the following:
@*Kendo CSS*@
<link href="@Url.Content("~/Content/kendo/2013.2.716/kendo.common.min.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/kendo/2013.2.716/kendo.dataviz.min.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/kendo/2013.2.716/kendo.dataviz.black.min.css")" rel="stylesheet" type="text/css" />

@*Kendo Scripts*@
<script src='@Url.Content("~/Content/js/jquery-1.10.1.min.js")'></script>
<script src="@Url.Content("~/Scripts/kendo/2013.2.716/jquery.min.js")"></script>
<script src="@Url.Content("~/Scripts/kendo/2013.2.716/kendo.all.min.js")"></script>
<script src="@Url.Content("~/Scripts/kendo/2013.2.716/kendo.aspnetmvc.min.js")"></script>
<script src="@Url.Content("~/Scripts/typescript/app.js")"></script>
<script src="@Url.Content("~/Scripts/kendo.modernizr.custom.js")"></script>

The code for my chart is the following:
@(Html.Kendo().Chart()
.Name("chart")
.Title("% Long vs S&P 500")
.Theme("black")
...

The chart renders perfect except it renders with default background color for the black theme #3d3d3d, instead of my altered #171717.

Why isn't this working?

Thank you.

General Discussions

answered on 05 Aug 2013

4 answers

179 views

[Bug Report] 2013.2.716 Editor toolbar layout issue

Hi there,

After upgraded to version 2013.2.716, I found that the layout of editor toolbar is not correct if the editor is hidden when initialization and toolbar needs multiple lines. All icons in toolbar are in one line, exceeds the right boarder of editor. If I click the edit area, all icons are positioned correctly. Here is my test code (also attached):

<!doctype html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Kendo UI Editor Toolbar Issue</title>

<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.common.min.css">

<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.default.min.css">

<style>

/* uncomment following line for a workaround */

/* .k-editor-toolbar{ white-space: normal;} */

</style>

</head>

<body>

<h1>Kendo UI Editor Toolbar Issue</h1>

<div id="editdiv" style="display: none">

<div>

<textarea id="editor" cols="30" rows="10"

style="width:570px;height:300px"></textarea>

</div>

<button id="show">Show Editor</button>

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

<script src="http://cdn.kendostatic.com/2013.2.716/js/kendo.web.min.js"></script>

<script>

$(function(){

$("#editor").kendoEditor({

encoded: true,

tools: [ "bold", "italic", "underline", "strikethrough",

"justifyLeft", "justifyCenter", "justifyRight",

"justifyFull", "insertUnorderedList", "insertOrderedList",

"indent", "fontName", "fontSize", "outdent",

"foreColor", "backColor"]

});

$("#show").on('click', function(){

$("#editdiv").show();

$(this).hide();

})

});

</script>

</body>

</html>

I found a temp work around though, add following line to my own css:
.k-editor-toolbar{ white-space: normal;}

Gong

Editor

answered on 05 Aug 2013

1 answer

74 views

internal build 2013.2.726 problem with jquery selector

Hi, my app was working properly with 2013.1.514 build and jquery 1.9.1that came with the release. after upgrading to internal build 2013.2.726 and the jquery that comes with the release, my app stopped working with weird behavior when trying to select elements with jquery. for example $("#mybutton") would return nothing. nothing else is changed besides the newer version of kendo ui mobile. there is no java script errors in the browser inspector. the element that i want to select is also in the dom as I can find it in the browser inspector as well. any ideas?

cheers

General Discussions

answered on 05 Aug 2013

1 answer

443 views

Link to an external URL with querystring parameters from a MenuItem

I am unable to link to an external URL from the Kendo Menu Item. I want the menu item to link to an external site with some querystring params.

I have tried the menuItem.Url( ) and menuItem.Action(routeValues) to set the external URL i.e https://myOtherSite:99/path/To/Res and routeValue dictionary specifying the key values for the QueryString params, but the menuItem ignores the URL and passes the QueryString params to the current domain's root.

Also I tried setting the .Url("https://myOtherSite:99/path/To/Res?a=1&b=2"). This results in no link on the menu at all.

Is there a way to do this?

Thanks.

PS: My only solution for now is to link the menuItem to a Controller/Action in my application with an extra parameter (the URL) and add the redirect in there. But i want to avoid that.

Menu

answered on 05 Aug 2013