Questions on Kendo UI for jQuery Forum

3 answers

207 views

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

249 views

[Solved] 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

133 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.1K+ 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

360 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

[Solved] 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

520 views

[Solved] 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

1 answer

133 views

Pagination controls don't work, but grid correctly talks to datasource

I'm currently trying to get a Kendo grid to talk to my MVC controller action and return pagable data.

I have the grid setup like so:

$(document).ready(function () {

var grid = $("#itemList").kendoGrid({

toolbar: kendo.template($("#template").html()),

columns: ["Manufacturer", "Model", "Price", "Tags"],

dataSource: {

transport: {

read: {

url: "catalogadmin/_index",

dataType: "json",

type: "POST",

data: {

filter: ""

}

},

schema: {

data: "data", // records are returned in the "data" field of the response

total: "total" // total number of records is in the "total" field of the response

},

pageSize: 2,

serverPaging: true

},

pageable: true

});

This correctly calls my datasource and passes in the filters etc, but the paging controls don't work. The paging controls appear but have no page numbers or totals. When I click on a next/prev page button, a JS error is thrown saying "Object does not support property or method 'slice'". If I remove the "pageable" option on the grid setup, I don't see any paging controls at all.

As far as I know, I'm correctly returning the total in the JSON result so that the grid knows the data source size:

{"total":4,"data":[data is in here and is all correct]}

Any ideas what could be going wrong here?

Thanks,
Charles

Grid

answered on 27 Feb 2014

8 answers

387 views

incorrect icons?

Hello. Per the API documentation here:
http://docs.telerik.com/kendo-ui/getting-started/mobile/icons

I added icons from the list available at the end of the page. I added the following to my css file:

.km-orders-e:after,
.km-orders-e:before
{
content: "\e306";
}
.km-items-e:after,
.km-items-e:before
{
content: "\e320";
}

The icons that display for these 2 items are in the attached image. What are the correct values for the items I want to display from the list of icons?

General Discussions

answered on 26 Feb 2014

1 answer

170 views

Radial Gauge Bezel Customization

Is there any way to customize the Radial Gauge Bezel? Specifically I would like to be able to change the stroke and color, like shown in the attached image.
I've achieved this by changing the stroke and fill color values in chrome developer console like this:

<path style="display: block; " d="M 21.748 348.065 A230 230 0 1,1 448.252 348.065 L 434.345 342.445 A215 215 0 1,0 35.655 342.445 z" stroke-linecap="square" stroke-linejoin="round" fill-opacity="1" stroke-opacity="1" fill="#d2d3d6" stroke="#9c9b9b"></path>

Is there a way to set this by default, so it renders all path sections like this (Note only top part of radial bezel is colored in this image, and not the yellow and red parts)? We're really in need of this functionality, and we've been looking for it for a _long_ time.

Thanks in advance :)

Regards,
Nicklas

LinearGauge

answered on 26 Feb 2014