Questions on Kendo UI for jQuery Forum

1 answer

426 views

How to get the Parent's Node name & Id on its child double click

Hi,
I have a tree view which is of 3 levels. First Level is controls , second level is its properties and third level is having just text with getProperty and setProperty.
Now when user double clicks getProperty or setProperty text, I need to have its immediate parent node name(MaxLength) and its id to be displayed.

As shown above, when user double clicks on getProperty, I need to display MaxLength property and its Id.

Here is my json structure.
Let me put my query in otherway, if I double click getProperty under MaxLength, I need to bind the GetPropertyCode element shown in Json structure located under items :Array[18] 0:object.

Please help me how to achieve using Kendo UI.

TreeView

answered on 12 Mar 2014

10 answers

1.3K+ views

Format column for dynamically generated column collection

I am prototyping a solution that uses any of a set of data sources for a grid.

So far, I'm pleased with how kendo easily renders the columns dynamically, without defining them in the instantiation. I've found, also, how to hide columns I do not want rendered. What I've not yet found is how to format dates. I see many examples of applying templates for dates, but none for applying/binding templates to columns after initial kendoGrid instantiation. Is there a way within Kendo to do this, or will I need to write something custom against the DOM?

Thanks,
Foster

Grid

answered on 12 Mar 2014

2 answers

319 views

[Solved] ImageBrowser - Can't select an uploaded image.

We are using the KendoUI editor with success for our clients to publish HTML embedded news items on there portals.

Now that we like to add image support with use of the ImageBrowser we however run into issues, we are using the MVC wrapper, and purchased the Compleate DevCraft Toolbox.

Used this example: http://demos.telerik.com/kendo-ui/web/editor/imagebrowser.html

First the complete example, now a straight forward version where I do inhered the EditorImageBrowserController on the controller and overwrite the ContentPath, nothing more nothing less. Just to make troubleshooting clear of the copy of the shared folder.

Uploading images and everything seems to be working nicely, when pressing the [Insert] button the URL in the [Web address] field is added to the editor.
However I am not able to select one of the uploaded images, they are not highlighted with clicking on it not is the address populated to the [Web address] field.

Double clicking one thumbnail closes the ImageBrowser but is not adding an image tag to in the Editor. Also when checking the HTML-view there are no changed made to the content.

Below some details, but seems simple enough and can't find the cause of this issue, everything should be handled by the EditorImageBrowserController, right?.
Advice and corrections are welcome !

Thanks in advance.

---

Using :
KendoUI MVC : 2013.2.716.340
KendoWeb : 2013.2.716
jQuery : 1.9.0 with migrate 1.2.1

Controller:

using System.Web.Mvc;

using Kendo.Mvc.UI;

public class ImageBrowserController : EditorImageBrowserController

{

public override string ContentPath

{

get

{

return "~/Content/UserGenerated/Images";

}

Razor view:

@using Business.Models

@model Business.Models.UserContent

<div class="full_width settings">

<h3 class="NieuwsEditor">Edit</h3>

<p>Titel : @Html.TextBoxFor(m => m.Title, new { @class = "k-input k-textbox" })

</p>

<p>Release Datum : @(Html.Kendo().DatePicker()

.Name("ReleaseDate")

.Min(new DateTime(1999, 1, 1))

.Max(DateTime.Today.AddYears(1))

.Value(Model.Release)

)

</p>

<p>Organistatie Eenheid : @(Html.Kendo().DropDownList()

.Name("OrgEenheid")

.HtmlAttributes(new { style = "width: 250px" })

.DataTextField("OEDescription")

.DataValueField("OEID")

.DataSource(source => {

source.Read(read =>

{

read.Action("GetMyOEs", "Manage");

});

})

.Value(Model.OrgEenheid.ToString())

)

</p>

@(Html.Kendo().Editor()

.Name("ContentEditor")

.HtmlAttributes(new { style = "width: 740px;height:440px" })

.Tools(tools => tools

.Clear()

.Bold().Italic().Underline().Strikethrough()

.JustifyLeft().JustifyCenter().JustifyRight().JustifyFull()

.InsertUnorderedList().InsertOrderedList()

.Outdent().Indent()

.CreateLink().Unlink()

.InsertImage()

.SubScript()

.SuperScript()

.TableEditing()

.FontSize()

.FontColor().BackColor()

.ViewHtml()

)

.StyleSheets(css => { css.Add(Url.Content("~/Content/css/style.css")); css.Add(Url.Content("~/Content/css/fonts.css")); })

.Value(Model.HTML)

.ImageBrowser(imageBrowser => imageBrowser

.Image("~/Content/UserGenerated/Images/{0}")

.Read("Read", "ImageBrowser")

.Create("Create", "ImageBrowser")

.Destroy("Destroy", "ImageBrowser")

.Upload("Upload", "ImageBrowser")

.Thumbnail("Thumbnail", "ImageBrowser")

)

.Encode(false)

)

<p>

<br />

<button id="SaveContent" type="button" class="k-button right" onclick="javascript:void(0)">Save</button>

</p>

</div>

<script type="text/javascript">

$(document).ready(function () {

$("#SaveContent").click(function () {

var model = {

ContentID: '@Model.ContentID',

ContentTypeID: '@Model.ContentTypeID',

OrgEenheid: $("#OrgEenheid").val(),

UserId: '@Model.UserId',

HTML: $("#ContentEditor").val(),

Title: $('#Title').val(),

Release: kendo.toString($("#ReleaseDate").data("kendoDatePicker").value(), 'yyyy-MM-dd'),

UserContentType: { ContentTypeID: '@Model.UserContentType.ContentTypeID', Type: '@Model.UserContentType.Type', UserGenerated: '@Model.UserContentType.UserGenerated' }

};

$.ajax({

type: "POST",

contentType: "application/json; charset=utf-8",

dataType: "json",

data: JSON.stringify(model),

url: '@Url.Action("SaveContent", "Manage")',

timeout: 40000, // wait upto 40 secs

success: function (result) {

HandleAjaxResult(result);

},

error: function (xhr, status, error) {

$("#editor").html("<span class=\"error\">Error</span>");

}

})

});

</script>

Editor

answered on 12 Mar 2014

2 answers

510 views

Button in ListView Template linked to ViewModel

Hi,

Been working a lot with Web components on a new project I am working on, now trying to develop a mobile app, so switching over to Kendo Mobile.

I want to add a button to selected items in a ListView using a template, which I can do easily enough, and I have added data-bind attribute with a value of "click: onDelete". The button appears correctly in the items I want it to appear in.

When a user clicks on the button I want to run the relevant code in my viewModel passing in the details of the item for which the button was clicked so I can do some further processing.

How do I do this - is there any example somewhere of how this works because I am unable to get the button click to trigger a function call in my viewModel and pass in teh relevant item details

Many thanks in advance

ListView (Mobile)

answered on 12 Mar 2014

2 answers

228 views

Inverted order of values in datetime based category chart

Hi,

I'm experiencing a problem with Kendo UI Chart using datetime based category axis. The chart inverts the order of the values given by the datasource.

Maybe it's an issue with UTC timestamps? To reproduce the problem please have a look to the following plunker: http://plnkr.co/v7LUFkESnYVGSzKijGuU

Thanks,
Holger

Charts

answered on 12 Mar 2014

3 answers

152 views

Error in group method with MobileListView

Hello everyone's, I'm getting an JS error when I want implement an group function into the MobileListView, I'm not sure what I need do to fix it, and it is only showing with the group method, this error happen in IE and Chorme and Firefox
This the error:

Unhandled exception at line 11, column 1845 in http://localhost:65186/Scripts/Kendo/kendo.mobile.min.js
Uncaught TypeError: Cannot read property 'length' of undefined

This is my Mobile List View

@(Html.Kendo().MobileListView<IDigitales.RadBook.Web.Models.StudyViewModel>()

.Name("listview")

.TemplateId("tmp")

.HeaderTemplateId("htmp")

.FixedHeaders(true)

.Style("inset")

.DataSource(datasource =>

datasource

.Read(read => read.Action("Studies","Home").Data("searchparameter"))

.PageSize(10)

.Group(g=>g.Add(m=>m.PatientName))

)

and these are my templates:

<script type="text/x-kendo-template" id="tmp">

<div data-role="content" style="width:100%;">

<table style="width:100%; border-width:2px;">

<tr style="border-width:thin;">

<td style="width:33%">

#: PatientName #

</td>

<td style="width:33%">

#: Modality #

</td>

<td style="width:33%">

#: StudyDate #

</td>

<td>

<div style="background-color:WhiteBlue;">

Status Report

</div

</td>

<td style="right:0px; width:33%">

<div style="position:relative; right:0px;">

<a data-role="button" class="view" data-click="onClick" id="#=StudyId#">View</a>

</div>

</td>

</tr>

<tr>

<td>

#: Description #

</td>

</tr>

<table>

<div>

</script>

<script type="text/x-kendo-template" id="htmp">

#: PatientName #

</script>

ListView (Mobile)

answered on 12 Mar 2014

2 answers

74 views

Change rooms dinamically

Hi!

I'm using the Scheduler, and from a multiselector I want to select the rooms I want to show.

From start, I'm filling the rooms like this:

resources: [
{
field: "roomId",
name: "Rooms",
dataSource: jQuery.parseJSON(response).Rooms,
title: "Room"
}
]

So, inside the change event of the multiselector I want to trigger a change inside the Scheduler to hide or show the rooms selected. How can I do that?

Thanks in advance.
Daniel

Scheduler

answered on 12 Mar 2014

1 answer

200 views

Resize event

In my application I need to place IFrame under the tree view and I need to know what is the size when it expands/collapsed
$("#groupPagesTreeView").resize(function() {
pubsub.emit("panelResized", $("#groupPagesTreeView"));
});

how ever i am not getting the event and when
$scope.treeview = $("#groupPagesTreeView").data("kendoTreeView");
$scope.treeview.bind('expand', onExpand);
$scope.treeview.bind('collapse', onExpand);

the events are called before the end of the resizing

is there a solution?

TreeView

answered on 12 Mar 2014

1 answer

116 views

[Solved] Paragraph Style Picker Transparent

On IE8 (at least for me) the paragraph style picker appears with a transparent background, so the editor content mixes with the style options. Is this intended? Is there a fix for IE8? Sorry if this is a repeat, but I couldn't find a similar issue.

Editor

answered on 12 Mar 2014

1 answer

703 views

Autocomplete k-animation-container width and postioning

Hello

I have a issue adding custom styled auto-complete to row in a grid for filtering. The auto-complete k-animation-container has wrong width is positioned far off from autocomplete anchor (span.k-autocomplete ).

My customization simply changes width of the autocomplete and add a min-width to list items. Any ideas why the k-animation-container has wrong width is position is off ?

AutoComplete

answered on 12 Mar 2014