Questions on Kendo UI for jQuery Forum

1 answer

123 views

[Solved] MVC Treeview - Data but no Treeview

I am trying to put together a page using HTML5/Kendo UI, and have a treeview defined. I actually had this working with a call to a data page, but now have added a WFC service to provide the data. The DATA appears to be making it to the page, as evidenced by the data showing up in the console (see initializeTreeView method below). HOWEVER...the treeview never shows up. I THINK it is something to do with the binding or definition of the datasource, but so far 1 and 1/2 days of research and trying different things has not gotten me anywhere...I am hoping someone here can spot my problem.

THE HTML: <div id="treeviewLeft"></div>

THE CONTROLLER CODE:

// Get Treeview data from database; ABL & nonABL

var mySpecSheetData = new SpecSheetData();

mySpecSheetData.GetTreeviewNodes('170', successFunction, failureFunction);

function successFunction()

{

$('#loadingIndicator').remove();

intializeTreeView();

}

function failureFunction()

{

console.log("********** ERROR **********");

}

function intializeTreeView()

{

var specData = new kendo.data.HierarchicalDataSource();

specData = mySpecSheetData.GetTreeviewData();

console.log(JSON.stringify(specData, null, 1));

alert("Get TreeviewNodeData Success!");

var treeView = $("#treeviewLeft").kendoTreeView({

autoBind: false,

expanded: true,

datasource: specData,

dataTextField: 'displayName'

}).data("kendoTreeView");

}

THE MODEL CODE:

function SpecSheetData() {

var treeNodes = [];

}

SpecSheetData.prototype.GetTreeviewNodes = function (repNumber, successFunction, failureFunction) {

var that = this;

$.ajax({

//Call for data goes here

type: 'GET',

url: 'SGLibraryDataService.svc/GetTreeviewDataByRepNum',

data: { RepNumber: repNumber },

dataType: 'json',

async: true,

success: function (returnedTreeNodeData) {

that.treeNodes = returnedTreeNodeData;

successFunction();

},

failure: function (e) {

failureFunction();

}

});

}

SpecSheetData.prototype.GetTreeviewData = function ()

{

return this.treeNodes;

}

TreeView

answered on 14 Aug 2013

1 answer

190 views

Multi-Series Stock Chart?

Hi

Currently I have a multi-series line chart using the following data:

{

"series": [{

"name": "Incident",

"data": [21, 16, 41, 6]

}, {

"name": "Change",

"data": [7, 6, 2, 0]

}],

"categories": ["/Date(1367391600000-0700)/", "/Date(1370070000000-0700)/", "/Date(1372662000000-0700)/", "/Date(1375340400000-0700)/"],

"trendCategories": [],

"KendoChartType": "line",

"LineWidth": 3,

"TooltipDateFormat": "MMM yyyy",

"categoryAxis_Type": "date"

}

and settings:

series: result.series,

categoryAxis: {

categories: result.categories,

majorGridLines: {

visible: false

},

type: "date"

}

What I'm wondering is there a way I can use this data format and settings on the Stock Chart? The only example of a multi-series stock chart I could find used data items for the points that had a value for each series.

Thanks

Charts

answered on 14 Aug 2013

5 answers

181 views

Remote view Razor syntax example

Are there any remote view examples in razor syntax anywhere? I have not been able to find any and need to get them working.

ListView (Mobile)

answered on 14 Aug 2013

2 answers

248 views

Update mysql with batch grid not updating

Hi,

I have been following several examples for the CRUD setup but seems i cannot get it to work.
Below is the code i run -
1. It reads perfectly.
2. It calls the save method
3. It sends the correct data to the update php file.
4. If i take the link with the head data from firebug and paste into the browser it do update the records
5. if i do the update from the grid it gets a 200 ok but nothing is updated in the database.

Where do i go wrong?
First is my html code
Next is my php file for update.

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

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

<divclass="console"></div>

<script>

$(document).ready(function (options) {

var company= '<?php echo $_GET["workingcompany"]; ?>';

var crudServiceBaseUrl = "../../data",

dataSource = new kendo.data.DataSource({

transport: {

read: {

url: "http://www.northpier.org/data/fetchcap.php?company="+company,

dataType: "json"

},

update: {

url: "http://www.northpier.org/data/Updatecap.php?company="+company,

type: "PUT",

dataType: "jsonp"

},

destroy: {

url: crudServiceBaseUrl + "/destroy.php",

dataType: "json"

},

create: {

url: crudServiceBaseUrl + "/create.php",

dataType: "json"

},

parameterMap: function(options, operation) {

if (operation !== "read" && options.models) {

return {models: kendo.stringify(options.models)};

}

},

batch: true,

pageSize: 30,

schema: {

model: {

id: "id",

fields: {

id: { type: "string", editable: false },

date_time: { type: "string"},

Name: { type: "string", editable: true },

Common: { type: "number", validation: { required: true, min: 0} },

SeriesA: { type: "number", validation: { required: true, min: 0} },

SeriesB: { type: "number", validation: { required: true, min: 0} },

SeriesC: { type: "number", validation: { required: true, min: 0} },

}

});

$("#grid").kendoGrid({

dataSource: dataSource,

filterable:true,

groupable:true,

navigatable: true,

pageable: true,

height: 400,

toolbar: ["create", "save", "update", "cancel"],

columns: [{

field: "Name",

title: "Name",

editable: true,

},

{

field: "Common",

title: "Common",

},

{

field: "SeriesA",

title: "Series A",

},

{

field: "SeriesB",

title: "Series B",

},

{

field: "SeriesC",

title: "Series C",

}],

columnMenu:{

messages:{

columns:"Choose columns",

filter:"Apply filter",

sortAscending:"Sort (asc)",

sortDescending:"Sort (desc)"

}

},

editable: true,

change: function() {

console.log("change event");

},

edit: function() {

console.log("edit event");

},

save: function() {

console.log("save event");

},

saveChanges: function() {

console.log("saveChanges event");

$('#grid').data().kendoGrid.refresh();

},

remove: function() {

console.log("remove event");

}

});

</script>

</div>

<?php

$dbhost = 'localhost:3036';

$dbuser = 'XXXXXXXXXXXXX';

$dbpass = 'XXXXXXXXXXXXXXX';

$conn = mysql_connect($dbhost, $dbuser, $dbpass);

if(! $conn )

{

die('Could not connect: ' . mysql_error());

}

parse_str(file_get_contents("php://input"),$post_vars);

$comp = $_GET['company'];

$mod = $_GET['models'];

$request = json_decode($mod);

foreach ($request as $product) {

$sql = "UPDATE captable

SET Name='$product->Name',

Common='$product->Common',

SeriesA='$product->SeriesA',

SeriesB='$product->SeriesB',

SeriesC='$product->SeriesC'

WHERE id='$product->id'";

mysql_select_db('XXXXXXXXXXX');

$retval = mysql_query( $sql, $conn );

if(!$retval )

{

echo "OUCH!";

//die('Could not update data: ' . mysql_error());

}

else

{

$result3 = null;

echo $result3;

}

mysql_close($conn);

?>

Grid

answered on 14 Aug 2013

1 answer

65 views

Scroller: Get Rid of "stretchiness"?

Hi,
I'm using a scroller for displaying readable paragraphs of text. Right now in the Icenium simulator and on iOS and android clients the scroller shows any left or right aspect of the swipe as a springy left or right animation and then the scroller text recenters. Is there any way to force a scroller to only scroll up and down and ignore any left/right info in the swipe so that the scroller doesn't feel loosely attached to the rest of the UI?

Thanks,
Dave

General Discussions

answered on 14 Aug 2013

6 answers

213 views

[Solved] Grouped Data & Multi-axis chart (ASP.NET MVC)

Hi,

Is it possible to have a multi axis chart using grouped data?

Country Project Product Date

Philippines Project1 Product A 1-May-13

Philippines Project1 Product B 1-May-13

Philippines Project1 Product C 1-May-13

Japan Project2 Product D 3-Jun-13

Japan Project2 Product E 3-Jun-13

I have the above data and I need to show a line chart of the number of distinct Projects per country per month in the firs axes and on the 2nd I want to show the number of Products per country per month in a column chart.

On the CategoryAxis is the date field and I've set the ChartAxisBaseUnit to Months.

The line chart seem to be working fine but he column chart isn't displaying as expected.

I could use some help.

Thanks,
Ronald

Charts

answered on 14 Aug 2013

1 answer

92 views

Grid sort no longer working in version 2013.2.716, sort is undefined

Hi

I have upgraded Kendo UI for ASP.NET MVC to version 2013.2.716 from 2013.1.319 (to fix grouping issue in IE8, which it has) but now the grid sort functionality is no longer working. In Fiddler I can see the sort value is 'undefined-asc' so the sort column is not getting set.

Is this an issue you are aware of and can help fix?

Kind regards
David

Grid

answered on 14 Aug 2013

1 answer

273 views

Culture file kendo.culture.fr-CA.min.js and calendar

How I can use it correctly. All accent are broken when I use this culture with calendar. A got wierd caracter instead. I try to open the file directly from the browser, same thing. But file open with "normal" text editor are OK. Do I need to set the charset in the js file? I try to set it to UTF8 in the <script> definition without success.

Thanks

Calendar

answered on 14 Aug 2013

10 answers

430 views

Prevent elastic scrolling

Hi,
I am evaluating Kendo UI framework to build cross device app!

I've put together a few Views and it looks good so far.
As I am trying it out on iPad, I noticed that the elastic scrolling behavior gives the app non-native like behavior!

If the web app is flicked past the bottom or top of the page, the page would elastically get tugged away from
the header or footer bar (essentially bottom/top of the screen).

How do I prevent the elastic scrolling in views so that the app behaves like native app (without elastic scrolling)?

I've tried setting the view scroller elatic property false on the view's data-init function and that didn't help.
Here is the two lines I've put in data-init function:
var scroller = e.view.scroller;
scroller.setOptions({ elastic: false });

(Found a few suggestions on the internet like blocking touch move on body, setting overflow to hidden on body
and none of them helped!).

Please let me know how to prevent elastic scrolling.
Thanks.

B.Manohar

General Discussions

answered on 14 Aug 2013

1 answer

66 views

CustomTemplate not displaying in toolbar for internal build kendoui.aspnetmvc.hotfix.2013.2.813.commercial

I have just had to upgrade to kendoui.aspnetmvc.hotfix.2013.2.813.commercial to fix some other issues with this control. However it now appears that the CustomTemplate is not displaying in the toolbar. I did note that in this package the dll is still version 2013.2.729.340, however it did fix my bug from the original 2013.2.729 major build.

Are you able to have a look at this and tell me if there is a quick fix

@(Html.Kendo().Editor()

.Name("sectionBlockEditor")

.HtmlAttributes(new { style = "width: 900px;height:530px" })

.Tools(tools => tools

.Clear()

.Formatting()

.CustomTemplate(ct => ct.Template("<label for='templateTool' style='vertical-align:middle;'>Background:</label> <select id='templateTool'><option value=''>none</option><option value='\\#ff9'>yellow</option><option value='\\#dfd'>green</option></select>"))

)

That didnt work although it should.

Editor

answered on 14 Aug 2013