Questions on Kendo UI for jQuery Forum

1 answer

237 views

Hello,

I`m having a bit of a problem, I have set up a tree view, everything get's loaded properly. The problem that I am facing is that I cannot for some reason access the source and target data items.

The thing that baffles me is that on the select using e.node event I`m getting the proper data:

{_events: Object, _handlers: Object, _id: "56e687375f800af840a30683", name: "5", tenantId: "56bdcc6c3a0328620c306d72"…}

_childrenOptions: Object

_events: Object

_handlers: Object

_id: "56e687375f800af840a30683"

_loaded: false

address: me.extend.init

assets: me.extend.init[0]

attrs: me.extend.init[0]

childNodes: me.extend.init[0]

dirty: false

hasChildren: false

id: "56e687375f800af840a30683"

index: 1

name: "5"

parent: ()

parentId: "56e687305f800af840a30681"

path: "1/3/5"

tenantId: "56bdcc6c3a0328620c306d72"

uid: "a8b4032a-db93-452c-a622-3fe93a5b4ab4"

But in the drop using the same thing on e.destinationNode or e.targetNode I get something like this

o {_events: Object, _handlers: Object, _loaded: true, text: "↵ ↵ 5↵", uid: "9030564d-9f42-491c-8824-21983e3cbe04"…}

_childrenOptions: Object

_events: Object

_handlers: Object

_loaded: true

children: J.extend.init

dirty: false

expanded: false

hasChildren: false

id: ""

items: me.extend.init[0]

parent: ()

text: "↵ ↵ 5↵"

uid: "9030564d-9f42-491c-8824-21983e3cbe04"

__proto__: i

In both cases I`m using:

$("#treeview2").data("kendoTreeView").dataItem(e.destinationNode)

Treeview:

$("#treeview2").kendoTreeView({

dataSource: schema,

dataTextField: "name",

dragAndDrop: true,

drag: drag,

drop: drop,

select: select,

dataBound: onDataBound,

template :kendo.template($("#treeview-template").html())

});

Schema:

var schema = new kendo.data.HierarchicalDataSource({

transport: {

read: function (options) {

// ajax request

}

},

schema: {

model: {

id: "_id",

hasChildren: "hasLocations",

children: "chd"

}

});

TreeView

answered on 17 Mar 2016

3 answers

254 views

How to "activate" recurrenceeditor in add form?

So I have the recurrence editor in my edit form, and it works as its included with the code:

<div class="k-edit-label"><label for="recurrenceRule">Repeat</label></div>

<div data-container-for="recurrenceRule" class="k-edit-field">

<div data-bind="value:recurrenceRule" name="recurrenceRule" data-role="recurrenceeditor"></div>

</div>

And activated with the script:

editable: {
template: $("#editorx").html()
}

Is this possible in a custom add form? I have found no reference in the documentation on how to created kendo type templates for the add forms, only edit.

Thanks in advance.

Scheduler

answered on 17 Mar 2016

7 answers

765 views

Hide gridlines

Is there a way to hide the grid lines in the Spreadsheet ( both in the empty cells and the cells that have some data) ? I tried to set no borders and still gridlines appear . If I have a different fill ( like grey ) , still the lines appears , but it is lighter.

Spreadsheet

answered on 17 Mar 2016

2 answers

315 views

How to integrate templates and modal windows?

I am currently using nunjucks templating engine to build my app. On one .html template (index.html), I have a button that when clicked will open up a modal window. This modal window will contain a .html template with a 'next' button that will take you to another .html template (up to 6 pages). I am wondering how this can be done with Kendo. Basically I am trying to accomplish something like this:

'index.html'

<button id="openButton">Open Window</button>

'main.js'

$(document).ready(function(){

$("#window").kendoWindow({

width: 200,

height: 200,

title: "Centered Window",

visible: false

}).data("kendoWindow");

});

$("#openButton").click(function(){

var win = $("#window").data("kendoWindow");

win.center().open();

});

'modal-window1.html' thru 'modal-window6.html'

<div id="window">

Content of Window

<button id="next-window">Next</button>

</div>

Grid

answered on 17 Mar 2016

2 answers

752 views

Kendo AutoComplete Get Index

hi,

i'm looking for a way to get kendo autocomplete selected index or selected object i have tried this fiddler working fine but i need to access those properties with button click

how can i do it

$('button').on('click', function(e){

var value = $('#autocomplete).data('kendoAutoComplete').value();

});

only i can get this far. is there any other way to get whole object or selected index?

AutoComplete

answered on 17 Mar 2016

3 answers

719 views

Custom validation rules

Kendo UI v2011.3.1129

Hello, I'm trying to attach some custom validation for a text input and having some difficulty. The rule is that the text field must contain at least one non-whitespace character. I've tried a dozen different permutations of the snippet below, but it doesn't seem to work quite as expected.

            roleEditObject.formValidator = $("#roleEditorForm").kendoValidator(
           {
               rules:
               {
                   custom: function(input)
                   {
                       return input.is("[name=name]") && input.val().match(/^\S+$/);
                   }
               }
           }).kendoValidator().data("kendoValidator");

I'm assuming input.is("[name=name]") selects an input with a name attribute equal to 'name'

Any help would be appreciated, thanks.

Validation

answered on 17 Mar 2016

3 answers

599 views

Remove field from create/update

I'm using the Kendo Grid with a Microsoft MVC app, but I don't have the UI for MVC component due to the license we purchased. We will fix that next year when we renew, but right now I'm just using plain JavaScript.

My datasource is a list of objects from Entity Framework, which includes a Reference field called "PersonType". When creating new records, I'm having trouble because ModelState.IsValid == false because the reference object IS being created by the MVC binding, but all of it's properties are NULL and some of those values are required. If the MVC binding didn't create the PersonType object at all there then the ModelState would be valid, because the reference object itself isn't required. I can see that the grid is passing the reference value as null, but having the property passed caused the binding to create the null object. I was trying to use the parameterMap to remove these fields, but can't get the syntax correct.

The classes look like this:

public class PersonType
    {
        [Key, DatabaseGenerated(DatabaseGeneratedOption.None)]
        [Required, StringLength(5)]
        public string PersonTypeId { get; set; }
        [Required, StringLength(100)]
        public string PersonTypeName { get; set; }
    }
public class Person
    {
        public int PersonId { get; set; }
        public string PersonTypeId { get; set; }
        public PersonType PersonType { get; set; }
    }

It's the PersonType reference field in the Person object that is giving me trouble (PersonTypeId is working correctly). How can I remove the PersonType reference when the grid posts the create, or what's the best way to handle the reference fields with the Kendo Grid?

Data Source

answered on 16 Mar 2016

1 answer

624 views

Column header not shown with default data source group

I using a default group on my Grid that was setted on my Data Source.

Data Source:

function getData() {

return {

mode: mode,

startDate: kendo.toString(pickerStart.value(), "yyyy-MM-dd"),

endDate: kendo.toString(pickerEnd.value(), "yyyy-MM-dd")

};

}

var rowHeaders = ["A", "B", "C", "D"];

var dataSource = new kendo.data.DataSource({

transport: {

read: {

url: url,

dataType: "json",

data: getData

}

},

schema: {

total: "total",

data: function (data) {

var dataArray = [];

var index = 0;

for (var key in data[0]) {

if (Object.prototype.hasOwnProperty.call(data[0], key)) {

var property = key;

if (property == "date" || property == "type") {

continue;

}

key = {};

key["x"] = rowHeaders[index];

index++;

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

key["a" + i] = data[i][property];

key["type"] = data[i].type;

}

dataArray.push(key);

}

return dataArray;

}

},

group: { field: "type" } // default group by type

});

And my Grid:

$("#grid").kendoGrid({

scrollable: false,

editable: false,

autoBind: false,

dataSource: dataSource

});

If I leave this way, the column headers are not displayed.

I HAVE to set the "columns" configuration property on the grid to make it work (display column headers).

The problem is that my columns are dynamic. The grid will have as much columns as the months the user selects on the Date Picker.

So I can not set the "columns" configuration property when I create the grid.

On "dataBound" I can get the object "columns" by "grid.columns". How can I make the columns headers appear on my grid?

Thanks!

Grid

answered on 16 Mar 2016

1 answer

897 views

Binding/Syncing Variable with Local Data

I have a local variable ($scope.objects) that contains an array of objects.

I have a kendoGrid that has a dataSource that uses the $scope.objects as its data. This grid has the "destroy" command; when I click the "destroy" button, it removes the item from the grid, but not from $scope.objects. Is there any way to bind/sync these two (dataItems in grid and $scope.objects) together?

I found a few ways to handle this, but it all required me to manually change $scope.objects.

01.$scope.objects = [{...}, {...}, {...}];

02.$scope.dataSource = new kendo.data.DataSource({

03. data: $scope.objects,

04. //...

05.});

06.$scope.grid = $("grid").kendoGrid({

07. dataSource: $scope.dataSource,

08. //...

09.});

I am also looking for something similar for create and update.

Grid