Questions on Kendo UI for jQuery Forum

3 answers

104 views

Tab does not select when page local dataUrlField data is specified.

The example below illustrates a case in which tabs do not select when the dataUrlField is specified as a page local href such as '#content1'.
It seems like this case should work since the select event fires and the correct element is passed in. It would be ideal if there was a more reliable way to obtain access to the data element to which a tab is bound.

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<link href="kendo.common.min.css" rel="stylesheet" />

<link href="kendo.default.min.css" rel="stylesheet" />

<script src="jquery.min.js"></script>

<script src="kendo.all.min.js"></script>

<script>

$(function () {

var data = [{ Name: 'Tab 1', Url: '#content1' }, { Name: 'Tab 2', Url: '#content2' }];

$("#tabstrip").kendoTabStrip({

dataTextField: "Name",

dataUrlField: "Url",

dataSource: data,

select: function (el) {

//would be nice to have a reference to the data source data item here rather than relying on the item index.

var itemIndex = $(el.item).index();

$('.tabContent').hide();

$('#content' + itemIndex).show();

}

});

getSelectedTabIndex = function () {

return $("#tabstrip").data("kendoTabStrip").select().index();

}

$('#showSelectedTabIndex').click(function () {

//always returns -1

alert(getSelectedTabIndex());

});

</script>

</head>

<body>

1.) Click a tab <br />

2.) Click the Show Selected Tab Index button.<br />

<br />

The tab is not visually selected and the value returned for the selected index is -1.

<br /><br />

<button id="showSelectedTabIndex">Show Selected Tab Index</button>

<div id="tabstrip"></div>

<div id="content0" class="tabContent" style="display:none;">Content 1</div>

<div id="content1" class="tabContent" style="display:none;">Content 2</div>

</body>

</html>

TabStrip

answered on 07 Oct 2013

12 answers

208 views

swipe issue in ios 7

In ios7, when I swipe left to right it navigates to the previous page. This is breaking my single page app. What is the correct way to handle this navigation when using kendo mobile and ios7 safari?

Are there any guidelines or workarounds?

Application

answered on 07 Oct 2013

5 answers

440 views

Kendo datasource custom filter operator issue

Hi,

I have an issue regarding a custom filter operator that doesn't accept string value.
I have a grid and I want to filter the grid's datasource on multiple fields using 'or' logic, using a text input.

I've prepared a jsfiddle: http://jsfiddle.net/angheca001/6BC26/4/
If i pass a numeric value into the input it works fine but the problem is when i put a string value in the input:
I get a 'ReferenceError' telling me that the actual value of the input is undefined (not the variable but the actual value)
Example:
- i put '1' into the input field, it filters fine and shows the row containing '123' in the targets field
- i put 'a' and it says 'ReferenceError: a is not defined'

Thanks,
Catalin

Data Source

answered on 07 Oct 2013

6 answers

311 views

Request for a demo using CRUD Master-Detail, MVC,Razor and Entities

Hi!

I am struggling to get a master-detail fully working (and I m not succeding...unfortunately)

The site has lots of demos but I cannot find one that covers Ajax KendoGrid Master-Detail CRUD in both using MVC + Entities Framework + Razor.

I would appreciate it if you upload such a demo or point me somewhere that something like that exists.

Thanx in advance

Grid

answered on 07 Oct 2013

1 answer

38 views

Are Kendo DataSources able to handle data response sizes that differ from PageSize?

We have noticed that dataSources can drop rows in a few scenarios. After parsing the data from the server while it's inserting stuff into the dataSource._ranges[] array you can notice that not all of the rows that were received by dataSource:parse() and dataSource:data() are available in the ranges.

If the data response size is less than the pageSize() value then the grid has problems scrolling and paging, and upon scrolling, the dataSource() will continually request (page 1) and (page 2) over an over again.

If the data response size is larger than the pageSize() it might work, but we are unsure. We have also noticed that if the data response size is 2x the pageSize() then we are more likely to have an issue with data finding it's way in the ranges.

The server is aggregating data from several services and it's hard to predict the number of records that will be returned.

Should kendo support server responses that have more or less data than the page size suggests?

Data Source

answered on 07 Oct 2013

8 answers

1.5K+ views

Hierarchical data source and treeview.

Hello!

I have following data strucure: there are proejcts which has some items, these items can have other items as childs and as parents
accordingly.
--project1:
    --item1
            --item3
                  --item4
    --item2
--project2:
   //...

EntityResource.query(function (entities)

{

     //Entities are loaded dynamically when project selected.

//form data and append to tree

treeview.append(..., projectNode);

}

Entities is a simple array of Resource objects (I use REST functionality from AngularJS), and some of them has circular references to each other,
say I have some EntityDto which has Children property which is array of child entities, and there is also Parent property which points to parent entity.

EntityDto has following properties:
$id: "1"
Children: Array[2]
DtoKey: "EntityId=77"
EntityId: 77
Name: "file10.2"
Parent: null

So I decided to use existing functionality like hierarchical data source:

EntityResource.query(function (entities)

{

var localDataSource = new

kendo.data.HierarchicalDataSource({ data: entities});

     localDataSource .fetch();

treeview.append(localDataSource ,projectNode);

}

And of course it doesn't work... I guess I have to specify schema and model, but I didn't find any example that is similiar to my case.
I need to get somethin like this:

var hierarchialEntities = [ {

EntityName: "Parent1",

items: [

{ EntityName: "Entity1", class: '.entity-node', isEntity: true },

{ EntityName: "Entity2", class: '.entity-node', isEntity: true },

{ EntityName: "Entity3", class: '.entity-node', isEntity: true,

items: [{ EntityName: "Entity7", class: '.entity-node', isEntity: true }]

}

]

}, {

EntityName: "Parent2",

items: [

{ EntityName: "Entity4", class: '.entity-node', isEntity: true},

{ EntityName: "Entity5", class: '.entity-node', isEntity: true},

{ EntityName: "Entity6", class: '.entity-node', isEntity: true }

]

}

];

treeview.append(hierarchialEntities,projectNode); //works as expected!!!

Can anybody explain, what I'm doing wrong? Or point to useful example or source code.

Thanks in advance.

UPDATE.
I will a little bit reformulate the question: is there a way in kendo-ui to get hierarchialEntities (see above) from array of EntitiesDto (see above)?
I supposed that HierarchicalDataSource can do that automatically, provide array of EntitiesDto and retrive hierarchialEntities...

Hierarchical Data Source

answered on 07 Oct 2013

3 answers

146 views

Allow InLine editing without a backend

Hi,

We have a grid that is part of a form, which is used to create a one-to-many relationship. However, we cannot set the grid to InLine editing without having to specify an URL for create/update/delete.

We would like not to specify those URLs and simply read from the grid's datasource before submitting the form.

Sending calls to /dev/null is not an option, since that seems to reset the ViewModel's state (we lose info on isNew, isDirty, etc).

Is there a way we could use this mode without auto-saving?

Thank you,
Jni

PS : I'm sorry - I didn't realize there was a "grid" forum separate from the asp.net mvc grid. Can you please move it?

Grid

answered on 07 Oct 2013

1 answer

100 views

columnMenu fails when fiterable method is defined for the columns

I can't get columnMenu to display when I have a method defined for each columns filterable attribute. I get a Microsoft Error.

My grid configuration looks like :

$("#gridCityCodes").css("top", "46px").kendoGrid({

dataSource: this.gridDataSource,

sortable: true,

editable: true,

selectable: "multiple",

navigatable: true,

filterable: true,

resizable: true,

columnMenu: true,

change: this.gridChanged,

toolbar: [{ name: "save", text: userMsgs.Save }, { name: "cancel", text: userMsgs.Cancel}],

columns: [{ field: "CityAlpha", width: "100px", title: userMsgs.CityCode, filterable: this.fixGridFilterPopups },

{ field: "CityNumeric", width: "150px", title: userMsgs.IataCityCode, filterable: this.fixGridFilterPopups },

{ field: "Description", width: "300px", title: userMsgs.Description, filterable: this.fixGridFilterPopups },

{ field: "NextFlightEnabled", width: "200px", title: userMsgs.NextFlightEnabled, filterable: this.fixGridFilterPopups}],

dataBound: function () {

window.selectedModuleViewModel.reHighlightSelectedRows();

window.selectedModuleViewModel.pullColumnsForFiltering();

}

});

fixGridFilterPopups: {

ui: function (element) {

/* logic commented out to do nothing right now. */

}

I get an error in kendo.web.js with an error

var ObservableObject = Observable.extend({

init: function(value) {

var that = this,

member,

field,

parent = function() {

return that;

};

Observable.fn.init.call(this);

for (field in value) {

member = value[field];

if (field.charAt(0) != "_") {

member = that.wrap(member, field, parent); // <-------- error occurs here

}

that[field] = member;

}

that.uid = kendo.guid();

},

The error I receive is a Microsoft JScript runtime error: Object doesn't support property or method 'wrap'. Any ideas on how to get around this? FWIW, if I turn off the columnMenu option the filter dialog comes up just fine.

General Discussions

answered on 07 Oct 2013

1 answer

75 views

Insert newly created record with rowId from db

Hi,
I'm building a grid bound to a remote source.
I Have Read and Create methods now.
When I create a new record everythings works fine, for the first "insert"
If I create another record the grid sends to the server both my new records.

I suppose that is because the key value of the model ( a simple ID -> rowId from db) is always 0 and so the datasource thinks that is a newly inserted record.
Is there a way to update my datasource with the rowId (that I manage to return back to client after being inserted on db)?
Or should I simply reload the grid (not so performing though)?

I'm using inline & batch edit!

Thanks
Fabio

Grid

answered on 07 Oct 2013

1 answer

607 views

Cascade event VS select

Hi,

I would like to suggest an improvement concerning events on the DropDownList.

We wasted a lot of time to figure out that the "select" event is not fired when the value is changed programmatically. This seriously violates the "least surprise" principle. Later we found out about the "cascade" event. But here are a few suggestions :

* Improve documentation : http://docs.kendoui.com/api/web/dropdownlist#events-cascade. Seems like a copy/paste mistake. Also explain how it differs from select.
* Improve consistency : in the select event, you use "e.item" to get the selected item while you need to use "this.element" in cascade.
* I'd suggest combining the 2, or if there is a feature about the "cascade" event that I don't see, I think it would be nice for the select event to be fired when changed programmatically. If people need to know wether or not it was from user interaction, a simple "e.fromUser" or something like this would do the trick.

In any case, I just thought that "cascade" was counter-intuitive to use to catch a selection, especially since there is already a "select" event.

Thank you,
Jni

DropDownList

answered on 07 Oct 2013