Questions on Kendo UI for jQuery Forum

1 answer

960 views

[Solved] Open window where content source contains template

I'm trying to open a window where content page has uses a template to display the data.
The content page it self works fine just entering the url but when I try to open it as a window nothing happens.

var window = $("#window");

window.kendoWindow({

width: "505px",

height: "315px",

title: "Mail",

actions: ["Refresh", "Maximize", "Close"],

content:"inbox/getemail.aspx?msgid="+msgid,

iframe:false

});

window.data("kendoWindow").open();

//content page

script language="javascript">

var messageData;

$.fn.getMessageData = function(){

messageData =

{

time:'2012-07-26 12:34:50',

sender:'test@test.com',

subject:'Testing message data'

};

$(function(){

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

$.fn.getMessageData();

$("#preview").html(template(messageData));

});

</script>

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

<h3>#= subject #</h3>

<h4>posted on #= time # by <strong>#= sender #</strong></h4>

</script>

<div id="preview"></div>

Window

answered on 10 Aug 2012

0 answers

461 views

Selecting a treeview item by it's data properties

Hi folks,

I'm using a treeview from a HierarchicalDataSource and wanted to be able to get the element from the treeview if it matched all the properties that I specified. My initial data looked something like this:

[{

id:'2022',

text:'Folder1',

items: [{

id:'3202',

text:'Sub-Folder1'

}, {

id:'1234',

text:'Sub-Folder2',

moo: true

}]

I wanted to be able to get the list item element (<li>) for any particular item so I built a function to do it and thought I'd share. You can use my function like this (in this example I want to get the element for the item with the id '3202':

var liElement = $('#treeView').data('kendoTreeView').search({id:'3202'});

You can also search on multiple properties:

var liElement = $('#treeView').data('kendoTreeView').search({id:'1234', moo: true});

To enable this functionality, after creating a treeview with a HierarchicalDataSource, add this code (assumes your treeview element is #treeView - change as required):

$("#scenegraph-treeview").data('kendoTreeView').search = function (json, source) {

if (json !== undefined) {

var data = source || this.dataSource,

child, item, i, k, match, allMatched;

// If the data has the properties we need

if (data && data._data) {

child = data._data;

// If the array has items

if (child.length) {

// Loop the array items

for (i = 0; i < child.length; i++) {

item = child[i];

console.log('Checking child ' + i + ' id ' + item.id);

// Check each json property against the current item's properties

// and if they all match, grab the tree item based on it's UID

allMatched = true;

for (k in json) {

if (json.hasOwnProperty(k)) {

if (item[k] !== json[k]) {

// The item doesn't have all the properties

// that the json object does

allMatched = false;

break;

}

if (allMatched) {

// We've found a match, grab the tree item from the UID and return it

return this.findByUid(item.uid);

} else {

// We didn't find what we were looking for so search the children

if (item.children) {

match = this.search(json, item.children);

if (match) {

return match;

}

};

Hope this helps someone out!

Rob - Irrelon Software Limited

TreeView

asked on 10 Aug 2012

0 answers

129 views

Form input fields missing

Hi, the whole form was working properly before, and after I decorated some input fields of the form with kendo, in the action, I var_dump the form, those kendo inputs are missing and everything else is all good.

Any idea guys ? Please help me to save my hair, cheers.

I also checked with other UI plugins, it's all good.

Is this cause by the version I chose, open oource one ?

General Discussions

asked on 10 Aug 2012

2 answers

204 views

Bind to Single Record

I'm in the midst of writing a single page application with routes. The way the application functions is:

DataSource with list of items is bound to a Kendo Grid
User clicks an item on the Grid and is taken to a new route which contains the ID of the item the user selected. Example: www.mydomain.com/#itemID=1
This ID is used in a DataSource to refresh the item the user chose. This is also done in case the user bookmarks the specific route. In such an event the Grid can be bypassed.

The binding of the Grid works great and I'm able to capture the ID of the chosen item and redirect to my new route. I'm also able to create a new datasource with the ID of the item selected and return data from the server.

Here's where I'm stuck. I'm trying to bind the returned record to HTML controls using an MVVM pattern, but it seems the Kendo binding context assumes that DataSource is a collection (where in my case it's a single record). What is the correct approach for this? Is there a way to bind controls in a DIV to a single record in a DataSource?

MVVM

answered on 10 Aug 2012

2 answers

310 views

Binding Kendo WIndow and Input with type Password

I am trying to implement a MVVM pattern for my website's login function.

The site returns with status code 401 when authentication fails. The goal would be to:

Update my view model to indicate that the user is not authenticated. Example: viewModel.set("authenticated", false)
When authenticated is false, display a Kendo window with the username/password prompt
Then the user presses submit within this window, fire my login method

Everything works except I am having the following problems:

I can't find a way to bind the open/close state of the Kendo window (my login window) to the authenticated property of my viewModel
When I bind to the input of type password, it seems to be one-way. I am able to get the password the user typed in and pass this up to my web method, but during the login function I clear the password viewModel.set("password", "") but the input control does not update. If I change it to a regular input with type text it seems to work.

MVVM

answered on 10 Aug 2012

0 answers

103 views

Kendo UI MVVM + KnockoutJS on same page?

Hi,

As a newbie to Kendo UI, I understand that Kendo has its own MVVM implementation. There is some support for KnockoutJS with Kendo UI widgets, but from what I've read, I'll get the best results if I use Kendo's MVVM rather than KnockoutJS with the Kendo UI widgets.

If I have a page that contains a mixtures of controls - Kendo UI, jQuery UI, and basic HTML element, is it possible to use a combination of Kendo's MVVM and KnockoutJS on the same page? I guess a second question would be, can the Kendo UI MVVM be used for third party controls, or does it only work with Kendo UI widgets?

Thanks,
Notre

MVVM

asked on 10 Aug 2012

0 answers

147 views

Grid Resizing

Hi,
I have a telerik mvc grid in my application which populates data that would contain random number of columns ( I mean to say the total number of columns might change each time). Now that when i do resizing on those columns and click on grid refresh or sort, the resizing settings on columns doesn't seem to retain! So, Is there a way i could retain those column resizing settings made by the user even after clicking on grid footer refresh or on sorting?

I have gone through a demo in the Telerik Mvc Grid extensions (Column Resizing) but then there it's like fixed number of column always and so it'd retain all those settings made by the user.

I hope the attachment might provide you a clear idea about my question.

Thanks,
Kishore Kumar

Grid

asked on 10 Aug 2012

1 answer

283 views

Inheritance With Kendo UI - Calling base class constructor

I am experimenting with "kendo.Class.extend()".

When I inherit a new class from a base class, how can i call the base class constructor from within the derived class constructor?

The below didn't work for me.

var ClsPerson = kendo.Class.extend(
{
FirstName:"<none>", LastName: "<none>", Married: false,
Display: function() { alert("I am " + this.FirstName + " " + this.LastName); },
init: function(FirstName, LastName)
{
if (FirstName) this.FirstName = FirstName;
if (LastName) this.LastName = LastName;
}
});
var ClsParent = ClsPerson.extend(
{
SpouseName: "<none>",
init: function(FirstName, LastName, SpouseName)
{
//if (FirstName) this.FirstName = FirstName;
//if (LastName) this.LastName = LastName;
ClsPerson(FirstName, LastName);
if (SpouseName) this.SpouseName = SpouseName;
}
});

var Parent1 = new ClsParent("Sakthivel", "S", "Sangitha S");
Parent1.Display();
alert(Parent1.SpouseName);

I tried calling the base class constructor like "ClsPerson(FirstName, LastName); ", but didn't get the desired results.

General Discussions

answered on 10 Aug 2012

2 answers

151 views

ComboBox Control Focus question

I am utilizing combo boxes in a form using declarative syntax. Both are remote dataSource dependent and I have had some challenges in getting them to work properly, but I seem to finally have it down, except for one minor detail.

I want them to autobind and I have that enabled using the declarative syntax, but when I have them autobind and there is a valid value that they are looking up, the last one to finish grabs focus, and would rather a different control on the form get first focus. I don't really want to embed view code into the dataSources, so my workaround at this point is to disable them initially and then renable them with a 2.5 second timer to ensure they have enough time to update. This works, but it would be better if I could either tie it to an event related to the controls, or if I could prevent them from grabbing focus altogether.

Any thoughts would be appreciated.

Thanks.

ComboBox

answered on 10 Aug 2012

1 answer

703 views

Kendo Drop Down: data is undefined

Kendo DropDown Example

I have a Kendo DropDownList inside of a kendo Panel inside of Form Tags. The problem is I can't select the Drop Downlist. I keep getting a "data undefined error" Data Undefined. The thing I'm not understanding the most is that I've used this code before on another page with the exact same structure and I can select the drop downs fine. Thanks

DropDownList

answered on 10 Aug 2012