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?

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:



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:


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?

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?

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.

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:


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

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

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>

Hello,

I'm using endless scrolling and pull-to-refresh in a list view.  My DataSource contains a server-side sort on CreatedAt in descending order.  Since newer records can NEVER have a CreatedAt with a value greater than a record created earlier in time, my listview is finite at the bottom, but infinite at the top.  In other words, I need endless scrolling at the top of the listview, since new records will be sorted to the top of the list.

It sounds like the pull-to-refresh feature is what I need to find these new records.  I'm having trouble getting it work, though, and need some advice.

I've gotten as far as getting my pullParameters function to be called, passing the data item that is currently at the top of the listview.  I don't understand what I need to return in order for the refresh of the DataSource to occur.  Here is how my data source is defined:


I've watched the Logs, and see that the pull-to-refresh callback is just repeating the last query made before the pull.  For example, if I have scrolled to the bottom of the list of 100 records, it sends skip: 100 take: 20.  All I want to do is have the pullParameters reset the skip to 0.

The pullParameters documentation says "The result of the function will be send as additional parameters to the DataSource's next method."  I don't even see a "next" method in the DataSource doc.  I don't see any point to sending "additional parameters" to Everlive for a straight query, and I checked the logs and don't see any parameters sent when I do return something from pullParameters.  So instead of returning anything, I just add the following to my pullParameters function:


1)  Now, I'm getting the result I want, but I don't think I'm doing it correctly and I'm afraid it will break.  So, please - what do I need to return in pullParameters to reset the datasource to the top?

2) Also, is it possible to define pullParameters in the markup?  I've tried data-pull-parameters, data-pullparameters, etc and can't get it to fire unless I call kendoMobileListView() directly.

Thank you,

Kelly

Hi All,

Currently we are using Q3, 2011 version of telerik for Asp.net project. But now we have a requirement to move to MVC framework. To do this we have following queries:

Queries:
Which version of telerik control required for MVC framework?
Does Q3, 2011 version (eg: Telerik.Web.UI) will work?
If any specific link present to understand - how to dynamically bind telerik chart control with MVC framework?

Can you please provide appropriate url or references.

I have configured a grid’s bound column with an editor.  I would like the editor to be suppressed, or otherwise not available to the user, when creating a new row.  I’ve only thus far been able to use jQuery’s .html() function to empty the inner HTML, but there must be a more elegant solution.  Any attempts to replace the inner HTML with content result in that content becoming part of the editor (clickable to see the editor's dropdown).

What do you advise I do in the Edit event handler?

Reference Threads:
http://www.telerik.com/forums/column-readonly-in-edit-mode-but-editable-in-add-mode-
http://docs.telerik.com/kendo-ui/getting-started/using-kendo-with/aspnet-mvc/helpers/grid/editor-templates

--- CODE FOLLOWS ---

Here is the grid’s view model (showing the annotation):

public sealed class GridViewModel
{
   ...
   [UIHint("DisplayOrderEditor")]
   public Int32 DisplayOrder { get; set; }
}
 
Here is the editor template DisplayOrderEditor.cshtml:

@(Html.Kendo().DropDownList()
   .Name("DisplayOrder")
   .DataValueField("Value")
   .DataTextField("Text")
   .BindTo((IEnumerable<SelectListItem>)ViewData["displayorders"])
)
 
Here is the inline editable grid using AJAX for binding to remote data:

@(Html.Kendo().Grid<MyController.GridViewModel>()
   .Name("grid")
   .Columns(columns =>
   {
      ...
      columns.Bound(h => h.DisplayOrder);
   })
   .Editable(editable => editable.Mode(GridEditMode.InLine))
   .Events(events => events.Edit("onEdit"))
   .DataSource(dataSource => dataSource
      .Ajax()
      ...
)
 
Here is the handler for the Edit event:

function onEdit(e) {
   if (e.model.isNew() == true) {
      $('[name="DisplayOrder"]').parent().html("");
   }
}