Questions on Kendo UI for jQuery Forum

1 answer

301 views

SCHEDULER template When i want to create a new event and click on scheduler , the previous events make hidden or dropped

Hi ! I am learning and working with Kendo UI Scheduler. In above scheduler i am using template to show in every event (modal popup) an image, start date, end date, and title. When i want to create a new event and click on scheduler , the previous events make hidden or dropped.
How can i fix this error or bug /
p.s: when i remove the image element by template, i can create new events succesfully.
Thanks in advance!
Here is my code:

<!DOCTYPE html>
<html>
<head>
<title></title>

<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.528/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.528/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.528/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.528/styles/kendo.dataviz.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.528/styles/kendo.dataviz.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.528/styles/kendo.mobile.all.min.css">

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.1.528/js/kendo.all.min.js"
<script>

</script>
</head>
<body>
<div id="example" class="k-content">
<div id="scheduler">
<div id="people">
<input checked type="checkbox" id="alex" value="1">
<input checked type="checkbox" id="bob" value="2">
<input type="checkbox" id="charlie" value="3">
</div>
</div>
</div>

<script id="event-template" type="text/x-kendo-template">
<div class="movie-template">
<img src="#= image #" style="width:50px; height:50px">
<p>#: kendo.toString(start, "hh:mm") # - #: kendo.toString(end, "hh:mm") #</p>
<h3>#: title #</h3>

</div>
</script>

<script>
$(function() {
$("#scheduler").kendoScheduler({
date: new Date("2013/6/13"),
startTime: new Date("2013/6/13 07:00 AM"),
height: 600,
allDaySlot: false,
views: ["day","week","month","agenda"],
eventTemplate: $("#event-template").html(),
dataSource: {
data: [
{
meetingID: 1,
image: "https://taskworkshop.com/static/img/taskWorkshopIcon.jpg",
title: "Call Charlie about the project",
start: new Date("2013/6/13 10:30"),
end: new Date("2013/6/13 11:30"),
ownerId:2
},
{
meetingID: 2,
image: "http://www.eccourts.org/wp-content/themes/ECCOURTS/template/Delete-icon.png",
title: "Performance review",
start: new Date("2013/6/13 9:00"),
end: new Date("2013/6/13 12:30"),
ownerId:1

},
{
meetingID: 3,
image: "https://taskworkshop.com/static/img/taskWorkshopIcon.jpg",
title: "HR Lecture",
start: new Date("2013/6/13 13:00"),
end: new Date("2013/6/13 14:30"),
ownerId:2
}
],
schema: {
model: {
id: "meetingID",
fields: {
meetingID: { type: "number" },
title: { defaultValue: "No title", validation: { required: true } },
start: { type: "date" },
end: { type: "date" },
ownerId: { defaultValue: 1 },
isAllDay: { type: "boolean" }
}
}
}
},
filter: {
logic: "or",
filters: [
{ field: "ownerId", operator: "eq", value: 1 },
{ field: "ownerId", operator: "eq", value: 2 }
]
},
resources: [
{
field: "ownerId",
name: "Owner",
dataSource: [
{ text: "Alex", value: 1, color: "#f8a398" },
{ text: "Bob", value: 2, color: "#51a0ed" },
{ text: "Charlie", value: 3, color: "#56ca85" }
]
}
]
});

$("#people :checkbox").change(function(e) {
var checked = $.map($("#people :checked"), function(checkbox) {
return parseInt($(checkbox).val());
});

var scheduler = $("#scheduler").data("kendoScheduler");

scheduler.dataSource.filter({
operator: function(task) {
return $.inArray(task.ownerId, checked) >= 0;
}
});
});
});

</script>

<style scoped>
.invalid-slot {
background: red !important;
cursor: no-drop;
}
.movie-template img {
float: left;
margin: 0 8px;
}
.movie-template p {
margin: 5px 0 0;
}
.movie-template h3 {
padding: 0 8px 5px;
font-size: 12px;
}
.movie-template a {
color: #ffffff;
font-weight: bold;
text-decoration: none;
}
.k-state-hover .movie-template a,
.movie-template a:hover {
color: #000000;
}
.k-nav-current > .k-link span + span {
max-width: 200px;
display: inline-block;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
vertical-align: top;
}

#team-schedule {
background: url('../content/web/scheduler/team-schedule.png') transparent no-repeat;
height: 115px;
position: relative;
}

</style>
</body>
</html>

Scheduler

answered on 17 Jul 2014

4 answers

123 views

Editor customization help

Hi, I'm currently using the server-side wrapper version of the Editor tool and I have a couple project requirements that I need help with:

1) Disable line breaks via ENTER key

2) Add script references to Editor's IFRAME document (maybe how the style sheets can be added?)

3) Disable drag-and-drop OR leave enabled but strip out all HTML (example would be dragging and dropping styled elements from a Word doc)

4) Disable styling shortcuts such as CTRL+B

Editor

answered on 17 Jul 2014

1 answer

5.9K+ views

Clear Grid datasource Items

Hi,

I want to clear Grid data items but since grid is enabled for sorting and searching when any operation Sort/Search is performed the Data is getting back to grid.

Can any one help how to tackle this situation.

I am clearing the data-source data items by $("#Grid").data("kendoGrid").dataSource.data([]);

Thanks,
Chatrapathi chennam

Grid

answered on 17 Jul 2014

3 answers

198 views

Bind Grid value to QRCode

I have two KendoGrids on my page and i want to bind values to KendoQRCode if some values are editing or was added

@(Html.Kendo().Grid(Model)

.Name(ProdGrid")

.Columns(columns =>

{

columns.Bound(p => p.Title);

columns.Bound(p => p.FirstName);

columns.Bound(p => p.MiddleName);

columns.Bound(p => p.FamilyName);

columns.Command(command => { command.Edit()});

})

.Editable(editable => editable.Mode(GridEditMode.InLine))

.DataSource(dataSource => dataSource.Ajax()

.Model(model =>

{

model.Id(p => p.ID);

})

.Read(read => read.Action("PDetails", "Prod"))

.Update(update => update.Action("EditingP", "Card"))

)

@(Html.Kendo().Grid(Model)

.Name("Phone")

.Columns(columns =>

{

columns.Bound(p => p.PhoneNumber);

columns.Command(command => { command.Edit().HtmlAttributes(new { id = i + "EditTel" }); });

})

.ToolBar(toolbar => toolbar.Create())

.Editable(editable => editable.Mode(GridEditMode.InLine))

.HtmlAttributes(new { style = "width:50%; float:left" })

.DataSource(dataSource => dataSource.Ajax()

.Model(model =>

{

model.Id(p => p.ID);

})

.Create(update => update.Action("CreatePhone", "Card", new { id = @i }))

.Read(read => read.Action("CardPhone", "Card"))

.Update(update => update.Action("EditingPhone", "Card", new { id = @i }))

)

<div id="example" >

<div class="configuration-horizontal" id="qrConfig">

<div class="config-section">

<div>

<input id="qrPhone" class="k-textbox" data-bind="value: qrPhone">

</div>

<br />

<div>

<textarea id="qrValue" class="k-textbox" data-bind="value: qrValue" rows="5" cols="20"></textarea>

</div>

<div class="config-section">

<span class="configHead">Options</span>

<ul class="options">

<li>

<label for="errorCorrection">Error correction level:</label>

<select id="errorCorrection" data-role="dropdownlist" data-bind="value: qrOptions.errorCorrection">

<option value="L">L</option>

<option value="M">M</option>

<option value="Q">Q</option>

<option value="H">H</option>

</select>

</li>

<li>

<label for="encoding">Encoding:</label>

<select id="encoding" data-role="dropdownlist" data-bind="value: qrOptions.encoding">

<option value="ISO_8859_1">ISO_8859_1</option>

<option value="UTF_8">UTF_8</option>

</select>

</li>

<li>

<label for="size">Size:</label>

<input id="size" data-bind="value: qrOptions.size" data-role="numerictextbox"

data-format="n0" data-decimals="0" />

</li>

<li>

<label for="borderWidth">Border width:</label>

<input id="borderWidth" data-bind="value: qrOptions.border.width" data-role="numerictextbox"

data-format="n0" data-decimals="0" />

</li>

</ul>

</div>

<script type="text/javascript">

$(document).ready(function () {

var qrCode = $("#qrCode").kendoQRCode({

size: 200

}).data("kendoQRCode");

var viewModel = kendo.observable({

qrPhone: 5454

qrValue: "HaLo World",

qrOptions: {

errorCorrection: "L",

encoding: "ISO_8859_1",

background: "#FFFFFF",

color: "#000000",

size: 200,

border: {

color: "#FFFFFF",

width: 0

}

},

setValue: function () {

qrCode.value(this.qrValue + '\n' + this.qrPhone:);

},

setElementWidth: function () {

qrCode.element.width(this.qrOptions.size);

}

});

viewModel.bind("change", function (e) {

if (e.field == "qrPhone") {

this.setValue();

}

if (e.field == "qrValue") {

this.setValue();

}

else {

this.setElementWidth();

qrCode.setOptions(this.qrOptions.toJSON());

}

});

kendo.bind($("#qrConfig"), viewModel);

viewModel.setElementWidth();

viewModel.setValue();

});

</script>

with input fields works it well, but i want to bind values from Grids after editing or after I add one more Phone to the Table

Grid

answered on 17 Jul 2014

1 answer

105 views

Chat style UI supported with Kendo Mobile UI

Hi,

we are building a phonegap application with KendoUI, and now there is a requirements that we need do a imessage like chat functionality in this app.
so doese anyone have such experience to build the such chat application UI with Kendo Mobile UI ?

Thanks,
Qiu,Juan

General Discussions

answered on 17 Jul 2014

4 answers

496 views

How do I require a description, e.preventDefault() clears my current file

on the OnUpload, I can validate that I have set a description textbox, but it will clear my current file selected. Anyway to keep my current file?

function onUpload(e) {

var files = e.files;
var description = $.trim($("#fileDescription").val());
if (description.length < 1) {
alert("Must have a description")
e.preventDefault();

return;
}

Upload

answered on 17 Jul 2014

1 answer

129 views

Load treeview from URL

I've put the following into your sample remote-data-binding.html:

<script>
$.getJSON(http://localhost:60084/....., function (data) {
tree = $("#treeview").kendoTreeView({
dataSource: kendo.observableHierarchy(data)
}).data("kendoTreeView");
});

</script>

Everything else untouched. When I refresh, the browser won't even try to access the url.
I also put some json in a local file, using id, text and items tags on my data, exactly as you advised in http://stackoverflow.com/questions/13286874/kendo-ui-treeview-and-json
if I use the file name instead of the url the page seems to access the file, but the tree is not loaded.

What am I missing?

TreeView

answered on 17 Jul 2014

7 answers

817 views

Drop down's not working in IE11

Hi,

I've tried to reproduce my issue in jsFiddle: http://jsfiddle.net/4uCHx/7/

With Firefox & Chrome, this example will work fine. In IE, you'll get an access denied error. What we're seeing however is that our drop down lists will create, and expand when clicked on, but if you try and click on the scroll bar on the drop down and scroll down the list of options, then list will just close.

The strange thing is that the drop down does actually work on IE7 and IE8, it's just IE9 that we're seeing the problem.

Any ideas?

DropDownList

answered on 17 Jul 2014

1 answer

963 views

kendo ui grid server side paging not showing page number and total number of item record in grid

Basically I am trying to implement server side filtering and sorting but when i am setting this to server side it is working fine but page number in grid not showing also next page , previous page and total Item is not showing up.
here us how i am intialising the grid.
<script>
$(document).ready(function () {
$("#grid").kendoGrid({
columns: [
{ field: "TicketID", title: "Id", filterable: true },
{ field: "Name", title: "Title", filterable: true },
{ field: "RequestorName", title: "Requestor", filterable: true },
{ field: "Category", title: "Category", filterable: true },
{ field: "Status", filterable: true },
{ field: "Priority", filterable: true },
{ field: "CreatedOn", format: "{0:MM/dd/yyyy}", filterable: false }
],
dataSource: new kendo.data.DataSource({
transport: {
read: {
url: "/Ticketing/WebServices/TicketingService.asmx/GetTicketByProjectId",
contentType: 'application/json; charset=utf-8',
type: "POST",
dataType: "json",
data: { filter: null, sort: null },
},
parameterMap: function (data) {
return JSON.stringify(data);
}
},

schema: {
data: "d",
total: "total",
model: {
id: "TicketID",
fields: {
Name: { type: "string" },
RequestorName: { type: "string" },
Category: { type: "string" },
Status: { type: "string" },
Priority: { type: "string" },
CreatedOn: { type: "date" }
}
}
},
pageSize: 20,
serverPaging: true,
serverSorting: true,
serverFiltering: true
}),
pageable: {
refresh: true,
pageSizes: [10, 20, 50, 100],
buttonCount: 12,
},
filterable: true,
groupable: true,
sortable: true,
//selectable: true,
filterable: true,
reorderable: true,
resizable: true,
columnMenu: true
});
});
</script>
--------------------------------------------------------------------------------WEB Service Method-------------------------------------------------------------------------------------
protected Dictionary<string, DataTable> FilterColumns;

[WebMethod]
public IEnumerable<TicketListJSON> GetTicketByProjectId(int page, int pageSize, List<GridSort> sort = null, GridFilters filter = null)
{
int variable = 0;
string orderBy = null;
string filterString = null;
if (sort != null && sort.Count > 0)
{
orderBy = "order by " + sort[0].field + " " + sort[0].dir;
}
if (filter != null && filter.filters != null && filter.filters.Count > 0)
{
filterString = GetFormatedFilterString(filter);
}

List<TicketDetails> TicketList = _fuzeTicketingController.GetTickets();
List<TicketListJSON> TicletListJSONs = new List<TicketListJSON>();

foreach (TicketDetails td in TicketList)
{
TicketListJSON TicketJSON = new TicketListJSON();
TicketJSON.TicketID = td.TicketID;
TicketJSON.Name = td.Name;
TicketJSON.RequestorName = td.RequestorName;
TicketJSON.Category = td.Category;
TicketJSON.Type = td.Type;
TicketJSON.Priority = td.Priority;
TicketJSON.Status = td.Status;
TicketJSON.CreatedOn = td.CreatedDate;
TicletListJSONs.Add(TicketJSON);

}

return TicletListJSONs;
}
------------------------------------------------------------------------ Response from web service ---------------------------------------------------------------------------------------
{"d":[{"__type":"NetApp.Web.UI.Fuze.WebServices.TicketingService+TicketListJSON","TicketID":14264,"Name":"Log a ticket to test validation","RequestorName":"administrator, administrator","Category":"Dashboard","Type":"Improvement","Priority":"3 - High","Status":"Needs More Info","CreatedOn":"\/Date(1402511400000)\/"},{"__type":"NetApp.Web.UI.Fuze.WebServices.TicketingService+TicketListJSON","TicketID":14263,"Name":"Editor Testing 2 Saveing text","RequestorName":"administrator, administrator","Category":"IBPOs Cat","Type":"Improvement","Priority":"3 - High","Status":"Pending Approval","CreatedOn":"\/Date(1401733800000)\/"},{"__type":"NetApp.Web.UI.Fuze.WebServices.TicketingService+TicketListJSON","TicketID":14255,"Name":"IE 8 issue","RequestorName":"administrator, administrator","Category":"Working 1","Type":"Task","Priority":"4 - Normal","Status":"New | New Sub 2 | New 3","CreatedOn":"\/Date(1399055400000)\/"}]}

----------------------------------------------------------------------------------------- Post to Web Service ------------------------------------------------------------------------------------------------------------
source : {"filter":null,"sort":null,"take":10,"skip":0,"page":1,"pageSize":10}

Grid

answered on 17 Jul 2014

1 answer

699 views

adding new record with null value in numeric cell

Hi,

I use kendo grid with number type column.
when adding new record, the numeric field gets automatically value 0.
I want to set this field as empty by default and not as 0.
Is there any way to do it?

Thanks,

Grid

answered on 17 Jul 2014