I'm struggling to find any information on how to change/set one of the Kendo UI themes programatically.  I've seen some information on ThemeBuilder but I really want my own drop-down menu to trigger a theme change.

If I have a menu item as follows, what do I need to put in the "onSelected" event to actually change the theme to that which has been selected?

        $("#menuImages").kendoMenu({
            dataSource: [
                {
                    text: "",
                    imageUrl: "../../Content/images/languageMasterIcon.png",
                    items: [
                        { text: "English (en-GB)" },
                        { text: "English (en-US)" },
                        { text: "German (de-DE)" }
                    ]
                },
                {
                    text: "",
                    imageUrl: "../../Content/images/themeMasterIcon.png",
                    items: [
                        { text: "Default" },
                        { text: "Blue Opal" },
                        { text: "Bootstrap" },
                        { text: "Silver" },
                        { text: "Uniform" },
                        { text: "Metro" },
                        { text: "Black" },
                        { text: "Metro Black" },
                        { text: "High Contrast" },
                        { text: "Moonlight" }
                    ]
                },
...  omitted for brevity ...
            select: onSelect
});
function onSelect(e) {
            // NEED TO KNOW WHAT GOES HERE TO CHANGE THE THEME TO THAT SELECTED       
}

Hi,

I have a Kendo Grid that autorefreshes data every 15 minutes. It also has a dynamic header with the columns as dates (past 2 days worth of data). At midnight I would expect the headers to change by 1 day (from 1/28 to 1/29 and from 1/27 to 1/28), but this is not happening, even though the data refreshes just fine and in the very first column accurately displays today's (1/29) data with the header still being for yesterday (1/28). If I manually refresh the page, everything is working perfectly, but if I'd like it to silently refresh on the background, the headers are not refreshing. Both header's data and grid's data are coming from the same data source which is refreshed every 15 minutes.

HTML:
    <span data-bind="text: getDisconnectsMed" class="neutralTextMedium" >  </span> 
    <table id="gridDisconnectsMed" style="font-size: 8pt">     
     <thead>         
        <th data-field="Description">Description</th> 
        <th data-field="CountDay0" data-bind="text: setDay0Label"></th>
        <th data-field="CountDay1" data-bind="text: setDay1Label"></th>                                 
     </thead>
    </table>

JavaScript:

var disconnectsDS = new kendo.data.DataSource({
    transport: {
        read: {
            type: 'GET',
            contentType: 'application/json; charset=utf-8',
            url: getDisconnectsUrl,
            dataType: 'json'
        }
    },
    change: function (data) {
        disconnectsMediumViewModel.set("returnData", data.items);
    },
    error: function (e) {
        disconnectsMediumViewModel.set("error", e.errorThrown);
    }
});

var disconnectsMediumViewModel = kendo.observable({
    returnData: null,
    error: "none",
        var value = checkForError(this.returnData, this.error);
        if (value.length == 0) {
            $("#gridDisconnectsMed").kendoGrid({
                dataSource: disconnectsDS,
                sortable: false,
                scrollable: false
            });
            $("#gridDisconnectsMed").show();
        }
        else
            $("#gridDisconnectsMed").hide();
        return value;
    },
    setDay0Label: function () {
        if (this.returnData != null && this.returnData.length > 0) {
            return kendo.toString(this.returnData[0].CountDay0Label);
        }
    },
    setDay1Label: function () {
        if (this.returnData != null && this.returnData.length > 0) {
            return kendo.toString(this.returnData[0].CountDay1Label);
        }
    }
Thanks,
Victoria

Hi, 

Following is my requirement 

1. On load the Gantt is initialized with a default set of tasks called activities 

2. each activity can have one or more child tasks 

3. The child task is added using a Add Task button just below the activity 

4. on click of Add task a new task is added as child to the activity preceeding the Add Task button/link row

 

I am able to achieve 1 & 3 from a UI perspective .The Add Task row is also a task which is restyled/ retemplated on databound based on a custom task type to remove other task related information and just show an add task link.

I am able to catch the event on add task click and also get the id of the row/task but i am not able to add a new task as a child programatically to the  activity above These are bits of code i have tried.

 

After executing this however the UI is not rendered as expected. The getNewTask method returns a task object with attributes such as parentId, orderId and id set appropriately internally so that the new task is child of the preceeding activity and in proper order. 

 

Please let know what am i missing, Any help appreciated.Thanks in advance.

In the configuration page of the toolbar control, there is an example demonstrating the usage of items.attributes.

http://docs.telerik.com/kendo-ui/api/javascript/ui/toolbar#configuration-items.attributes

If you run the example in the code editor (http://dojo.telerik.com/ADEDU), you will see that the "My Button" button does not render properly as a button.  A look at the source shows that a few kendo classes are not added properly to the dom element, including k-button.

If you run this modified version of the example where all I changed is the version of kendo UI used, you will see that it used to work.

 http://dojo.telerik.com/ULEPu

 It appears the problem occurs whenever custom attributes are defined for items.

I'd like to create a treeview with columns as part of the node template. Essentially, I have supplemental data that I want displayed along with the treeview so that the data lines up in columns after the initial node text.  I'm using the Kendo treeview because I need to be able to reorder the items easily using the drag and drop the treeview provides.

I've tried many methods to position the additional data in columns using a Kendo treeview template, but regardless of what I try, the columns to the right of the node are always displayed relative to the node itself; I can't get them to line up.  A grid really isn't a good solution for me because I lose the drag and drop and it really isn't hierarchical in nature, anyway.  I've also tried displaying a grid next to the tree, but that causes tons if issues with sync'ing and lining up the rows, not to mention having to flatten the hierarchical dataset each time I refresh or make a change.

Any ideas how I can create a treeview that has columnar data as part of the node template that aligns correctly?  Here's a jsFiddle with a couple examples of what I'm trying to do: http://jsfiddle.net/trentballew/oc9qsnyc/.

I noticed such a behavior of, let's say, "common" (e. g., "enabled") binding and event binding: when bound to a function this context differs inside it.

For example, I add 2 functions to ObservableArray's prototope:

1) logTihis: simply logs this pointer to the console

2) enableDelete: returns whether the array has more than 1 items (assume, I want to prevent deletion of the last item)

and a template to render repeating items ("items" field of the view model is set to an array):

When I write "parent().functionName" I expect the function to be called in the context of what parent() returns (items array in this case).

With enabed binding it is so (having 1 item in the array disables the button), while with click binding it is not so (this pointer in the click handler (logThis) is set to the item itself).

After checking the source code I found out that Binding.get does look for the actual context before calling the function while EventBinding.get does not.

Why is it so? Is not it about to be fixed?

 

Thank you in advance.

I am trying to include some escaped HTML codes in my tooltip text. The text is specified as a title on my DOM element. The text is set in correctly, but the Tooltip code somewhere unescapes the text and converts it back to their actual characters.

    <div data-id="11" title="Test1: The word 'test' should be here in angle brackets: &lt;test&gt;><img src="../content/web/foods/11.jpg" /> </div>

 

In the Tooltip, I want this to display as literal text (when the browser interprets &lt; and &gt;):

    Test1: The word 'test' should be here in angle brackets: <test>,

But somewhere along the line, the tooltip is converting &lt; to < and &gt; to >, so then the html looks like <test> (in raw ascii) which gets interpreted by the browser as an unrecognized tag and hidden.

Here is a snippet example (roll over to see the tooltips):

   http://dojo.telerik.com/@Henry%20Kaufman/EjUQU

Is there any way to escape the angle brackets so that they pass through the tooltip code without being converted back to literal angle brackets? Or is there an additional attribute or option to tell the Tooltip not to un-escape the title text?

 Thanks!

-Henry

 

Here is an example in your dojo http://dojo.telerik.com/OdolO/3

When you try to use dataItem.selected property in ng-if statement then different visual bugs appear if you have nodes with children.
Please try to click on Item2 then expand it and click on any child of Item2. You will see that Item2 title disappeared. It works on 2014 Q3. We are unable to move from 2014 version to 2015 version because of different treeview visual bugs. 

We are trying to switch the visibility of some NumericTextBoxes. 'ng-show' made some appearance effects but nothing useful. 'ng-if' seems to be more promising, but we experience other effects. Instead of disappearing nothing happens and instead of reappearing additional TextBoxes appear.

 

Please see this example: http://dojo.telerik.com/ELOlO

Press the button to see the problem.

Any hints?

Regards

Alex

I'm using the Kendo UI TimePicker control where the min and max times can be set to the next or previous day. 

 When selecting a time that exists the next (or previous) day the value returned is a full DateTime but is always set to the current date.

 For example, if the current date time is "Jun 25, 2015 10:00 PM" and you scroll down and select "Jun 26, 2015 02:00 AM" the return value will be "Thu Jun 25 2015 02:00:00 GMT-0400 (Eastern Daylight Time)" but I'm expecting it to be June 26.

How do I make this control return the expected DateTime.

 Here are my code segments:

// Init the control

$("#dtpEndDateTime").kendoTimePicker({
            format: "MMM dd, yyyy  hh:mm tt",
            interval: 15,
            change: onShiftEndDateTimeChange
        });

 

 // Set the values elsewhere

var dtpEndDateTime = $("#dtpEndDateTime").data("kendoTimePicker");
   dtpEndDateTime.value(moment(_shift.EndDateTime).toDate());
   dtpEndDateTime.min((moment(_shift.StartDateTime).add(15, "minutes")).toDate());
   dtpEndDateTime.max((moment(_shift.EndDateTime).add(12, "hours")).toDate());

 

 // get the selected value inside the onShiftEndDateTimeChange event

var datetimepicker = $("#dtpEndDateTime").data("kendoTimePicker");
   console.log(datetimepicker.value());