Questions on Kendo UI for jQuery Forum

7 answers

756 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

311 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

745 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

712 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

587 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

619 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

893 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

answered on 16 Mar 2016

7 answers

387 views

New AMD definitions in v2016.1.112 are incompatible with webpack

In 2015.3.1113, kendo.menu definition was

(function(f, define){

define([ "./kendo.popup" ], f);

})(function(){

(function(){

...

})();

return window.kendo;

}, typeof define == 'function' && define.amd ? define : function(_, f){ f(); });

This did work with webpack.

In 2016.1.112, kendo.menu definition has been changed to:

(function (f, define) {

define('kendo.menu', ['kendo.popup'], f);

}(function () {

var __meta__ = {

id: 'menu',

name: 'Menu',

category: 'web',

description: 'The Menu widget displays hierarchical data as a multi-level menu.',

depends: ['popup']

};

(function ($, undefined) {

...

})(window.kendo.jQuery);

})();

return window.kendo;

}, typeof define == 'function' && define.amd ? define : function(_, f){ f(); });

This no more works with webpack latest version which returns

ERROR in ../js/vendor/kendo/kendo.menu.js

Module not found: Error: Cannot resolve module 'kendo.popup' in C:\<project>\js\vendor\kendo

@ ../js/vendor/kendo/kendo.menu.js 26:4-44

General Discussions

answered on 16 Mar 2016

4 answers

326 views

Using Sortable with an Editable Grid

I have been trying to implement a simple grid that is editable and sortable in javascript. After trying various ways (inline/popup editing as well as batch set to true/false) I can't find a solution that provides a reasonable end-user experience. Either I can have complete editing functionalities implemented and be unable to sort the grid, or vice-versa.

I reference your example:
http://docs.telerik.com/kendo-ui/controls/interactivity/sortable/how-to/batch-editable-grid

However I found when running the example in the telerik dojo the correct functionality is not implemented. The drag and drop is not working. I'm hoping there is an easy fix to my problem.

Thanks,
Kyle

Drag and Drop

answered on 16 Mar 2016

2 answers

363 views

[Solved] Kendo.bind and scoping of datasource and handler functions

I am working on using the declarative widget configuration so I can dynamically add stuff to the dom and wire it up with a simple kendo.bind('selector call') however I am having some issues with scoping. I am using an IIFE, creating a datasource in it, and calling bind in document ready.. if I do this...

(function () {

var dataSource = new kendo.data.DataSource({

transport: {

read: {

// the remote service url

url: baseUrl + "Lookup/CustomerKendo"

}

},

serverFiltering: true,

schema: {

data: "Data"

}

});

// Document Ready

$(function () {

kendo.bind("#content");

});

}());

I get an error that dataSource does not exist. I was able to get it to work by doing this...

var billingEdit = billingEdit || {};

(function () {

// Document Ready

$(function () {

billingEdit.dataSource = new kendo.data.DataSource({

transport: {

read: {

// the remote service url

url: baseAreaUrl + "Lookup/CustomerKendo"

}

},

serverFiltering: true,

schema: {

data: "Data"

}

});

kendo.bind("#content");

});

}());

and specifying billingEdit.dataSource in the data-source attribute. However, I want to avoid creating global variables. Is this possible? I also expect that if I put functions in the IIFE they will be invisible as well and I'll get more errors.

how can I have the controls be bound withing the scope of the IIFE?

General Discussions

answered on 16 Mar 2016