Questions on Kendo UI for jQuery Forum

1 answer

175 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

327 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

3 answers

131 views

How to Use pullParameters

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:

var dataSource = new kendo.data.DataSource({

type: 'everlive',

transport: {

typeName: 'Test'

},

pageSize: 20,

serverPaging: true,

serverSorting: true,

sort: [

{ field: 'CreatedAt', dir: 'desc' }

],

change: function(e) {

var data = this.data();

console.log('First: ' + data[0].Text + ' Last: ' + data[data.length - 1].Text);

}

});

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:

pullParameters: function (e) {

this.dataSource.page(1);

}

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

General Discussions

answered on 06 Mar 2014

1 answer

193 views

Migrating Telerik Asp.net to Asp.net MVC

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.

Charts

answered on 06 Mar 2014

1 answer

106 views

[Solved] Suppress Bound Column Editor in Create Mode

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("");
   }
}

Grid

answered on 06 Mar 2014

3 answers

343 views

Problem in Groupable

I have written below code in Kendo Grid change event.

change: function(e) {

var item = e.items[0];

var stockQty = item.get("columnName");

}

Now, when I try to drag any column in header for "Group By", the grid crashes. When I remove this line of code, it is working fine.

var stockQty = item.get("columnName");

Can anybody help me out on this. Thanks in advance.

Regards,
Komail Noori

Grid

answered on 06 Mar 2014

1 answer

128 views

Simple Line Graph looks terrible -- formatting help

Hello,

I'm new to the Telerik/KendoUI grid and I'm trying to render a line graph via JavaScript in my MVC View. I've passed the values and they're producing funky results, so I tried hard-coding some simple integers in and... that's now working. But whenever I put in my Model data, the graph looks awful. It's a graph for a full day, 24 hours; I know that's a lot of data points, but there must be some way to make it look better. Below is the code for the Model-based chart and I've included a pic of the graph with its values. Series1 (today) and Series 2 (yesterday) are the plotted points and Series 3 should be the x-axis [hour]:

Screenshot: http://imgur.com/vADrBAo

Any help would be greatly appreciated!

01. var today = '@Html.Raw(Json.Encode(@Model.ApprovedToday))';

02. var yesterday = '@Html.Raw(Json.Encode(@Model.ApprovedYesterday))';

03.

04. /**************HARD-CODED VALUES ***********/

05. //testing

06. //today = new Array(1, 5, 3, 11, 17);

07. //yesterday = new Array(7, 4, 22, 11, 0);

08.

09. $('#chartNew2').kendoChart({

10. theme: 'metro',

11. seriesDefaults: {

12. type: 'line',

13. style: 'smooth'

14. //type: 'column',

15. //stack: true

16. },

17. series: [

18. {

19. name: 'Today',

20. data: today,

21. color: '#609'

22. },

23. {

24. name: 'Yesterday',

25. data: yesterday,

26. color: '#f03'

27. }

28. ]

29. });

30.});

[/code]

Charts

answered on 06 Mar 2014

1 answer

68 views

[Solved] In Cell Editing slow on IE9+

Hi,

I'm currently working on a web application where we are trying to make it easy for the user to edit data without jumping around too much, the data consists of about 8 columns, most of them are foreign keys and a couple have a custom template. We are trying to stay away from paging as much as possible.

Everything works fine up to 10-20 rows, after that getting the cells into edit mode takes between 1 and 1.5 seconds and it just starts becoming slower and slower when hitting 100 records or more. Under Chrome this is a lot faster although you can still notice some delay but it is still workable. Is there anything that we can do to increase performance on IE9+? (Tested up to 11 and it is a lot faster, but current standard on the client is IE9)

I also tested with scrolling and virtualizing and if I keep the page sizes to around 10 rows it works a lot better but it messes up some of our styling for some reason, and adds an extra scroll bar to the page as well. It's a bit faster than my application but you can still notice the delays if you test on IE9.

Here's a simple jsFiddle to replicate some of this behavior, I just took one of your demos and added more rows and duplicated columns.

http://jsfiddle.net/f7dk7/1/

Thanks,
Omar

Grid

answered on 06 Mar 2014

1 answer

95 views

Decoupled Mobile widgets from Kendo UI Mobile application.

Any updates on this new feature that appears to be in beta? Decoupled Mobile widgets from Kendo UI Mobile application. I am looking for some documentation on what this means and if we can use AngularJS or Angular-Touch frameworks with Kendo Mobile UI.

General Discussions

answered on 06 Mar 2014

1 answer

121 views

Get value from field on edit event

When the my grid is popup edit mode, I need to get a value from the selected row in the edit event handler for the grid. "args.model.myFieldname" does not work. I can't seem to find a way to get a handle on the edited row data item I need. I need to do this because when document ready fires in my popup, the data model is not yet loaded, but I need to use the value of one of the fields in the model to do some other things in the popup UI. I am sure this must be something simple, but I have not found the answer. Any help would be much appreciated.

Grid

answered on 05 Mar 2014