Questions on Kendo UI for jQuery Forum

2 answers

371 views

My grid keeps on coming up empty. What could I be doing wrong?

HTML

<head>
<title></title>
<script src="include/libraries/jquery/jquery-1.12.3.min.js"></script>
<link href="include/libraries/kendo/css/kendo.bootstrap.min.css" rel="stylesheet" />
<link href="include/libraries/kendo/css/kendo.common-bootstrap.min.css" rel="stylesheet" />

<script src="include/libraries/kendo/js/kendo.all.js"></script>
<script src="include/libraries/kendo/js/kendo.all.min.js"></script>
<script src="include/libraries/kendo/js/kendo.aspnetmvc.min.js"></script>
<script src="include/libraries/kendo/js/kendo.custom.min.js"></script>
<script src="include/libraries/kendo/js/kendo.timezones.min.js"></script>

<meta charset="utf-8" />
</head>
<body>
<div id="grid">
<div class="demo-section k-content wide">
<div>
<h4>Add or update a record</h4>
<div data-role="grid"
data-editable="true"
data-toolbar="['create', 'save']"
data-columns="[
{ 'field': 'CourseID' },
{ 'field': 'CourseName' },
{ 'field': 'IsActive' },
]"
data-bind="source: courses,
visible: isVisible,
events: {
save: onSave
}"
style="height: 200px"></div>
</div>
</div>

<script>

var viewModel = kendo.observable( {


isVisible: true,
onSave: function(e) {
kendoConsole.log("event :: save(" + kendo.stringify(e.values, null, 4) + ")");
},

courses: new kendo.data.DataSource({
schema: {
model: {
id: "CourseID",
fields: {
CourseID: { type: "number" },
CourseName: { type: "string" },
IsActive:{type:"boolean"}
}
}
},
batch: true,
transport: {
read: {
type:"GET",
url: "http://localhost:51447/api/Courses",
dataType: "jsonp"
},

parameterMap: function(options, operation) {
if (operation !== "read" && options.models) {
return {models: kendo.stringify(options.models)};
}
}
}
})
});
kendo.bind($("#grid"), viewModel);
</script>
</div>

</body>

Controller Code

// GET: api/Courses

public IQueryable<object> GetCourses()
{
return db.Courses.Select(
o => new
{
CourseID = o.CourseID,
CourseName = o.CourseName,
IsActive = o.IsActive
});

//}).Where(l => l.IsActive == false);
}

JSON returned

[{"CourseID":1,"CourseName":"Beauty Therapy","IsActive":true},{"CourseID":2,"CourseName":"Software Development","IsActive":true},{"CourseID":3,"CourseName":"Bookkeeping and Accounting","IsActive":true}]

MVVM

answered on 14 Apr 2016

1 answer

242 views

[Solved] Date / Time picker format problem in Grid

Hi,

I believe I have bumped into a styling problem. When a Kendo DatePicker or DateTimePicker is used in a Kendo Grid's filtering menu, the texts at centuries depth is not wrapped, thus appear broken. See attached screenshot & plunker: http://plnkr.co/edit/OsIlCii3AgJQsW2vELuF?p=preview

The problem seems to be caused by the following style:

.k-menu .k-menu-group {

//...

white-space: nowrap;

}

This is inherited from the filter menu's UL element.

Best,

Ama

DatePicker

answered on 13 Apr 2016

1 answer

189 views

Getting Kendo Editor to edit mode when a button is clicked

I have a Kendo Editor, defined as below:

@(Html.Kendo().Editor()
.Name("RestrictionsEditor")
.Tag("div")
.Tools(tools => tools
.Clear()
.Bold().Italic().Underline().Strikethrough()
.JustifyLeft().JustifyCenter().JustifyRight().JustifyFull()
.CreateLink().Unlink()
.InsertImage()
.TableEditing()
.FontColor().BackColor()
)
.Value(@<text><p> This editor is readonly and will get into edit mode only after 'Edit' button is clicked</p></text>))

I have editor as readonly initially and I am doing that as below:

{

var editor = $("#RestrictionsEditor").data("kendoEditor"),
editorBody = $(editor.body);

// make readonly
editorBody.removeAttr("contenteditable").find("a").on("click.readonly", false);
})

</script>

Now, I have been trying to get the editor to edit mode when a button is clicked.

I have defined my button as below right above my editor:

And I am writing the Javascript as:

When I run my code, the editor is in readonly mode initially and as soon as I click 'Edit' button it takes me back to the original page, out of the modal. Forgot to mention, Editor is inside of a tab in modal.

How can I achieve this behavior - Kendo Editor in readonly mode initially and after 'Edit' button is clicked, Editor gets in edit mode.

Thanks!

Editor

answered on 13 Apr 2016

1 answer

335 views

Add Copy Paste on Context Menu

We have a Kendo UI Grid that we've also defined a custom Kendo UI ContextMenu on and now we need to add Copy and possibly Paste and Cut Functionality. The issue is that when you select some text, then right click and bring up the context menu, your selection becomes cleared when you click on the Context Menu li. Is there some work-around for this?

We are having to do some horribly ugly stuff of copying the selection on the Menu's Activate event, copy the selected text into a hidden control, and select that text and copy it to the clipboard if they choose copy on the menu. This all seems very clumsy and like a bad work around. Is there a better way of doing this? Why does the Kendo Context Menu clear the selection? Is there some way to prevent that?

Menu

answered on 13 Apr 2016

1 answer

701 views

Angular Kendo Grid not showing any icons.

I have an angular definition for the KendoUI grid that is working perfectly except for no icons/graphics show on the grid. Here is the grid definition:

$scope.gridOptions = {

toolbar: ["excel"],

excel: {

fileName: "Kendo UI Grid Export.xlsx",

proxyURL: "//demos.telerik.com/kendo-ui/service/export",

filterable: true,

allPages: true

},

sortable: true,

pageable: true,

scrollable: true,

filterable: {

extra: false,

operators: {

string: {

startswith: "Starts with",

eq: "Is equal to",

neq: "Is not equal to"

}

},

resizable: true,

columns: [

{ field: "accountPeriod", title: "Account Period", width: "150px" },

{ field: "site", title: "Site", width: "100px" },

{ field: "environment", title: "Environment", width: "200px" },

{ field: "complex", title: "Complex", width: "200px" },

{ field: "fundGroup", title: "Fund Group", width: "200px" },

{ field: "fund", title: "Fund", width: "100px" },

{ field: "fundCode", title: "Fund Code", width: "100px" },

{ field: "projectName", title: "Project Name", width: "300px" },

{ field: "frequency", title: "Frequency", width: "50px" },

{ field: "outputMedia", title: "Output Media", width: "150px" },

{ field: "revision", title: "Revision", width: "100px" },

{ field: "outputType", title: "Output Type", width: "100px" },

{ field: "comment", title: "Comment", width: "100px" },

{ field: "publishDateTime", title: "Publish Date/Time", width: "100px" },

{ field: "user", title: "User", width: "100px" },

{ field: "projectPageCount", title: "Project Page Count", width: "200px" },

{ field: "documentLink", title: "Document Link", width: "100px" }

]

};

What files or css do I need to show the graphics for filterable and the right and left arrows for pagination?

Grid

answered on 13 Apr 2016

2 answers

137 views

[Solved] Convert data item so shape

Hello

I have the following problem - I need to synchronize a diagram with a search field / combo box, such that both will have the same datasource, and when selecting/searching, the diagram focuses on the correct shape. The problem is, as far as I understand it `diagram.bringIntoView` can only take shape, not the dataItem that is associated with it.

If I have the shape I can get the shape.dataItem, but in the combo box I only have the data item. Is there a way to ask the diagram "give me the shape for this data item"? Or is the only solution to save every shape in say `visualTemplate`, when it is created?

Thanks.

Diagram

answered on 13 Apr 2016

7 answers

278 views

Filter not working with droptarget and AngularJs

I can't seem to get the filter working with dragdrop / angularjs. Any help would be appreciated

I've tried:

<div class="container" title="{{board.name}}" kendo-droptarget k-options='dropOptions' >

with these options:
function ($scope, $http) {
$scope.dropOptions = {
filter: ".divStatus",...
}}

I've tried inline like:

<div class="container" title="{{board.name}}" kendo-droptarget k-dragenter="onDragEnter" k-dragleave="onDragLeave"
k-drop="onDrop" filter=".divStatus" >

I've tried k-filter and kendo-filter - not sure if I'm just using the wrong attribute name...

I've also tried copying this demo, http://demos.telerik.com/kendo-ui/dragdrop/angular and adding filter options to it but I can't get it to work.

I can't seem to find any documentation for this either.

Any ideas?

Drag and Drop

answered on 13 Apr 2016

1 answer

127 views

Layered layout - control number of layers per connection

Is there an option in the layered layout to specify number of layer skips per connection?

For example, I want to have a root node "1", connected to two nodes "2" and "3", but such that "3" appears lower than "2". This data should come from the connection dataItem.

Is this at all possible, with the Diagram API, or with some other workaround?

Thanks.

Diagram

answered on 13 Apr 2016

5 answers

396 views

Have html links in diagram shape

Hi,

I am trying to build a diagram with clickable html links inside the shapes.

I could not find a way to do this.

Please help.

Regards

Diagram

answered on 13 Apr 2016

1 answer

121 views

Stop Undo and Redo Service in Kendo Diagram

I need to stop undo and redo service (for prevent shapes and connections ) in kendo diagram using jquery or javascript .
In my project , i was form some shape with connections during drag event in kendo Diagram(refer image 1).then press ctrl+z ,last formed connection is lossed(refer image 2).
so i need to stop this undo and redo service.

How to stop these service in kendo diagram using jquery or javascript ?

Diagram

answered on 13 Apr 2016