Questions on Kendo UI for jQuery Forum

1 answer

263 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

150 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

133 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

430 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.3K+ 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

1 answer

1.1K+ views

[Solved] Grid conditional column bound

Hi,

Code block is below.
I want to show value conditionally and i can not edit model block .

is there a way to do this.
i know it's not working like i do .

@(Html.Kendo().Grid(Model)

.Name("somegrid")

.Columns(columns =>

{

columns.Bound(Folder => Folder.ParentId).Template(@<text>

<strong>@if (item.ParentId > 0)

{

<span

>@callfunction(item.Name)   (call some serverside function using item variable which returns string ( but not parentId another one ) )</

span>

}

else

{

<span>@call some serverside function</span>

}

</strong>

</text>);

columns.Command(command => { command.Edit().Text("Güncelle").UpdateText("Güncelle").CancelText("İptal"); command.Destroy().Text("Sil"); }).Width(180);

})

.ToolBar(toolbar => toolbar.Create().Text("Yeni kayit ekle"))

.Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("FolderEditPopup").DisplayDeleteConfirmation("Kaydı silmek istediğinizden emin misiniz ?"))

.Pageable(pager => pager

.Messages(messages => messages.Display("{0} - {1}. Toplam {2} kayıt")

.ItemsPerPage("")

.First("İlk sayfa")

.Last("Son sayfa")

.Next("Sonraki")

.Page("Sayfa")

.Previous("Önceki")

.Refresh("Yenile"))

)

.Sortable()

.Scrollable()

.Events(e => e.Edit("onEdit"))

.DataSource(dataSource => dataSource

.Ajax()

.PageSize(100000)

.Model(model =>

{

model.Id(p => p.IntId);

model.Field(p => p.ParentId).DefaultValue(0);

})

.Events(events => events.Error("error_handler"))

.Create(update => update.Action("FolderPopup_Create", "Config"))

.Read(read => read.Action("FolderPopup_Read", "Config"))

.Update(update => update.Action("FolderPopup_Update", "Config"))

.Destroy(update => update.Action("FolderPopup_Destroy", "Config"))

)

Thanks for help

Grid

answered on 21 Aug 2013

1 answer

189 views

Intellisense for kendo ui in general (Javascript)

Hi,

I am trying to get the intellisense to work with my VS2010 express.

I have followed the instruction from the thread below :
http://www.kendoui.com/forums/kendo-ui-web/general-discussions/kendo-ui-intellisense-support.aspx
Everything is working as shown in the tread.

But I would like to know the "level" of intellisense that it supports. Or how detail the current Intellisense would help us to code.

For example, when I type
$('foo').kendo....
It will list all the available kendo object type available
kendoAutoComplete
kendoCalendar
kendoComboBox, etc......

so if I want to initialize a kendoAutoComplete
I will use
$('#foo').kendoAutoComplete

The question I want to ask is that ...
does the intellisense stops right here ?
for example, after I have type $('#foo').kendoAutoComplete, it does list all the avaialbe options for initalizing the auto complete control

now, let say i want to initiazlie the autocomplete control with a datasource.
the correct syntax is

$('#foo').kendoAutoComplete({ dataSource: data});

but if I then type
$('#foo').kendoAutoComplete({ d
the intellisense won't suggest that there is a dataSource property available such that I can initilize the autoComplete control with the specified datasource.

Is the Intellisense suppose to suggest the dataSource and other properties?
As suggested by Faisal in this thread
http://www.kendoui.com/forums/kendo-ui-web/general-discussions/intellisense-in-visual-studio.aspx

Thank you

General Discussions

answered on 21 Aug 2013