Telerik Forums
Kendo UI for jQuery Forum
1 answer
122 views
Is there any detailed documentation on how to use the Kendo Map.  I am looking for Information such as what map tile sources are available, are there any features like Telerik Silverlight Map DynamicLayer/VirtualLayer.  We have a web application that we converted to Kendo UI and the only component that is still not converted is the Silverlight Map page.
T. Tsonev
Telerik team
 answered on 29 Nov 2013
6 answers
131 views
The online demos from demos.kendoui.com was not working in any of the browsers in my machine.

But ironically, demo source which was downloaded from website is working as intended in all browsers.

Troubleshooting this, I attempted to clear cache and all cookies from my browsers which didn't help any. Even I've uninstalled all browsers and re-installed all again to see the same result.

Eventually, seems like release of 2013 Q3 has brought me relief here as demos.kendoui.com started functioning all fine as expected.

I can see that current online demo site is using references from http://cdn.kendostatic.com/2013.3.1119/* which might have resolved the problem.

To simulate the same issue, I've created a fiddle and the link is below and find attachment of an image screenshot which shows error in browser console 'Uncaught SyntaxError: Unexpected end of input '.

Fiddle: http://jsfiddle.net/balamurugavel/ZYbnh/

Note: Browsers which I've used are IE10, IE9, IE8, IE7, Chrome 31, Firefox 25, Opear 18, Safari 5.1.7.

Any helpful comments would do for me. Thanks in advance.
Balamurugavel
Top achievements
Rank 1
 answered on 29 Nov 2013
1 answer
242 views
Can anyone tell me a cleaner way of restricting keyboard navigation in kendo Window?

I want to stop kendo Window draggable property using keyboard navigation.
Dimo
Telerik team
 answered on 29 Nov 2013
1 answer
70 views
Hi,
we have face some issue regarding pagination in kendo grid
we gave client side paging,in that we go to second page we get all records of page 3 as well.

Ex.We have 12 records and we set PageSize 5
PageNo 1. display 5 records ( 1 to 5)(which is correct)
PageNo 2. display 7 records (6 to 12) (Which is incorrect,it should be display 6 to 10)
PageNo 3. display 2 records  (11 to 12)(which is correct)

Thanks in advance
Alexander Valchev
Telerik team
 answered on 29 Nov 2013
1 answer
220 views
Hi there,

I am at the moment implementing a dirty check using kendo MVVM calculated field, here is the code snippet


function viewModelSource(data) {    
    if (this instanceof viewModelSource) {
        this.Title = data.title;

        // dirty flag
        this.IsDirty = false;
        this.resetDirty = function () {
            this.set("IsDirty", false);
        }
        this.CheckDirty = function () {
           
            this.get("Title");
            this.set("IsDirty", true);
        }
    }
}

var viewModel = kendo.observable(new viewModelSource(data));
kendo.bind($container, viewModel);

<div>
<input type="text" data-bind="value: Title" />
</div>

The problem is when the input value changes, I expect the dirty flag to be set to true, but it never was.

any help would be appreciated.

Thanks
James
Daniel
Telerik team
 answered on 29 Nov 2013
1 answer
439 views
We're in the process of changing one of our complex grids to make use of MVVM the purpose of which was to be able to perform calculations when certain events occur. 

The grid shows a list of financial asset classes, investment products, weights and returns. The complexity of the grid comes in where the dataSource consists of a number of records as well as a nested array representing investment product choices along with their returns. E.g. 

JSON: 
[{ "AssetClassCode": "XYZ", "AssetClassName": "Domestic Bonds", "Benchmarks": [{"ExtensionData":{},"AssetClassCode":"XYZ", "InvestmentCode": "ABC", "YTD": 0.14, "Year1": 0.23, "Year3": 0.21, "Year5": 0.23}]}]
This represents one asset class with one or more investment products. The payload also carries performance data with each investment product. 

This is represented in the Grid as a row in which the Investment Product column is a drop down list which the user can use to choose a different investment product. Each time an investment product is selected the returns columns (Ytd, Year1, Year3, Year5) are updated with the data from the JSON data above. 

In the observable object we have a function which we use to bind each row's Investment Products drop down list's change event to. See the following code. 
viewModel = kendo.observable({
 
                assetClassesDataSource: dataSource,
 
                save: function ()
                {
                    console.log("saving");
                },
 
                edit: function ()
                {
                    console.log("edit");
                },
 
                onBenchmarkChange: function (args)
                {
                    args.data.set("InvestmentCode ", args.sender.dataItem().InvestmentCode );
                    args.data.set("Allocation", 0);
                    args.data.set("Ytd", args.sender.dataItem().Ytd);
                    args.data.set("Year1", args.sender.dataItem().Year1);
                    args.data.set("Year3", args.sender.dataItem().Year3);
                    args.data.set("Year5", args.sender.dataItem().Year5);
 
                    console.log("done setting");
                }
 
...
The problems here are: 
1. You can't set multiple values at once. Confirmed by a Telerik response on one of the forums. This is not a problem in itself if it weren't for fact that each .set call fires internal events resulting in a VERY slow update of the grid. 
2. Using the following code, the save and edit events are never fired from the Kendo grid

<div data-role="grid" data-editable="true" data-bind="source: assetClassesDataSource, events: { save: save, edit: edit, dataBound: dataBound }"
            data-columns="[ {'field': 'AssetClassName', 'width': '25%', 'title': 'Asset Class'},
            {'field': 'InvestmentCode', 'width': 190, 'title': 'Investment Code'},
            {'field': 'InvestmentName', 'width': '25%', 'title': 'Investment'},
            {'field': 'Allocation', 'width': 75, headerAttributes: { 'class': 'text-right'}, groupFooterTemplate: '#: sum #%', footerTemplate: '# if(data.Allocation) { if (sum > 100) {# <span class=\'message-error\'>#= sum #%</span> #} else {# <span class=\'\'>#= sum #%</span> #} } else {# 0 #}#'},
            {'field': 'Ytd', 'width': 75, 'title': 'YTD', headerAttributes: { 'class': 'text-right'}},
            {'field': 'Year1', 'width': 75, 'title': '1 Year', headerAttributes: { 'class': 'text-right'}},
            {'field': 'Year3', 'width': 75, 'title': '3 Year', headerAttributes: { 'class': 'text-right'}},
            {'field': 'Year5', 'width': 75, 'title': '5 Year', headerAttributes: { 'class': 'text-right'}}]"
            data-row-template="row-template">
        </div>
 
<script id="row-template" type="text/x-kendo-template">
        <tr>
            <td></td>
            <td data-bind="text: AssetClassName">
            </td>
            <td data-bind="text: BenchmarkCode">
            </td>
            <td>
                <input data-role="dropdownlist" data-text-field="InvestmentName" data-value-field="InvestmentCode" data-bind="{source: Benchmarks, events: {change: onBenchmarkChange, dataBound: onBenchmarksDataBound}}" data-value-primitive="true" />
            </td>
            <td class="text-right">
                <input class="editable" data-role="numerictextbox" data-format="N0" data-bind="{value: Allocation}" data-min="0" data-max="100" />
            </td>
            <td class="text-right">
                #: kendo.toString(get("Ytd"), "P") #
            </td>
            <td class="text-right">
                #: kendo.toString(get("Year1"), "P") #
            </td>
            <td class="text-right">
                #: kendo.toString(get("Year3"), "P") #
            </td>
            <td class="text-right">
                #: kendo.toString(get("Year5"), "P") #
            </td>
        </tr>
        </script>
3. The fact that we're not getting any events firing for the grid means that we can't calculate the sumProduct or weighted average values at the bottom of the grid. 
4. When you use this declarative approach to setting up the grid, the columns configuration is not the best way to do things. As you can see we have templates with JS if statements in them which are intended to output HTML into the Allocation Total row. If the value is higher than 100 the HTML rendered includes a class making the text appear red. The span's class attribute requires inverted commas and this was quite painful to figure, but the end result is that it works, but you can no longer use Visual Studio to correctly format the HTML document/view. 

We were contemplating writing custom aggregate functions for this purpose, but another forum post from Telerik confirmed that this is not supported. Our only choice then is to track a save/update type event on the grid and then manually update the dataSource aggregate values, or directly update the HTML total row to reflect our results. (I doubt the datasource will allow us to store calculated values in some sort of aggregates cache/variable). 

Although visually advanced, it just seems like kendo Grid is quite rudimentary when it comes to these slightly more complex types of requirements. ?? Perhaps that is just it, it was designed for simple, visually appealing grids with the ability to show master/detail, filterable, sortable, editable data. Getting anything more advanced to work like having a drop down list populated from the same nested JSON data that the dataSource uses pushes the limits. So much so, that in previous posts Telerik staff mentioned that this scenario was not possible, yet we got it working. 

So apart from points/questions 1-4 above a big question is whether or not we ditch kendo grid altogether in this scenario? 
Petur Subev
Telerik team
 answered on 29 Nov 2013
1 answer
51 views
I am using Kendo UI Mobile.  I have a list view that has 6 buttons. 
Whenever the long-term assessments button is touched, it goes to the correct view, but immediately triggers the button on that view.  I get similar behavior if I put a different item in the second li position.  It only affects the second li position...

<ul class="navText" data-role="listview" data-type="group">
                <li>
                    <ul id="drawerListBorder">
                        <li style="background-color:#f4f0e7;" data-icon="bookmarks"><a href="#drawer-assessments" data-transition="none">Main Assessments</a></li>
                        <li style="background-color:#f4f0e7;" data-icon="bookmarks"><a href="#drawer-longTerm" data-transition="none">Long-Term Assessments</a></li>
                        <li style="background-color:#f4f0e7;" data-icon="bookmarks"><a href="#drawer-otherStudies" data-transition="none">Other Studies</a></li>
                        <li style="background-color:#f4f0e7;" data-icon="star"><a href="#drawer-whatsnew" data-transition="none">What's New</a></li>
                        <li style="background-color:#f4f0e7;" data-icon="compose"><a href="#drawer-quizzes" data-transition="none">Sample Quizzes</a></li>
                        <li style="background-color:#f4f0e7;" data-icon="about"><a href="#drawer-about" data-transition="none">About Us</a></li>
                    </ul>
                </li>
            </ul>

<!-- Start Long Term Assessments -->
     <div data-role="view" id="drawer-longTerm" data-init="onInit" data-layout="drawer-layout" data-title="NAEP Results">
            <div data-role="content" class="km-content km-scroll-wrapper" style="overflow:hidden;background-color:#424242;">
                <ul data-role="listview" class="inboxList" style="margin:10px 0 0 0;">
                    <li style="height:100%; background:#424242; overflow:hidden; box-shadow:none !important;">
                        <h2>Long-Term Assessments</h2>
                        <div style="width:100%; height:100%;">
                       
                         <div style="width:305px;text-align:center;">
                             <a href="#readingAndMath">
                                 <div style="style removed;">
                                     <img src="images/math-icon_white.png" height="40px" /><br /><div style="style remove;">Reading and Mathematics</div>
                                    </div>
                                </a>
                            </div><!-- Tier one Assessment Icons -->                                                         
                        </div>
                    </li>
                </ul> 
            </div>   
        </div>
    <!-- End Long Term Assessments -->

the project is Naep Mobile App.
Alexander Valchev
Telerik team
 answered on 29 Nov 2013
5 answers
260 views
Hi, I am trying to code functionality in WCF API which would return grid data by specifications (serverGrouping, serverFiltering, serverSorting);

My MVC code works, and it looks like this:

[AutoMapperConfigurationActionFilter(typeof(OrderDomainMvcProfile))]
[NHibernateSession]
public virtual ActionResult OrderGrid_Select([DataSourceRequest]DataSourceRequest request)
{
   var filterSpecification = KendoToSpecificationHelper.Filter<OrderDomainEntities.Order>(request.Filters);
   var sortSpecificationList = KendoToSpecificationHelper.OrderSort(request.Groups, request.Sorts);
   var groupSpecification = KendoToSpecificationHelper.OrderGroup(request.Groups);
where "KendoToSpecificationHelper" is written-on-my-own class that gets data from request and creates Specifications (see Specification pattern); 

Now I would like to code tse same functionality in WCF REST Service, which receives requests from distributed interface; The code I've just started looks like:

public OrderContract[] ListSpecifiedOrders([DataSourceRequest]DataSourceRequest request)
        {
            _ContextHelper.SetCurrentWebOperationContext();
            if (_ContextHelper.AssertContextIsNull())
                return null;
 
            try
            {
                var filterSpecification = KendoToSpecificationHelper.Filter<Order>(request.Filters);
                var sortSpecificationList = KendoToSpecificationHelper.OrderSort(request.Groups, request.Sorts);
                var groupSpecification = KendoToSpecificationHelper.OrderGroup(request.Groups);
It is very similar to MVC code, but... it is not working :/. My pure javascript Kendo Grid code below:

01.jQuery(ORDER_GRID_ID).kendoGrid({
02.           // below js code to render control....
03.           // ..............
04.            "dataSource": {
05.                    "transport": {
06.                        "read": function (options) {
07.                            getOrders(options);
08.                        },
09.                    },
10.                    "schema": {
11.                        "groups": [{
12.                            "field": "number"
13.                        }],
14.                        "data": "data",
15.                        "total": "total"
16.                    },
17.                    "pageSize": 10,
18.                    "serverPaging": true,
19.                    "serverSorting": true,
20.                    "serverFiltering": true,
21.                    //"serverGrouping": true,
22.                    "serverAggregates": true,
23.                    "error": listOrdersView.OrderGrid_Error
24.                }
25.}

When GRID reads data, it sends to a "getOrders(options)" function an object "options" with all required data; WCF correctly translates JSON to DataSourceRequest, but there is a problem with translating Sort list elements. My sort elements contains "Member" and "Dir" fields - WCF ignores Dir field, and always sets direction of sorting to "Ascending".


Is there any way to omit DataSourceRequest type parameter in a REST method, and manually create on a REST side filterDescriptors, groupDescriptors and sortDescriptors from only that JSON that Kendo Control is sending in Request? How to do that properly?
Daniel
Telerik team
 answered on 29 Nov 2013
1 answer
169 views
Working with KendoUI Mobile & Phonegap for a month or so, all good so far.   Just hoping for some advice on dynamically building tabs/views (if possible).
Basically, I would like to have different tabs/views based on the logged in user.  There could be many different combinations of tabs/views. 

Possible views/tabs: news, about, weather, video, articles, maps, (many more)

For example,
User 1 gets views/tabs: news, weather, maps
User 2 gets view/tabs: video, maps, about

Do you suggest I build the layout programmatically before the page is loaded?  Inject layout into the DOM?  Programmatically hide tabs not associated with current user?  Other ideas?

A simple example would be appreciated if what I'd like to do is feasible.

Thank you.  
Kiril Nikolov
Telerik team
 answered on 29 Nov 2013
1 answer
58 views
I'm trying to help users choose their birthdates, so it would better for them to choose first the year then month and for last the day.
So when I open the datepicker, I would like to open a year range as first values so then when a choose a year it would appear month and then day.
Is it possible?
Georgi Krustev
Telerik team
 answered on 29 Nov 2013
Narrow your results
Selected tags
Tags
+? more
Top users last month
Anislav
Top achievements
Rank 6
Silver
Bronze
Bronze
Jianxian
Top achievements
Rank 1
Iron
Marco
Top achievements
Rank 3
Iron
Iron
Iron
Jim
Top achievements
Rank 2
Iron
Iron
Nurik
Top achievements
Rank 2
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Anislav
Top achievements
Rank 6
Silver
Bronze
Bronze
Jianxian
Top achievements
Rank 1
Iron
Marco
Top achievements
Rank 3
Iron
Iron
Iron
Jim
Top achievements
Rank 2
Iron
Iron
Nurik
Top achievements
Rank 2
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?