Questions on Kendo UI for jQuery Forum

1 answer

76 views

Any way to edit html in a textbox or scroller?

It's possible?

General Discussions

answered on 13 Mar 2014

3 answers

116 views

[Solved] Mobile ListView lose style when I set new data

Hello everyone, I'm losing the style when I sets new data to my ListView, I'm using the flat style and when the ListView read the data from the controller for first time, the list view displays the items correctly as you can see in the image 1. But when the user execute a search function, and reload the list with new data, I lose the style as you can see in the image2.

This is my mobile list view

@(Html.Kendo().MobileListView()

.Name("listview")

.TemplateId("tmp")

.HeaderTemplateId("htmp")

.DataSource(datasource => datasource

.Read(r => r.Action("Study_Read", "Home").Data("searchparameter"))

.PageSize(20)

.ServerOperation(true)

.Group(g => g.Add("PatientName", typeof(string)))

)

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%">

#=Description #

</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>

</table>

</div>

</script>

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

<p><h4> #= value #</h4> </p>

</script>

And the javascript function that I'm using to set the new data, the comments lines was the options that I test to solve the issue, but any works

function advancedsearch(e) {

var patientId = $("#txt_patient_id").val();

var patientName = $("#txt_patient").val();

var modality = $("#ddlModality option:selected").text();

var startDate = $("#start_date").val();

var endDate = $("#end_date").val();

var headerTemplate = kendo.template($("#htmp").html());

var template =kendo.template($("#tmp").html());

//var totalTemplate = headerTemplate.concat(template);

alert(endDate)

$.ajax({

type:"POST",

url: '@Url.Action("Advanced","Home")',

data:{

patientId: patientId,

patientName: patientName,

modality: modality,

startDate: startDate,

endDate: endDate

},

success: function (evt) {

console.log(evt);

var dataSource = new kendo.data.DataSource({

pageSize:20,

data: evt,

schema: {

data: "Data",

total:"Total"

}

/*,

change: function (e) {

if (this.view()[0]) {

console.log(template);

$("#listview").html(kendo.render(template, dataSource.view()));

kendo.mobile.init($("#listview"));

}

}*/

});

$("#listview").data("kendoMobileListView").setDataSource(dataSource);

//dataSource.read();

//$("#listView").kendoMobileListView({

// dataSource: evt,

// template: kendo.template($("#tmp").html())

//});

//$("#listview").kendoMobileListView({

// dataSource: evt,

//template: $("#tmp").text()

//});

//$("#listview").data('kendoMobileListView').dataSource.read(evt);

}

});

}

What is the problem?

ListView (Mobile)

answered on 13 Mar 2014

3 answers

428 views

[Solved] How to make Undo/Redo in Kendo UI Web Grid?

Good day!
How to make Undo/Redo in Kendo UI Web Grid? As here: http://jzaefferer.github.io/undo/demos/contenteditable.html

Grid

answered on 12 Mar 2014

3 answers

111 views

Kendo UI and non-MVC .Net Integration

There are many posts and online information regarding Kendo UI integration with ASP.Net MVC web applications. However, there is virtually nothing regarding Kendo UI integration with non-MVC ASP.Net web apps. I am specifically trying to learn how to bind Kendo UI objects with .Net data objects such as DataSets and other collection types. Is this an appropriate and practical application of Kendo UI, or should I not use Kendo UI with a non-MVC ASP.Net web app?

thanks

General Discussions

answered on 12 Mar 2014

1 answer

399 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

307 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

499 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

215 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

144 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))

)