Questions on Kendo UI for jQuery Forum

2 answers

770 views

kendoContextMenu is not a function Error

I've been trying to add a Context Menu to a TreeView using this example.

The tree displays fine but the menu code generates an error: $(....).kendoContextMenu is not a function.

JS files included:

TreeView and menu:

<ul id="menu">
<li>CREATE</li>
<li>DELETE</li>
</ul>

JS code:

$("#tree").kendoTreeView(
{
select: function(event) {
var $item = $(event.node);
var id = $item.attr('id');
}
});

$("#menu").kendoContextMenu({
// listen to right-clicks on treeview container
target: "#tree",

// show when node text is clicked
filter: ".k-in",

// handle item clicks
select: function(e) {
var button = $(e.item);
var node = $(e.target);
alert(kendo.format("'{0}' button clicked on '{1}' node", button.text(), node.text()));
}
});

Thanks,

Bill

Menu

answered on 05 Aug 2016

0 answers

302 views

Hierarchical Grid WITH Crud - Sharepoint Lists (REST) data source

Hi,

First off, new to a lot of this though I've made a lot of progress on my own. Unfortunately I'm maxed out with my limitations/lack of knowledge around several things. GREATLY appreciate some assistance.

Looking to create a Hierarchical Grid with CRUD functions (for both the parent and the child grid). Have not seen a demo/example anywhere or from anyone with a Hierarchy that has CRUD. That's the 1st half of the issue. 2nd half, I've been working on getting the CRUD functions (popup editing) to work in just a regular Grid but having trouble. Main trouble is I need to use not one, but two different Sharepoint lists (via REST) as the data source (one for the parent, one for the child). But even trying to just use one list for a standard grid, I cannot get the CRUD functions to work. Doing this all strictly through HTML/JS/CSS. No ASP.NET or C#. It's an internal sharepoint subsite.

The grid will populate from the list but the "Add New", "Edit", and "Delete" functions will not work correctly/save. Upon clicking "Add New Record" the popup opens and fill it out, but when I click "update" it does nothing and the window just remains opens. Screen shot is attached and posted code below. Greatly appreciate any assistance!

<title></title>
<link rel="stylesheet" href="https://home.hitachiconsulting.net/learning/PublishingImages/Dashboard/Kendo/kendo.common.min.css" />
<link rel="stylesheet" href="https://home.hitachiconsulting.net/learning/PublishingImages/Dashboard/Kendo/kendo.default.min.css" />

<script src="https://home.hitachiconsulting.net/learning/PublishingImages/Dashboard/Kendo/jquery.js"></script>
<script src="https://home.hitachiconsulting.net/learning/PublishingImages/Dashboard/Kendo/kendo.all.min.js"></script>

<div id="example">
<div id="grid"></div>

<script>
$(document).ready(function () {
var crudServiceBaseUrl = "https://home.hitachiconsulting.net/learning/curriculumdevelopers/_vti_bin/listdata.svc/EventsCourses",
dataSource = new kendo.data.DataSource({
type: "odata",
transport: {
read: {
url: crudServiceBaseUrl,
type: "GET",
dataType: "json",
contentType: "application/json;odata=verbose",
headers: {
"accept": "application/json;odata=verbose"
}
},
create: {
url: crudServiceBaseUrl,
type: "POST",
dataType: "json",
contentType: "application/json;odata=verbose",
headers: {
"accept": "application/json;odata=verbose",
"X-RequestDigest": $("#__REQUESTDIGEST").val(),
}
},
update: {
url: function (data) {
return crudServiceBaseUrl + "(" + data.ID + ")";
},
beforeSend: function (jqXhr, options) {

var data = JSON.parse(options.data);

jqXhr.setRequestHeader("If-Match", data.__metadata.etag);

},
type: "POST",
dataType: "json",
contentType: "application/json;odata=verbose",
headers: {
"accept": "application/json;odata=verbose",
"X-RequestDigest": $("#__REQUESTDIGEST").val(),
"X-HTTP-Method": "MERGE"
},
},
destroy: {
url: function (data) {
return crudServiceBaseUrl + "(" + data.ID + ")";
},
type: "POST",
dataType: "json",
contentType: "application/json;odata=verbose",
headers: {
"accept": "application/json;odata=verbose",
"X-RequestDigest": $("#__REQUESTDIGEST").val(),
"X-HTTP-Method": "MERGE",
"If-Match": "*"
}
},
parameterMap: function(data, type){
if (type === "update" && data["__deferred"]){
delete data["__deferred"];
}
return kendo.stringify(data);
}
},
batch: true,
pageSize: 10,
schema: {
data: "d.results",
model: {
id: "ID",
fields: {
ID: {editable: false, nullable: false },
Event: { type: "string", validation: { required: true } },
GlobalID: { type: "string" },
TrainingHours: { type: "number", validation: { required: true } },
Description: { type: "string", validation: {required: true } },
Objectives: { type: "string", validation: {required: true } },
DeliveryMethod: { type: "string", validation: { required: true } },
PrimarySubject: { type: "string", validation: { required: true } },
SecondarySubject: { type: "string", validation: { required: true } },
KeyWords: { type: "string", validation: { required: true } },
Curriculums: { type: "string", validation: { required: true } },
CourseDeveloper: { type: "string", validation: { required: true } },
SME: { type: "string", validation: { required: true } },
AddedToSensei: { type: "string", validation: { required: true } },
DateLastUpdated: { type: "string", validation: { required: true } },
Staus: { type: "string", validation: { required: true } },
SourceFiles: { type: "string", validation: { required: true } },
Notes: { type: "string", validation: {required: true } }
}
}
},
});

$("#grid").kendoGrid({
dataSource: dataSource,
pageable: true,
height: 550,
toolbar: ["create" ],
columns: [
{ field: "Event", title: "Event Name" },
{ field: "GlobalID", title:"Event No./Global ID", width: "120px" },
{ field: "TrainingHours", title:"Training Hours", width: "120px" },
{ field: "Description", width: "120px" },
{ field: "Objectives" },
{ field: "DeliveryMethod", title: "Delivery Method" },
{ field: "PrimarySubject", title: "Primary Subject" },
{ field: "SecondarySubject", title: "Secondary Subject" },
{ field: "KeyWords", title: "Key Words" },
{ field: "CurriculumLibrary" },
{ field: "CourseDeveloper", title: "Curriculum Developer" },
{ field: "SME" },
{ field: "AddedToSensei", title: "Added to Sensei" },
{ field: "DateLastUpdated", title: "Date Last Updated" },
{ field: "Status" },
{ field: "SourceFiles", title: "Source Files" },
{ field: "Notes" },
{ command: ["edit", "destroy"], title: " ", width: "250px" }],
editable: {
mode:"popup",
update: true
}
});
});

dataSource.add( { Event: "New Event" });
datasource.sync() ;
</script>
</div>

Grid

asked on 04 Aug 2016

1 answer

459 views

Loading persisted state refreshes data

var grid = $(ViewModel.gridName()).data("kendoGrid");

//Reset all existing sorts/filters first. If the persisted view didn't have them set, the

//existing state and persisted state are merged.

grid.dataSource.sort({});

grid.dataSource.filter({});

grid.setOptions(JSON.parse(targetView.GridOptions()));

I'm using the setOptions method to restore the state previously obtained from grid.getOptions(). My data is small enough that I load it completely client side. When I call set options, the grid reloads the data from the server. It works fine, but it's unnecessary.

Is there an option to avoid reloading the data from the server after setOptions is called?

Grid

answered on 04 Aug 2016

1 answer

132 views

[Solved] Data Source Push Function gets called multiple times

Hello, i have just noticed that the push function of Datasource.Transport called more than once when the filterable property is set as

filterable: {

mode: "row"

}

According to documentation, the data source will call the push function only once and provide callbacks which will handle push notifications (data pushed from the server).

Here is a demo that demonstrates the issue.

http://dojo.telerik.com/ETOzo

Grid

answered on 04 Aug 2016

5 answers

562 views

Kendo UI Web vs Kendo UI Profession vs ASP.NET MVC

Dear Team,

I would like to know the difference between Kendo UI Web and Kendo UI Professional..

We have license for DevCraft and our website developed using ASP.NET MVC 3 and Visual Studio 2012. Now, we are in plan to upgrade the site with the new version of Telerik. So, I would like to know whether we need to use Kendo UI Web, Kendo UI Professional or ASP.NET MVC controls..

If I upgrade my site with Kendo UI Profession then my site work without any issue or do I need to upgrade ASP.NET version to higher..

Thanks,

Prakash.

General Discussions

answered on 04 Aug 2016

1 answer

201 views

Changing Template of ColumnMenu

Hi Kendo-Team,

is it possible to use a custom template for the column menu? I wasn't able to figure out a way to achieve this.

I want to apply several changes e.g. switch order of Columns/Filter dropdowns.

Thanks,

Jonas

Grid

answered on 04 Aug 2016

3 answers

294 views

[Solved] Save new Event on 'addEvent' listener

Hi,

To add an event in the Scheduler, a user would double click the time slot where they want to add the event, and the popup would appear for then to do so. Is it possible to skip this step? I'm trying to create functionality so that when a user double clicks a time slot, a new event is auto-generated and saved without any further user interaction required. The new event would have the start and end date/time of the selected slot and 2 dynamically set additional resources, before it can be saved (Im using a customer eventTemplate, so the title is not required).

Thanks in advance,

Grant

Scheduler

answered on 04 Aug 2016

1 answer

115 views

Custom Command Button

I have a custom command in my grid:

columns.Command(command => { command.Edit(); command.Custom("InvoiceDetails"); command.Destroy(); }).Width(200);

When the user clicks this button I would simply like to navigate to the page Details on the controller InvoiceController with the correct InvoiceID from the appropriate row the user clicked.

It seems this used to be done like so

commands.Custom("InvoiceDetails").Action("Details", "Invoice").DataRouteValues

However I have no action method on the custom command only a click method?

Where has this action method gone, and how do I now use the click method?

I'm using ASP.net Core 1.

Grid

answered on 04 Aug 2016

1 answer

135 views

Defining custom template outside the event

I want to achieve the functionality in which the numbers needs to be displayed outside the event template but within the date.

Please find the screen shots of the requirement.

Here is the event template that I have used.

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

60-50-30

<div style="background-color: #: kendo.toString(colorId, "hh:mm") #">

<p class="bold">

<span class="bold"> #: kendo.toString(title) # </span>

<span class="bold pull-right"> #: kendo.toString(trip.length) # Trips </<span>

</p>

<h3 style="background-color: #: kendo.toString(colorId, "hh:mm") #"> </h3>

</div>

</script>

Can you please help me on this..

Scheduler

answered on 04 Aug 2016

3 answers

237 views

Is it possible to Bind Spreadsheet to IEnumerable<MyClass>

Is it possible to bind the Spreadsheet to IEnumerable<MyClass> where the property names would be the columns of the sheet and each item of the IEnumerable object would be a row in the sheet?

public class MyClass
{
public int Id { get; set; }
public string FirstName { get; set; }
public string LastName { get; set; }
}

var myObject = new List<MyClass>()
{
new MyClass() {Id = 1,FirstName = "Lucas",LastName = "Green"},
new MyClass() {Id = 2,FirstName = "Eva",LastName = "Black"},
new MyClass() {Id = 3,FirstName = "Miroslava",LastName = "Brown"},
};

Output:
Id FirstName LastName
1 Lukas Green
2 Eva Black
3 Miroslava Brown

Spreadsheet

answered on 04 Aug 2016