Questions on Kendo UI for jQuery Forum

1 answer

163 views

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

507 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

116 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

97 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

126 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.8K+ views

[Solved] 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

1 answer

173 views

AngularJs and KendoUI

hy,

I'm trying to develop an MVC4 Single Page Application based on AngularJs and KendoUI

1/ In my index.html:
//I have thos lines :
<script src="/Scripts/jquery-1.10.2.min.js"></script>
<script src="/Scripts/angular.min.js"></script>
<script src="/Scripts/kendo/2013.2.716/kendo.all.min.js"></script>
<script src="/Scripts/angular-kendo.js"></script>
//I have this line :
<div kendo-grid k-data-source="things"
k-columns='[
{"field": "Id","title": "Id"},
{"field": "Country","title": "Country"}
]'
>
</div>
2/In my app.js :
var app = angular.module('appModuleName', ['kendo.directives']).config......
3/in my controller.js:
$scope.things= new kendo.data.DataSource({
transport: {
read: "[{ 'Id': 1 , 'Country': 'England01'}, { 'Id': 2 , 'Country': 'England02'}, { 'Id': 3 , 'Country': 'England03'}]"
}
});

>> when i add the line : {{things}} , i have the scope, but i do not see the grid in my page !!!

Thanks a lot for your help.
Best M,

Grid

answered on 03 Sep 2013

6 answers

430 views

Kendo UI TreeView remove function on newly created node.

Hi,

I have a problem with remove newly created nodes from a treeview, in that it gives an error "TypeError: r[0] is undefined".
This only happens with newly created nodes, if a tree is reloaded after appending the node, then the removal works fine.

Versions:
<link href="//da7xgjtj801h2.cloudfront.net/2013.1.514/styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
<link href="//da7xgjtj801h2.cloudfront.net/2013.1.514/styles/kendo.bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
<script src="//da7xgjtj801h2.cloudfront.net/2013.1.514/js/kendo.all.min.js" type="text/javascript"></script>

Using Firefox.

Process:

Add node:
function addToTree(id, data) {   // This works just fine.
    var treeView = $element.data("kendoTreeView");
    var getitem = treeView.dataSource.get(id);
    var selectitem = treeView.findByUid(getitem.uid);
    treeView.append(data, selectitem);
}

function removeFromTree () {
    var $parent = treeView.parent(treeView.select());
    treeView.remove(treeView.select());
    treeView.select($parent);
    treeView.trigger('select', { node: $parent });
}

// First we add to the tree
addToTree(targetId, newNode);
// Then we select the node, and display the appropriate info panel.
....
// Then we try to remove the node
removeFromTree(); // error is thrown, and it is thrown even if the parent selection code is removed leaving only the remove command.

The remove function works just fine if the tree is reloaded after adding the node, but clearly that is not a workable method. Any ideas on what is wrong with the "new node"?

TreeView

answered on 03 Sep 2013

3 answers

225 views

Cannot get data in my GRID

Dear all,

I have been trying for a cuple of days to get data from the database into the KendoUI GRID. For some reason the data doesn't show, so I ran a test and as far as I can see it is working as it is supposed to.

My test.php file looks like this:

<?php

$sRootDir = "../..";

require_once ($sRootDir.'/lib/Kendo/DataSourceResult.php');

require_once ($sRootDir.'/lib/Kendo/Autoload.php');

require_once ($sRootDir."/include/includeDomain.php");

require_once ($sRootDir."/include/includeLib.php");

if ($_SERVER['REQUEST_METHOD'] == 'POST') {

header('Content-Type: application/json');

$sType = $_GET["type"];

$sRequest = json_decode(file_get_contents('php://input'));

//Password data removed

$pResult = new DataSourceResult(**dns**, **user**, **password**);

$aColumns = array('CLIENTEMEA', 'CLIENTNAME', 'CLIENTKVK');

switch($sType) {

case 'create':

$sResult = $pResult->create('RULES_CLIENTS', $aColumns, $sRequest->models, 'CLIENTEMEA');

break;

case 'read':

$sResult = $pResult->read('RULES_CLIENTS', $aColumns, $sRequest);

break;

case 'update':

$sResult = $pResult->update('RULES_CLIENTS', $aColumns, $sRequest->models, 'CLIENTEMEA');

break;

case 'destroy':

$sResult = $pResult->destroy('RULES_CLIENTS', $sRequest->models, 'CLIENTEMEA');

break;

}

echo json_encode($sResult, JSON_NUMERIC_CHECK);

$FileName = "testFile.txt";

$FileHandle = fopen($FileName, 'w') or die("can't open file");

fwrite($FileHandle, json_encode($sResult, JSON_NUMERIC_CHECK));

fclose($FileHandle);

exit;

}

require_once($sRootDir."/html/tpbilling/client/index2.html");

?>

And my index2 file looks like this:

<div id="grid"></div>

<script>jQuery(function(){

jQuery("#grid").kendoGrid(

{"columns":[

{"field":"CLIENTEMEA","width":100,"title":"Client EMEA"},

{"field":"CLIENTNAME","width":400,"title":"Client Name"},

{"field":"CLIENTKVK","width":100,"title":"KVK Number"}],

"dataSource":

{"transport":{

"create":{"url":"../../tpbilling/client/test.php?type=create","contentType":"application\/json","type":"POST"},

"read":{"url":"../../tpbilling/client/test.php?type=read","contentType":"application\/json","type":"POST"},

"update":{"url":"../../tpbilling/client/test.php?type=update","contentType":"application\/json","type":"POST"},

"destroy":{"url":"../../tpbilling/client/test.php?type=destroy","contentType":"application\/json","type":"POST"},

"parameterMap":function(data) {

return kendo.stringify(data);

}},"batch":true,"pageSize":20,

"schema":{

"data":"data","errors":"errors","model":{

"id":"CLIENTEMEA","fields":[

{"field":"CLIENTEMEA","type":"number","validation":{"required":true}},

{"field":"CLIENTNAME","type":"string","validation":{"required":true}},

{"field":"CLIENTKVK","type":"number","validation":{"required":true}}

]},

"total":"total"}},

"toolbar":[{"name":"create"}],"height":430,"editable":"popup","pageable":true});});

</script>

Now you can see in the php-file I created a text file to check which data is echo-ed. That data looks like this:

{"total":2,"data":[{"CLIENTEMEA":127,"CLIENTNAME":"Telenet","CLIENTKVK":123456789},{"CLIENTEMEA":129,"CLIENTNAME":"Tele2","CLIENTKVK":987654321}]}

Which is correct. I made 2 test entries to see what's what.

Now when I start the page, the GRID always shows up empty. It's also not possible to add new records. When I do the submit button doesn't submit the data, so all I can do is cancel.

Can anyone see anything wrong with the code? Are there other tests I could do to find out the problem?

Any help would be appreciated.

Thanks in advance,

Dennis Biemans.

Grid

answered on 03 Sep 2013

1 answer

111 views

Kendo UI Mobile search box formatted like default?

I have a Kendo UI app with a search box. My problem is, it's formatted just like the browser would normally format it, which I do NOT want. I would expect Kendo UI to do this for me. Here is my HTML:<div data-role="view" data-layout="app" data-title="Search" id="index">

<header data-role="header">

<div data-role="navbar">Search</div>

<form id="searchForm">
<input type="search" id="search" />
</form>

</header>
</div>
..........
Am I going to have to style this myself?

General Discussions

answered on 03 Sep 2013