Considering the following data object:

var obj = {
person: {
name: "Holmes"
address: {
apt: 221B,
street: "Baker",
city: "London"
    }
  }
}

And the viewModel built from the above object to be used in a MVVM presentation:
var viewModel = kendo.observable(obj);
kendo.bind(..., viewModel)

After the changes have been done to the viewModel by UI,
I would like to extract the original object as a whole (rather then field by field)
with the changes incorporated in it.

The extracted object would be then sent to another part of the application for processing
and is expected to have no additional events/functions/types built into it.
In other words, I would like to detach the "observable" from the object.

How can I do that?
Thanks,
Andrew

What i am trying to do is use partial views with kanedo ui. I want to have my views in one folder and load them according to navigation. Is there a simple way to do this? I tried accomblishing this by using angularjs but it didn't work very well.

Does the resize api also make it possible to apply vertical resizing ?
I'm trying to apply this on a grid contained in a splitter pane, but end up with the grid height being more the the pane height.
It would be nice if kendo widgets like the grid, listbox, scheduler, charts would be able stretch vertically to their parent container without having to change css classes and doing calculations yourself.

At the moment to my experience it's not that easy to create a SPA business application which would always be filling the entire viewport.

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.

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.

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.

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

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

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: 
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. 
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

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? 

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.