Questions on Kendo UI for jQuery Forum

1 answer

394 views

Using existing WCF Services for data source

Hello,
I've a quite-huge SL5 application that uses WCF services to retrieve data... I've been asked to create a subset of that project that uses kendo UI for web/mobile enviorment where SL5 cant be used.... I was wondering if all my BO and WCF services can be re-used...I think I'll use ASP.NET MVC4 with it's kendo ui package...thanks

Data Source

answered on 30 Jul 2013

1 answer

173 views

Expand icon disappears since update from v2013.1.319 to v2013.2.716

In our application we use treeviews on multiple places. We use an array as initial data.

treeview = new kendo.ui.TreeView(element, {

dataSource: new kendo.data.HierarchicalDataSource({ data: [rootModel] })

});

Rather then using the transport / read and schema functionality we hook to the expand event and do our own async (ajax) requests. This was all fine in v2013.1.319 but since we updated to v2013.2.716 what happens is the following.

- The initial data is represented in the tree view, including expand icons when the node has children available.
- We click an expand icon to load new data
- A ajax request is sent to our back-end
- The expand icon disappears completely
- Ajax request completes
- Current children are removed and the loaded children are inserted into the loaded node.
- The collapse icon appears

This only happens the first time a node is expanded. When expanding a node that was expanded before the icon does not disappears.

Is this by design? Can we somehow prevent the expand icon from disappear?.

On a side note: Is it possible to set a loading icon programmatically (similar to the "Binding to remote data" demo) during the ajax request?

TreeView

answered on 30 Jul 2013

5 answers

262 views

[Solved] TypeError thrown when trying to do drag and drop on treeview

I am getting the following error when I enable drag and drop on the treeview:

Uncaught TypeError: Cannot read property 'nextSibling' of undefined

This happens when I try and drag an item in the tree.

I am using Google Chrome but have also observed the same behavior in Firefox.

Here's the code I'm using to create the treeview:

this.dataSource = new kendo.data.HierarchicalDataSource({

schema: {

model: { id : "id", hasChildren: true, children: "layers" }

}

});

// treeview for navigation]

this._treeViewSelector = uiElement;

$(uiElement).kendoTreeView({

dragAndDrop: true,

checkboxes: {

checkChildren: true

},

dataSource: this.dataSource

});

And then to add data to the model I am using:

this.dataSource.add({id: id, text: name, expanded: true, checked: true, children: []});

Thanks for the help!

TreeView

answered on 30 Jul 2013

1 answer

96 views

[Solved] modelview close tap event passed to underlying widget

kendoui mobile version 2013.2.716, test on ipad mini with package with phonegap 2.9.0

(1) listview

<ul data-role="listview" data-type="group" id="itemListView" data-click="listViewClick" data-style="inset">

<li><label class="km-listview-label"><textarea id=${idval} onfocus="clearArea(this);" style="width:100%;height: 100px;" maxlength="150">input answer</textarea></label></li>

</ul>

(2) modelview

<div data-role="modalview" id="submitDialog" style="width: 40%; height: 13em;">

<div data-role="header" class="navbarStyle">

<div data-role="navbar"><h3>info</h3></div>

</div>

<div style="margin:.5em auto; text-align: center;font-size: 1.6em;" id="subcontent">submit ok</div>

<div style="margin:0 auto; text-align: center;font-size: 1.3em; padding-top:0.5em;">

<a data-click="closeSubmitDialog" type="button" data-role="button"

style="width:8em;background-color:#06b375;color:#ffffff;">Enter</a>

</div>

(3) javascript

function openSubmitDailog(msg){

if(MYAPP.dialogOPEN==false){

MYAPP.dialogOPEN=true;

var modalView=$("#submitDialog").data("kendoMobileModalView");

modalView.open();

if(msg)

$("#subcontent").html(msg);

}

function closeSubmitDialog(){

//setTimeout(function(){

var modalView=$("#submitDialog").data("kendoMobileModalView");

modalView.close();

MYAPP.dialogOPEN=false;

if(MYAPP.status==8){

init();

}

else if(MYAPP.status==4){

MYAPP.app.navigate("#loginpage");

}

//return;

//},100);

}

process :
openSubmitDailog -----> modelview popup in midled of view ------> press "Enter" in modelview --------> closeSubmitDialog ----------> modelview close
-----------> the underlying widget in listview can receive tap event when close modelview

for example , when close modelview , textarea in listview can receive tap event ,so keyboard will be shown up! I think this a bug in new version

ModalView

answered on 30 Jul 2013

2 answers

126 views

[Solved] grid Transport: pass just 1 param to Update (not the whole line)

Hi guys,
I'm working with a Read/Update trasport on kendo grid.
On Update I'd like to pass just 1 param to my server handler.

here is my grid:

$("#userGrid").data("kendoGrid").setDataSource(new kendo.data.DataSource({

//data: userList,

transport: {

read: {

url: MyAxitea_Config.baseURL + "Services/UserHandler.ashx/GetUserListByCurrentUser",

type: "POST"

},

update: {

url: MyAxitea_Config.baseURL + "Services/UserHandler.ashx/UpdateUserAuthById",

dataType: "json",

type: "POST"/*,

data: function (options) {

return {

id: options.IdUtente,

abilitato: options.Abilitato

}

}*/

}

},

schema: {

model: {

id: "IdUtente",

fields: {

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

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

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

IdPrivilegio: { type: "int", editable: false },

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

Abilitato: { type: "boolean" },

DataDisattivazione: { type: "date", editable: false },

}

},

pageSize: 10,

sort: { field: "IdPrivilegio", dir: "asc" }

}));

as you can see, in this case, only 1 param is editable ("Abilitato")
To update this field I only need tha updated value and the id.

With the current code, serverside, I get the whole line and since the object is quite big (for example it also contains a encoded string of the user picture),
I need to reduce the transported data.
Is that possible?

side question:
is it possible to implement transport only for update? using as dataSource a local list? I tried but I got only errors!
Thanks
Fabio!

Grid

answered on 30 Jul 2013

1 answer

186 views

Slider not working in Google Chrome

The slider is not being formatted properly in Google Chrome (using version 28.0.1500.72). A very basic example is available at
http://www.truckdown.com/slider.html. Works fine in all browsers but Google. Interestingly, the exact same code in JS Bin or jsFiddle works fine but when loaded on its own page, it does not format properly (slider bar or ticks do not show).

Slider

answered on 30 Jul 2013

1 answer

365 views

Destroy ColorPicker

Given I have an input element that has already been converted to a color picker. ( ex: $(input).kendoColorPicker(); )

How do i get a reference to that color picker to say set the value?
Destroy that color picker?

Thanks,
Jason

ColorPicker

answered on 30 Jul 2013

1 answer

120 views

[Solved] Problem with datasource

Hi, I'm trying to implement Scheduler in a MVC4 Razor project...
I follow the sample in your project, but i can't make appointment show.
Post some code:

public ActionResult Gantt()

{

ViewBag.Message = "GANTT";

return View(ganttService.GetGantt());

}

public virtual JsonResult Read([DataSourceRequest] DataSourceRequest request)

{

return Json(ganttService.GetGantt());

}

public class GanttViewModel : ISchedulerEvent

{

public string Description

{

get;

set;

}

public DateTime End

{

get;

set;

}

public bool IsAllDay

{

get;

set;

}

public string RecurrenceException

{

get;

set;

}

public string RecurrenceRule

{

get;

set;

}

public DateTime Start

{

get;

set;

}

public string Title

{

get;

set;

}



public virtual IQueryable<GanttViewModel> GetGantt()
{
    List<GanttViewModel> retValue = new List<GanttViewModel>();
 
    GanttViewModel md1 = new GanttViewModel {  Title = "TIT1", Description = "DES1", Start = DateTime.SpecifyKind(DateTime.Now, DateTimeKind.Utc), End = DateTime.SpecifyKind(DateTime.Now.AddHours(3), DateTimeKind.Utc) };
 
    retValue.Add(md1);
 
    return (retValue.AsQueryable());
}

@(Html.Kendo().Scheduler<

FinitenessEvo.Models.GanttViewModel>()

.Name("scheduler")

.Date(DateTime.Today)

.StartTime(DateTime.Today)

.Height(600)

.Timezone("Etc/UTC")

.Views(views =>

{

views.DayView();

views.WeekView(weekView => weekView.Selected(true));

views.MonthView();

views.AgendaView();

})

.DataSource(o => o.Model(m => { m.Id(f => f.Description); }).Read("Read","Home"))

)

Scheduler

answered on 30 Jul 2013

2 answers

220 views

Help me, (expand and Collapse of a node in treeview)

I want to use event ( onSelect) to help me (expand or Collapse ) one node in treeview
pls hepl me do it.
my code here:
(
function onSelect(e){
if (this.dataItem(e.node) != null) {
this.expand(e.node);
this.collapse(e.node);
}
}
)

TreeView

answered on 30 Jul 2013

7 answers

171 views

Can you have widgets without Application?

I want to use durandal for my application/mvvm/routing model, so I want to avoid using new kendo.mobile.Application(). In my test SPA, I'm trying to create a tabstrip:

1.<div data-role="tabstrip">

2. <a href="#home">Home</a>

3. <a href="#details">Details</a>

4.</div>

However, not only does it not work in my durandal view, i can't even get it to work in my index.html, unless I call kendo.mobile.Application():

01.<body>

02. <div data-role="view">

03. <div data-role="tabstrip">

04. <a href="#home">Home</a>

05. <a href="#details">Details</a>

06. </div>

07. </div>