Questions on Kendo UI for jQuery Forum

1 answer

98 views

I am using Kendo with the "Silver" color palette. I also use jQ UI for certain things but mainly want to re-use the jQ UI sprite for various images. Question: Do the Kendo themes correspond to any of the pre-rolled jQ UI themes?

Thanks

S

General Discussions

answered on 12 Mar 2013

3 answers

179 views

Mobile List View bound to JSON data source only shows in iPhone

Hi, I was wondering if anyone could help with an issue I am having with the mobile list view on anything but the iPhone.

I have a page that has a MVC grid on it and a mobile listview on it. The MVC grid is hidden when the size of the screen comes down and is hidden with media queries for responsiveness.

The code is below, but this only appears to work on the iPhone. The Android devices don't appear to show anything except the loading symbol?

@{

ViewBag.Title = "Racing Selections";

}

<h2>@ViewBag.Message</h2>

@(Html.Kendo().Grid<EachWayRatings.Models.spFetchQualifiers_Result>()

.Name("Grid")

.Columns(columns =>

{

columns.Bound(p => p.RH_DateTime).Title("Race Time").Format("{0:HH:mm}").Hidden(true);

columns.Bound(p => p.Course).Title("Course");

columns.Bound(p => p.H_Name).Title("Horse");

columns.Bound(p => p.Selection);

})

.DataSource(dataSource => dataSource

.Ajax()

.Read(read => read.Action("GetRaces", "Home"))

.PageSize(100)

.Group(group => group.Add(o => o.RH_DateTime))

)

.Pageable()

)

<div id="mobile-wrapper">

<div id="mobile">

<div data-role="view" id="grouped" data-init="mobileListViewDataBindInitGrouped" data-transition="" data-title="ListView" data-layout="databinding">

<ul id="grouped-listview"></ul>

</div>

<script>

function mobileListViewDataBindInitGrouped() {

var ds = kendo.data.DataSource.create({

schema: {data: 'Data'},

transport: { read: { url: "/Home/GetMobileRaces", dataType: "json" } },

group: "racetime"

});

$("#grouped-listview").kendoMobileListView({

dataSource: ds,

template: "${name}",

fixedHeaders: true

});

}

</script>

<script>

var app = new kendo.mobile.Application('#mobile');

</script>

General Discussions

answered on 12 Mar 2013

0 answers

419 views

Updating editable primary key field in grid

Hello everybody,

I am very new at KendoUI, so please excuse me if me question sounds silly.

I have a KendoUI grid on a page displaying some data. I defined data source with JSON POST methods to my ASP.NET MVC code and am using popup editing mode. I have schema definition in data source that goes something like this:

model: {

id: "SID",

fields: {

//kuiRecordKey: { type: "number", editable: false, nullable: true },

SID: { type: "number", editable: true, nullable: false },

Name: { validation: { required: true, maxlength: 50 }, type: "string" },

Second: { type: "number", validation: { required: false, min: 0, max: 1 } },

Third: { type: "number", validation: { required: false, min: 0, max: 1 } }

}

As you can see I am making primary key field editable. It does not make sense in all occasions, but in some it is necessary. If I run it like this, I will end up with a popup which will allow me to change the primary key field value and do POST of this changed value.

The real question here is: how do I get to know the ORIGINAL primary key value so I could know which row in database to change? I am trying to construct additional field here that would hold this value in case of an edit (kuiRecordKey - commented in the code above) and POST it so my processing logic would pick it up and use it accordingly.

Grid

asked on 12 Mar 2013

2 answers

212 views

Grid with existing JSON object not populating

I have already performed an ajax call to retrieve JSON. Part of the JSON result is used to display a graph, and another is intended to be used in the grid. When I set this up, I cannot get the data to display....I see an accurate count of records, but in the columns, I just see "unefinedundefinedundefinedundefined". Consequently, the JSON seems to work just fine to render the graph, but not the grid. I have also attached a screenshot. Here is what the code/HTML looks like:

JSON looks like this (just copied first few records...):
[{"p":"hasLogonId","s":"AD#10145","o":"AD_SID#S-1-5-21-1123561945-492894223-1417001333-12823"},{"p":"hasDtgStartU","s":"AD#113317","o":"1344848836"},{"p":"hasDtgEndU","s":"AD#128486","o":"1344855539"},{"p":"hasType","s":"AD#129917","o":"AD_logonType#3"},{"p":"hasAcctName","s":"AD#131092","o":"AD_acctName#3w546r1$"}]

Javascript:

$(document).ready(function() {

// Populate arrays for the menu items

var Qdata = [{"title":"query 3","description":"Return a graph of source and destination IPs limited to 5000"},{"title":"query 4","description":"Show list of all predicates and counts of each"},{"title":"query 5","description":"Show ontology"},{"title":"query 1","description":"DNS relationships 1000"},{"title":"query 6","description":"return first 500"},{"title":"query 6","description":"return first 500"}];

var Edata = [{"ep":"discover","title":"discover"},{"ep":"sc1","title":"sc1"},{"ep":"marple","title":"marple"}];

var JSO;

// Dropdown menu for the queries

$("#query-picker").kendoDropDownList({

optionLabel: "Queries",

dataTextField: "description",

dataValueField: "title",

dataSource: Qdata,

index: 0,

enable: false,

change: onChangeQ

});

// Dropdown menu for the endpoints

$("#endpoint-picker").kendoDropDownList({

optionLabel: "Endpoints",

dataTextField: "title",

dataValueField: "ep",

dataSource: Edata,

index: 0,

change: onChangeE

});

// OnChange event for endpoint dropdown

var epval;

function onChangeE() {

ddlist=$("#query-picker").data("kendoDropDownList");

ddlist.enable(true);

epval=$("#endpoint-picker").data("kendoDropDownList");

};

// OnChange event for query dropdown

function onChangeQ() {

var qval=$("#query-picker").data("kendoDropDownList");

$.getJSON('./query?ep=' + epval.value() + '&qry=' + qval.value(), function(JSO) {

$("#graph-container").empty();

var sigInst = sigma.init(document.getElementById('graph-container')).drawingProperties({

defaultLabelColor: '#fff',

defaultLabelSize: 14,

defaultLabelBGColor: '#fff',

defaultLabelHoverColor: '#000',

labelThreshold: 6,

defaultEdgeType: 'curve'

}).graphProperties({

minNodeSize: 1,

maxNodeSize: 10,

minEdgeSize: 1,

maxEdgeSize: 1

}).mouseProperties({

maxRatio: 32

});

$.each(JSO.data.results.graph.nodes, function(idx,obj) {

sigInst.addNode(obj.index,{'color' : '#E68A00','x':Math.random(),'y':Math.random(),'size' : obj.degree, 'shape' : 'circle', 'label' : obj.label, 'degree' : obj.degree});

});

$.each(JSO.data.results.graph.edges, function(idx,obj) {

sigInst.addEdge(obj.index, obj.source, obj.target, { 'label' : obj.label});

});

sigInst.draw();

var kdata=JSON.stringify(JSO.data.results.triples);

alert(kdata);

$("#main-body-TR").kendoGrid({

dataSource: {

data: JSO.data.results.triples,

schema: {

model: {

fields: {

s: { type: "string" },

p: { type: "string" },

o: { type: "string" }

}

},

scrollable: true,

sortable: true,

filterable: true,

pageable: {

input: true,

numeric: false

},

columns: [

{

field: "s",

title: "Subject"

},

{

field: "p",

title: "Predicte"

},

{

field: "o",

title: "Object"

}

]

});

var isRunning = false;

document.getElementById('stop-layout').addEventListener('click',function(){

if(isRunning){

isRunning = false;

sigInst.stopForceAtlas2();

document.getElementById('stop-layout').childNodes[0].nodeValue = 'Start Layout';

}else{

isRunning = true;

sigInst.startForceAtlas2();

document.getElementById('stop-layout').childNodes[0].nodeValue = 'Stop Layout';

}

},true);

document.getElementById('rescale-graph').addEventListener('click',function(){

sigInst.position(0,0,1).draw();

},true);

var greyColor = 'rgba(180,180,180,0.3)';

sigInst.bind('overnodes',function(event){

var nodes = event.content;

var neighbors = {};

sigInst.iterEdges(function(e){

if(nodes.indexOf(e.source)<0 && nodes.indexOf(e.target)<0){

if(!e.attr['grey']){

e.attr['true_color'] = e.color;

e.color = greyColor;

e.attr['grey'] = 1;

}

}else{

e.color = e.attr['grey'] ? e.attr['true_color'] : e.color;

e.attr['grey'] = 0;

neighbors[e.source] = 1;

neighbors[e.target] = 1;

}

}).iterNodes(function(n){

if(!neighbors[n.id]){

if(!n.attr['grey']){

n.attr['true_color'] = n.color;

n.color = greyColor;

n.attr['grey'] = 1;

}

}else{

n.color = n.attr['grey'] ? n.attr['true_color'] : n.color;

n.attr['grey'] = 0;

}

}).draw(2,2,2);

}).bind('outnodes',function(){

sigInst.iterEdges(function(e){

e.color = e.attr['grey'] ? e.attr['true_color'] : e.color;

e.attr['grey'] = 0;

}).iterNodes(function(n){

n.color = n.attr['grey'] ? n.attr['true_color'] : n.color;

n.attr['grey'] = 0;

}).draw(2,2,2);

});

};

$("body").on({

ajaxStart: function() {

$("#loading-query").removeAttr('style');

},

ajaxStop: function() {

$("#loading-query").css('display','none');

}

});

Grid

answered on 12 Mar 2013

0 answers

110 views

Important: Hotfix for DST-related hang in date charts

Hello,

All users of Kendo UI DataViz are urged to update to the latest internal build (v. 2012.3.1512). It fixes an important defect that can cause the Chart/StockChart to hang if the selected range contains a DST transition.

The build is also available on our public CDN.

Apologies for the caused inconvenience.

Charts

asked on 12 Mar 2013

0 answers

65 views

Important: Hotfix for DST-related hang in date charts

Hello,

All users of Kendo UI DataViz are urged to update to the latest internal build (v. 2012.3.1512). It fixes an important defect that can cause the Chart/StockChart to hang if the selected range contains a DST transition.

The build is also available on our public CDN.

Apologies for the caused inconvenience.

General Discussions

asked on 12 Mar 2013

2 answers

238 views

Save state of tree view node expansions to server ?

I want to post back to my server the state of the tree view node expansions.
When the tree view is displayed during a later visit to the page I would like to perform whatever .expand() calls are needed

I suppose the same info could be cookied to handle things on a per visitor basis.

What selectors or traversals would I need to capture such info?

Things would seem a little tricky because the children of node N can be open, and when N is closed those children remain open but not visible.

TreeView

answered on 12 Mar 2013

5 answers

168 views

Encountering bug in ActionSheet.

Hello,

When I click on the button to initiate an actionsheet, I'm getting the following error:

Microsoft JScript runtime error: Unable to get value of the property 'openFor': object is null or undefined. This is happening in kendo.all.min.js.

Here is the code:

<script type="text/javascript">
     function GoToPrev(e) {
         alert('c=' + e.context + ', t=' + e.target);
         document.forms[0].submit();
     }
</script>

<a data-role="button" data-rel="actionsheet" href="#goTo">Go To</a>

<ul data-role="actionsheet" id="goTo">
     <li><a data-action="GoToPrev">Previous Asset</a></li>
     <li><a data-action="GoToNext">Next Asset</a></li>
</ul>

Thx...Bob Baldwin
Trabon Solutions
Licensed users of Telerik Devcraft Complete

ActionSheet

answered on 12 Mar 2013

7 answers

636 views

Different Colour for Different value

Hi, Ive got a chart ( please see attachment ) I was wondering is it possible to set different colour for different value. The values are from 0 to 5 ( the labels are changed manually in the chart ).
Im using WCF service, that means im receiving data in json format.
Thank You in advance,
neil

Charts

answered on 12 Mar 2013

3 answers

281 views

Kendo Grid does not support date picker server update

I can get the date to display using this code, however, when it get posted to the server it just posts it as 01/01/0001. Also, every-time edit is hit why does the date column become empty?

iwofreportSource = new kendo.data.DataSource({
transport:
{
read: {
url: '/iwof/get-iwof-report/',
dataType: 'json'
},
create: {
url: '/iwof/add-iwof-report',
dataType: 'json',
type: 'Post',
complete: function (e) {
$("#iwof").data("kendoGrid").dataSource.read();
}
},
update:
{
url: '/iwof/update-iwof-report',
dataType: 'json',
type: 'Post',
complete: function (e) {
$("#iwof").data("kendoGrid").dataSource.read();
}
},
destroy: {
url: '/iwof/delete-iwof-report',
type: 'POST',
dataType: 'json'
}
},
async: true,
batch: false,
pageSize: 10,
schema: {
"model": {
id: "Id",
fields: {
Id: { editable: false, nullable: true },
DueToAE: { editable: true, type: "date" },
}
}
}

});

var grid = $("#iwof").kendoGrid({
dataSource: iwofreportSource,
scrollable: false,
pageble: true,
filterable: false,
resizable: true,
toolbar: ["create"],
width: 1000,
sortable: { mode: 'multiple' },
pageable: {
refresh: true,
pageSizes: true
},
columns: [
{ field: "DueToAE", title: "Due To AE", format: "{0:MM/dd/yyyy}" },
],
editable: "inline", // enable inline editing

});

DatePicker

answered on 12 Mar 2013