Questions on Kendo UI for jQuery Forum

0 answers

193 views

How to change DataSource.Read URL after initial read

Hi,
I have a tree view which uses dynamic loading from server when expanded. In my case there are two different URL's from where the initial and the child data is to be fetched. I tried changing the read URL from script but it is defaulted back when the user expands the tree which should not be the case.

Below is my tree
@(Html.Kendo().TreeView()
.Name("MyTree")
.DataTextField("Name")
.DataSource(dataSource => dataSource
.Read(read => read.Url("../api/User/?getAll=false").Type(HttpVerbs.Get))
)
)

I then change the read url in script as following

var tree = $("#MyTree").data("kendoTreeView");
tree.dataSource.transport.options.read.url = "../api/User/?getChildren=true";

But when the tree is expanded the URL is still /api/User/?getAll=false&id=1 instead of ./api/User/?getChildren=true&id=1

TreeView

asked on 12 Mar 2013

1 answer

143 views

Timepicker with Timespans

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

DatePicker

answered on 12 Mar 2013

2 answers

184 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

79 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

155 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

374 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

178 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

90 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

49 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

205 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