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

Hi ,

I have to dynamically create a Tabstrips . Suppose there are  Buttons(like 'profile" ,"Home", "ContactUS ","Services") .  Also I  have created partial view for this(profilePartialview , HomePartialview ,ContactusPartialView ,ServicePartialview) . Now when i click on "profile" than "profilePartialview" should be  rendered as tabStrips and Similary others. 

Please assist me how can i  achieve this.


Thanks,
Pawan

Hello
Currently there are 3 editable options incell,inline, and popup. However I would like to ask if there is possible to simply create totaly custome editor which will behave e.g like popup, with internal template but visulay it will be sepearte view. Not window over grid but view that e.g. will hide grid.

Regards
Marcin