Questions on Kendo UI for jQuery Forum

1 answer

215 views

Make ModalView appear on the center of the screen

Hi I'm a newbie in Kendo UI Mobile, I wanted to know how to make a modalview appear on the center of the screen, just like the one in the demo (demos.kendoui.com/mobile/modalview/index.html). I've been trying to manipulate the CSS but still can't find the easy way to do it.

Another question is also what is the best way to center all the contents in the ModalView?

By the way here's my code, which as you can see the ModalView appears on the top left of the screen instead of in the middle:

01.<!DOCTYPE html>

02.<html>

03.<head>

04. <title>Social Leaderboard</title>

05. <link rel="stylesheet" type="text/css" href="https://da7xgjtj801h2.cloudfront.net/2013.3.1119/styles/kendo.common.min.css">

06. <link rel="stylesheet" type="text/css" href="https://da7xgjtj801h2.cloudfront.net/2013.3.1119/styles/kendo.default.min.css">

07. <link rel="stylesheet" type="text/css" href="https://da7xgjtj801h2.cloudfront.net/2013.3.1119/styles/kendo.mobile.all.min.css">

08.

09. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="application/javascript"></script>

10. <script src="https://da7xgjtj801h2.cloudfront.net/2013.3.1119/js/kendo.mobile.min.js" type="application/javascript"></script>

11.

12. <script>

13. this.application = new kendo.mobile.Application(document.body);

14.

15. $(document).ready(function Start(){

16. $("#view-modal").data("kendoMobileModalView").open();

17. });

18. </script>

19.</head>

20.<body>

21. <div data-role="view" data-title="Modal Test" id="view-modaltest">

22. <header data-role="header">

23. <div data-role="navbar">

24. <a data-role="button" data-align="left" id="btnBack">Back</a>

25. <span data-role="view-title">Leaderboard</span>

26. </div>

27. <ul data-role="buttongroup" data-index="0" data-select="OnSelectTimeFrame">

28. <li>All-Time</li>

29. <li>Monthly</li>

30. <li>Weekly</li>

31. </ul>

32. </header>

33. <footer data-role="footer">

34. <div data-role="tabstrip" class="tabstrip" data-select="OnSelectLeaderboard">

35. <a data-icon="globe">Global</a>

36. <a data-icon="contacts">Friends</a>

37. </div>

38. </footer>

39. </div>

40.

41. <div data-role="modalview" id="view-modal" style="width: 300px; height: 240px;">

42. <header data-role="header">

43. <div data-role="navbar">

44. <span>Challenge Friend</span>

45. </div>

46. </header>

47. <div>

48. <img src="https://fbcdn-profile-a.akamaihd.net/static-ak/rsrc.php/v2/yo/r/UlIqmHJn-SK.gif">

49. <span> X </span>

50. <img src="https://fbcdn-profile-a.akamaihd.net/static-ak/rsrc.php/v2/y9/r/IB7NOFmPw2a.gif">

51. </div>

52. <div>

53. <a data-role="button" id="btnOKChallenge">OK</a>

54. <a data-role="button" id="btnCancelChallenge">Cancel</a>

55. </div>

56. </div>

57.</body>

58.</html>

Thanks heaps!

Dede

ModalView

answered on 20 Jan 2014

1 answer

327 views

Getting input values from input within Editor

Hi - quick question,

I want to pre-populate the editor with inputs of different types (<input> tag such as textboxes, checkboxes, etc.) then have the user fill out these inputs and then when the user saves, i will go and grab the form input values and post them to the server.

this seems fairly straightforward, and the Editor renders all of the inputs on the form perfectly, but when i use jquery to peer into the $("#editor").data("kendoEditor").value(); object, none of the inputs values have been populated with the data entered. now, if i type into the editor window in another location (not in the input), then i can see those changes in the value option just fine. does the Editor accommodate this? or am i just missing something?

Thanks,

Editor

answered on 20 Jan 2014

10 answers

368 views

TreeView templates not applied when adding nodes?

I have a treeView that gets created with a template. Similar to:

treeView = $("#treeView").kendoTreeView({
dragAndDrop: true,
select: onTreeViewSelect,
dataSource: [
... datasource contain entries with id's and types.
],
template: "#= item.text #<input type='hidden' class='data-id' value='#= item.id #' /><input type='hidden' class='data-type' value='#= item.type #' />"
}).data("kendoTreeView");

This allows me to get the id and type of a node. This works great during initialization, however I also have a button that allows users to add new nodes to the tree.

The problem is that when I add a node to the tree via:

treeView.append({
id: data,
text: 'SomeText',
type: 'organizationFolder',
template: "#= item.text #<input type='hidden' class='data-id' value='#= item.id #' /><input type='hidden' class='data-type' value='#= item.type #' />"
}, selectedNode);

It does not get the template applied. (In the example posted, I also attempted to set the template explicitly in the node. I have tried it without as well and it still does not work).

Is this a known issue? Is there any workaround for this?

TreeView

answered on 20 Jan 2014

1 answer

550 views

Conditional rendering syntax

Hi,

I'm looking to conditionally render HTML-encoded values or literal values depending on a javascript property, such as the following:

<script id="template-cell" type="text/x-kendo-tmpl">

<td><div class="key-content"># if (data.encode === true) { # #= data.key # # } else { # #: data.key # # }#</div></td>

</script>

But all the hash marks reduce readability and are error-prone. What is a better way to handle this?

Thank you.

Templates

answered on 20 Jan 2014

5 answers

350 views

How to open links externally

Using Kendo UI Mobile v2013.1.319 and PhoneGap 2.6.0 (iOs), I'm no longer able to open links in the Safari browser.

This worked well on previous versions:

<a href="http://apache.org" data-rel="external" target="_blank">

But now it still opens in the same webview as the app itself.

Any tips how to force the links to open externally? Preferably without using javascript.

General Discussions

answered on 20 Jan 2014

4 answers

326 views

Update and Delete not working in GRID

Here i am attaching the code and php file .........i can read the data from the data base .but cant update and delete...
after deletion value still in the database.. please help me..
<html>
<head>
<title>GRID PHP</title>
<link rel="stylesheet" href="CSS/kendo.common.min.css" />
<link rel="stylesheet" href="CSS/kendo.blueopal.min.css" />
<script type="text/javascript" src="JS/jquery.min.js"></script>
<script type="text/javascript" src="JS/kendo.all.min.js"></script>
<script type="text/javascript">
$(function() {
$("#grid").kendoGrid({
dataSource: {
transport: {
read:{
url: "data/Fetch.php",
dataType : "json",
//type: "GET"
},
update: {
url: "data/Update.php",
type: "POST"
},
destroy: {
url: "data/Delete.php",
type: "DEETE"
},
create: {
url: "data/product.php",
type: "PUT"
},
error: function(e)
{
alert(e.responseText);
},

},
//batch: true,
schema: {
data: "data",
model: {
id: "pid",
fields: {
pid: { editable: false },
name: { type: "string",validation: { required: true}},
price: { type: "number",validation: { required: true} },
description: {type: "string"},
}
}
},
pageSize: 10
},
editable: "popup",
height: 400,
selectable : "row",
//filterable: true,
//sortable: true,
pageable: true,
toolbar: ["create","save"],
columns: [
{
field:"pid",
title: "PID",
width:"50"
//filterable: true
},
{
field: "name",
title: "Name",
attributes: {style: "text-align: center; font-size: 14px;"},
},
{
field: "price",
title: "Price",
width:250
},
{
title: "Description",
field: "description"
},

{ command: [{text:"Edit", name:"edit"},
{text:"Delete",name: "destroy"}], title: " ",width:200 }
]
});
function detailInit(e) {
// get a reference to the current row being initialized
//var detailRow = e.detailRow;

// create the datasource
}
});

</script>
</head>
<body>
<div id="grid"></div>
</body>
</html>

Grid

answered on 20 Jan 2014

2 answers

259 views

How to open scheduler editor window on timerange selection?

Hi!

I'd like to open the event-editor popup automatically when a timerange has been selected (without pressing ENTER). How do I trigger opening the window?

Here is the change listener I've implemented so far:

var changeTimer;
var changeInterval = 1000;
var selectedStart;
var selectedEnd;
function scheduler_change(e) {
if (e.events.length == 0 && e.start < e.end) {
selectedStart = e.start;
selectedEnd = e.end;
if (changeTimer) {
clearTimeout(changeTimer);
}
changeTimer = setTimeout(openWindow, changeInterval);
}
}

function openWindow() {
if (selectedStart && selectedEnd) {
var scheduler = $("#scheduler").data("kendoScheduler");
//open editor here
}
}

My Scheduler:

@(Html.Kendo().Scheduler<SchedulerEvent>()
.Name("scheduler")
.Date(DateTime.Today)
.Editable(edit => edit.TemplateName("SchedulerEventEditor"))
.EventTemplateId("template")
.DateHeaderTemplate(string.Format("<strong>#=kendo.toString(date, '{0}')#</strong>", GlobalResources.SchedulerHeaderDateFormat))
.Resources(resource => resource.Add(m => m.CalendarId)
.Title(GlobalResources.CalendarOwner)
.DataTextField("OwnerName")
.DataValueField("CalendarId")
.DataColorField("Color")
.BindTo(Model.Calendars.Where(x => !x.IsReadOnly))
)

.Views(views =>
{
views.DayView();
views.WeekView();
views.MonthView();
views.AgendaView();
})
.Selectable(true)
.Events(evts =>
{
evts.Change("scheduler_change");
evts.Edit("scheduler_edit");
evts.DataBound("scheduler_dataBound");
evts.ResizeEnd("scheduler_resize");
evts.MoveEnd("scheduler_move");
evts.Remove("scheduler_remove");
evts.Add("scheduler_add");
})
.DataSource(dataSource => dataSource
.ServerOperation(true)
.Model(
m =>
{
m.Id(f => f.ID);
//m.RecurrenceId(f => f.RecurrenceID.Value);
m.Field(f => f.ConfirmationRequired).DefaultValue(true);
m.Field(f => f.PointOfInterest).DefaultValue(new PointOfInterest());
m.Field(f => f.Attendees).DefaultValue(new List<Guid>());
m.Field(f => f.CalendarId).DefaultValue(Model.Calendars.Where(x=>x.IsOwner).Select(x => x.CalendarId).FirstOrDefault());
}
)

.Events(e => e.Sync("function() {this.read();}"))
.Read( read=>read.Action("ReadEvents", "Scheduler").Data("readData"))
.Create("CreateEvent", "Scheduler")
.Destroy("DeleteEvent", "Scheduler")
.Update("UpdateEvent", "Scheduler")
)
)

Best regards

Scheduler

answered on 19 Jan 2014

2 answers

1.0K+ views

Kendo Grid Filtering Case Insensitivity

Hi Kendo,

I'm trying to make filtering for one 'term' case insensitive.   The code below works if the 'tolower' is removed. What I'm trying to do is pass on through the odata to the database the idea that it needs to take the database column and apply a 'lower case' to it and then do the substring operation, making the filter case insensitive.  Is there any way to get the 'tolower' on the field to work with filtering? Thanks for your help.

Bill

parameterMap: function (data, type) {
     if (type == "read") {
          var grid = $("#grid").data("kendoGrid");
          var currentFilter = grid.dataSource.filter();
          if (currentFilter) {
                if (currentFilter.filters[1] === undefined & currentFilter.filters[0].field !== "Field1" &             currentFilter.filters[0].field !== "Field2" & currentFilter.filters[0].field !== "Field3") {
                    data.filter.logic = "or";
                  var stringValue = "";
                    stringValue = currentFilter.filters[0].value.toString();
                    var new_filter = { field: tolower(currentFilter.filters[0].field), operator: currentFilter.filters                [0].operator, value: stringValue.toLowerCase() };
                    data.filter.filters.push(new_filter);
                    new_filter = { field: currentFilter.filters[0].field, operator: currentFilter.filters[0].operator, value:          stringValue.toUpperCase() };
                    data.filter.filters.push(new_filter);
}
}

var newMap = kendo.data.transports.odata.parameterMap(data);
delete newMap.$format; // not currently supported by webapi.
return newMap;
}
}

Grid

answered on 17 Jan 2014

3 answers

198 views

how to customise color of bars in stock chart

well i guess the title says it all
right now the default is orange - id like to change each stock column to a diff color

i tried putting it in the data, (ie in this case wData)
but that didnt work
pls help
thanks!

$J($chartD).kendoStockChart({

dataSource: wData,

series: [{

type: "candlestick",

openField: "open",

closeField: "close",

highField: "high",

lowField: "low",

categoryField: "cat",

notes:{

line: {

width: 0,

length: 0

},

label: {

font: "bold 9px Open Sans, sans-serif"

},

icon: {

border: {

width: 0

}

},

tooltip:{

format: "{4}:<br /> {0:n0} -- {3:n0}"

}

}],

navigator:{

visible: false

},

categoryAxis:{

categories: cats,

type: "category",

labels: {

font: "bold 9px Open Sans, sans-serif",

rotation: 90,

step: 1,

skip: 0

}

},

valueAxis: {

labels: {

format: "N0"

}

});

Charts

answered on 17 Jan 2014

1 answer

50 views

Odd layout with no consitency

Hi,
I'm having some layout issues on a rapid prototype I've created. Hit f5 a few times and it renders the scheduler differently each time. Works fine in Firefox breaks in Chrome both on a PC.

See here

http://gem.azurewebsites.net/

Thanks

Alec

Scheduler

answered on 17 Jan 2014