Questions on Kendo UI for jQuery Forum

1 answer

92 views

How Add Kendo UI Controls to VS2012

hello to all

i would like to ask on how to add controls from kendo UI to VS2012.. i downloaded the trail version of kendo..i would like to test it on my MVC web apps can anybody help me about this or step by step on it..

thanks

General Discussions

answered on 06 Mar 2014

3 answers

130 views

Problem with updating recurranceexception.

Hello,

When updating an item in a series, the scheduler first calls Create, with the new item, then Update to add the recurrenceexception. In my case, I have some servervalidation to check if recurrences are overlapping, and that check fails since the old post hasn't been updated.

Is there any way to control this order? Is it stupid to do it in the source?

Regards,
Pär Sandgren

Scheduler

answered on 06 Mar 2014

3 answers

253 views

ListView caption is grey for data-style=inset and data-type=group

Hello,

We have a mobile app that uses a list view with data-style is inset and data-type is group. The app is also used with IE on Windows as well. Right now the KendoUI version is 2013 Q3.

When we use the list view in IE 11, the background color for each group caption is grey. A sample html is below and the image is attached:

<!DOCTYPE html>
<html>
<head>
    <title>Basic usage</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" >
    <script src="../../../js/jquery.min.js"></script>
    <script src="../../../js/kendo.mobile.min.js"></script>
    <script src="../../content/shared/js/console.js"></script>
    <link href="../../../styles/kendo.mobile.all.min.css" rel="stylesheet" />
    <style>
        [href*=index], #back-button
        {
            visibility: hidden;
        }
    </style>
</head>
<body>
    <div data-role="view" data-title="Destinations" id="listview-home">
    <ul data-role="listview" data-style="inset" data-type="group" style="background-color: #8e8;" >
        <li>Africa
            <ul>
                <li data-icon="toprated"><a>Nairobi</a></li>
            </ul>
        </li>
        <li>
            America
            <ul>
                <li data-icon="globe"><a>Bostonaa</a></li>
                <li data-icon="globe"><a>Ottawa</a></li>
                <li data-icon="toprated"><a>San Francisco</a></li>
            </ul>
        </li>
        <li>
            Asia
            <ul>
                <li data-icon="globe"><a>Bombay</a></li>
            </ul>
        </li>
        <li>
            Australia
            <ul>
                <li data-icon="globe"><a>Melbourne</a></li>
                <li data-icon="toprated"><a>Sydney</a></li>
            </ul>
        </li>
        <li>
            Europe
            <ul>
                <li data-icon="globe"><a>Cannes</a></li>
                <li data-icon="globe"><a>Liverpool</a></li>
                <li data-icon="toprated"><a>London</a></li>
            </ul>
        </li>
    </ul>
</div><style></style>
    <script>
        window.kendoMobileApplication = new kendo.mobile.Application(document.body);
    </script>
</body>
</html>

As you see the background color for captions for "Africa", "America", "Asia" are grey and I tried change the style but am unable to set so far.

Is there any way to change this?

Thanks!

ListView (Mobile)

answered on 06 Mar 2014

1 answer

121 views

Selecting the Object on Mvvm

Here's my problem...

The dropdown list is build on the serverside, then just created with a data-role on the client.

The idea in the UI is the user can pick something from the dropdown, it's ID is saved to "schedule.id"...and on another screen the "Text" value should appear as "schedule.locationname".

So if the dropdown value is set to schedule.id, how does\can the text value get updated as well?

DropDownList

answered on 06 Mar 2014

5 answers

442 views

[Solved] Want to run javascript function on click of a link in a drawer

I am running drawer as the example on

http://demos.telerik.com/kendo-ui/mobile/drawer/index.html

So in my div with data-role="drawer", I have a <li> per list item I want to navigate to with difference data-icons (as in the example).

Inside those li:s, I am using <a> tags which where href="#idToView", like this:

<li data-icon="home"><a href="#home" data-transition="none">Home</a></li>

When I click the list item in the drawer, I am automatically navigated to the view with the id home and the drawer is closed.

What I want is to run a script instead that does those two things.
The reason is that I need to detach some element I have appended myself in the drawer header before navigating so that kendo does not clone the header while my element is still inside it.

I have tried constructions like:

<li data-icon="home"><a href="javascript:navigate_to_view()" data-transition="none">Home</a></li>

but that will only result in an error message in the error console:
Error: Syntax error, unrecognized expression: unsupported pseudo: navigate_to_view

How do I run that script?

General Discussions

answered on 06 Mar 2014

2 answers

158 views

[Solved] Panelbar

In the demo at

http://demos.telerik.com/kendo-ui/web/panelbar/index.html

the headers "My teammates", "Projects" etc are getting a border/shadow/something of darker blue when they are clicked on as some feedback of which header the user clicked on the last time.

In my project, I am trying to remove that style.
I have styled the headers green and the shadow border thing is red. That red color is not my choice, but the default one.

It really becomes a really ugly border. Not nice looking as in the example.

When I try to find the css rule that adds the border, it will dissapear, even if I do not interact with the document.
I only change node in firebug or in the development console of chrome, the border goes away.

How do I get rid of it?

PanelBar

answered on 06 Mar 2014

1 answer

606 views

[Solved] Issue with close event on Kendo UI Window

Hi everyone,
this my scenario:

I have a Kendo UI Window like this:

@(Html.Kendo().Window()
.Name("modalWindow")
.Modal(true)
.Draggable(true)
.Visible(false)
.Events(ev=>ev.Close("updateDropDownDs"))
)

I open this Window with content loaded from partial View with this code:

function showModalGrid(tableType, tableController, memberName) {

var modWin = $("#modalWindow").data("kendoWindow");
$("#modalWindow").kendoWindow(
{
content: {
url: "/TableEditing/GenericGrid",
data: {
tableType: tableType,
tableController: tableController,
}
},
modal:true,
});

modWin.center();
modWin.open();
}

By the CLOSE event Window call this Method:

function updateDropDownDs() {

var targetCombo;

targetCombo= $("#target").data("kendoDropDownList");

targetCombo.dataSource.read();

}

On first time everything work fine, CLOSE event don't fire.
With debug in chrome i've seen after exiting from updateDropDownDs method I have this error:
http://localhost:58647/Scripts/kendo/src/js/kendo.colorpicker.js 404 (Not Found)
I don't understand why I have this error. I don't have any colorpicker in my solution.
Someone can help me?
Thanks.

Window

answered on 06 Mar 2014

1 answer

119 views

Crosshair partially hidden when using Canvas Rendering

Hello,

I would like to use canvas rendering for a line chart. Additionally, the chart is supposed to show a crosshair.

The following code shows a sample script:

<div id="chart"></div>

<script type="text/javascript">

$("#chart").kendoChart({

renderAs: "canvas",

categoryAxis: {

categories: ["2012", "2013", "2014"],

crosshair: {

color: "#FF0000",

width: 2,

visible: true,

tooltip: {

background: "#F5F5DC",

border: {

color: "#000000",

width: 1

},

visible: true

}

},

series: [{

type: "line",

data: [1, 2, 3]

}]

});

</script>

Unfortunately, the observer only sees the tooltip. Is it possible to avoid this problem?

Charts

answered on 06 Mar 2014

1 answer

190 views

[Solved] Loading Spinner - WCAG2 - indicator

I've got a bug on my plate from the a11y group that states:
When the spinner is spinning for a long time, there is no audible indication to the user that the system is "thinking".

I'm thinking that I would do something like the following...
1. Add role=”alert” and aria-label=”Loading content” to the spinner item.
2. Add this <div> to the page:
<div class=”offscreen” id=”content-loaded”>Finished loading content.</div>
3. When the content finishes loading and the spinner goes away then add a role of alert to the div from #2:
$(“#content-loaded”).prop(“role”, “alert”);

Does this make sense?
If so, how and where should I do #1? And #3 I assume would be in the dataBound event, right?

FYI, I using remote data and paging. Perhaps #1 should be in any of the transport actions (read/update) - but which event?

Thanks,
--Ed

Grid

answered on 06 Mar 2014

1 answer

339 views

splitter - overlap

I am new with kendoUI, I have created a splitter and added inside one of the panels a dropdown item, however when i open the drop down , it seems that its z-index is lower then the splitter, no matter how i try to change all the z-indexes nothing helps

<!DOCTYPE html>
<html>
<head>
    <title>Basic usage</title>
    <meta charset="utf-8">
    <link href="../../content/shared/styles/examples-offline.css" rel="stylesheet">
    <link href="../../../styles/kendo.common.min.css" rel="stylesheet">
    <link href="../../../styles/kendo.rtl.min.css" rel="stylesheet">
    <link href="../../../styles/kendo.default.min.css" rel="stylesheet">    <script src="../../../js/jquery.min.js"></script>
    <script src="../../../js/kendo.web.min.js"></script>
    <script src="../../content/shared/js/console.js"></script>
    <script>

    </script>


</head>
<body>

        <a class="offline-button" href="../index.html">Back</a>

        <div>
             <ul id="menu1">
                                    <li>
                                        First Item
                                        <ul>
                                            <li>Sub Item 1</li>
                                            <li>Sub Item 2</li>
                                            <li>Sub Item 3</li>
                                            <li>Sub Item 4</li>
                                        </ul>
                                    </li>
                                    <li>
                                        Second Item
                                        <ul>
                                            <li>Sub Item 1</li>
                                            <li>Sub Item 2</li>
                                            <li>Sub Item 3</li>
                                            <li>Sub Item 4</li>
                                        </ul>
                                    </li>
                                    <li>
                                        Third Item
                                        <ul>
                                            <li>Sub Item 1</li>
                                            <li>Sub Item 2</li>
                                            <li>Sub Item 3</li>
                                            <li>Sub Item 4</li>
                                        </ul>
                                    </li>
                                    <li>
                                        Fourth Item
                                        <ul>
                                            <li>Sub Item 1</li>
                                            <li>Sub Item 2</li>
                                            <li>Sub Item 3</li>
                                            <li>Sub Item 4</li>
                                        </ul>
                                    </li>
                                    <li>
                                        Fifth Item
                                        <ul>
                                            <li>Sub Item 1</li>
                                            <li>Sub Item 2</li>
                                            <li>Sub Item 3</li>
                                            <li>Sub Item 4</li>
                                        </ul>
                                    </li>
                                </ul>
            <div id="example" class="k-content">
            <div id="vertical">
                <div id="top-pane">
                    <div id="horizontal" style="height: 100%; width: 100%;">
                        <div id="left-pane">
                            <div class="pane-content">
                                <h3>Inner splitter / left pane</h3>
                                <p>Resizable and collapsible.</p>
                            </div>
                        </div>
                        <div id="center-pane">
                            <div class="pane-content">
                                <h3>Inner splitter / center pane</h3>
                                <p>Resizable only.</p>
                                <ul id="menu">
                                    <li>
                                        First Item
                                        <ul>
                                            <li>Sub Item 1</li>
                                            <li>Sub Item 2</li>
                                            <li>Sub Item 3</li>
                                            <li>Sub Item 4</li>
                                        </ul>
                                    </li>
                                    <li>
                                        Second Item
                                        <ul>
                                            <li>Sub Item 1</li>
                                            <li>Sub Item 2</li>
                                            <li>Sub Item 3</li>
                                            <li>Sub Item 4</li>
                                        </ul>
                                    </li>
                                    <li>
                                        Third Item
                                        <ul>
                                            <li>Sub Item 1</li>
                                            <li>Sub Item 2</li>
                                            <li>Sub Item 3</li>
                                            <li>Sub Item 4</li>
                                        </ul>
                                    </li>
                                    <li>
                                        Fourth Item
                                        <ul>
                                            <li>Sub Item 1</li>
                                            <li>Sub Item 2</li>
                                            <li>Sub Item 3</li>
                                            <li>Sub Item 4</li>
                                        </ul>
                                    </li>
                                    <li>
                                        Fifth Item
                                        <ul>
                                            <li>Sub Item 1</li>
                                            <li>Sub Item 2</li>
                                            <li>Sub Item 3</li>
                                            <li>Sub Item 4</li>
                                        </ul>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div id="right-pane">
                            <div class="pane-content">
                                <h3>Inner splitter / right pane</h3>
                                <p>Resizable and collapsible.</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div id="middle-pane">
                    <div class="pane-content">
                        <h3>Outer splitter / middle pane</h3>
                        <p>Resizable only.</p>
                    </div>
                </div>
                <div id="bottom-pane">
                    <div class="pane-content">
                        <h3>Outer splitter / bottom pane</h3>
                        <p>Non-resizable and non-collapsible.</p>
                    </div>
                </div>
            </div>            <script>
                $(document).ready(function() {
                    $("#vertical").kendoSplitter({
                        orientation: "vertical",
                        panes: [
                            { collapsible: false },
                            { collapsible: false, size: "100px" },
                            { collapsible: false, resizable: false, size: "100px" }
                        ]
                    });                    $("#horizontal").kendoSplitter({
                        panes: [
                            { collapsible: true, size: "220px" },
                            { collapsible: false },
                            { collapsible: true, size: "220px" }
                        ]
                    });                    $("#menu").kendoMenu();
                    $("#menu1").kendoMenu();
                });
            </script>            <style scoped>
                #vertical {
                    height: 380px;
                    width: 700px;
                    margin: 0 auto;
                }                #middle-pane { background-color: rgba(60, 70, 80, 0.10); }
                #bottom-pane { background-color: rgba(60, 70, 80, 0.15); }
                #left-pane, #center-pane, #right-pane { background-color: rgba(60, 70, 80, 0.05); }                .pane-content {
                    padding: 0 10px;
                }
            </style>
        </div>
        </div>


</body>
</html>

Splitter

answered on 06 Mar 2014