Questions on Kendo UI for jQuery Forum

1 answer

49 views

Charts inside grid just filters

Regards,

I have a requirement for a software development, I need build a chart that permits me to do filters inside without to do use of the data table,

Thanks, for the help

General Discussions

answered on 27 Dec 2013

5 answers

106 views

missing header on android

I recently upgraded my kendo files in an icenium project. since then, the header/navbar for landing page (the default view) is missing on Android. the odd thing is, it appears after I log into the app. mind you, there is nothing binding it to the login variables. but if I log in, the header on every view will show just fine, including the one on the landing page. if i logout, it disappears again.

works fine on iOS.

doesn't make much sense to me. it must have something to do with switching views? after another view has been shown, it appears correctly. when the user logs out, the app resets and shows the default again - which causes the header to be absent once more.

any thoughts?

General Discussions

answered on 27 Dec 2013

5 answers

2.6K+ views

Update Event is not firing in Grid

On further analysis i found that it is looking for this file, which is not found 404(Also this error is not visible in console, the way i got to it is by putting a break point on mouse click event ).
GET http://localhost:1205/Scripts/kendo/src/js/kendo.grid.js 404 (Not Found)
I used Nuget to install kendo ui and it creates the following structure. so it is not going to find that file as that hierarchy does not exist.

Scripts
Kendo
2013.3.1119
cultures
all the javascript files
==================================================================================================================
I am using WebAPI and KendoUI Grid, the Mark is below.
When i click Edit button, it bring the row into EditMode, but when i press the done "Update" button nothing happens, seems like event is not firing.
No WebAPI are made, i tried debugging in Google chrome, but seems like Update event is not firing at all.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>


<link href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.common.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.rtl.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.silver.min.css" rel="stylesheet" />


<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>


<script src="http://cdn.kendostatic.com/2013.3.1119/js/kendo.all.min.js"></script>

<script>

$(document).ready(function () {


var orgModel = {
id: "OrgID_PK",
fields: {
OrgID_PK: {
editable: false,
type: "number"
},
OrgCode: {
type: "string",
nullable: false,
editable: true,
validation: {
required: {
message: "Org Code is required"
},
maxlength:10
}
},
OrgName: {
type: "string",
nullable: false,
editable: true,
validation: {
required: {
message:"Org Name is required"
},
maxlength:100
}
},
Description: {
type: "string",
validation: {
required: true,
minlength: 2,
maxlength: 160
}
},
EffectiveDate: {
type: "date",
validation: true
},
TerminationDate: {
type: "date",
validation: true
},
}
};

var ds = new kendo.data.DataSource({
serverFiltering: true, // <-- Do filtering server-side
serverPaging: true, // <-- Do paging server-side
serverSorting: true,
pageSize: 2,
batch :false,
type: 'odata', // <-- Include OData style params on query string.
transport: {
create: {
url: "http://localhost:3103/api/Org/putOrgs",
type: "PUT",
dataType: "json",
},
read: {
url: "http://localhost:3103/api/Org/GetOrgs", // <-- Get data from here
dataType: "json" // <-- The default was "jsonp"
},
update: {
//url: function (employee) {
// return "http://localhost:3103/api/Org/postOrg" + employee.Id
//},
url: "http://localhost:3103/api/Org/postOrg",
type: "POST",
dataType: "json",
},
destroy: {
url: function (employee) {
return "http://localhost:3103/api/Org/deleteOrg" + employee.Id
},
type: "DELETE",
dataType: "json",
},
parameterMap: function (options, type) {

//if (operation !== "read" && options.models) {
// return { models: kendo.stringify(options.models) };
//}
var paramMap = kendo.data.transports.odata.parameterMap(options);

//delete paramMap.$inlinecount; // <-- remove inlinecount parameter.
delete paramMap.$format; // <-- remove format parameter.

return paramMap;

}
}, //transport
schema: {
data: function (data) {
return data.Items; // <-- The result is just the data, it doesn't need to be unpacked.
},
total: function (data) {
return data.Count; // <-- The total items count is the data length, there is no .Count to unpack.

},
errors: "Errors",
error: function (e) {
alert(e.errors);
}

}, //schema
model: orgModel

});



$("#grid").kendoGrid({
dataSource: ds,
groupable: true,
sortable: true,
filterable:true,
editable: "inline",
toolbar: ["create"],
pageable: {
refresh: true,
pageSizes: true,
buttonCount: 5
},
columns: [{
field: "OrgID_PK",
title: "OrgID ",
width: 140
}, {
field: "OrgCode",
title: "Code",
width: 190
}, {
field: "OrgName",
title: "Name"
}, {
field: "Description",
width: 110
},
{
field: "EffectiveDate",
width: 110
},
{
field: "TerminationDate",
width: 110
},
{ command: ["edit", "destroy"], title: " ", width: "172px" }
], // columns
edit: function (e) {
//$('#grid').data('kendoGrid').dataSource.read();
console.log('edit started ');
console.log(e);
//e.preventDefault();
},
cancel: function (e) {
//$('#grid').data('kendoGrid').dataSource.read();
//$('#grid').data('kendoGrid').dataSource.sync();
console.log('cancel happened');
console.log(e);
//e.preventDefault();
// $('#grid').data('kendoGrid').dataSource.read();
},
update: function (e) {
console.log('edit completed');
console.log(e);
},
change: function (e) {
console.log('a change happened not datasource one');
console.log(e);
},
saveChanges: function (e) {
console.log('a save is about to occurr');
console.log(e);
},
}); //grid

}); // document


</script>
</head>
<body>
<div id="example" class="k-content">
<div id="clientsDb">

<div id="grid" style="height: 380px"></div>

</div>

</div>
</body>
</html>

Grid

answered on 27 Dec 2013

4 answers

64 views

Scheduler Problem

Hi,

I tried to use the scheduler following the adaptive widget demo on mobile.
I have some questions to ask:

1. As I only want to allow user to view the schedule for one day, how would you recommend to limit that? I want to hide the controls for choosing the dates but it failed. I tried to set display:none for .k-scheduler-toolbar but there is some unexpected blank space found.

2. When I set it to editable: false, I cannot switch view. Please help provide workaround.

Thanks.

General Discussions

answered on 27 Dec 2013

10 answers

940 views

Changing Text of a Node

I have a simple onsuccess script for a MVC call

<script type="text/javascript">

function Success(packageid, name) {

$.ajax({

url: "treeview/Index",

dataType: 'html',

type: 'Get',

success: function (r) {

var treeview = $("#PackageNavigationTreeView").data("kendoTreeView");

var node = treeview.findByValue("'" + packageid + "'")

treeview.select(node);

},

error: function () {

alert('Error');

}

});

}

</script>

After success I "re-select" the selected node but I want to be able to change the text of the node as well.

node.text("new name") will rename the node but erase the "children".

Is there a simple way to rename the node?

TreeView

answered on 26 Dec 2013

2 answers

1.2K+ views

need to know whether Grid is in edit mode or not

I have a "click" behavior on one of the grid cells ( ex: $(grid.tbody).on("click", "td", function (e) {...}); ), however, I need it to behave differently if I am in edit mode. I know that I can attach to the "edit" event to determine when edit mode is entered, but need to reliably know that we are NOT in edit mode - regardless of whether user clicked "Update" or "Cancel".

I tried detecting click event for all three buttons (Edit, Update, Cancel) by their class, but the class selector did not seem to bind correctly.

I'm not aware of any grid property like " isInEditMode".

What option(s) do I have?

Thanks much,
R

Grid

answered on 26 Dec 2013

2 answers

253 views

Can't get inline editing to work with a Grid nested in a TabStrip

I have a grid with a nested TabStrip and a Grid nested in the TabStrip. Everything works fine until I add in-line editing to the nested tabstrip grid then I get :
Uncaught ReferenceError: CONTACT_ID is not defined. Any help would be appreciated Heres my code.

@using Kendo.Mvc.UI
@{
ViewBag.Title = "ManageAlarms";
}
<h2>ManageAlarms</h2>
@section PageSpecificNavBarLinks
{
@Html.Partial("~/Views/Shared/_PageSpecificNavBarLinks.cshtml")

}
@(Html.Kendo().Grid<ALARM>()
.Name("Grid")
.Columns(columns =>
{
columns.Bound(p => p.ALARM_ID).Visible(false);
columns.Bound(p => p.FIELD_NAME).Visible(true).Title("Alarm Name");
columns.Bound(p => p.OBJECT_TYPE).Visible(true).Title("Type");
columns.Bound(p => p.OBJECT_ID).Visible(true).Title("Object ID");
columns.Bound(p => p.THRESHOLD_LOWER).Visible(true).Title("Threshold Lower");
columns.Bound(p => p.THRESHOLD_UPPER).Visible(true).Title("Threshold Upper");
columns.Bound(p => p.IS_ACTIVE).Visible(true).Title("ON/OFF");
columns.Command(command => { command.Edit(); });
})
.Editable(editable => editable.Mode(GridEditMode.InLine))
.Pageable()
.Sortable()
.Scrollable()
.ClientDetailTemplateId("template")
.HtmlAttributes(new {style = "height:800px;"})
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(20)
.Events(events => events.Error("error_handler"))
.Model(model => model.Id(p => p.ALARM_ID))
.Model(model => model.Field(p => p.FIELD_NAME).Editable(false))
.Model(model => model.Field(p => p.OBJECT_TYPE).Editable(false))
.Model(model => model.Field(p => p.OBJECT_ID).Editable(false))
.Model(model => model.Field(p => p.THRESHOLD_LOWER).Editable(true))
.Model(model => model.Field(p => p.THRESHOLD_UPPER).Editable(true))
.Model(model => model.Field(p => p.IS_ACTIVE).Editable(true))
.Read(read => read.Action("GetAllAlarms", "Alarm"))
.Update(update => update.Action("EditingInline_Update", "Alarm"))
)

)
<script id="template" type="text/kendo-tmpl" >
@(Html.Kendo().TabStrip()
.Name("tabStrip_#=ALARM_ID#")
.SelectedIndex(0)
.Animation(animation => animation.Open(open => open.Fade(FadeDirection.In)))
.HtmlAttributes((new {style = "width:1000px;"}))
.Items(items =>
{
items.Add().Text("Email List").Content(@<text>
@(Html.Kendo().Grid<AllworxCRAModel.CONTACT>()
.Name("grid_#=ALARM_ID#")
.Columns(columns =>
{
columns.Bound(o => o.CONTACT_ID).Visible(false);
columns.Bound(o => o.FIRST_NAME).Title("First Name");
columns.Bound(o => o.LAST_NAME).Title("Last Name");
columns.Bound(o => o.EMAIL).Title("Email");
columns.Command(command => { command.Edit(); command.Destroy(); });
})
.Editable(editable => editable.Mode(GridEditMode.InLine))
.Pageable()
.Sortable()
.Scrollable()
.HtmlAttributes((new {style = "width:950px;"}))
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(20)
.Events(events => events.Error("error_handler"))
.Model(model => model.Id(p => p.CONTACT_ID))
.Model(model => model.Field(p => p.FIRST_NAME).Editable(true))
.Model(model => model.Field(p => p.LAST_NAME).Editable(true))
.Model(model => model.Field(p => p.EMAIL).Editable(true))
//.Create(update => update.Action("EditingInline_Create", "Alarm"))
.Read(read => read.Action("GetEmailList", "Alarm", new {alarmID = "#=ALARM_ID#"}))
.Update(update => update.Action("EditingInline_Update", "Alarm", new {alarmID = "#=ALARM_ID#"}))
.Destroy(update => update.Action("EditingInline_Destroy", "Alarm", new {contactId = "#=CONTACT_ID#", alarmID = "#=ALARM_ID#"}))
).ToClientTemplate()
)
</text>
);
items.Add().Text("Add Contact").Content(
@<text>
<fieldset>
<legend style="color:blue;font-weight:bold;">Add New Contact</legend>
<table>
<tr>
<td><span style="text-decoration:underline">F</span>irst Name:</td>
<td><input type="text" name='firstName#=ALARM_ID#' id='firstName#=ALARM_ID#' size="30" value="" class="text-input" /></td>
</tr>
<tr>
<td><span style="text-decoration:underline">L</span>ast Name:</td>
<td><input type="text" name='lastName#=ALARM_ID#' id='lastName#=ALARM_ID#' size="30" value="" class="text-input" /></td>
</tr>
<tr>
<td><span style="text-decoration:underline">E</span>mail Address:</td>
<td><input type="text" name='email#=ALARM_ID#' id='email#=ALARM_ID#' size="30" value="" class="text-input" /></td>
</tr>
</table>
</fieldset>
<fieldset>
<legend style="color:blue;font-weight:bold;">Select From Existing Contact</legend>
@(Html.Kendo().DropDownList()
.Name("email_#=ALARM_ID#")
.OptionLabel("Select a contact...")
.DataTextField("EmailName")
.DataValueField("EmailID")
.HtmlAttributes(new {style = "width:400px"})
.DataSource(source =>
{
source.Read(read =>
{
read.Action("GetEmailAddress", "DropdownMenus", new {area = "Shared"});
});
}).ToClientTemplate()
)
</fieldset>
<button onclick="onSubmit('#=ALARM_ID#')">Add Contact</button>
</text>
);
}).ToClientTemplate()
)
</script>

<script>
$(document).ready(function () {

});
function dataBound() {
this.expandRow(this.tbody.find("tr.k-master-row").first());
}

function onSubmit(data) {
var alarmid = data.toString();
var firstname = $("input#firstName" + alarmid).val();
var lastname = $("input#lastName" + alarmid).val();
var email = $("input#email" + alarmid).val();
var dropdownlist = $("#email_" + alarmid).data("kendoDropDownList");
var emailDropdown = dropdownlist.text();

$.ajax({
type: 'POST',
data: JSON.stringify({ fname: firstname, lname: lastname, email: email, alarmId: alarmid }),
dataType: "json",
contentType: 'application/json; charset=utf-8',
url: '/Alarm/AddContact',
complete: function (msg) {
if (msg.responseText == "Success") {
$("input#firstName" + alarmid).val("");
$("input#lastName" + alarmid).val("");
$("input#email" + alarmid).val("");
$("#email_" + alarmid).val("").data("kendoDropDownList").text("Select a contact...");
}
}
});
}

</script>

<style scoped="scoped">
.k-detail-cell .k-tabstrip .k-content {
padding: 0.2em;
}
.contact-details ul
{
list-style:none;
font-style:italic;
margin: 15px;
padding: 0;
}
.contact-details ul li
{
margin: 0;
line-height: 1.7em;
}

.contact-details label
{
display:inline-block;
width:90px;
padding-right: 10px;
text-align: right;
font-style:normal;
font-weight:bold;
}
</style>

<script type="text/javascript">
function error_handler(e) {
if (e.errors) {
var message = "Errors:\n";
$.each(e.errors, function (key, value) {
if ('errors' in value) {
$.each(value.errors, function() {
message += this + "\n";
});
}
});
alert(message);
}
}
</script>

TabStrip

answered on 26 Dec 2013

2 answers

3.2K+ views

How to set a Row id of a grid

I am looking for a simple way to set the row id when populating a grid.

For example <tr id='myunique value'><td></td></tr>

I have been looking online and have not seen a simple answer for this.

This would appear to be an easy thing so as to manipulate the grid using standard jquery

Thanks in advance

Grid

answered on 26 Dec 2013

1 answer

404 views

Kendo Ui grid insert method is slow if data is more than 1000 records.

Hi,

I have a requirement where i need to display notifications in the kendo ui grid as first row. I have a duplex service which will return a single or multiple records at a time, these should be displayed in the grid with the existing data. I'm using below line of code to insert a single record in the grid.
$("#employeesGrid").data("kendoGrid").dataSource.insert(record);

when the grid has no records, the records are inserted fastly. When the grid contains 50 or above records, the record insertion is very slow, and application is going to non-responding state if we are moving the scroll bar.

I have attached the sample to reproduce this issue. I have used a timer to insert a record in the grid for every 1sec.
In our real time application, we have a scenario where the duplex service will return bulk of records(say 1000 at a time) and we need to bind these newly added records with the existing records in the grid.

Please provide a solution for this.

Thanks,
Raj Yennam

Grid

answered on 26 Dec 2013

1 answer

81 views

Array within an array

I'm using a JavaScript version of the MultiSelectInGrid example. Based on the example, an Employee belongs to multiple Territories. I want to add an association where each Territory belongs to multiple Regions. I'm trying to display Employees, Territories and Regions in a single grid.

The following template works when trying to display the name of each Territory:

<script type="text/kendo" id="territoriesTemplate">

<ul>

#for(var i = 0; i < Territories.length; i++){#

<li>#:Territories[i].TerritoryName#</li>

#}#

</ul>

</script>

This function is being used to display the array in a readable format within the grid:

function serializeArray(prefix, array, result) {

for (var i = 0; i < array.length; i++) {

if ($.isPlainObject(array[i])) {

for (var property in array[i]) {