Telerik Forums
Kendo UI for jQuery Forum
1 answer
126 views
One thing I have missed a lot with Kendo, that I was accustomed to with KnockoutJS was the KnockoutJS Mapping Plugin. This was an extremely useful feature to me. I have very much wanted its functionality in kendo, so I took some time and just wrote a small few lines of code to do some of what I used to with knockout.

I don't know if this will ever see the light of day, but I would love to see this kind of thing in the future of kendo.

First, you just declare a mapping. To make this easier, I simply added it to the declaration of a model in kendo.data.Model.define. This particular mapping simply uses a function to merge all children under an array called Tags when it is created, so that they each have a function.

var Model = kendo.data.Model.define({
    id: "Id",
    fields: {
        Id: {
            type: "string",
        },
        Name: {
            type: "string",
        },
        Tags: []
    },
    mapping: {
        Tags: {
            children: function (data) {
                return $.extend(data, {
                    onRemove: function (e) {
                        console.log(e);
                    }
                });
            }
        }
    }
});
Next, you need an actual function to perform the mapping. I did this with this code.
kendo.mapping = function (source, mapping) {
    var name,
        value;
 
    // if the user provides us a mapping, we can use that to help
    // build the objects appropriately
    for (name in source) {
        if (source.hasOwnProperty(name)) {
            // get the value for this property or item
            value = source[name];
 
            // try to determine if this is an array, or just a
            // normal object. That will greatly dictate our choice of behavior
            if (value instanceof Array) {
 
                // if this is an array, then we will try to check for a
                // key in the mapping schema
                if (mapping[name].children) {
 
                    // if we discover a mapping key for this array, we
                    // will use it to reconstruct the array data
                    for (var i = 0; i < value.length; i++) {
                        source[name][i] = mapping[name].children(value[i]);
                    }
                }
            } else {
                // attempt to match any non array type keys
                if (mapping[name]) {
                    source[name] = mapping[name](value);
                }
            }
        }
    }
 
    return source;
}
This will go through the mapping data given, and some JSON data given, and do the appropriate work to call upon the mapping keys and
children functions.

Now, I have a function for merging raw JSON data with a kendo view model.
kendo.data.ObservableObject.prototype.fromJSON = function (source, mapping) {
    var name,
        value,
        observable = this;
 
    // if there is mapping given, then pass it through that first
    if (mapping) {
        source = kendo.mapping(source, mapping);
    }
 
    for (name in source) {
        if (observable.hasOwnProperty(name)) {
            observable.set(name, source[name]);
        }
    }
}
So then, I can just call this in my view model and javascript like this.
var viewModel = new Model({
    Id: null,
    Name: null,
    Tags: []
});
 
var dataSource = new kendo.data.dataSource({
    transport: {
        read: {
            url: '/data/items/',
            dataType: "json",
            type: 'GET'
        }
    },
    schema: {
        total: "total",
        data: "data"
    }
});
So then, the controller returns data that looks like this.
Id: "items/1",
Name: "Some Game Item",
Tags: [
    {
        Id: "tags/1",
        Name: "Sword"
    },
    {
        Id: "tags/2",
        Name: "Weapon"
    }
]
And the mapping just needs one call, to merge it with the view model, and to map the function onto the tags array. Where data is the data returned from the dataSource.
viewModel.fromJSON(data.toJSON(), viewModel.mapping);
I think you will find this is extremely useful for building complex models that meet more realistic business needs.

Stacey
Top achievements
Rank 1
 answered on 12 Nov 2013
2 answers
111 views
It is not possible to set valueAxis properties for StockChart Navigator. If we have a chart as in the attached image, we have the blue line in the main chart and also in the navigator, but they seems different. This is because the valueAxis of the line chart is from 0 to 120000 (from 0 because we have the other violet line with values near 0), whereas the navigator "valueAxis" is from 98000 to 104000 (the same in the main line chart, if we put just the blue line and we remove the violet one).
Stefania
Top achievements
Rank 1
 answered on 12 Nov 2013
2 answers
242 views
We have a modal view that has content loaded into it dynamically via some ajax calls. After the data is loaded and the modal is made visible, the scroll bar is always still at the position it was for the previous content. How can we scroll it to the top after loading the content?

Thanks
Michael
Top achievements
Rank 1
 answered on 12 Nov 2013
4 answers
274 views
Hi,

I would like to know if there is any documentation on the filter parameter for the kendoDraggable function.  I have searched a lot and not found anything.

My current situation is that I have drag and drop working between 2 kendo ui grids and all is great.  However, the draggable filter is currently:
filter: "tbody > tr"
This causes the whole line to then display in the drag.  I would like to find a way to specify the first column in that row and not the whole row.

Any input would be greatly appreciated.

Kiril Nikolov
Telerik team
 answered on 12 Nov 2013
1 answer
97 views
Hello,

I am experiencing an issue with the endless scroll when used with data pulled from the local database. When I scroll down the loading image appears at the bottom and it never disappears. Also, when I reach a point in the list and I scroll up there is almost a third of the screen that is not visible until I reach the top. 

I tried it with data pulled from a server and works perfectly but not with data pulled from the local database. To me it looks like it does not know when the request is over so that it can hide the loading image.

This is the code I am using:

 
var dataSource = new kendo.data.DataSource({
           type: "json",
           transport: {
               read: function(options) {
                   db.transaction(queryRows, app.dbError);
                    
                   function queryRows(tx) {
                       tx.executeSql("SELECT comps.*, (SELECT COUNT(*) FROM comps WHERE comps.comp_name LIKE ?) as total FROM comps WHERE comps.comp_name LIKE ? LIMIT ?, ?", ["%" + $("#search-comp-name").val() + "%", "%" + $("#search-comp-name").val() + "%", (options.data.page - 1) * 20, 20], queryRowsSuccess, queryRowsFailure);
                   }
                   
                   function queryRowsSuccess(tx, results) {
                       var res = Array();
                       var total = 0;
                        
                       for(var i = 0; i < results.rows.length; i++) {
                           res.push(results.rows.item(i));
                       }
                        
                       if(results.rows.length > 0)
                           total = results.rows.item(0).total;
                        
                       var resSchema = {
                           results: res, total: total
                       };           
                        
                       options.success(resSchema);
                        
                   }
                    
                   function queryRowsFailure(err) {
                       app.compListDbError();
                   }
               }
           },
           schema: {
               total: function (response) {
                       return response.total;
                   },
               data: function(response) {
                       return response.results;
                   },
           },
           serverPaging: true,
           pageSize: 20
       });
        
       
 
       $("#companyResultList").kendoMobileListView({
           dataSource: dataSource,
           template: $("#endless-scrolling-template").text(),
           endlessScroll: true
       });
Kiril Nikolov
Telerik team
 answered on 12 Nov 2013
1 answer
138 views
Hi everyone,

    Could I change the time format to "HH:mm" in the shadow event when you are moving or resizing the event?

    I've been looking for examples or any guide but I can't find it.

    Maybe using move or resize event?

Thanks in advance
Regards
Vladimir Iliev
Telerik team
 answered on 12 Nov 2013
1 answer
178 views
Hello,

In chrome, when we zoom in for a certain zoom level (110% , 125%) we are getting scroll bar inside tooltip .
Please let us know if there is any fix for this? 
Please refer attached file for more details.
Iliana Dyankova
Telerik team
 answered on 12 Nov 2013
3 answers
197 views
Hi guys,

I'm having an issue with a server paged data source, where if the length of the result set changes the data source is not updated with the change. For example:

                    $("#grid").kendoGrid({
                        dataSource: {
                            type: "json",
                            serverPaging: true,
                            pageSize: 100,
                            transport: {
                                read: {
                                    url: "/Req/Azure",
                                    dataType: "jsonp",
                                    data: {
                                        sid: sid,
                                        q: query
                                    }
                                }
                            },
                            schema: {
                                data: "data",
                                total: "total"
                            }
                        },
                        height: h,
                        width: "auto",
                        scrollable: {virtual: true},
                        selectable: "row"
                    });

If on the first request of the data source (page=1, skip=0, take=100) the total is 200 and on the second request (page=2, skip=100, take=100) the total is 202, the data source never makes a third request as it has reached the initial 200 records.

Any ideas how i can work around this issue?
Tony
srikanth
Top achievements
Rank 1
 answered on 12 Nov 2013
4 answers
183 views
We just update all use of our Kendo control to use "kendo.destroy(context)"

Combobox, datepicker don't show any leak now

But we see that splitter still have some leak.

In ajax we refresh some information in our page, and remove the splitter each time.

In debug we check that "kendo.destroy" was call before we remove the DIV that was made into splitter.

If we just remove the call to kendo.splitter we don't have leak.

Thanks
Petur Subev
Telerik team
 answered on 12 Nov 2013
3 answers
180 views
I'm trying to use multiple layout definitions without success. The views are always using the default one. The code is looking like that:
<div data-role="layout" data-id="default">
    <header data-role="header">
        <div data-role="navbar"> some content ... </div>
    </header>
    <footer data-role="footer">
        <div data-role="tabstrip"> some content... </div>
    </footer>
</div>
 
<div data-role="layout" data-id="layout2">
    <header data-role="header">
        <div data-role="navbar"> some other content ... </div>
    </header>
    <footer data-role="footer">
        <div data-role="tabstrip"> some other content... </div>
    </footer>
    </footer>
</div>
 
<div
    id="view1"
    data-role="view"
    data-layout="default"
>
   content...
</div>
 
<div
    id="view2"
    data-role="view"
    data-layout="layout2"
>
   content...
</div>
"view2" is using the default layout as well (instead of "layout2"). Am I doing something wrong? I just followed the layouts documentation.
Kamen Bundev
Telerik team
 answered on 12 Nov 2013
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
MultiColumnComboBox
Dialog
Chat
DateRangePicker
Checkbox
Timeline
Drawer
DateInput
ProgressBar
MediaPlayer
ImageEditor
TextBox
OrgChart
Effects
Accessibility
PivotGridV2
ScrollView
BulletChart
Licensing
QRCode
ResponsivePanel
Switch
Wizard
CheckBoxGroup
TextArea
Barcode
Breadcrumb
Collapsible
Localization
MultiViewCalendar
Touch
RadioButton
Stepper
Card
ExpansionPanel
Rating
RadioGroup
Badge
Captcha
Heatmap
AppBar
Loader
Security
TaskBoard
Popover
DockManager
FloatingActionButton
CircularGauge
ColorGradient
ColorPalette
DropDownButton
TimeDurationPicker
ToggleButton
TimePicker
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
+? more
Top users last month
Edmond
Top achievements
Rank 1
Iron
fabrizio
Top achievements
Rank 2
Iron
Veteran
RobMarz
Top achievements
Rank 2
Iron
Fakhrul
Top achievements
Rank 1
Iron
Tejas
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Edmond
Top achievements
Rank 1
Iron
fabrizio
Top achievements
Rank 2
Iron
Veteran
RobMarz
Top achievements
Rank 2
Iron
Fakhrul
Top achievements
Rank 1
Iron
Tejas
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?