Questions on Kendo UI for jQuery Forum

1 answer

85 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

111 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

172 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

350 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

111 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

195 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

150 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>

08.

09. 

10.

11. <script>

12. window.kendoMobileApplication = new kendo.mobile.Application();

13. </script>

14.</body>

Is there a way I can "activate" the widgets without having to use the Application constructor/kendo views/etc.?

Application

answered on 29 Jul 2013

1 answer

87 views

[Solved] After edit of Grid cell, the value is overlapped with a zero.

When I edit a cell in my grid, a zero ("0") is placed in the cell, overlapping the cell value. This zero does not show when the grid loads, and it does not save to the database when the update happens. If I navigate away and come back, the zero is gone. It only happens if I edit the cell; if I only click in the cell and initiate the inline editing, no zero appears.
My page is an SPA.
Attached is a zoomed in screenshot showing the phantom zero.
This is the code that builds the grid:

function fnLoadStorageVaults(storageid) {

var ds = new kendo.data.DataSource({
transport: {
read: {
url: URL_GETVAULTS,
dataType: "json",
type: "GET",
data: { StorageID: storageid }
},
update: { dataType: "json", url: URL_UPDATEVAULTS, type: "POST" },
destroy: { url: URL_DELETEVAULT, type: "POST" },
create: { url: URL_INSERTVAULT, type: "POST" },
parameterMap: function (data, type) {
return kendo.stringify(data);
}
},
autoSync: true,
schema: {
model: {
id: "StorageVaultID",
fields: {
VaultNumber: { type: "string", editable: true },
Section: { type: "string", editable: true },
Row: { type: "string", editable: true },
DateFrom: { type: "date", editable: true },
DateTo: { type: "date", editable: true },
WarehouseID: { type: "number", editable: true }
}
}
}
});

$("#VaultGrid").kendoGrid({
dataSource: ds
, sortable: true
, editable: true
, navigable: true
, columns: [
{ field: "WarehouseID", title: "Warehouse", width: "60px" }
,{ field: "VaultNumber", title: "Vault Nbr.", width: "60px" }
, { field: "Section", title: "Section" }
, { field: "Row", title: "Row" }
, { field: "DateFrom", title: "Date In" }
, { field: "DateTo", title: "Date Out" }
]
});

}

General Discussions

answered on 29 Jul 2013

10 answers

561 views

[Solved] Highlighting points on Area/Line Charts

Hello,

Is it possible to highlight a specific point on a line or area chart. For example, if I have a graph showing the number of sandwiches sold each day in a cafe and on the 10th day of the month they raise the price by 5% can I add a marker to the 10th so show that an event happened on that day?

Thanks

Ric

Charts

answered on 29 Jul 2013

2 answers

738 views

Add Filter to Chart Datasource

How can I add Filter to Chart Data source. I want to build chart that show data for each week in a giving year. The use user will pick date from drop down and the chchart will get refreshed with new data

Charts

answered on 29 Jul 2013