Questions on Kendo UI for jQuery Forum

26 answers

1.4K+ views

Hello!

I'm working on a single-screen application using Kendo for the UI. I just built in a datepicker on one of the screens, and it presented me with quite a strange behaviour.
Some background information: the application is single-screen, so I never navigate to different URLs, rather the content is changed by modifying the DOM with javascript. So I build up screens from scratch by creating the elements, and replacing $(body).html(), or any other parent I need to update if its a smaller change.
One of these screens has a DatePicker, created like this:

$("#captureDate").kendoDatePicker();

For the first time this screen loads, the DatePicker works fine. But if I navigate to another screen, and come back later, the DatePicker is loaded, but it's "frozen", meaning I can open it, it shows the right date, but none of the controls work inside the widget (changing the date/month/year etc.).
The #captureDate element is part of a kendo template rendered into the DOM every time this screen loads up (the element itself is an input with a date as the value, formatted with kendo.toString(), with culture set [to hu-HU]). The screens are "destroyed" on navigation by replacing the .html() of the changing element (usually the whole body) with the new screen's content.

What could be the cause of the problem? Thank you in advance for your help!

DatePicker

answered on 15 Mar 2014

0 answers

172 views

Dependent Observable Performance

I'm creating this thread as a way of soliciting ideas for getting the best performance I can out of the kendo MVVM framework (speed is King!).

One of the major problems I've encountered with this and other MVVM frameworks is that using dependent /calculated observable objects and functions can really slow down the client GUI. This is in part because of some rather verbose permissions and model states that are generally required in an "enterprise" HTML5/JavaScript. application. If a particular function on the observable references multiple values on the view model (using get), this can cause useless and extraneous executions of that function caused by other processes updating and changing the values on the model. The two best examples of this are loading the model with AJAX, and clearing the model; these two operations cause every single model value to change, which causes a lot of useless multiple executions and updates of calculated fields.

What suggestions might everyone have for increasing the performance of kendo MVVM?

MVVM

asked on 14 Mar 2014

2 answers

745 views

Kendo blocked Signature Pad

We really need some kind of signature plugin integrated with our product. And found Signature Pad http://thomasjbradley.ca/lab/signature-pad/ works well on desktop and iPhone, Android.

Once we deploy this plugin in Kendo, no longer working.

Please give some help with it.

General Discussions

answered on 14 Mar 2014

9 answers

782 views

[Solved] Declarative creation of Grid with data attribues (footerTemplate)

I have a Grid which works fine until I try to add an aggregate value and create a footer.

<div id="layerTable"

class="Part"

data-role="grid"

data-column-menu="true"

data-filterable="true"

data-sortable="true"

data-scrollable="false"

data-resizable="true"

data-reorderable="true"

data-groupable="true"

data-bind="source: LayerTable"

data-columns='[

"Class",

"Type",

"FileCount",

{field: "Size",

format: "{0:n3} MB"

},

{field: "Date",

format: "{0:F}" },

"Path"]'>

</div>

I have tried adding in the aggregate both in the dataSource (which is a JSON array:

manifest.Layers.aggregate =

[

{field: "Size", aggregate: "sum"},

{field: "FileCount", aggregate: "count"}

];

As well as in the HTML:

<div id="layerTable"

class="Part"

data-role="grid"

data-column-menu="true"

data-filterable="true"

data-sortable="true"

data-scrollable="false"

data-resizable="true"

data-reorderable="true"

data-groupable="true"

data-bind="source: LayerTable"

data-columns='[

"Class",

"Type",

"FileCount",

{field: "Size",

format: "{0:n3} MB",

aggregates: ["sum"],

footerTemplate: "Total: #: sum# "

},

{field: "Date",

format: "{0:F}" },

"Path"]'>

</div>

However, any combination I have tried (only footer, only HTML column aggregates, or only data-source aggregates is not working.

What happens? All the declared Kendo objects later on in the page (sliders, combo-boxes, etc.) all do not load at page reload time.

I am guessing that I am trying do something that is not supported. Right?

Grid

answered on 14 Mar 2014

2 answers

223 views

Scheduler style not applied properly

Hi,

I am using a scheduler in htm file in asp .net (non MVC) application. When I run the file in any browser the styles are not applied properly. Below I have provided the entire code. Please take a look what is wrong in the code.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link href="Styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
    <link href="Styles/kendo.default.min.css" rel="stylesheet" type="text/css" />
    <link href="Styles/kendo.rtl.min.css" rel="stylesheet" type="text/css" />
    <script src="Scripts/jquery.min.js" type="text/javascript"></script>
    <script src="Scripts/kendo.web.min.js" type="text/javascript"></script>
</head>
<body>
    <div id="example" class="k-content">
        <div id="people">
            <input checked type="checkbox" id="alex" value="1">
            <input checked type="checkbox" id="bob" value="2">
            <input type="checkbox" id="charlie" value="3">
        </div>
        <div id="scheduler">
        </div>
    </div>
    <script type="text/javascript">
        $(function () {
            $("#scheduler").kendoScheduler({
                date: new Date("2013/6/13"),
                startTime: new Date("2013/6/13 07:00 AM"),
                height: 600,
                views: [
            "day",
            { type: "month", selected: true }
        ],
                timezone: "Etc/UTC",
                dataSource: {
                    batch: true,
                    transport: {
                        read: {
                            url: "http://demos.telerik.com/kendo-ui/service/tasks",
                            dataType: "jsonp"
                        },
                        update: {
                            url: "http://demos.telerik.com/kendo-ui/service/tasks/update",
                            dataType: "jsonp"
                        },
                        create: {
                            url: "http://demos.telerik.com/kendo-ui/service/tasks/create",
                            dataType: "jsonp"
                        },
                        destroy: {
                            url: "http://demos.telerik.com/kendo-ui/service/tasks/destroy",
                            dataType: "jsonp"
                        },
                        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", defaultValue: "No title", validation: { required: true} },
                                start: { type: "date", from: "Start" },
                                end: { type: "date", from: "End" },
                                startTimezone: { from: "StartTimezone" },
                                endTimezone: { from: "EndTimezone" },
                                description: { from: "Description" },
                                recurrenceId: { from: "RecurrenceID" },
                                recurrenceRule: { from: "RecurrenceRule" },
                                recurrenceException: { from: "RecurrenceException" },
                                ownerId: { from: "OwnerID", defaultValue: 1 },
                                isAllDay: { type: "boolean", from: "IsAllDay" }
                            }
                        }
                    },
                    filter: {
                        logic: "or",
                        filters: [
                    { field: "ownerId", operator: "eq", value: 1 },
                    { field: "ownerId", operator: "eq", value: 2 }
                ]
                    }
                },
                resources: [
            {
                field: "ownerId",
                title: "Owner",
                dataSource: [
                    { text: "Alex", value: 1, color: "#f8a398" },
                    { text: "Bob", value: 2, color: "#51a0ed" },
                    { text: "Charlie", value: 3, color: "#56ca85" }
                ]
            }
        ]
            });

            $("#people :checkbox").change(function (e) {
                var checked = $.map($("#people :checked"), function (checkbox) {
                    return parseInt($(checkbox).val());
                });

                var scheduler = $("#scheduler").data("kendoScheduler");

                scheduler.dataSource.filter({
                    operator: function (task) {
                        return $.inArray(task.ownerId, checked) >= 0;
                    }
                });
            });
        });
    </script>
    <style scoped>
        .k-nav-current > .k-link span + span
        {
            max-width: 200px;
            display: inline-block;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            vertical-align: top;
        }

        #people
        {
            height: 115px;
            position: relative;
        }
        #alex
        {
            position: absolute;
            left: 404px;
            top: 81px;
        }
        #bob
        {
            position: absolute;
            left: 519px;
            top: 81px;
        }
        #charlie
        {
            position: absolute;
            left: 634px;
            top: 81px;
        }
    </style>
</body>
</html>

Scheduler

answered on 14 Mar 2014

1 answer

167 views

Resize Window from itself.

Kendo windows is opened as an Iframe and window URL is on different domain.
Is it possible for the window to resize from itself?

Window

answered on 14 Mar 2014

2 answers

157 views

[Solved] ButtonGroup CSS stretched.

Currently working on building a mobile app using Kendo Mobile and I am seeing an issue when loading a listview for the first time with a buttongroup at the top of the page. The buttongroup gets stretched out into the listview. If I navigate back to the page a second time the css of the buttongroup is fine. Has anyone seen this issue before? I can post code samples if need be. Thanks.

ButtonGroup

answered on 14 Mar 2014

4 answers

192 views

Change URL without routing

I have a need to change the URL without routing/changing the existing view.

Here is the use case:
User navigates to mysite.com/app#/items/add to add a new item. User then hits save. I would like for the page to stay on that view in case the user wishes to make more edits but I want the URL and history to change to mysite.com/app#/items/<new-id>.

Right now when it changes the hash fragment, it swaps the view with the same view and there is a "add" in the history, neither of which is desirable.

Is there any way to achieve my goal?

Thanks in advance for any help you may give me.

SPA

answered on 14 Mar 2014

1 answer

728 views

Sorting a grid column when using a template for cell data

I have a kendo grid with filterable set to true. I have a column that use a template to combine multiple data values and display them as one in the cell. On example of this is.

{
title:"Customer Name",
template:"#:customer.firstName# #:customer.lastName#",
width:105
}

However, this column looses it's ability to be filterable. another example is where i'm use a template where the data for the cell template is three booleans, if they are true it displays the text, if not it displays nothing.

Any help with this would be greatly appreciated!

-Brandon

Grid