Questions on Kendo UI for jQuery Forum

5 answers

2.6K+ views

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

61 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

907 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.1K+ 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

243 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.1K+ 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

388 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

75 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]) {

result[prefix + "[" + i + "]." + property] = array[i][property];

}

else {

result[prefix + "[" + i + "]"] = array[i];

}

I've tried the template below but I can only see '[object Object]' in the column. Any idea how I can get it to work?

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

<ul>

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

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

#}#

</ul>

</script>

Grid

answered on 26 Dec 2013

1 answer

73 views

Passing IDs between grids & row selection count

I've used JavaScript to initialise a grid. Please have a look at this JSBin which illustrates what I have at the moment. The grid has been built based on this example in the Code Library, which allows grid rows to be selected using checkboxes.

I'm looking for a way to pass selected row IDs from one grid to another almost identical grid in a separate MVC view. Each time the desired rows have been selected followed by pressing the 'Show selected IDs' button, the IDs of the selected rows are to be sent to another view containing a grid of Products with a few additional columns. How can I send those IDs back to a controller and display the corresponding rows in the second grid?

For the second part of my question, I want to have a field called ViewCount that keeps count of the number of times a row has been selected. Based on the previously mentioned action of selecting rows and clicking a button, I want to then increase the ViewCount by 1. Is it possible and how can I go about doing that?

My thinking is that both events could be bound to the following function:

$("#showSelection").bind("click", function () {

var checked = [];

for(var i in checkedIds){

if(checkedIds[i]){

checked.push(i);

}

//Code goes here

});

Any help would be much appreciated. Thanks!

Grid

answered on 26 Dec 2013

1 answer

94 views

Dynamic DataViz series

I understand a dynamic number of data series is not currently supported by Kendo but does anybody have an example of something like this being done?

I'd like to be able to load a chart with a defined number or series but fill out the series using the read function. The problem I end up having is that I do not know the number of series until the user tries to load the page. IE: One use could open a chart using a query that has two series while another could do the same but using a query with 3 series. Since that's the only real differences in the two charts I'd like to use the same view. I know I can do this on the page load but I'd like to use the read function of the dataSource as that seems to give a better user experience. Currently I'm using the MVC helpers but I'm not married to that approach and have no problem building some or all of the chart or it's data with the javaScript functions.

General Discussions

answered on 26 Dec 2013