Telerik Forums
Kendo UI for jQuery Forum
0 answers
64 views

I need some help using a hierarchicalDataSource with a treeview control.  It works fine as an array but I can't figure out how to make it work with a datasource.

 Essentially my datasource is a two level structure.

       date:

        eventId:

      

Here are two different datasources in my app.js file.

 

    window.calendarData = new kendo.data.HierarchicalDataSource({
        transport: {
            read: {
                url: "https://...",
                dataType: "json"
            }
        },
        schema: {
            model: {
                id: "eventId",
                hasChildren: "items",
                fields: {
                    eventId: {
                        editable: false
                    },
                    date: {
                        editable: true
                    },
                    items: {
                        model: {
                            id: "eventId",
                            fields: {
                                eventId: {
                                    editable:false
                                },
                                lastname: {
                                    type: "string",
                                    editable: true
                                }
                            }
                        }
                    }
                }
            }
        }
    });
    window.calendarDataLocal = new kendo.data.HierarchicalDataSource({
        data: [
            {
                eventId: 0,
                date: '2015-08-01',
                items: [
                    {
                        eventId: 1,
                        lastname: "poulin",
                        },
                    {
                        eventId: 2,
                        lastname: "smith",
                     }
                  ]
              },
            {
                eventId: 3,
                date: '2015-08-02',
                items: [
                    {
                        eventId: 4,
                        lastname: "jones"
                      }
                 ]
             }
        ]
    });
    
Here is the control I'm putting it into.

 

    <div id="mainCalendar">
    </div>
    <script>
        $(document).ready(function () {
            $("#mainCalendar").kendoTreeView({
                dataSource: window.calendarData,
                dataTextField: ["date", "lastname"]
            })
        });
    </script>

If I use window.calendarDataLocal, it works, the other way what happens is the two main nodes (identified by date) show up but the lower level items show up as undefined.

Essentially my data is made up 
​

Doug
Top achievements
Rank 1
 asked on 04 Sep 2015
1 answer
667 views

Hi All,

 

I have a function that grab the specific date format from a config file,  but the code below output the wrong date format.  Could anyone tell me what what I'm missing or did wrong?

 

columns:[

     { title: "Date", field: "tDate", width: 190, template: '#= kendo.toString(tDate,  getMyFormattedDate()) #' }

];

 result is always Tue Jul 28 2015 13:01:36 GMT-0600 (Mountain Daylight Time) and the format from getMyFormattedDate is set as 'MM-dd-yyyy'.

 

TIA

Konstantin Dikov
Telerik team
 answered on 04 Sep 2015
1 answer
255 views

Hello,

 I am using the kendo tool tip widget inside a kendo observable object. For whatever reason, setting the position and opacity seems to work as expected. However, adding an animation or delay does not seem to work. Below is a snippet of my code:

ViewModel = new kendo.data.ObservableObject({
      reloadTooltips: function () {
            var reloadTooltip = function(tooltipSelector, templateSelector) {
                $(tooltipSelector).kendoTooltip({
                    content: kendo.template($(templateSelector).html()),
                    position: "top",
                    width: "300px"
                });
            }
 
            var reloadAuthTooltip = function (tooltipSelector, templateSelector) {
                $(tooltipSelector).kendoTooltip({
                    content: kendo.template($(templateSelector).html()),
                    position: "top",
                    width: "350px",
                });
            }
 
            reloadTooltip(".authorized", "#authorizedTemplate");
            reloadAuthTooltip(".nonauthorized", "#nonAuthorizedTemplate");
            reloadTooltip(".nonauthorizedquestion", "#nonAuthorizedQuestion");
        },

Dimo
Telerik team
 answered on 04 Sep 2015
1 answer
202 views

Hi, i'm having an issue with the kendo editor (v2014.3.1409)  on the iPad when it is used within' an iframe.
It will jump scroll to the top of the page and start showing a floating characters and move back and forth from top to the editor as you type.

This does not occur on PC nor on Android devices.

I've built a sample on jsfiddle and it does something close to the described effect.
Take note jsfiddle is using v2014.3.318 of kendo and the sample is itself running from the site's result iframe.

http://jsfiddle.net/odgo2ubb/3/​

Plamen Lazarov
Telerik team
 answered on 04 Sep 2015
1 answer
115 views

Hi,

just started using TreeView...

 

I have a Treeview that calls a controller to load some JSON data - format of the JSON data is under my control, so changeable. 

 

[{"Id":3,"Name":"Business Components","UrlImage":"B_Capability.png","HasChildren":0},{"Id":4,"Name":"Business Processes","UrlImage":"B_Process.png","HasChildren":0},{"Id":17,"Name":"Goals and Objectives","UrlImage":"B_Goal.png","HasChildren":0},{"Id":12,"Name":"Org Units","UrlImage":"B_OrgUnit.png","HasChildren":0},{"Id":2,"Name":"Associates","UrlImage":"B_Associate.png","HasChildren":0},{"Id":11,"Name":"Locations","UrlImage":"B_Location.png","HasChildren":0},{"Id":5,"Name":"Business Rules","UrlImage":"B_Rule.png","HasChildren":0},{"Id":15,"Name":"Programs","UrlImage":"B_Programme.png","HasChildren":0},{"Id":16,"Name":"Projects","UrlImage":"B_Project.png","HasChildren":0}]

In the dataset I return an image which I would like to display in the tree. All the examples I can find just load data from some datasource in javascript, but I cannot find anything that does this dynamically. 

 

What do I have to add to this code to make this work?

             @(Html.Kendo().TreeView()
                .Name("treeview4")
                .DataTextField("Name")
                .DataSource(dataSource => dataSource
                    .Read(read => read.Action("DomainObjects", "Tree", new { name = "id", id = 4 })))

Thanks for the help in advance.

 

Matt

 

Matt
Top achievements
Rank 1
 answered on 04 Sep 2015
1 answer
389 views

Hi Everyone,

So I have been creating a basic grid using angularjs and I keep geting the .toLowerCase not allowed error when assigning a remote data source to a grid.

 Here is a dojo I have saved that shows a similar parse error: 

http://dojo.telerik.com/uCATI/4

 If I move that standard data into the grid's datasource definition, everything works fine... Any idea why I am getting the JS error?

 Thanks,

Lucas â€‹

Boyan Dimitrov
Telerik team
 answered on 04 Sep 2015
9 answers
647 views

I am currently experiencing weird behavior while trying to perform a collapsed filter of a dropdownlist. By collapsed filter I mean typing the value of an item(s) that exist in the dropdownlist without expanding the list and selecting the filtered value when found. What  happens is that no matter how fast I type the dropdownlist only registers the first 3 characters typed. How can I ensure that it accepts more than the first 3 characters? Also how can this filtering to be done using "contains" instead of "startswith". I don't want to have an explicit filter input included in the dropdown so using the "filter" property is not ideal.

 

Thank you.

 

 

Georgi Krustev
Telerik team
 answered on 04 Sep 2015
3 answers
165 views

Hi,

I would like to show a custom command on row with a condition on model.

Ex : mydata : [

 {id:1,test:'one',showCmd:true},  // show the command

 {id:2,test:'two',showCmd:false},​ // hide the command

]

How can I do that with such model ?

I've tried to  implement ng-if on template button command, but as I guess it is not compile each time, it doesn't do the job.

 

Thanks in advance for your help

 
Kiril Nikolov
Telerik team
 answered on 04 Sep 2015
2 answers
175 views

Hello,

I have a page with 2 kendoMultiSelect controls that have the same dataSource. When I start filtering in the first one, the second one loses all its selected values and vice-versa. Is this by design? If so, is it possible to have a shared dataSource for MultiSelect controls? Thanks for your help.

Kind regards,

Krisztian

Michael
Top achievements
Rank 2
 answered on 04 Sep 2015
1 answer
357 views

I start with a listview that contains all states with a click event on each to build event headers by state (below). Once a state is selected, ​I fetch event headers and build another listview using this function. Once an event header is selected, I populate a detail page. When loading fresh and selecting a state (Arkansas), the listview is populated and selecting an event populates the detail screen as expected. Hitting the "back" button (data-role=backbutton), selecting another state, then an event for that state throws e.dataItem undefined in the click ​method of the function below. If I go back again, select another state, then sometimes it works, sometimes it doesn't. What am I doing wrong here?

function BuildEventHeadersListByState(abbr)
{   
    app.showLoading();
 
    var stateAbbr = abbr;
    var xml;
    var template = kendo.template($("#ulEventHeaders-template").html());
     
    var dataSource = new kendo.data.DataSource({
        transport: {
            read: function(options){
            $.ajax( {
                type: "GET",
                url: "http://xxx.xxxxx.xxx/DuMobileService/GetEventHeadersByState",
                data: { "apikey": apiKey, "stateAbbreviation": stateAbbr},
                dataType: "text",
                    success: function(result) {
                        options.success(result);
                        app.view().header.find(".km-navbar").data("kendoMobileNavBar").title(abbr + " Events");
                        app.hideLoading();
                    }
                });
            }
        },
        schema: {
            type: "xml",
            data: "/ArrayOfEventHeader/EventHeader",
            model: {
                // configure the fields of the object
                fields: {
                    EventCity: "EventCity/text()",
                    EventDate: "EventDate/text()",
                    EventID: "EventID/text()",
                    EventTitle: "EventTitle/text()",
                }
            }
        }
    });
     
    $("#ulEventHeaders").kendoMobileListView({
        dataSource: dataSource,
        template: $("#ulEventHeaders-template").text(),
        dataBound: function(){
            this.scroller().reset(); //scroll to top
        },
        click: function(e){
            var eventID = e.dataItem.EventID;
            BuildEventDetailsByEventID(eventID);
        }
    });
}

Kiril Nikolov
Telerik team
 answered on 04 Sep 2015
Narrow your results
Selected tags
Tags
Grid
General Discussions
Charts
Data Source
Scheduler
DropDownList
TreeView
MVVM
Editor
Window
DatePicker
Spreadsheet
Upload
ListView (Mobile)
ComboBox
TabStrip
MultiSelect
AutoComplete
ListView
Menu
Templates
Gantt
Validation
TreeList
Diagram
NumericTextBox
Splitter
PanelBar
Application
Map
Drag and Drop
ToolTip
Calendar
PivotGrid
ScrollView (Mobile)
Toolbar
TabStrip (Mobile)
Slider
Button (Mobile)
Filter
SPA
Drawing API
Drawer (Mobile)
Globalization
LinearGauge
Sortable
ModalView
Hierarchical Data Source
Button
FileManager
MaskedTextBox
View
Form
NavBar
Notification
Switch (Mobile)
SplitView
ListBox
DropDownTree
PDFViewer
Sparkline
ActionSheet
TileLayout
PopOver (Mobile)
TreeMap
ButtonGroup
ColorPicker
Pager
Styling
Chat
MultiColumnComboBox
Dialog
DateRangePicker
Checkbox
Timeline
Drawer
DateInput
ProgressBar
MediaPlayer
ImageEditor
TextBox
OrgChart
Accessibility
Effects
PivotGridV2
Licensing
ScrollView
Switch
TextArea
BulletChart
QRCode
ResponsivePanel
Wizard
CheckBoxGroup
Localization
Barcode
Breadcrumb
Collapsible
MultiViewCalendar
Touch
RadioButton
Stepper
Card
ExpansionPanel
Rating
RadioGroup
Badge
Captcha
Heatmap
AppBar
Loader
Security
TaskBoard
Popover
DockManager
TimePicker
FloatingActionButton
CircularGauge
ColorGradient
ColorPalette
DropDownButton
TimeDurationPicker
ToggleButton
BottomNavigation
Ripple
SkeletonContainer
Avatar
Circular ProgressBar
FlatColorPicker
SplitButton
Signature
Chip
ChipList
VS Code Extension
AIPrompt
PropertyGrid
Sankey
Chart Wizard
OTP Input
SpeechToTextButton
InlineAIPrompt
StockChart
ContextMenu
DateTimePicker
RadialGauge
ArcGauge
AICodingAssistant
SmartPasteButton
PromptBox
SegmentedControl
+? more
Top users last month
Chester
Top achievements
Rank 1
Iron
Simon
Top achievements
Rank 1
Iron
Douglas
Top achievements
Rank 2
Iron
Iron
SUNIL
Top achievements
Rank 3
Iron
Iron
Iron
Marco
Top achievements
Rank 3
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Chester
Top achievements
Rank 1
Iron
Simon
Top achievements
Rank 1
Iron
Douglas
Top achievements
Rank 2
Iron
Iron
SUNIL
Top achievements
Rank 3
Iron
Iron
Iron
Marco
Top achievements
Rank 3
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?