Questions on Kendo UI for jQuery Forum

1 answer

438 views

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

88 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

264 views

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

151 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

138 views

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

433 views

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

132 views

sticky filter

nevermind

ListView (Mobile)

asked on 21 Aug 2013

1 answer

94 views

Refresh grid partially

I am not able to partially refresh kendo grid integrated with knockout. This is happening when I am editing grid values in a dialog box. Data is getting changed, but not reflecting inside a grid. I don't want to make use of jquery for refreshing grid.

Any help would be appreciated !

Grid

answered on 21 Aug 2013

1 answer

205 views

RadialGauge Scale Labels Position Outside not working

Hi,

I am using a RadialGauge and want to position the scale labe on the outside. The Gauge is created with HTML helper as follows:

@(Html.Kendo().RadialGauge()

.Name("gauge1")

.Pointer(pointer => pointer

.Color("#8EBC00")

.Value(@ViewBag.ServiceLevel))

.Scale(scale => scale

.MinorUnit(5)

.StartAngle(0)

.EndAngle(180)

.Max(100)

.Labels(labels => labels

.Position(GaugeRadialScaleLabelsPosition.Outside))

.Ranges(ranges => {

ranges.Add().From(0).To(5).Color("#c20000");

ranges.Add().From(5).To(25).Color("#ff7a00");

ranges.Add().From(25).To(60).Color("#ffc700");

})

)

The result is, that the scale is still positioned inside the scale. Is there anything wrong in my code?

I am using v.2013.2.716.340.

Regards
Sven

LinearGauge

answered on 21 Aug 2013

23 answers

1.4K+ views

Grid Column Menu + Reordering

I've downloaded the latest version of Kendo Web (kendoui.web.2012.2.710.open-source) and added a grid in my application with the following settings:

autoBind: true,

selectable: true,

groupable: true,

sortable: {

mode: "multiple",

allowUnsort: true

},

filterable: true,

scrollable: false,

pageable: true,

navigatable: true,

reorderable: true,

resizeable: true,

columnMenu: true

When I reorder my columns and afterwards click on the Column Menu to remove a column, it seems to remove the incorrect ones.
For example, initially I would have column A, B, C. When I reorder them to C, A, B and then click to remove column 'A', it would remove C (new column on the original position of column A).
Is this a bug or am I overlooking something (or do I need to configure something extra)?

Grid

answered on 21 Aug 2013