Questions on Kendo UI for jQuery Forum

14 answers

443 views

I seem to be having trouble displaying events in the calendar. I know that I am able to get the JSON results without an issue as I created a test page which simply echo's the JSON results. I must be missing something in the code I modified and likely it is very, very simple. On a side note, the scheduler page is loaded up within a tab strip item, but I don't think that makes a difference as I don't see the results when I connect to the page directly.

Help is much appreciated...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>Appointment Schedular</title>

<link href="css/Autovation.css" rel="stylesheet" />

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

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

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

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

</head>

<script id="editor" type="text/x-kendo-template">

<h3>Edit meeting</h3>

<p>

<label>Title: <input name="title" /></label>

</p>

<p>

<label>Start: <input data-role="datetimepicker" name="start" /></label>

</p>

<p>

<label>Start: <input data-role="datetimepicker" name="end" /></label>

</p>

</script>

<?php

require_once 'dbModules/DataSourceResult.php';

require_once 'dbModules/SchedulerDataSourceResult.php';

require_once 'Kendo/Autoload.php';

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

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

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

$result = new SchedulerDataSourceResult('mysql:host=localhost;dbname=appdata', 'root', '...');

$type = $_GET['type'];

$columns = array('ID', 'EstimateID', 'CustomerID', 'Subject', 'Location', 'Description', 'StartTime', 'EndTime', 'VehicleType','IsAllDay', 'Synchronized');

switch($type) {

case 'create':

$result = $result->create('Appointments', $columns, $request->models, 'ID');

break;

case 'update':

$result = $result->update('Appointments', $columns, $request->models, 'ID');

break;

case 'destroy':

$result = $result->destroy('Appointments', $request->models, 'ID');

break;

default:

$result = $result->read('Appointments', array('ID'), $request);

break;

}

echo json_encode($result, JSON_NUMERIC_CHECK);

exit;

}

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

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

$create->url('scheduler.php?type=create')

->contentType('application/json')

->type('POST');

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

$read->url('scheduler.php?type=read')

->contentType('application/json')

->type('POST');

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

$update->url('scheduler.php?type=update')

->contentType('application/json')

->type('POST');

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

$destroy->url('scheduler.php?type=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();

$IDField = new \Kendo\Data\DataSourceSchemaModelField('ID');

$IDField->type('number')

->from('ID')

->nullable(false);

$estimateID = new \Kendo\Data\DataSourceSchemaModelField('EstimateID');

$estimateID->type('number')

->from('EstimateID')

->defaultValue('No title')

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

$customerID = new \Kendo\Data\DataSourceSchemaModelField('CustomerID');

$customerID->type('number')

->from('CustomerID')

->defaultValue('No title')

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

$subjectField = new \Kendo\Data\DataSourceSchemaModelField('Subject');

$subjectField->type('string')

->from('Subject');

$locationField = new \Kendo\Data\DataSourceSchemaModelField('Location');

$locationField->type('string')

->from('Location');

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

$descriptionField->type('string')

->from('Description');

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

$startField->type('datetime')

->from('StartTime');

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

$endField->type('datetime')

->from('EndTime');

$vehicleTypeField = new \Kendo\Data\DataSourceSchemaModelField('VehicleType');

$vehicleTypeField->type('string')

->from('VehicleType');

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

$isAllDayField->type('boolean')

->from('IsAllDay');

$SynchronizedField = new \Kendo\Data\DataSourceSchemaModelField('Synchronized');

$SynchronizedField->type('boolean')

->from('Synchronized');

$model->id('ID');

$model->addField($IDField);

$model->addField($estimateID);

$model->addField($customerID);

$model->addField($subjectField);

$model->addField($locationField);

$model->addField($descriptionField);

$model->addField($startField);

$model->addField($endField);

$model->addField($vehicleTypeField);

$model->addField($isAllDayField);

$model->addField($SynchronizedField);

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

$schema->data('data')

->errors('errors')

->model($model);

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

$dataSource->transport($transport)

->schema($schema)

->batch(true);

//$editable = new \Kendo\UI\SchedulerEditable();

//$confirmation = true;

//$editable->confirmation($confirmation);

//$editable->template('$editor')//;

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

$scheduler->timezone('America/Toronto')

->date(new DateTime())

->height('850')

->addView(array('type' => 'day', 'startTime' => new DateTime('7:00',new DateTimeZone('America/Toronto'))),

array('type' => 'week', 'selected' => true, 'startTime' => new DateTime('7:00',new DateTimeZone('America/Toronto'))), 'month', 'agenda')

->dataSource($dataSource);

?>

<?php

echo $scheduler->render();

?>

Scheduler

answered on 24 Sep 2013

1 answer

65 views

parameterMap to TaskViewModel transfer is broken

I have been tearing apart these blogs to find my answers since they are not yet in the (beta) documentation. My understanding is I should be able to pass data back to my ReST call by specifying what fields I want in the "parameterMap". I can see the transfer happening in the browser. Unfortunately this data is not to be found when I break in my controller code where the TaskViewModel is a parameter. Oh, and the "options.model" value is null inside the parameterMap function I have.

Am I correct in assuming this transfer of values from the parameterMap to the controller happens through the TaskViewModel? Or do I need to connect something manually? HOW DO I GET MY VALUES TO THE CONTROLLER? help please

Scheduler

answered on 24 Sep 2013

2 answers

222 views

Event binding for dropdownlist

Hi

Using MVVM techniques I have bound a dropdown list like this (this element is sitting within a Kendo UI mobile View):

<select id="treatmentTypesSelect" name="TreatmentTypes" data-role="dropdownlist" data-bind="source: TreatmentTypes, value: TreatmentTypeId, events: { click: onTreatmentTypeChange}" data-change="onTreatmentTypeChange" data-text-field="name" data-value-field="value" required required data-required-msg="Treatment Type is required"></select>

The function onTreatmentTypeChange is defined in the bound viewModel of the View.

Using the Icenium simulator the onTreatmentTypeChange event is fired and works properly, but once deployed to an android device the event is no longer raised.

I tried changing it to this:

<select id="treatmentTypesSelect" name="TreatmentTypes" data-role="dropdownlist" data-bind="source: TreatmentTypes, value: TreatmentTypeId" data-change="onTreatmentTypeChange" data-text-field="name" data-value-field="value" required required data-required-msg="Treatment Type is required"></select>
But this does not work either.

What is the correct way to bind events (in particular the change event)?

General Discussions

answered on 23 Sep 2013

1 answer

126 views

Create, Update, Destroy Not Calling WebMethods

I am using the following in my dataSource:

transport: {
read: {
contentType: "application/json; charset=utf-8",
url: "DepartmentHome.aspx/GetMembers",
dataType: "json"
},
create: {
url: "DepartmentHome.aspx/CreateMember",
type: "POST"
},
update: {
url: "DepartmentHome.aspx/EditMember",
type: "POST"
},
destroy: {
url: "DepartmentHome.aspx/DeleteMember",
type: "POST"
}
},

and in my code behind I have defined the WebMethods as such:

[WebMethod]
public static void CreateMember()
{
File.WriteAllText(@"C:\testing.txt", "This is a create.");
}

[WebMethod]
public static void EditMember()
{
File.WriteAllText(@"C:\testing.txt", "This is an update.");
}

[WebMethod]
public static void DeleteMember()
{
File.WriteAllText(@"C:\testing.txt", "This is a delete.");
}

When I create, edit, or delete a record it looks as if it has done it in the grid but it never calls the associated WebMethod.
I do see in firebug that it sends:
POST CreateMember
POST EditMember
POST DeleteMember

When I click on the associated buttons the POST data contains the parameters for that row:
FirstName: John
Id: 1
LastName: Smith

The Response back from the POST is just all the html from the page DepartmentHome.aspx.

I am using a WebMethod for read and that is working perfectly. I don't know what the difference would be?

I have attached the complete source code.

Any help would be greatly appreciated.

Grid

answered on 23 Sep 2013

1 answer

79 views

Live Updated StockChart (candlestick) with volume

Hi,
How do you define a stockchart series who's time interval is x minutes? as opposed to daily?

Any examples of a live / simulated live updated stockchart with volume? thanks!

Charts

answered on 23 Sep 2013

1 answer

251 views

Scheduler data source to scheduler bind error

Dear all,
i'm new to kendo ui and i'd tried the samples of scheduler
with the scheduler datasource along with AJAX and WCF
the sample source below

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="sheduler.aspx.cs" Inherits="WebApplication1.sheduler" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title></title>

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

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

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

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

<script src="App_Global/js/kendo.web.min.js"></script>

</head>

<body>

<div></div>

<div id="example" class="k-content">

<div id="scheduler"></div>

</div>

<script>

var url = 'Service1.svc/';

var dataal;

var dataSource1 = new kendo.data.SchedulerDataSource({

batch: true,

data:dataal,

transport: {

read: function (options) {

$.ajax({

url: url + "getsheduler",

dataType: "json",

async: false,

cache:false,

success: function (result) {

options.success(JSON.parse(result.d));

},

error: function (result) {

alert("error");

}

});

}

},

schema: {

model: {

id: "taskId",

fields: {

taskId: { from: "taskid", type: "number" },

title: { from: "taskname", defaultValue: "No title", validation: { required: true } },

start: { type: "date", from: "credate" },

end: { type: "date", from: "duedate" },

startTimezone: { from: "StartTimezone" },

endTimezone: { from: "EndTimezone" },

description: { from: "Description" },

recurrenceId: { from: "RecurrenceID" },

recurrenceRule: { from: "RecurrenceRule" },

recurrenceException: { from: "RecurrenceException" },

ownerId: { from: "projectid", defaultValue: 1 },

isAllDay: { type: "boolean", from: "IsAllDay" }

}

});

$(document).ready(function () {

$("#scheduler").kendoScheduler({

date: new Date("2013/9/13"),

startTime: new Date("2013/9/13 07:00 AM"),

selectable: true,

height: 600,

views: [

"day",

"week",

{ type: "month", selected: true },

],

timezone: "Etc/UTC",

dataSource: dataSource1

});

</script>

</body>

</html>

and WCF source below as

using System;

using System.Collections.Generic;

using System.Linq;

using System.Runtime.Serialization;

using System.ServiceModel;

using System.ServiceModel.Activation;

using System.ServiceModel.Web;

using System.Text;

using Newtonsoft.Json;

using System.Data.SqlClient;

using System.Data;

namespace WebApplication1

{

[ServiceContract(Namespace = "")]

[AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]

public class Service1

{

String strConnString = "database=sample; server=URCI74;uid=sa;password=local";

[OperationContract]

public void DoWork()

{

// Add your operation implementation here

return;

}

// Add more operations here and mark them with [OperationContract]

[OperationContract]

[WebGet]

public object getsheduler()

{

SqlConnection con = new SqlConnection(strConnString);

SqlDataAdapter adpt = new SqlDataAdapter();

DataSet ds = new DataSet();

adpt = new SqlDataAdapter(

"select projectid as ownerId, taskname as title ,credate as start,duedate [end],startTimezone,endTimezone,description,recurrenceId,recurrenceRule,recurrenceException,isAllDay from sheduler

"

, con);

adpt.Fill(ds);

return JsonConvert.SerializeObject(ds.Tables[0]);

}

but it the data did not bind to the scheduler calendar and if i'm giving the data source without schema it works fine

and my output from wcf service below in attached image

please solve the above issue

thanks & regards
-santhosh

Scheduler

answered on 23 Sep 2013

7 answers

434 views

How to show a data table of values below the multiple axes chart ?

Hi,

We have an ASP.NET MVC 3 project in which we need to show a chart similar to the one below :

http://demos.telerik.com/aspnet-mvc/razor/chart/multipleaxes

Except that

1> I don't need to stack columns above each other .
2> I want to show a table below the chart with values as in this example - http://telerik.com/help/aspnet-ajax/chart-plot-area-data-table.html

Can you please help in finding out the correct property / setting for the kendo chart for requirement #2 ?

Regards,
Sandeep.

Charts

answered on 23 Sep 2013

1 answer

74 views

API for Closing tabs?

Hello,
I've got 2 questions.
I'm using Tabstrips and i would like to let the user adding and closing them dinamically. Of course adding is supported and well documented, but i couldn't find how to do it without workaround like the one reported here:
http://www.kendoui.com/forums/kendo-ui-web/tabstrip/issues-with-dynamically-openned-tabs-and-closing-it.aspx
Is there an official way to make the tabs closable? Like "closable: true"?

Thanks in advantage.

TabStrip

answered on 23 Sep 2013

1 answer

89 views

Difficulty naming parameter on remote call

I am attempting to hit an ASP.NET MVC controller action with the Kendo Datasource from the "Autocomplete" widget. The controller looks a bit like this ..

public JsonResult Aspect(string term){

// ...

}

So I need the actual URL parameter to be called "term" from the dataSource. So given this..

$(".autocomplete").kendoAutoComplete({

dataTextField: "Name",

dataSource: {

type: "json",

transport: {

read: "/search/aspect",

data: { term: $(this).val() }

}

});

I can't seem to get this to work though.

Also, it is important to note that there are MULTIPLE auto-completes on the page with dynamic identities. So it cannot work to call a specific selector.

I have been looking for a few hours, and I'm not seeming to find a way to do this.

Data Source

answered on 23 Sep 2013

2 answers

672 views

Custom filter using grouped DropDownList

Hi,

I've set up a Kendo Grid, and am customising the filter interface to show all values in a DropDownList. Through the DropDownList DataSource object I'm grouping on the field to be displayed (thereby removing any duplicates).

This works fine and shows exactly those values which should show, however on selecting a value I get an error in the kendo.all.js change function at the following line:

sourceValue = sourceItem.get(field);

The error being "Object doesn't support property or method 'get'"

Is this a bug in Kendo, or am I doing something wrong?!

For reference, the DropDownList is set up using the following code which is called from the filter UI function for each individual column (this applies to several columns). The filter function is there to filter the values based on all filters applied to the grid (i.e. so each filter only shows those values which are currently present in the grid according to applied filters):

function setFilter(url, element, field) {

element.kendoDropDownList({

dataSource: {

transport: {

read: {

url: url,

data: {

filter: function() {

var filters = $("#AccountsGrid").data("kendoGrid").dataSource.filter();

var result = {};

if (filters) {

result.logic = filters.logic;