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.

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:

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:

It is very similar to MVC code, but... it is not working :/. My pure javascript Kendo Grid code below:


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?

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.  

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?

See the following HTML: 

here's the viewModel: 


The resulting date picker shows the date as Dec 2013 in Firefox. IE and Chrome (didn't test Safari). 

If you set the month to 12, it ignores the year value and jumps to Jan 2014. 

Regards,
Jacques

I have a views in my Index.htm + layout containing a tabStrip. In one of my views I have a form. When I put <textarea/> in the form my layout with tabStrip disappears  (no errors reported in debug console). If I only changed <textarea/> to< input type=”text”/>, layout appears again. I need textareas in my form – how to manage it ?

This works:
< div id="view-detail"
        data-role="view"
        data-layout="detail"
        data-title="View1"
        data-init="app.views.detail.init"
        data-model="app.views.detail.viewModel">

        <form>
            <ul data-role="listview" data-style="inset">
                <li>
                    <label>
                        <span data-bind="text:nameTxt"></span>
                        <input id="twrNazwa" type="text" style="width: 65%; text-wrap:normal" />
                    </label>
                </li>
                <li>
                    <label>
                        <span data-bind="text:jmTxt"></span>
                        <input id="twrJm" type="text" style="width: 65%" />
                    </label>
                </li>
                <li>
                    <label>
                        <span data-bind="text:indexTxt"></span>
                        <input id="twrIndex" type="text" style="width: 65%" />
                    </label>
                </li>
            </ul>
        </form>
    </div>

   
< !--
the common layout for all views -->
< div data-role="layout" data-id="main"
        <div data-role="header">
            <div style="margin-top: 5px" data-role="navbar">
                <span data-role="view-title"></span>
            </div>
        </div>
        <div data-role="footer">
            <div data-role="tabstrip">
                <a href="view1" data-icon="organize">Home</a>
                <a href="view2" data-icon="contacts">View1</a>
                <a href="view3" data-icon="cart">View2</a>
                <a href="view4" data-icon="settings">View3</a>
            </div>
        </div>
    </div>

 

This crushes:

  
< div id="view-detail"
        data-role="view"
        data-layout="detail"
        data-title="View1"
        data-init="app.views.detail.init"
        data-model="app.views.detail.viewModel">
        <form>
            <ul data-role="listview" data-style="inset">
                <li>
                    <label>
                        <span data-bind="text:nameTxt"></span>
                        <textarea id="twrNazwa" style="width: 65%; text-wrap:normal" />
                    </label>
                </li>
                <li>
                    <label>
                        <span data-bind="text:jmTxt"></span>
                        <input id="twrJm" type="text" style="width: 65%" />
                    </label>
                </li>
                <li>
                    <label>
                        <span data-bind="text:indexTxt"></span>
                        <input id="twrIndex" type="text" style="width: 65%" />
                    </label>
                </li>
            </ul>
        </form>
    </div>

   
< !--
the common layout for all views -->
< div data-role="layout" data-id="main">
        <div data-role="header">
            <div style="margin-top: 5px" data-role="navbar">
                <span data-role="view-title"></span>
            </div>
        </div>
        <div data-role="footer">
            <div data-role="tabstrip">
                <a href="view1" data-icon="organize">Home</a>
                <a href="view2" data-icon="contacts">View1</a>
                <a href="view3" data-icon="cart">View2</a>
                <a href="view4" data-icon="settings">View3</a>
            </div>
        </div>
    </div>

I have a views in my Index.htm + layout containing a tabStrip. In one of my views I have a form. When I put <textarea/> in the form my layout with tabStrip disappears  (no errors reported in debug console). If I only changed <textarea/> to< input type=”text”/>, layout appears again. I need textareas in my form – how to manage it ?

This works:
<div id="view-detail"
        data-role="view"
        data-layout="detail"
        data-title="View1"
        data-init="app.views.detail.init"
        data-model="app.views.detail.viewModel">

        <form>
            <ul data-role="listview" data-style="inset">
                <li>
                    <label>
                        <span data-bind="text:nameTxt"></span>
                        <input id="twrNazwa" type="text" style="width: 65%; text-wrap:normal" />
                    </label>
                </li>
                <li>
                    <label>
                        <span data-bind="text:jmTxt"></span>
                        <input id="twrJm" type="text" style="width: 65%" />
                    </label>
                </li>
                <li>
                    <label>
                        <span data-bind="text:indexTxt"></span>
                        <input id="twrIndex" type="text" style="width: 65%" />
                    </label>
                </li>
            </ul>
        </form>
    </div>

   
<!--
the common layout for all views -->
<div data-role="layout" data-id="main"
        <div data-role="header">
            <div style="margin-top: 5px" data-role="navbar">
                <span data-role="view-title"></span>
            </div>
        </div>
        <div data-role="footer">
            <div data-role="tabstrip">
                <a href="view1" data-icon="organize">Home</a>
                <a href="view2" data-icon="contacts">View1</a>
                <a href="view3" data-icon="cart">View2</a>
                <a href="view4" data-icon="settings">View3</a>
            </div>
        </div>
    </div>

 

This crushes:

  
<div id="view-detail"
        data-role="view"
        data-layout="detail"
        data-title="View1"
        data-init="app.views.detail.init"
        data-model="app.views.detail.viewModel">
        <form>
            <ul data-role="listview" data-style="inset">
                <li>
                    <label>
                        <span data-bind="text:nameTxt"></span>
                        <textarea id="twrNazwa" style="width: 65%; text-wrap:normal" />
                    </label>
                </li>
                <li>
                    <label>
                        <span data-bind="text:jmTxt"></span>
                        <input id="twrJm" type="text" style="width: 65%" />
                    </label>
                </li>
                <li>
                    <label>
                        <span data-bind="text:indexTxt"></span>
                        <input id="twrIndex" type="text" style="width: 65%" />
                    </label>
                </li>
            </ul>
        </form>
    </div>

   
<!--
the common layout for all views -->
<div data-role="layout" data-id="main">
        <div data-role="header">
            <div style="margin-top: 5px" data-role="navbar">
                <span data-role="view-title"></span>
            </div>
        </div>
        <div data-role="footer">
            <div data-role="tabstrip">
                <a href="view1" data-icon="organize">Home</a>
                <a href="view2" data-icon="contacts">View1</a>
                <a href="view3" data-icon="cart">View2</a>
                <a href="view4" data-icon="settings">View3</a>
            </div>
        </div>
    </div>

Has anyone tried to use the Kendo Slider to choose between date ranges?  

Currently I am using month long millisecond steps and the tool tip template to display the date ranges.  However, I am having trouble updating the tick values using the format option.  

Does anyone know how to format a number to date string using only a kendo format string? 

Or does anyone know how to using templates or JS in the slider format string?