Questions on Kendo UI for jQuery Forum

1 answer

313 views

Menu still showing arrow icon if all sub menu items hidden

Hi,

I'm using kendo menu to create Menu in my application.
For a particular use case all sub-menu items are hidden (cssClass="hide" applied) for an item, but still parent menu item showing arrow key.
My appication dataSource for kendo menu is complex and have similar use case at deep level.
I don't want to show arrow icon on parent menu if all sub-menu items are hidden.
Please go through plunker (http://plnkr.co/edit/erYkvCkAs4jHyCyFEInt?p=preview) for more details.

Thanks,
Vinay

Menu

answered on 27 Feb 2014

2 answers

135 views

Horizontal drag bar height to short after dragging

Hi,

Weird issue with the height of a horizontal drag bar after dragging it when splitter set to percentage height.

Please see my fiddle that shows the problem http://jsfiddle.net/Tups/9gL5k/6/

If you drag the bar of the top splitter from right to left (making panel 1 smaller and panel 2 bigger), when you release the mouse the drag bar resizes and is too small. If you then drag from left to right (making panel 2 smaller and panel 1 bigger) it resizes back to the correct size.

It seems this only relates to splitters set to a percentage height as the second splitter in the fiddle has a fixed height and doesn't have the problem.

Hopefully there is a solution as we have splitters at 100% the height of the page with horizontal scrollbars that are supposed to sit at the bottom of the screen but don't because of this.

Thanks

Splitter

answered on 27 Feb 2014

13 answers

167 views

Switch "shaking"

Hello

We are experiencing issue with Switch component. When user change position(tap), most of the ui elements is moving a little bit(1-2px?) and then return back to original position. This only occures on android devices(tested on Galaxy S Advance, reported from older devices too, simulator works fine). We are experiencing same behavior on few other views that doesnt contain Switch component(mostly views with long lists with scrollbar).

I am able to reproduce the problem with fresh new project from template(kendo mobile ui). Just change initial home view like this:

<div class="view-content">

<h1>Welcome!</h1>

<a id="skin-change" data-role="button" data-click="app.changeSkin">Flat</a>

<p>

Telerik AppBuilder™ enables you to build cross-platform device applications regardless of your

development platform by combining the convenience of a local development toolset with the

power and flexibility of the cloud.

</p>

<input data-role="switch" data-on-label="" data-off-label=""/>

<div class="img"></div>

</div>

Switch (Mobile)

answered on 27 Feb 2014

3 answers

165 views

Best method to expand contents to 100%?

Been fighting this for a couple of days with no easy solution.

What is the best way to have the contents of a section be 100%? In another word, what is the best way to push the lower sections to the bottom of the view?

When I try:
this.control = jQuery('<ul id="' + this.id + '" ><li><span>Item 1</span><div id="c1" style="height:100%;">Content 1</div></li><li><span>Item 2</span><div id="c2" style="height:100%;">Content 2</div></li></ul>');
this.list = new kendo.ui.PanelBar(this.control.get(0),
{
expandMode : 'single'
});

Inspecting the HTML, c1 and c2 heights become "100px". Seems to replace/ignore the setting.

I saw another thread of some lengthy code to expand the contents, but I need a generic way to manage N number of sections (not just two).

Also, it appears that PanelBar cannot be build dynamically. Meaning, adding LI sections to UL section via jQuery. The HTML shows, but it does not take on the behavior of the PanelBar.

Thanks.

PanelBar

answered on 27 Feb 2014

5 answers

212 views

Combobox MVVM headerTemplate

Hi,

I'd like to specify a header template (http://demos.kendoui.com/web/combobox/template.html) for my MVVM Combobox. I've tried data-header-template and data-headertemplate. Neither works. Please advise.

data-template works fine, btw.

EDIT - added jsfiddle link: http://jsfiddle.net/6mHKF/20/

As you can see, the headerTemplate is ignored in the non-MVVM widget initialization method as well.

Thanks!

ComboBox

answered on 27 Feb 2014

5 answers

113 views

Terminated due to Memory Pressure!!??

Added approx. 600 records into ListView, only contain company names. Got "Terminated due to Memory Pressure" on iOS7, but work properly on iOS6.

Anything I can do?

ListView (Mobile)

answered on 27 Feb 2014

12 answers

2.0K+ views

Multiselect dropdown in kendo Grid

Hi,
Is it possible to add built in Multiselect Drop-down in kendo grid. I have attached a sample snap shot of the problem.

Grid

answered on 27 Feb 2014

1 answer

326 views

Update Kendo Grid based On Search Form Post

I've been doing alot of searching but haven't found a clear answer for this. I have a set up textboxes that and a submit button and a Kendo UI grid. I want to post the data to the grid's datasource so that it will return the results based on the criteria. I am not using the MVC wrappers.

I've gotten closer but I can't seem to get the datasource to send the post data when I click submit. I've debugged and in my $("#fmSearch").submit it is hitting the jquery plugin and I've confirmed that it is converting the form data to JSON properly, but it seems as though it it not sending the updated information to the server so that the Action can read it.

JavaScript

var dsGalleryItem = new kendo.data.DataSource({

transport: {

read: {

url: '@Url.Content("~/Intranet/GalleryItem/SearchGalleryItems")',

type: "POST",

data: $("#fmSearch").serializeFormToJSON(),

cache: false

}

},

schema: {

model: {

id: "galleryItemID",

fields: {

galleryItemID: {

nullable: true

},

imageName: {},

collectionName: {},

categoryName: {},

lastUpdatedOn: { type: "date" }

}

});

var gvResults = $("#gvResults").kendoGrid({

autoBind:false,

columns: [{

field: "imageName",

title: "Item Name",

template: "<a href='@Url.Content("~/Intranet/GalleryItem/Details/")#=galleryItemID#'> #=imageName#</a>"

}, {

field: "collectionName",

title: "Collection"

}, {

field: "categoryName",

title: "Category"

}, {

field: "lastUpdatedOn",

title: "Last Updated",

format: "{0:M/d/yyyy}"

}

],

selectable: "row",

change: onRowSelect,

dataSource: dsGalleryItem

});

$("#fmSearch").submit(

function (event) {

event.preventDefault();

dsGalleryItem.read({ data: $("#fmSearch").serializeFormToJSON() });

});

MVC Action

[HttpPost]

public JsonResult SearchGalleryItems(string keyword, int? category, int? collection, DateTime? startDate, DateTime? endDate)

{

var galleryItemList = (from g in db.GalleryItems

//where g.imageName.Contains(keyword)

select new GalleryItemViewModel

{

galleryItemID = g.galleryItemID,

imageName = g.imageName,

collectionName = g.collection.collectionName,

categoryName = g.category.categoryName,

lastUpdatedOn = g.lastUpdatedOn

});

var galleryItemCount = Json(galleryItemList.ToList());

return Json(galleryItemList.ToList()); ;

}

The action is not setup to retrieve different data right now. I am just using the debugger so that I can see that it is getting the values .

The controller is called. But the postdata is not being sent to it. Example: I have a dropdown that defaults to 1. When the page is loaded the 1 gets sent to the controller as category. Debug shows its value as 1. I enter a keyword into the a text box and hit submit but the keyword never gets there. The category is still sent as 1 though. Its like it is posting the old data and never posting the new data from the form.

Grid

answered on 27 Feb 2014

1 answer

1.0K+ views

dropdownlist: prevent opening in onOpen event

1) http://jsfiddle.net/3ML7s/3/
now uncomment data {text: "Item", value:"2"},
when I select vocabulary item I open a popup window
which inserts new value into dropdown and closes it, for simplicity, 'showModalDialog' replaced here by 'alert'

2) now comment data {text: "Item", value:"2"},
when there no real items (just 'empty' and 'vocabulary') I need to open vocabulary immideatly
when popup closes dropdown widget stays still open
but I need mimic 1):
close dropdown and switch to empty item

How can I do this?

DropDownList

answered on 27 Feb 2014

5 answers

503 views

Odd behavior with kendo multiselect

http://jsfiddle.net/ruchan/AgV52/1/

Problem replication:
-click "Init List" and then add new tag to the box by keyboard.
-now click fill List button [it fills "1,2,3" as selected values].
- All the values are not being selected. or sometimes only last value is selected

var list=[{label:'tag1', value:'1'},

{label:'tag9', value:'9'},

{label:'tag8', value:'8'},

{label:'tag7', value:'7'},

{label:'tag6', value:'6'},

{label:'tag5', value:'5'},

{label:'tag4', value:'4'},

{label:'tag3', value:'3'},

{label:'tag2', value:'2'}];

function fillData(tagIds){

var tagObj = $("#addTags").data("kendoMultiSelect");

if (tagObj == undefined) { // if not loaded

$("#addTags").kendoMultiSelect({

dataTextField: "label",

dataValueField: "value",

dataSource: list,

value: tagIds, placeholder: "Select from list",

change: function() {

// change

}

});

} else { // if already loaded only change the values.

tagObj.value(tagIds);

console.log(tagIds);

console.log(tagObj.value());

}

function fillaList(){

var tagIds=[1,2,3];

fillData(tagIds);

}

function clearList(){

fillData([]);

}

note: The problem in only when you do the tag selections from keyboard. Doing it by mouse clicks shows no problem

Is this a bug or i am doing something wrong?

MultiSelect

answered on 27 Feb 2014