Hello,

I have a Hierarchical Data Source and work fine for display in ListView.

I can also CRUD the root level without problem. However, I could not update the second level (node.children).

No mater tried node.children.sync(), or even the top <Hierarchical Data Source>.sync(), the update function of transport had not been triggered. 

I tried modify a child record: node.children.at(0).set('newKey', 'newValue'). node.children.hasChanges() retuned True. After node.children.sync(), node.children.hasChanges() retuned False. But Transport.update had not been triggered so that nothing was written into datasource.

Any idea?

I am following the documentation here http://docs.telerik.com/kendo-ui/api/mobile/view#events-beforeShow
It suggests that if you want to redirect to another view while evaluating the application's state in the before show method, you should use the e.preventDefault() method.

I have put together a small test application using this strategy and when this pattern is followed the entire application stops working. No stack traces are thrown, no errors logged. The kendo application simply dies.

I am using kendo v2013.3.1324 with the bundled jQuery (v1.9.1)

To illicit the behavior with the attached application follow these steps:
1) Click on the view 2 link. This is the protected view so you should be directed back to view 1.
2) Click on the view 3 link. This is not a protected view so you should see view 3.
3) Click on the view 1 link. This is not a protected view so you should see view 1.
4) Click on the view 2 link again. The application stops with no warning. Links are dead, no interaction with the app can be performed.

I've attached an app that illustrates this behavior and included the code below:

Hi,
This question is regarding something I'm trying to do in a grid, but it is a general question for templates in general.
I have a grid in which I have a template for a column like this:
Is there a way to manipulate the timeStamp and add/subtract hours from it?
So for instance, my timeStamp is: 12/5/2013 08:37:56, and in the template it will add a constant to the time which will add a certain amount of time (i.e. 2 hours) so in the grid I'll see 12/5/2013 10:37:56

Hello,

I have an asynchrone function that generate a scrollView depending on the data I'm pulling from the server, I want to be able to display different buttons in the Scroll View.

So I am using an if statement in the scrollView template like so:


<div data-role="view" data-layout="overview-layout" data-show="showEvent" data-title="Meet My Friends" id="event">
            <div data-role="content" class="content">

                <div id="eventContent"></div>

                <div>
                    <div id="friendsToInvite" data-role="scrollview" data-source="friendsToInvite" data-template="friendsToInvite-template" data-enable-pager="false"></div>
                </div>
            </div>
        </div>


<script id="friendsToInvite-template" type="text/x-kendo-template">
            <p class="friendName">#= name #</p>
            <div style="width: auto; height: 180px; background: url('https://graph.facebook.com/#= fbId #/picture?type=large')  no-repeat center;"></div>

            #if( invited ) {#
                <p class="friendsButtons"><button class="button2 btn-green" onclick="uninviteFriend(this, #= fbId #, #= eventId #)">Already Invited : Un-invite</button></p>
            #} else {#
                <p class="friendsButtons"><button class="button2 btn-orange" onclick="inviteFriend(this, #= fbId #, #= eventId #)">Invite</button><button class="button2 btn-grey">Dont show me again</button></p>
            #}#
        </script>

And in my show function at some point I have

$.when( Event.getFriendsList( event.id ) ).done( function( friendsList )
    {
        console.log("when");
        if ( friendsList.length > 0 )
        {
            var friendsToInvite = [];

            for ( var i = 0; i < friendsList.length; i++ )
            {
                friendsToInvite.push( { name: friendsList[i]["name"], fbId: friendsList[i]["fbid"], invited: friendsList[i]["invited"], eventId: event.id } );
            };
            console.log( friendsToInvite );
            $( "#friendsToInvite" ).data( "kendoMobileScrollView" ).setDataSource( friendsToInvite );
        }
        else
        {
            console.log("Got to be creative here ...")
        }
    });

My problem is that I have a js error in my console saying that "Uncaught ReferenceError: invited is not defined " This is coming from the if statement.
How can I fix this ? In the doc, it seems that when having if statements in your kendo ui, you need to generate it at the init of the page.

Thanks

How do you iterate over the results of an xml datasource. I can see the results if I bind a list to this datasource, but say for instance I want to insert a list with a different innerhtml string for a certain optTypeID from the datasource below. How would I achieve that in a function call named processInfo?

var dsDet
    dsDet = new kendo.data.DataSource({ 
              transport: {
                     read: "Details.xml"
                 },
                 schema: {
                     type: "xml",
                     data: "/Category/Field",
                     model: {
                         fields: {
                             name: "@Name",
                             displayName: "@DisplayName",
                             value: "@Value",
                             optTypeID: "@OptTypeID"
                         }
                     }
                  }
                 });  
               
function processInfo()
{  
Need a loop here to look through the results and if the optTypeID=1 for instance I want to insert 
<li> test1</li> into a div.
If optTypeID=2 then insert
<li> test2</li> into a div.
}    

Any help would be greatly appreciated.

Thanks

Hi ,

Does anyone know of a way to cancel the "ChangeRow" event if the user clicks an icon/link in that row?

In my example I have several rows , some of the rows have columns with links/icons ... If the user clicks these links/icons I want to launch the respective content BUT I do not want the row to be selected i.e. I don't want the "ChangeRow" to be triggered..

Is what I'm asking even possible? I tried cancelling  propogration of the event from the link/icon click BUT the "ChangeRow" of the KendoGrid still fires..

I am doing inline editing of rows in my grid. I am trying to hook into the change event of the dataSource, but can't seem to figure out how to get the currently selected row within that dataSource change event.

I am using the dataSource change event to set a dirty flag on the page so we can know when we can update the changes in bulk (I am not updating as I change a row, but instead doing a bulk update of the list of changed items)

Thanks,
--Ed

I am having problems getting data to show up in a grid when using WebApi which is built with the OpenAccess API "wizard" in a Kendo Grid built with ASP Helpers. I am 99.9% sure that the request header is asking for XML not JSON. I know with jQuery I can request it to be in "json" format, and if I bring data in through a model I can use a json serializer. But I am wanting to make an Web API call from a "razor, asp" built kendo control.
A visual will help:
​ @(Html.Kendo() Grid<CompanyAddress>()
.Name("grid1")
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(5)
.Read(read => read
.Type(HttpVerbs.Get)
.Url(String.Format("/api/CompanyAddresses/GetByCompanyId/{0}", 1))))
.Pageable()
.Sortable())

I can do it all day long if I pass a model from code behind like:
​ @(Html.Kendo()
.Grid(Model)
.Name("grid")
.Columns(columns =>
{
columns.Bound(c => c.CompanyId).Width(140);
columns.Bound(c => c.DateEntered).Width(190);
columns.Bound(c => c.CompanyName);
columns.Bound(c => c.Website).Width(110);
})
.Sortable()
.Pageable()
.Scrollable()
.ClientDetailTemplateId("template")
.HtmlAttributes(new { style = "height:430px;" })
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(20)
.ServerOperation(false))
))


And I know I can do this:
<script>
$(document).ready(function() {
$("#grid").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
},
schema: {
model: {
fields: {
OrderID: { type: "number" },
Freight: { type: "number" },
ShipName: { type: "string" },
OrderDate: { type: "date" },
ShipCity: { type: "string" }
}
}
},
pageSize: 20,
serverPaging: true,
serverFiltering: true,
serverSorting: true
},
height: 430,
filterable: true,
sortable: true,
pageable: true,
columns: [{
field:"OrderID",
filterable: false
},
"Freight",
{
field: "OrderDate",
title: "Order Date",
width: 120,
format: "{0:MM/dd/yyyy}"
}, {
field: "ShipName",
title: "Ship Name",
width: 260
}, {
field: "ShipCity",
title: "Ship City",
width: 150
}
]
});
});
</script>

I feel as though there should be a line of code that allows me to do something like this:
.Read(read=>read.Accept("json").Type(HttpVerbs.Get).Url("/api/controller/").

Am I missing something?

I have a menu bar with an option that I want to open in a window. The contents of the window is dynamic and needs to be refreshed each time I open the window.

The first time I click on the option the window opens correctly, and when I click on the "close" icon, the window closes as expected.

The second time I click on the option, the window does not open. I suspect it has something to do with the state of the window.

Listed below is my code that I use to open the window:

    <script type="text/javascript">
        $(document).ready(function () {
            $(".menu-dialog").click(function () {
                var href = $(this).attr("href");
                var title = $(this).attr("title");
                var myWin = $("#anchor").kendoWindow({
                    width: "auto",
                    height: "auto",
                    modal: false,
                    resizable: true,
                    title: title,
                    content: href
                });
                return false;
            });
        });
    </script>

    <body>
        <div class="main">
            <div id="anchor"></div>
            <asp:ContentPlaceHolder ID="MainContent" runat="server"/>
        </div>
        <div class="clear" />
<div class="footer" />

DevExpress PhoneJS supports partial views that allow you to share and reuse similar HTML markup among multiple views.

I need this feature right now in Kendo UI Mobile...  I'm thinking about doing some kind of work around possibly with Templates or a jQuery Clone method call but it's going to be pretty hacky...  Does Kendo UI Mobile have something similar to this already:

DevExpress's PhoneJS Partial Views are described here under Flexible View Rendering Engine:
http://phonejs.devexpress.com/

Thank,
Nathan