Questions on Kendo UI for jQuery Forum

1 answer

140 views

I'm having difficulty getting the TimePicker binding with my TimeSpan properties. I have a ListView where I want to show the timespan properties however it only says [Object object]. With the DateTime object these properties are displayed but not with the TimeSpan object. Any ideas? I haven't seen any examples using the timespan object even though it is supported, I'm using the fluent syntax. Thanks

Date/Time Pickers

answered on 12 Mar 2013

2 answers

180 views

TabStrip content pane keeps initial height after resizing

Hi,

I have an issue with TabStrip content pane which seems to keep initial height or the height set after the first resize operation. I tried a couple of solution found on the forums and i did my own but it still has the same issue. The solution available on http://jsfiddle.net/dimodi/8etzB/ has the same problem. To see it please do the following: 1- resize once and go to next tab (this part is working nice), 2-now resize second time and go to other tab. Other tab will be activate with previous height. Now back to the tab which was active during second resize. The height of this tab will be back to previous height.
I am not sure but it seems that tabstrip keeps somewhere the height of the first resize and then overwrites the value i set on resize event.
I need tab strip content height to be set to available height after each resize.

Thanks,

TabStrip

answered on 12 Mar 2013

1 answer

73 views

Kendo Theme and jQ UI pre-rolled themes

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

150 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

366 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

170 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

89 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

48 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

198 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

136 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