Questions on Kendo UI for jQuery Forum

2 answers

451 views

Hi,

I have a kendo grid that will be initialized and loaded with data on page load. In many instances, due to slow network, the grid takes time to load. How do I get to find out when the grid has been initialized and loaded completely, so that I can take the data from the grid using dataSource.data() api ?

Thanks,
V N

Grid

answered on 04 Sep 2013

1 answer

143 views

View event "beforeHide" is not firing

When I try out the order in which the events of a view are fired, like this:

    <div data-role="view" data-layout="phoneLayout"
        id="settingsView"
        data-model="app.viewBehind.settings.viewModel"
        data-before-show="app.viewBehind.settings.beforeShow"
        data-init="app.viewBehind.settings.init"
        data-show="app.viewBehind.settings.show"
        data-before-hide="app.viewBehind.settings.beforeHide"
        data-hide="app.viewBehind.settings.hide">
[...]
    </div>

the beforeHide event (described here: http://docs.kendoui.com/api/mobile/view#events-beforeHide) does not fire at all. Curiously enough, i cannot find any reference to "beforeHide" in the kendo.all.min.js sources. Is this a version related issue? I'm using kendoui.complete.2013.2.716.trial .

TIA Peter

General Discussions

answered on 04 Sep 2013

1 answer

61 views

Slider very hard to slide accurately on Mobile ( iPhone )

Hi,

Kendo UI 2013.2.716
PhoneGap 3.0.0

I have a slider in a view. On an iPhone it is very hard to capture the handle and slide it with a finger.
Most of the time the finger simply slides over it, without making it move; so the user has to try again and again until it captures the touch for the handle and starts moving.

Is there any way to improve this? It is really unusable the way it stands now.

Thanks

Slider

answered on 04 Sep 2013

1 answer

72 views

Performance/right usage of kendoComboBox

Hello,
We've being analysing kendo-ui before we buy it and we face what appears to be a performance issue(or not). As we are not costumers yet, we don't know if this is the right place to post this question, but here we go.

Attached to this thread there's a small html file that takes a quite long time to run despite its simplicity.
The questions are very simple:

1 - Are we using kendoComboBox in the wrong way?
2- There is a faster way to achieve the same result?
3- Is this performance considered normal?
4- If the answer for question 3 is `yes', do you have any guidelines to help us out to bypass these performance issues(number of elements per page, number of bindings per page etc)?

Ah, of course, it may be not a `performance issue' in other person point of view, so, when you read `performance issue' here, its our point of view :)
Despite that, neat library and great components.

ComboBox

answered on 04 Sep 2013

1 answer

121 views

Delete confirmation with TemplateId

Hi,
I am using the Asp.Net Mvc Wrapper for the scheduler control. I noticed that if I specify an editor template, the delete confirmation message does no longer appear:

To clarify, with this declaration the confirmation message does not appear:

.Editable(e => {
e.TemplateId("editEventTemplate");
e.Confirmation(true);
})

If I remove all the "Editable" configuration or if I leave just the Confirmation part, it works correctly:

.Editable(e => {
e.Confirmation(true);
})

What could be the reason for this strange problem?
Thanks,
Stefano Tassara

Scheduler

answered on 03 Sep 2013

1 answer

463 views

Drawer Not Working

Below is my code. I cannot get the Drawer to work. What am I doing wrong?

Thank you!!

<!DOCTYPE html>
<html>
<head>

<meta charset="utf-8">
<title>App #1</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.mobile.all.min.css" rel="stylesheet" type="text/css"/>
<link href="../styles/custom.css" rel="stylesheet" type="text/css"/>
<script src="../js/jquery.min.js" type="text/javascript"></script>
<script src="../js/kendo.web.min.js" type="text/javascript"></script>
<script src="../js/kendo.mobile.min.js" type="text/javascript"></script>
<script src="../examples/content/shared/js/console.js"></script>
</head>

<body>


<div id="mainView" data-role="view" data-title="View" >
<h1>App #1</h1>
<p>REST API.</p>
</div>

<div data-role="view" id="drawer-home" data-layout="drawer-layout" data-title="Inbox"></div>
<div data-role="drawer" id="my-drawer" style="width: 270px" data-views="['drawer-home']">
<ul data-role="listview" data-type="group">
<li>Mailbox
<ul>
<li data-icon="inbox"><a href="#drawer-home" data-transition="none">Inbox</a></li>
</ul>
</li>

</ul>
</div>


<div data-role="layout" data-id="mainLayout">
<div data-role="header">
<div data-role="navbar">
<a data-role="button" data-rel="drawer" href="#my-drawer" data-icon="drawer-button" data-align="left"></a>
<span data-role="view-title"></span>
</div>
</div>


<div data-role="footer">
<div data-role="tabstrip">
<a href="default.html" data-icon="favorites">Home</a>
<a href="views/view2.html" data-icon="favorites">View All Records</a>
<a href="views/view4.html" data-icon="favorites">Insert New Record</a>
</div>
</div>

</div>

<script>
// reset global drawer instance, for demo purposes
kendo.mobile.ui.Drawer.current = null;
</script>

<style>
.km-ios #my-drawer .km-content, .km-android #my-drawer .km-content, .km-blackberry #my-drawer .km-content,
.km-ios #my-drawer .km-list > li, .km-android #my-drawer .km-list > li, .km-blackberry #my-drawer .km-list > li,
.km-ios #my-drawer .km-listview-link > .km-icon, .km-android #my-drawer .km-listview-link > .km-icon, .km-blackberry #my-drawer .km-listview-link > .km-icon,
.km-ios #my-drawer .km-list li > .km-icon, .km-android #my-drawer .km-list li > .km-icon, .km-blackberry #my-drawer .km-list li > .km-icon
{
background-color: #4e4e4e;
color: #fff;
}

.km-ios #my-drawer .km-group-title,
.km-blackberry #my-drawer .km-group-title
{
background-color: #6e6e6e;
color: #fff;
}

.km-drawer-button:before, .km-drawer-button:after { content: "\E077"; }
.km-inbox:before, .km-inbox:after { content: "\E0B0"; }
.km-sent:before, .km-sent:after { content: "\E0C6"; }
.km-trash:before, .km-trash:after { content: "\E0C3"; }
.km-spam:before, .km-spam:after { content: "\E0C5"; }
.km-star:before, .km-star:after { content: "\E0D7"; }
.km-settings:before, .km-settings:after { content: "\E0DA"; }
.km-off:before, .km-off:after { content: "\E0B9"; }

.inboxList
{
font-size: .8em;
}

.inboxList p,
.inboxList h2,
.inboxList h3
{
margin: 5px 2px;
}

.inboxList p,
.inboxList h3
{
color: #777;
}

.inboxList h3.time
{
color: #369;
float: left;
margin-right: 10px;
}
</style>

<script>
window.app = new kendo.mobile.Application(document.body, { layout: "mainLayout" });
//var app = new kendo.mobile.Application(document.body);
</script>

</body>

</html>

Drawer (Mobile)

answered on 03 Sep 2013

2 answers

81 views

RadioButtons, DropDownList

Is there such a thing in the Kendo Web Suite - did not find anything.

Let's say you have an app with 20 languages. How does the client select. scroll down?

I have only 3 at the moment but am planning on adding more

Markus

General Discussions

answered on 03 Sep 2013

1 answer

78 views

IE111 anomolies

I realize you don't support beta browsers, so this is just a FYI for you.

The sort by column in GRID is not working in IE11.

I also have trouble with editable rows, that have a delete button at the end. Some rows cannot be deleted. Chrome V28 does not have these problems.

Grid

answered on 03 Sep 2013

7 answers

103 views

List-View width getting reduced on every click in Android

Hi,
Width of the List-view gets reduced on every click in Android(tested in S3),PFA the sample project.
Version Used: KendoUIMobile.2013.2.716.Commercial.

Regards,
Sowmya

ListView (Mobile)

answered on 03 Sep 2013

2 answers

1.7K+ views

Include NumericTextBox within Grid using template

I have created a Kendo UI Grid and I have one field within the grid which is editable. I haven't used the "Inline editing" feature as I chose to simply create a template that has a text box and have an event handler on it. This works great.

I now want to change the text box to a `NumericTextBox` but it does not seem to work within the grid but works out side of the grid.

    <div id="grid" style="width:1250px!important;font-size:12px!important"></div>
     <script id="slotsTemplate" type="text/x-kendo-tmpl">
       <input class="numeric" type="number" value="#= additional_slots #" min="0" max="100" step="1" />
    </script>
    <script>

        $(document).ready(function() {
          $("#numeric").kendoNumericTextBox();
              $("#grid").kendoGrid({

                dataSource: {
                   transport: {
                       read:{
                           dataType: "json",
                           url: "data.php"
                       }
                   },
                dataBound: function(){
                      $(".numeric").kendoNumericTextBox();
               },
                    schema: {
                       total: "total",
                       data: "result",
                        model: {
                            fields: {
                                id: { type: "number" } ,
                                name: { type: "string" },
                                company: { type: "string" },
                                email: { type: "email" },
                                additional_slots: { type: "number", validation: { min: 0, required: true }},

                            }
                        }
                    },
           serverPaging: true,
                    pageSize: 25
                },
                scrollable: false,
                sortable: true,
                filterable: true,
             selectable: "row",
             detailTemplate: kendo.template($("#detailTemplate").html()),
                pageable: {refresh: true,},
                columns: [
                    {field:"id",title: "ID",filterable: false},
                    {field: "name",title: "Name"},
                    {field: "company",title: "Company"},
                    {field: "email",title: "Email"},
                    {field: "additional_slots",title: "Additional<br />Slots",template: kendo.template($("#slotsTemplate").html()),filterable: false},


                ]
            });



           $("#grid").on("change", '#numeric', function(event){
               alert('changed');
              });
    </script>

Can anyone help get this NumericTextBox working within the grid?

Many thanks

Grid

answered on 03 Sep 2013