Questions on Kendo UI for jQuery Forum

2 answers

145 views

Recurrences visual representation in Scheduler

While working with the Kendo Scheduler i noticed a bug with the visual representation of the recurrences in the scheduler.

Let's say i want my recurrence to happen on the last friday of every month. What happens with kendo is that it sometimes puts the occurence in the next month.
This isn't how Outlook handles this type of recurrency.

Is there a way to change this behaviour?

Scheduler

answered on 03 Mar 2014

5 answers

158 views

notes overlapping

Hi when I have many notes / long notes they are overlapping so the user cant actually read them.
Hoe can I handle this ?
thx
Sagi

Charts

answered on 03 Mar 2014

2 answers

158 views

[Solved] Date filter is not working while recreating grid

Hi,

In my current SPA, I've various scenario where I recreate grid to bind data depending on selected option.

But while recreating grid my date filter goes read only.

This can be reproduced in demo I found in http://www.telerik.com/forums/destroying-grid-does-not-completely-destroy-it-apparently#IoH83YEu30mZgOAbBiH4oA

http://jsfiddle.net/dimodi/Fx5kU/

Steps to Reproduce,
1. Filter Order date -select any date from calender
2. Click Recreate button
3. Again try to apply filter on order date, calender goes readonly and not allowed to select date.

I'm using,
Kendo UI Complete v2013.2.716
Chrome Version 33.0.1750.117
Win7

Please advice me to fix this issue.

Thanks,
Amol Wable

Grid

answered on 03 Mar 2014

8 answers

748 views

Binding to nested array values in TreeView

We are evaluating KendoUI web for use in all of our projects and I am running into an issue (or lack of understanding) with the TreeView Widget.

I am trying to use a MVVM TreeView and I am having issues when binding to nested array values from my template. I created a JSFiddle example for our use in this discussion: http://jsfiddle.net/jsonsee/M8peq/3/

I am dynamically building the tree view, by adding a node and its children with a button click. I want to bind each leaf(child) node to a text value on that node in the MVVM. This seems to work great on the initial load of the tree, but after adding more nodes to the viewModel, the bindings seem to quit working.

This seems to be a lot harder than I feel it should, which makes me think I am missing something.

Can anyone shed some light on this?

Thanks,

Jason

TreeView

answered on 03 Mar 2014

1 answer

364 views

Scheduler not populating with data

I am trying to populate Kendo scheduler using WCF web services. My service is working fine as i checked with "fiddler".
But scheduler is not displaying any data.
My code for scheduler implementation is as follows:
<body>

        <div id="scheduler"></div>

    <script src="js/jquery.min.js"></script>
    <script src="js/kendo.all.min.js"></script>
    <script src="Scripts/jquery-2.1.0.min.js"></script>

    <script src="js/kendo.web.min.js"></script>
    <link href="styles/kendo.common.min.css" rel="stylesheet" />

    <link href="styles/kendo.default.min.css" rel="stylesheet" />
    <script>
        $(function () {

            $("#scheduler").kendoScheduler({
               date: new Date("2014/2/20"),
               startTime: new Date("2014/2/20 07:00 AM"),
                timezone: "Etc/UTC",
                height: 600,
                views: [
                    "day",
                    { type: "week", selected: true },
                   "month",
                    "agenda"
                ],

                dataSource: {
                    batch: true,
                    transport: {
                        read: {
                            url: "http://localhost/WcfServiceSaturday/ServiceSaturday.svc/getapp",
                            dataType: "json",
                            contentType: "application/json; charset=utf-8"
                        },

                        create: {
                            url: "http://localhost/WcfServiceSaturday/ServiceSaturday.svc/insertapp",
                            dataType: "json"
                        },

                        parameterMap: function (options, operation) {
                            if (operation !== "read" && options.models) {
                                return { models: kendo.stringify(options.models) };
                            }
                        }
                    },
                    schema: {
                        model: {
                            id: "taskId",
                            fields: {
                                taskId: { from: "TaskId", type: "number" },
                                title: { from: "Title", type: "string" },
                                start: { type: "date", from: "Start" },
                                end: { type: "date", from: "Ends" },
                                startTimezone: { type: "string", from: "StartTimezone" },
                                endTimezone: { type: "string", from: "EndTimezone" },
                                description: { type: "string", from: "Description" },
                                recurrenceId: { type: "string", from: "RecurranceId" },
                                  recurrenceRule: { type: "string", from: "RecurranceRule" },
                                 recurrenceException: { type: "string", from: "RecurranceException" },
                                ownerId: { from: "OwnerId", type: "number" },
                                isAllDay: { type: "boolean", from: "IsAllDay" }
                            }
                        }
                    },

                },

            });

        });
    </script>

</body>

I am attaching my WCF service file as attachment.

Scheduler

answered on 03 Mar 2014

3 answers

115 views

Kendo UI Grid Server Detail Template Demo Problem

Hi,
When I run the Kendo UI grid server detail template demo downloaded with my trial edition I've noticed a problem. If you open up the detail template for the second customer (Andrew Fuller) then select the 'Go to next page' button on the orders grid that template is closed and the template for the first customer (Nancy Davolio) is opened instead. This doesn't happen for the client detail template demo but I want to use my grid as per the server detail template demo. Is there a work around for this problem?
Regards,
Mark

Grid

answered on 03 Mar 2014

1 answer

150 views

Calculated Column not displaying

Hi,

Can anyone help me with this issue. Thanks (in advance).

The textbox "txtSiteNameList" shows up fine. The "txtSiteNameList" displays nothing.
This is a KendoMobileUI App


<div data-role="view" id="siteListView" data-layout="default" data-title="Sites" data-model="app.sbviewModel">
    <h1>Site List View</h1>
    <ul id="siteList"
        data-bind="source: data"
        data-endlessscroll="true"
        data-template="sitesTemplate"
        data-role="listview"
        data-style="inset"></ul>
</div>


<script id="sitesTemplate" type="text/x-kendo-template">
    <input type="text" id="Status" data-bind="value: IsOpen" />
    <input type="text" id="txtSiteNameList" data-bind="value: SiteName" />
</script>

/*DATA SOURCE*/
var app = app || {};

app.sbdataSource = new kendo.data.DataSource({
     transport: {
         read: {
             dataType: "json",
             url: "http://localhost/SbApp/SbService.svc/GetListSites",
             data: {
                 Accept: "application/json"
             },
             autoSync: true,
             schema: {
                 model: app.sbModel
             }
         }
     },
});

/*VIEW MODEL*/
app.sbviewModel = kendo.observable({
    data: app.sbdataSource,
});

/*MODEL*/
app.sbModel = kendo.data.Model.define({
    id: "SiteID",
    fields: {
        SiteID: { type: "string" },
        SiteName: { type: "string" },
        SiteSymbol: { type: "string" },
        StreetNumber: { type: "string" },
        Street: { type: "string" },
        City: { type: "string" },
        Notes: { type: "string" },
        Status: { type: "string" },
        Latitude: { type: "string" },
        Longitude: { type: "string" }
    },
    IsOpen: function () {
        return "My Return Value";
    }
});

Data Source

answered on 03 Mar 2014

2 answers

141 views

How to pass validation info to row detail template?

I have grid validations that I catch/build in the Error event ... how can I pass my validation from the Error event to a detail row? I expand the detail row automatically when an error occurs.

Grid

answered on 03 Mar 2014

10 answers

821 views

how to re build a ScrollView with new data?

Hello,

I'm fairly new to Kendo ( still testing it for my mobile app ) and i'm trying to display your list of friends (pulled from FB) in a scroll view with their names and pictures. It can go up to 1K + Friends and when switching from a profile to another, the list of friends has to be re populated. I can't have it work, and I'm a bit worried about performances when listing 1000+ friends on the page.

So Basically, I have a ScrollView that I'm trying to rebuild (or at least remove the old data and add new data) when a user get back to the previous page and come back again to this page. It's like a profile page. When you go there for user id = 1 you have some information and a scrollview with his friend's name and pictures, and when I go to another user (id = 2) then I want to change every information on the page, including the information bound in the scrollview.

From what I understand, one can only change the pictures of the scroll view by initiating the view. It doesn't seem to work when data-show is triggered and I have a feeling that we should re-initiate the page completely... Am I right ? Doing the scroll view methods such as SELECTOR.data("kendoMobileScrollView").setDataSource(friendsToInvite) or scrollview.refresh() doesn't seem to work.
Am I doint something wrong or should I re initialize the view everytime a user go back and forth on the different user profiles ? How can I do this ?

here is my HTML:

<div data-role="view" data-layout="overview-layout" data-show="initEvent" id="event">

<div data-role="content" class="content">

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

<div>

<div id="friendsToInvite"></div>

</div>

<script id="friendsToInvite-template" type="text/x-kendo-template">

<p>#= name #</p>

<div style=

"width: auto; height: 180px; background: url('https://graph.facebook.com/#= fbid #/picture?type=large')  no-repeat center;"

></div>

<p><button>Invite</button><button>Dont show me again</button></p>

</script>

and My JS:

var y = 3;

function initEvent( e )

{

//Get the "Key" of the event, which is linked to the id somehow

var key = e.view.params.key;

//Retrieve the event info from the cache with the key !

var event = Event.retrieveFromKey( key );

// Append the template of the event upon the event info

var template = Handlebars.compile( $( '#eventTemplate' ).html() );

$( '#eventContent' ).prepend( template( event ) );

//The next ones are about getting your friend list for this specific event based on the algo

// Generate an empty kendo Scroll View

var friendsToInvite = new kendo.data.DataSource({

data: []

});

$( "#friendsToInvite" ).kendoMobileScrollView(

{

dataSource: friendsToInvite,

template: $( "#friendsToInvite-template" ).html(),

contentHeight: 300,

enablePager: false

});

$.when( Event.getFriendsList( event.id ) ).done( function( friendsList )

{

if ( friendsList.length > 0 )

{

for ( var i = 0; i < y; i++ )

{

friendsToInvite.add( { name: friendsList[i]["name"], fbid: friendsList[i]["fbid"] } );

};

$( "#friendsToInvite" ).data("kendoMobileScrollView").setDataSource(friendsToInvite);

// y++;

// console.log(y);

// if (y > 5) {

// console.log("refresh");

// console.log ( scrollview );

// $( "#friendsToInvite" ).data("kendoMobileScrollView").setDataSource(friendsToInvite);

// scrollview.refresh();

// $( "#friendsToInvite" ).empty();

// };

// console.log(friendsToInvite);

// $( "#friendsToInvite" ).kendoMobileScrollView(

// {

// dataSource: friendsToInvite,

// template: $( "#friendsToInvite-template" ).html(),

// contentHeight: 300,

// enablePager: false

// });

}

else

{

console.log("Got to be creative on this one ...")

}

});

}

All that is commented is something I've tried. whithout success.Also, you'll notive that I've filled the scroll view twice: once for the "initialization" with empty data and another one with the data I want to use. The fact that the when() method delay the construction of the scroll view makes it bug. I don't know why.

ScrollView (Mobile)

answered on 03 Mar 2014

5 answers

2.5K+ views

How to use dataSource.schema/kendoGrid.columns properties with complex JSON responses ?

Hello, Kendo-Team.
I have a question about complex JSON responses: Say, I get a response like this and want to use this data for creating a Grid:

01.{

02. "items" : [

03. ....

04. ....

05. ....

06. {

07. "fileName": "Pragmatic Bookshelf - CoffeeScript.Jul.2011.ENG.pdf",

08. "folderPath": "I:\\eBooks",

09. "absolutePath": "I:\\eBooks\\Pragmatic Bookshelf - CoffeeScript.Jul.2011.ENG.pdf",

10. "size": {

11. "bytes": 3573254,

12. "MBytes": 3.41

13. },

14. "mtime": {

15. "UTC": "\/Date(1315848420988)\/",

16. "shortDate": "12.09.2011"

17. }

18. },

19. ....

20. ....

21. ....

22. ],

23. "totalItems": 540

24.}

so how should I use <code>dataSource.schema</code> and/or <code>kendoGrid.columns</code> properties to get size.bytes and/or mtime.UTC ? How to correctly parse this type of DATETIME info via JS ? Templates ?

I only know, I should use <code>dataSource.schems.items</code> to point out the Array with objects (in my case it's "items")

01.dataSource({

02. transport: {

03. ....

04. },

05. schema : {

06. data: "items",

07. total : function(data) {

08. // if pagination is enabled - it won't work

09. // without declaring this function

10. return data.totalItems;

11. }

12. }