Questions on Kendo UI for jQuery Forum

0 answers

105 views

When displaying selected files, the filename gets truncated even if the control has plenty of space to display it. This can be seen on the Web Demo page on the KendoUI site as well, just by selecting a file whose name is longer than 30 characters. Is there anyway to increase the amount of space available for displaying the selected filename?

Upload

asked on 08 May 2012

1 answer

144 views

Want to open a web site in tab - can I do this

We are looking for a HTML/CSS toolkit for our new application menu app. Essentially its a tree view that displays all the various web applications a specific user has rights to access. When the user clicks an item in the treeview, I want to open the app in a tabstrip tab. I have a Kendo UI tree view that is displaying the appropriate apps to choose from, and a tabstrip control I am trying to append a new tab which "hosts" the app.

I have tried (in the select event of the treeview)

tabStrip.append({
text: TabLabel
content: [null,"http://ourwebapp.aspx"],
encoded: false })

as well as

tabStrip.append({
text: TabLabel
contentURL: "http://ourwebapp.aspx"})

In each case the tab is created, with the correct text, but no content.

I looked at using AJAX to load the content, but the example URLs all seemed to point to a local html file.

Has anyone else had this problem, and found an answer? It seems like it should be a pretty straight forward task.

Thanks for you time and attention.
Richard

TabStrip

answered on 08 May 2012

4 answers

258 views

Drag handles

I have a TreeView (with draggable nodes) inside a draggable container to allow users to re-order not just elements within a certain hierarchy, but also to re-order the hierarchies themselves.

I've gotten this to work on PC's using jQuery UI + Kendo UI, but I'm trying to apply this same functionality to touch devices. The problem is that the draggable event for the container is fired when trying to drag just a draggable TreeView node. I'd tried playing with the filter to implement a drag handle to no avail.

// jQuery UI Sortable

$(".sortable").sortable({revert : true, handle : $(".cont-move", this), axis : "y"});

// Kendo UI Draggable

$(".kendo-tree").kendoTreeView({

template : "#=item.text#"

, checkboxTemplate : kendo.template($("#treeview-checkbox-template").html())

, dataSource : [

{id : 1, text : "Parent", expanded : true, items : [

{id : 2, text : "Child 1"}

, {id : 3, text : "Child 2"}

, {id : 4, text : "Child 3"}

, {id : 5, text : "Child 4"}

, {id : 6, text : "Child 5"}

]

}]

, dragAndDrop : true

, select : function(event) {

var $item = $(event.node);

}

});

cont-move div is the draggable handle (works in jQuery UI, not Kendo UI)

<ul class="sortable">

<li class="ui-state-default">

<div class="cont-chek"><input type="checkbox" /><div class="cont-move" style=

"width:24px;height:24px;background:transparent url('../../common/dhxcommon/imgs/arrow_nsew.png') no-repeat center;cursor:pointer;"

></div></div>

<div class="cont-qstn"><div class="kendo-tree"></div></div>

</li>

<li class="ui-state-default">

<div class="cont-chek"><input type="checkbox" /><div class="cont-move" style=

"width:24px;height:24px;background:transparent url('../../common/dhxcommon/imgs/arrow_nsew.png') no-repeat center;cursor:pointer;"

></div></div>

<div class="cont-qstn"><div class="kendo-tree"></div></div>

</li>

</ul>

jQuery UI does include a drag handle option, but I like the look (and coding) of the Kendo UI draggable better, plus Kendo works on mouse and touch devices. Are there any plans to allow for a drag handle option for kendoDraggables? Is there a workaround I can be using?

Drag and Drop

answered on 08 May 2012

3 answers

164 views

Splitter converting too many DIV as splitter

Hello, I'm using the splitter to display on top a Kendo Grid and in the bottom Google map. With resize event I found in this forum, I was able to resize the grid and map correctly. Still, I got 2 questions/comments:

1. To resize the GRID, I must set a timeout of 200 miliseconds because the RESIZE event of the splitter happens before the actual size is changed in the DOM (then, the height iscalculated with the olds value)

        resize: function () {
          setTimeout(function () {
            Application.Fire_ApplicationResize();
          }, 200);
        }

2. If you look at HTML.png, kendo splitter is creating 5 GHOST splitter (that you can see in capture.png). The last 4 splitter DIV are not mine and they are empty.
- Do you know why ?
- Is there a way to tell Kendo to only create SPLITTER from specified DIVs ? And not ALL those generated by Google (or something else) ?

This really comes from the Google map creation.

Thanks !

Splitter

answered on 08 May 2012

1 answer

78 views

How do I ensure data source has completed read before use

I have a grid that has a column that relies on a lookup from another data source for the column text given the ID value. The same lookup is used by a custom popup editor and works fine. The script issues a read in the data source at the start and then the grid gets initialized after the document is ready. The lookup fails because the data source has zero records. The lookup source has to retrieve over 400 items so I assume the problem is that the grid is trying the lookup before the data source has completed the read. Is there some means of ensuring the data source has completed the read? Or is my assumption incorrect and something else is happening here?

Data Source

answered on 08 May 2012

12 answers

409 views

knockout 2 inline foreach template ?

Hi,
i am evaluating Kendo and it looks fantastic, we use knockout, and i have noticed that kendo MVVM is almost the exact of knockout, but one thing i like about kockout is that you don't have to use java script block to define for-each templates, you just do it in the markup, so is this possible with kendo ?

thanks in advanced

MVVM

answered on 08 May 2012

2 answers

262 views

Sub Title

I would like to add a sub title to a chart with different font styles than the title. Is this possible? I did some research on SVG foreignObject and tspan tags but had no luck getting those to work.

Charts

answered on 08 May 2012

6 answers

725 views

How do you map remote JSON to the model?

I see this example but that's binding the data into a dropdownlist...I want me JSON from the server to BE the model Like this

Is it not doable, or am I missing something?

MVVM

answered on 08 May 2012

0 answers

135 views

HELP - Nested JSON

How can I access the attribute image->url to use in a listview on Mobile device template

[
{
    "released": "2007-06-29",
    "posters": [
      {
        "image": {
          "url": "http://cf2.imgobject.com/t/p/w92/gMg48r3zMz6HMez4ksNEeOcrVV1.jpg",
          "id": "4ea680f32c058837cb00c499"
        }
      },
      {
        "image": {
          "url": "http://cf2.imgobject.com/t/p/w154/gMg48r3zMz6HMez4ksNEeOcrVV1.jpg",
          "id": "4ea680f32c058837cb00c499"
        }
      },
      {
        "image": {
          "url": "http://cf2.imgobject.com/t/p/w185/gMg48r3zMz6HMez4ksNEeOcrVV1.jpg",
          "id": "4ea680f32c058837cb00c499"
        }
      },
      {
        "image": {
          "url": "http://cf2.imgobject.com/t/p/w342/gMg48r3zMz6HMez4ksNEeOcrVV1.jpg",
          "id": "4ea680f32c058837cb00c499"
        }
      },
      {
        "image": {
          "url": "http://cf2.imgobject.com/t/p/w500/gMg48r3zMz6HMez4ksNEeOcrVV1.jpg",
          "id": "4ea680f32c058837cb00c499"
        }
      },
      {
        "image": {
          "url": "http://cf2.imgobject.com/t/p/original/gMg48r3zMz6HMez4ksNEeOcrVV1.jpg",
          "id": "4ea680f32c058837cb00c499"
        }
      }
    ],
    "version": 225
}
]

Data Source

asked on 08 May 2012

3 answers

144 views

Support a nested scenario?

Does kendo MVVM support this type of scenario?

http://jsfiddle.net/stevescotthome/sqbXP/3/

Where the "Add new" and "Edit" are popup windows to edit\add sites.

I have this working in knockout, but I like the kendo datasource implementation a bit better than having to use a separate mapping plugin.

Like I don't see any $root. or $parent style binding samples to let me link an element to a viewmodel calculated function

(Also, it supports this type of stuff right?)

viewModel.selectedSite = ko.observable();

viewModel.editItem = function (item) {

viewModel.selectedSite(item);

};

MVVM

answered on 08 May 2012