Questions on Kendo UI for jQuery Forum

1 answer

98 views

Hello,

when using on mobile, when tap on the arrow it feels slow because of the lag to wait the double tap.

Some touch library have a fast tap feature, have you a solution to have it working with a better user experience?

TreeView

answered on 22 Aug 2013

1 answer

325 views

Expand the first row initially using MVC + Server Binding

I have a Hierarchical grid that is bound to the server and is in MVC (.DataSource(d => d.Server()))

When the grid first loads I'd like the grid to expand the first row by default so the detail view is showing.

Can this be done without Javascript (preferred) or in Javascript if needed.

Grid

answered on 22 Aug 2013

1 answer

133 views

window opens off center on the height

Hi,

I've been fighting this issue for a while, and I can't seem to find what causes it (or if it's by design). When I center my window the window opens farther from the top than it does from the bottom, instead if it being exact. So if the screen is say 1000px tall, and the window is 800px. When I center it, instead of appearing 100px from the top and 100px from the bottom as you would expect, it appears to be about 150px from the top and 50px from the bottom. It's like its stealing some of the bottom. Can you give me any pointers as to how this can be overcome so I can get to center exactly in the middle?

Thanks
Jason

Window

answered on 22 Aug 2013

1 answer

397 views

Animation to hide/show the side panel

Hello,
Since the drawer does not support in-place navigation, I want to tweak the splitview to show/hide the sidepanel in manner similar to the drawer.
Can someone point me in the right direction? So far i have managed to get a quick,snap-in/out, action but I want something more soft, an animation of the side panel's width.

This is what I am using right now:
$("#main-pane").css("-webkit-box-flex","1000");
$("#main-pane").css("-webkit-flex","1000");
$("#side-pane").animate({ width: "-=350" }, 750);

Thanks

SplitView

answered on 22 Aug 2013

1 answer

69 views

Slider with custom stops

I have a client who wants to specify a handful of stops on a slider, but they are not exactly the same distance apart. Say I want to stop on values of 24, 49, 73, and 97. How could I manage to do this with the Kendo slider?

Slider

answered on 22 Aug 2013

1 answer

236 views

IE 10 "X" in input text box and "k-icon k-loading" overlapping

What is the best way to handle the IE 10 "X" being displayed in a text box when the loading spinner is being displayed?

See attached file for a screen shot of it in action.

AutoComplete

answered on 22 Aug 2013

1 answer

108 views

Can't populate

I am trying to use the Scheduler with PHP wrappers, the data returns in a way that LOOKS like it should work...but doesn't for some reason. Here is how it works:
The initial page loads:

<!DOCTYPE html>

<html>

<head>

<title></title>

<link href="../kendo/styles/kendo.common.min.css" rel="stylesheet" />

<link href="../kendo/styles/kendo.default.min.css" rel="stylesheet" />

<script src="../kendo/js/jquery.min.js"></script>

<script src="../kendo/js/kendo.all.min.js"></script>

</head>

<script>

$(document).ready(function(){

$.ajax({

type: "POST",

dataType: "html",

data: {

request: 'calendar'

},

url: "../ajaxlistener.php",

cache: false,

success: function (data) {

$("#cal").html(data);

}

});

</script>

<style scoped>

#people {

background: url('i/2oa8kvmz.bmp') transparent no-repeat;

height: 115px;

position: relative;

}

#alex {

position: absolute;

left: 404px;

top: 81px;

}

#bob {

position: absolute;

left: 519px;

top: 81px;

}

#charlie {

position: absolute;

left: 634px;

top: 81px;

}

</style>

<body>

<div id="people">

<input checked type="checkbox" id="alex" value="1">

<input checked type="checkbox" id="bob" value="2">

<input type="checkbox" id="charlie" value="3">

</div>

<div id="cal">

</div>

</body>

</html>

After, as you can see, the first call to the listener is made. I am not posting the code to the listener, as it just redirects to the calendar handler:

include("includes/calendar.class.php");

$cal = new calendar();

if(!isset($_GET['action'])){

echo $cal->makeCalBase();

}else{

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

$action = $_GET['action'];

if($action == 'read'){

echo $cal->loadCal();

}elseif($action == 'create'){

echo $cal->saveCal($rawData);

}

The class is:

<?php

class calendar

{

private $uid;

private $calendarid;

private $today;

private $sched;

private $rawData = array();

private $json;

private $timezone = "";

public $display;

public function date_normalizer($d)

{

if ($d instanceof DateTime) {

return $d->getTimestamp();

} else {

return strtotime($d);

}

private function getLocations()

{

$rArray = array();

$get = "SELECT location_id, name, address1 FROM locations ORDER BY location_id ASC";

$exe = new Query($get, __LINE__, __FILE__);

$x = 0;

while ($r = $exe->fetch_assoc_array()) {

$rArray[$x]['text'] = ucwords($r['name']);

$rArray[$x]['value'] = $r['location_id'];

if (trim($r['address1']) != "") {

$rArray[$x]['color'] = "#" . substr(sha1($r['address1']), 0, 6);

} else {

$rArray[$x]['color'] = "#" . substr(sha1(time() * $r['location_id']), 0, 6);

}

$x++;

}

return $rArray;

}

public function makeCalBase()

{

$transport = new \Kendo\Data\DataSourceTransport();

$create = new \Kendo\Data\DataSourceTransportCreate();

$create->url('../calendarcontrol.php?action=create')

->contentType('application/json')

->type('POST');

$read = new \Kendo\Data\DataSourceTransportRead();

$read->url('../calendarcontrol.php?action=read')

->contentType('application/json')

->type('POST');

$update = new \Kendo\Data\DataSourceTransportUpdate();

$update->url('../calendarcontrol.php?action=update')

->contentType('application/json')

->type('POST');

$destroy = new \Kendo\Data\DataSourceTransportDestroy();

$destroy->url('../calendarcontrol.php?action=destroy')

->contentType('application/json')

->type('POST');

$transport->create($create)

->read($read)

->update($update)

->destroy($destroy)

->parameterMap('function(data) {

return kendo.stringify(data);

}');

$model = new \Kendo\Data\DataSourceSchemaModel();

$taskIDField = new \Kendo\Data\DataSourceSchemaModelField('taskID');

$taskIDField->type('number')

->from('entry_id')

->nullable(true);

$titleField = new \Kendo\Data\DataSourceSchemaModelField('title');

$titleField->from('event_title')

->defaultValue('No title')

->validation(array('required' => true));

$startField = new \Kendo\Data\DataSourceSchemaModelField('start');

$startField->type('date')

->from('start_time');

$startTimezoneField = new \Kendo\Data\DataSourceSchemaModelField('startTimezone');

$startTimezoneField->from('start_timezone');

$endField = new \Kendo\Data\DataSourceSchemaModelField('end');

$endField->type('date')

->from('end_time');

$endTimezoneField = new \Kendo\Data\DataSourceSchemaModelField('endTimezone');

$endTimezoneField->from('end_timezone');

$isAllDayField = new \Kendo\Data\DataSourceSchemaModelField('isAllDay');

$isAllDayField->type('boolean')

->from('all_day');

$descriptionField = new \Kendo\Data\DataSourceSchemaModelField('description');

$descriptionField->type('string')

->from('details');

$recurrenceIdField = new \Kendo\Data\DataSourceSchemaModelField('recurrenceId');

$recurrenceIdField->from('recure_id');

$recurrenceRuleField = new \Kendo\Data\DataSourceSchemaModelField('recurrenceRule');

$recurrenceRuleField->from('recure_rule');

$recurrenceExceptionField = new \Kendo\Data\DataSourceSchemaModelField('recurrenceException');

$recurrenceExceptionField->from('recure_exception');

$ownerIdField = new \Kendo\Data\DataSourceSchemaModelField('ownerId');

$ownerIdField->from('location_id')

->defaultValue(0);

$model->id('entry_id')

->addField($taskIDField)

->addField($titleField)

->addField($startField)

->addField($endField)

->addField($startTimezoneField)

->addField($endTimezoneField)

->addField($descriptionField)

->addField($recurrenceIdField)

->addField($recurrenceRuleField)

->addField($recurrenceExceptionField)

->addField($ownerIdField)

->addField($isAllDayField);

$schema = new \Kendo\Data\DataSourceSchema();

$schema->data('data')

->errors('errors')

->model($model);

$dataSource = new \Kendo\Data\DataSource();

$dataSource->transport($transport)

->schema($schema)

->batch(true)

->addFilterItem(array(

'logic' => 'or',

'filters' => array(

array('field' => 'owner_id', 'operator' => 'eq', 'value' => 1),

array('field' => 'owner_id', 'operator' => 'eq', 'value' => 2),

)

));

$resource = new \Kendo\UI\SchedulerResource();

$resource->field('owner_id')

->title('owner_id')

->dataSource($this->getLocations());

$scheduler = new \Kendo\UI\Scheduler('scheduler');

$scheduler->timezone("Etc/UTC")

->date(new DateTime())

->height(600)

->addResource($resource)

->addView(array('type' => 'day', 'startTime' => new DateTime()),

array('type' => 'week', 'selected' => true, 'startTime' => new DateTime()), 'month', 'agenda')

->dataSource($dataSource);

return $scheduler->render();

}

public function makeEmptyCal()

{

}

public function saveCal($data)

{

$insertData = array(array());

$queryList = "";

foreach ($data->models AS $uselessVar => $usableData) {

$dataArray = get_object_vars($usableData);

if ($dataArray['entry_id'] !== null) {

} else {

$cols = "(";

$values = "(";

foreach ($dataArray AS $field => $val) {

if ($field == "start_time" || $field == "end_time") {

$val = date("Y-m-d H:i:s",$this->date_normalizer($val));

}

if ($field != 'entry_id') {

$cols .= "{$field},";

$values .= "'" . trim($val) . "',";

}

$cols .= "owner_id)";

$values .= "{$this->uid})";

$queryList .= "INSERT INTO scheduler_data {$cols} VALUES {$values};\n";

}

if ($queryList != "") {

new Query($queryList, __LINE__, __FILE__);

}

return $this->loadCal();

}

public function loadCal()

{

$getData =

"SELECT entry_id, event_title, start_time, end_time, all_day, details, recure_id, recure_rule, recure_exception, location_id FROM scheduler_data WHERE owner_id = 0 OR owner_id = {$this->uid}"

;

$exe = new Query($getData, __LINE__, __FILE__);

$returnObject = new stdClass();

$returnObject->models = array();

$x=0;

while ($r = $exe->fetch_assoc_array()) {

$returnObject->models[$x] = new stdClass();

foreach ($r AS $c => $v) {

$c = str_replace(array("entry_id","event_title","start_time","end_time","all_day","details","recure_id","recure_rule","recure_exception","location_id"), array("TaskID","Title","Start","End","IsAllDay","Description","RecurrenceRule","RecurrenceID","RecurrenceException","OwnerID"),$c);

if ($c != 'start_time' && $c != 'end_time' && $c != "Start" && $c != "End"){

$v = trim(stripslashes($v));

if($v == ""){

$v = null;

}

if(preg_match("/_id/",$c) || preg_match("/ID/",$c)){

$returnObject->models[$x]->$c = intval($v);

}elseif($c == 'all_day'){

if($v == '0'){

$returnObject->models[$x]->$c = false;

}else{

$returnObject->models[$x]->$c = true;

}

}else{

$returnObject->models[$x]->$c = $v;

}

}else{

$returnObject->models[$x]->$c = "/Date(" . $this->date_normalizer($v) . ")/";

}

$x++;

}

return "jQuery(" . json_encode($returnObject->models) . ")";

}

function __construct($cid = 0)

{

$this->calendarid = $cid;

$this->uid = $_SESSION['user_id'];

$this->today = time();

}

?>

And i am really confused because it seems to return correct data:

jQuery([{"entry_id":1,"event_title":"Test Event","start_time":"\/Date(1376840734)\/","end_time":"\/Date(1376842534)\/","all_day":false,"details":null,"recure_id":0,"recure_rule":null,"recure_exception":null,"location_id":0},{"entry_id":2,"event_title":"Another Event","start_time":"\/Date(1377006334)\/","end_time":"\/Date(1377008134)\/","all_day":false,"details":"Some more info about that event","recure_id":0,"recure_rule":null,"recure_exception":null,"location_id":0},{"entry_id":3,"event_title":"Test Event","start_time":"\/Date(1376919934)\/","end_time":"\/Date(1376921734)\/","all_day":false,"details":"This is a test event","recure_id":0,"recure_rule":null,"recure_exception":null,"location_id":0},{"entry_id":4,"event_title":"DATA!!","start_time":"\/Date(1377024633)\/","end_time":"\/Date(1377026433)\/","all_day":false,"details":null,"recure_id":0,"recure_rule":null,"recure_exception":null,"location_id":0},{"entry_id":5,"event_title":"DATA!!","start_time":"\/Date(1377024633)\/","end_time":"\/Date(1377026433)\/","all_day":false,"details":null,"recure_id":0,"recure_rule":null,"recure_exception":null,"location_id":0},{"entry_id":6,"event_title":"asdfasdfasdf","start_time":"\/Date(1377021033)\/","end_time":"\/Date(1377022833)\/","all_day":false,"details":null,"recure_id":0,"recure_rule":null,"recure_exception":null,"location_id":0},{"entry_id":7,"event_title":"asdasdasd","start_time":"\/Date(1376845910)\/","end_time":"\/Date(1376847710)\/","all_day":false,"details":null,"recure_id":0,"recure_rule":null,"recure_exception":null,"location_id":0},{"entry_id":8,"event_title":"No title","start_time":"\/Date(1376784000)\/","end_time":"\/Date(1376784000)\/","all_day":true,"details":null,"recure_id":0,"recure_rule":null,"recure_exception":null,"location_id":0},{"entry_id":9,"event_title":"No title","start_time":"\/Date(1376784000)\/","end_time":"\/Date(1376784000)\/","all_day":true,"details":null,"recure_id":0,"recure_rule":null,"recure_exception":null,"location_id":0},{"entry_id":10,"event_title":"asdasdasd","start_time":"\/Date(1376939633)\/","end_time":"\/Date(1376941433)\/","all_day":false,"details":null,"recure_id":0,"recure_rule":null,"recure_exception":null,"location_id":0},{"entry_id":11,"event_title":"Some Event","start_time":"\/Date(1377026532)\/","end_time":"\/Date(1377028332)\/","all_day":false,"details":null,"recure_id":0,"recure_rule":null,"recure_exception":null,"location_id":0},{"entry_id":12,"event_title":"Yet another event!","start_time":"\/Date(1377031457)\/","end_time":"\/Date(1377033257)\/","all_day":false,"details":"Some info aout said event","recure_id":0,"recure_rule":null,"recure_exception":null,"location_id":0}])

I guess I am missing something....? Any help would be greatly appreciated.

Scheduler

answered on 22 Aug 2013

2 answers

105 views

min-height on paragraph - IE9

I am not sure if this is expected behavior, but I have set a min-height property for paragraphs in a custom style sheet. However when this is applied to the editor, every time a paragraph is clicked the "move" cursor appears and the whole paragraph is then selected making it difficult to enter text. This seems to only be happening in IE and not Firefox.

One of the reasons I am doing this as I don't want paragraphs creating margins, however I do want spaces between paragraphs if required.

margin:0cm;

margin-bottom:.0001pt;

min-height: 14px;

Please see attached screenshot when applied to your demo.

Editor

answered on 21 Aug 2013

4 answers

390 views

Editor foreColor Palette

Hi All,

The Web UI Editor has foreColor and backColor Tools.
These buttons bring up colour selection palettes (currently defaulting to the WEBSAFE palette)

How can I specify that the editor's foreColor palette should be the BASIC colour palette?

Is there a jquery configuration line, or a method of $("#editor").kendoEditor({ I need to call to set the palette.
I've searched and seen a couple of other posts about this, but they are not relating to the Web UI.

Sorry, I'm a new guy, so I will probably have a few questions over the next few weeks.

With thanks.
Glyn

Editor

answered on 21 Aug 2013

0 answers

109 views

sticky filter

nevermind

ListView (Mobile)

asked on 21 Aug 2013