Questions on Kendo UI for jQuery Forum

1 answer

178 views

Source and Template Binding Doesn't Render

I am new to Kendo, so it is most likely an error on my part but I cannot seem to get source and template binding to work.

The following is my view. I have a drop down list which should update a ul of links but even though my binding is working (the select element is just for testing) I cant seem to get the ul to render using the template. I get no errors of any kind it just doesnt render.

<div class="global-nav-header border-bottom">
    <h2 data-bind="text: headerText"></h2>
    <select data-text-field="name" data-value-field="handle" data-bind="source: reportsTypes, value: selectedReportsType"></select>
</div>
<div class="global-nav-body">
    <select data-text-field="name" data-value-field="handle" data-bind="source: reports"></select>
    <ul class="reports-list" data-template="reports-ul-template" data-bind="source: reports">
    </ul>
    <script id="reports-ul-template" type="text/x-kendo-template">
        <li>
            <a href="#" class="instance-link" data-bind="text: name, style: { backgroundImage: icon }, attr: { data-id: id }"></a>
        </li>
    </script>
</div>

The view model is as follows so the selected reports type changs and the calculated field gets called but still no li's are rendered in my ul.

var viewModel = kendo.observable({
    headerText: "Reports",
    reportsTypes: getReportsTypes(),
    selectedReportsType: 0,
    reports: function () {
        var reportsTypeHandle = this.get("selectedReportsType");
        var reports;
        switch (reportsTypeHandle) {
            case 1:
                reports = [
                    new report("Foundations", 1, "~/Content/images/icocyg_reports_small.png"),
                    new report("All", 2, "~/Content/images/icocyg_reports_small.png"),
                    new report("Large Tower", 3, "~/Content/images/icocyg_reports_small.png")];
                    break;
            case 2:
                reports = [
                    new report("Plant Overview", 5, "~/Content/images/icocyg_reports_small.png"),
                    new report("Area 15 Subsystem", 6, "~/Content/images/icocyg_reports_small.png"),
                    new report("Generator Layout", 7, "~/Content/images/icocyg_reports_small.png"),
                    new report("High Power Cables", 8, "~/Content/images/icocyg_reports_small.png")];
                break;
            case 3:
                reports = [
                    new report("Plant Status", 9, "~/Content/images/icocyg_reports_small.png"),
                    new report("Electrical Status", 10, "~/Content/images/icocyg_reports_small.png"),
                    new report("Structural Status", 11, "~/Content/images/icocyg_reports_small.png"),
                    new report("Production Report", 12, "~/Content/images/icocyg_reports_small.png"),
                    new report("Production Report All", 13, "~/Content/images/icocyg_reports_small.png")];
                break;
        }
        return reports;
    }
});

The result I get is attached.

Thanks in advance.

General Discussions

answered on 27 Feb 2013

3 answers

465 views

[Solved] Data attributes for creating kendo window

Hi,
After reading the documentation on data attribute initialization, I tried to create a template for creating kendo window but none of the attributes are working. What's the proper way to initialize kendo window using data attributes?

Here is the template:

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

<div id="#= Id#" data-width="400px" data-height="400px" data-modal="true" data-role="window" data-title="Title">

Content

</div>

</script>

Thanks

Window

answered on 27 Feb 2013

3 answers

194 views

Kenod Window not vertically centered issue

HI,

I recently upgraded the kendo UI web library to Kendo UI Web v2012.3.1315 from Kendo UI Web v2012.2.913. Now all my dynamic model popups appears bottom of the page after all content. Windows are horizontally centered and issue is with the vertical centering.
I’m using jquery 1.8.3 with kendo. I would appreciate if you all could give feedback soon as this is an urgent issue.

Regards

Shivanka

Window

answered on 27 Feb 2013

2 answers

129 views

Grid + CheckBox Globalization Issue

Hi

I have a grid dinamically builded and I don't use template, my column with checkbox are like this example http://demos.kendoui.com/web/grid/editing.html, where appears true/false

Even updating .Net Language Pack keeps true/false

1 => I need change this true/false for yes/no, any idea?

$("#grid tbody tr").each(function ()
{
var row = $(this);
row.contents().each(function ()
{
var cell = $(this);
if (cell.html() == 'true')
cell.html('yes')
else if (cell.html() == 'false')
cell.html('no')
});
}

The code above works well until click the cell and true/false appears again

2 => At each cell on grid there are role="gridcell". Can I change the behavior of this role? Maybe to don't put true/false

Thank you very much

Grid

answered on 27 Feb 2013

1 answer

159 views

Is DataViz incompatible with Web libraries?

I created a project using ListView just fine.

Then I created a DataViz project separately.

Each work fine in separate HTML pages, but when I combined them I get this error in Chrome:
Uncaught TypeError: Cannot call method 'toLowerCase' of undefined
kendo.web.min.js:12
I can get the error to stop by either removing the line where my listView is initialized with a datasource and template, or by commenting out the DataViz library.

It seems really strange that these two libraries would be incompatible but that seems to be the case. Has anyone had any luck using a ListView and Chart together in one place?

General Discussions

answered on 27 Feb 2013

4 answers

160 views

Calendar control doesn't show

top attribute of the .k-animation-container is -10000 px (or thereabouts). I've had to do this for a quick fix in the editor template:

<style scoped>
    .k-animation-container {
        top: 200px !important;
    }
</style>

Any idea what the problem is?

DatePicker

answered on 27 Feb 2013

7 answers

676 views

[Solved] How to clean up dropdownlist lists

Hi,

I am loading content to my page with ajax calls. This content contains dropdownlists. They create a list DIV in the BODY tag. When the content is updated with a new ajax call, these DIV tags remain in the BODY tag, so they are accumulating there.
How to clean this up? This is especially a problem when you have a one page setup of your application. It is a kind of a 'memory leak' all these DIV tags which will not be used anymore.
Ideally they should not be in the BODY tag, but near the location in the DOM where they are used. But I can imagine that will give trouble with display the list on top of other content.

Ofcourse this applies also for other widgets which have such popups, like e.g. combobox and grid (filter dialogs).

Any thoughts on this housekeeping issue appreciated.

Regards, Jaap

DropDownList

answered on 27 Feb 2013

1 answer

87 views

Cant get baseUnit: "month" to work, object error

Hi there, I got a kendo chart category axis described like this :

categoryAxis: {
majorGridLines: "none",
type: "date",
field: "Day",
baseUnit: "month",
labels: {
font: "6.25pt Verdana",
rotation: -45,
template: " #= new Date(parseInt(value.substr(6))).getDate() #" + "/" + "#= month[new Date(parseInt(value.substr(6))).getMonth()] #"
},
title: {
}
}

I also got another Kendo chart with category axis liek this :

categoryAxis: {
majorGridLines: "none",
field: "Day",
labels: {
font: "6.25pt Verdana",
rotation: -45,
template: " #= new Date(parseInt(value.substr(6))).getDate() #" + "/" + "#= month[new Date(parseInt(value.substr(6))).getMonth()] #"
},
title: {
}
}

So in the second example everything works fine except I get a date for each point in the chart, so I wanted to make it show only every 1st of the month ( there are 6 months in total). So the first code snippet should do that but i get an error: "Uncaught TypeError: Object [object Date] has no method 'substr' ". I assume I should use some sort of ekndo.dateparse, but im not sure of the syntax of it. Could someone pelase help.
Note that the tooltip shows the date just fine.

Please find a screenshot attached,

Regards,
Neil

Charts

answered on 27 Feb 2013

1 answer

138 views

Disable Sammy Route when open Kendo UI Windows

I have an app using Kendo and Sammy. The app is a SPA app with multiple views and each page has a Sammy route associated with it. On the second page, I need to open a kendo window. When I do so, the Sammy router gets invoked which is something I do not want. The new window has no path associated with it, so it matches the default route which causes the app to change its page back to the home page. Can anyone tell me either how to prevent the default route from running when I open the kendo window? I guess another interesting but optional fix would be to associate a sammy route with the kendo Window.

Window

answered on 27 Feb 2013

1 answer

138 views

PopOver & hierarchy of items.

Hi

Is it possible to implement a popover that explores a hierarchy? The HierarchicalDataSource docs suggest that it's only the TreeView that can handle this, which I'm assuming means that it's not possible to make the popover do this - but I've not tried it out yet.

If there's any examples of how this might be done, links would be hugely appreciated.

I'm trying to implement a popover that allows the user to browse a hierarchy, sample screenshot attached.

Thanks,

--
John Clayton

PopOver (Mobile)

answered on 27 Feb 2013