Questions on Kendo UI for jQuery Forum

2 answers

712 views

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

746 views

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

205 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

141 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

140 views

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

172 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

680 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

answered on 14 Mar 2014

1 answer

302 views

DateTimePicker time range

We would like to set a time range in a DateTimpePicker, what's the config setting for this?

Thanks.

General Discussions

answered on 14 Mar 2014

16 answers

305 views

Capturing State of CheckBox in Custom Edit

I need to capture the state of the checkboxs in the Tree View within a Custom Editor.
In my case I haven't been able to use the examples provided in the demos.
They refer to Model. In my case the model refers to a deferent model then the once used for the tree.
For reference I will use parentModel and childModel
At the top of the cshtml I have @model parentModel

Within the editor I have defined a TreeView with a different data source this would be childModel.

The sample code is as follows.
    @if (Model.Length > 0)
{
      <text>Checked nodes: @(String.Join(", ",Model)) </text>
}
else
{
     <text>No nodes checked. </text>
}
Real simple huh?
Well Model is always 1 because one record is sent to the Editor.
Inspection indicates that Model is defined as parentModel.
How do I check for the childModel instead?

TreeView

answered on 14 Mar 2014

1 answer

107 views

Grid with cascading dropDownList editors

Hi,

I have configured cascading dropdown editors in Kendo Grid (inline editing) following this example http://www.telerik.com/support/code-library/cascading-dropdownlist-editors#boGvza6aG2OF1P8AAFTdxQ .

The changes I made are to use kendo v2013.3.1119, jquery v2.0.3 and to define option labels for both dropdown editors (see attached example).
The issue I'm facing is the following:
The user selected the option label in the first dropdown (Brand) and the second cascaded dropdown (Model) is correctly populated with its option label. When the user clicks on the button "Update", then it seems that the value of the cascaded dropdown is not saved in the grid's model and the grid displays the previous value.

Is there a way to resolve this issue?

Regards,
Dimitris

Grid

answered on 14 Mar 2014