Questions on Kendo UI for jQuery Forum

4 answers

286 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

189 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

123 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

452 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

290 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

765 views

[Solved] 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

170 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

156 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

6 answers

699 views

CRUD with custom functions

Hello,

We have a back end database that we interact with using a custom library. All the CRUD is in the form of GET / POST / PUT calls to our back end. The following is what we use to interact with our database:

db.get('some-record', function(resp) { });

db.put('some-record', { hello: 'world' }, function(resp) { });

db.post({ hello: 'world' }, function(resp) { });

db.destroy('some-record', { rev: 'abcdef123456789' }, function(resp) { });

The resp variable is a JSON object. Given the above, I have been able to successfully perform all CRUD operations on our database. Now, I would like to implement a Kendo GRID with Popup Editing as here: http://demos.kendoui.com/web/grid/editing-popup.html

How do I define the update, destroy and create functions using the functions above that interact with my database?

The part I do not understand is how the 'transport' works for updating in the demo code at the above link:

dataSource = new kendo.data.DataSource({
                            transport: {
                                read:  {
                                    url: crudServiceBaseUrl + "/Products",
                                    dataType: "jsonp"
                                },
                                update: {
                                    url: crudServiceBaseUrl + "/Products/Update",
                                    dataType: "jsonp"
                                },
                                destroy: {
                                    url: crudServiceBaseUrl + "/Products/Destroy",
                                    dataType: "jsonp"
                                },
                                create: {
                                    url: crudServiceBaseUrl + "/Products/Create",
                                    dataType: "jsonp"
                                },
                                parameterMap: function(options, operation) {
                                    if (operation !== "read" && options.models) {
                                        return {models: kendo.stringify(options.models)};
                                    }
                                }
                            }

Data Source

answered on 08 May 2012

2 answers

372 views

[Solved] Scrolling a splitter pane

Hi,

I have a treeview in a splitter pane with a breadcrumb above it. When I click a breadcrumb it navigates to that point in the tree and collapses that node. This will however cause the selected treeview node to be out of sight in the splitter pane. Is there a way for me to scroll the splitter pane so that the selected treeview node is displayed?

Thanks,
Jan Erik

Splitter

answered on 08 May 2012