Questions on Kendo UI for jQuery Forum

2 answers

213 views

I'm using the kendoChart to display the json result from a controller action. The contoller action is getting called, but the page gives an error after that which is shown at the bottom of this message. I tried to catch the dataBound event to see what is happening. The error is happening even before the event, so can't catch it.

An example or help appreciated for this problem.

Controller Action:

...
return Json(itemCount, JsonRequestBehavior.AllowGet);

Script:

$("#liveChart").kendoChart({
...
dataSource: new kendo.data.DataSource({
transport: {
read: {
url: "/Charts/Orders/GetLiveOrdersCount",
dataType: "json"
}
},
schema: {
data: "data"
}
}),
...

Error:

SCRIPT5007: Unable to get value of the property 'length': object is null or undefined
kendo.all.min.js, line 11 character 46965

Data Source

answered on 13 Dec 2011

2 answers

437 views

Complete/Error callbacks are not firing

Hello,
I am evaluating the kendoUpload widget. Everything works fine, my file is submitted, however when the upload is complete, my client events don't seem to get fired, or I have something configured improperly. Also of note, if I set autoUpload: false, then the upload files button does not start the upload. Below is what I have for configuration:

div.find('input:file').kendoUpload({
                async: {
                    saveUrl: '/SomeController/Action',
                    autoUpload: true
                },
                localization: {
                    "uploadSelectedFiles": "Upload Logo" // TODO: load language specific text
                },
                multiple: false,
                remove: function (files) {
                    var previewElement = $('#' + item.Uid + 'prev');
                    previewElement.fadeOut('fast', function () {
                        previewElement.html('');
                    });
                },
                select: function (files) {
 
                    if ((window.File && window.FileReader && window.FileList && window.Blob)) {
                        if (files.files.length && files.files.length > 0) {
                            var file = files.files[0];
 
                            var previewElement = $('#' + item.Uid + 'prev');
                            previewElement.previewImage({
                                'file': file.rawFile,
                                'height': 250,
                                'width': 250,
                                'title': 'Some Logo'
                            });
                        }
                    }
                },
                upload: function (evt) {
                    evt.data = { 'Uid': item.Uid };
                },
                complete: function (evt) {
                    alert('complete');
                },
                success: function (evt) {
		alert('success');


                    if (evt.operation == 'upload') {
                        var responseData = evt.response;
                        alert(responseData);
                    }
                }

Here is the response as seen in the fiddler tool:

HTTP/1.1 200 OK
Cache-Control: private
Server: Microsoft-IIS/7.5
X-AspNetMvc-Version: 3.0
X-AspNet-Version: 4.0.30319
X-Powered-By: ASP.NET
Date: Wed, 07 Dec 2011 14:45:13 GMT
Content-Length: 0

Any help would be appreciated.
Thanks,
ian

Upload

answered on 13 Dec 2011

2 answers

137 views

jquery.Validate

Hello,
Including the jquery.Validate library seeams to be interfering with my kendoui controls. Whenever I have the jquery.validate plugin included, I seem to lose all of the events from the kendo widgets. This seems to be the offending script.

<script src="http://ajax.aspnetcdn.com/ajax/jQuery.Validate/1.6/jQuery.Validate.min.js" 
	type="text/javascript"></script>

Any ideas?
Thanks,
ian

General Discussions

answered on 13 Dec 2011

3 answers

79 views

Custom jQuery inside Grid Functions

Hi all,
I got this template apply to a Grid

<script id="template" type="text/x-kendo-tmpl">

tr

<td

>

  <

a href="a" class="something" value="#= id #">Show ID</a>

</

td

>

...

And I want that on click

$(document).ready(function

(){

   $(

'.something').click(function

(){

        alert($(

this).attr("value"

));

return false

;

    });

...

but nothing happens, will if I apply this same jquery outside the Kendo Grid it's works OK.

So how should I bind the click to the template??

Thanks

Grid

answered on 13 Dec 2011

1 answer

120 views

.focus()

I need to be able to set the focus to a numerictextbox, then on change to a dropdownlist

Doesn't seem to be working though...

In the master combobox in the change event I'm doing this

$("#quantity").focus();

here's the initialization of the numeric box

var quantityBox = $("#quantity").kendoNumericTextBox({

min: 1,

format: "#.00 units",

change: function(e){

fromCombo.input.focus();

fromCombo.open();

}

}).data("kendoNumericTextBox");

...and you can see that on it's change I try and set the focus as well

General Discussions

answered on 13 Dec 2011

1 answer

385 views

Combo Box With Image

Hi,

I would like to have an image to the left of the text in the combo box similar to how I have the button in this image, I am using the combo more like a menu where you can select the 2 items in the list but it does not change what is on the tool bar.

I have tried to do it the same way I implemented the button but no luck.

Any ideas

<button id="moveButton" class="k-button"><img />Move</button>

<button id="viewXML"><img /></button>

#moveButton img, #viewXML img

{

content: "";

float: left;

width: 16px;

height: 16px;

margin: 5px 5px 0 0;

background-image: url('images/SpritesSmall.png');

background-position: -70px center;

}

$("#viewXML").kendoDropDownList([{ text: "Option 1", value: "1" }, { text: "Option 2", value: "2"}]);

$("#viewXML").data("kendoDropDownList").text("View XML")

ComboBox

answered on 13 Dec 2011

1 answer

458 views

Dealing with multiple panelBars in a dynamic environment

So far these have been FANTASTIC to work with.

I have two questions.
1) As you can see in the code I currently have 11 panelBars. Each panel bar is located in its own tab. When I click on a section it expands and collapses as expected. But, now I wanted to add in a Toggle to Collapse/Expand all the sections in the current panel.
So the ID of the element I click to do this is id="1-panel" etc. I can then parse it to figure out which panel I am dealing with.

After that I get lost. I looked at the example in the download and just can't seem to make it work. I stepped through the code and there were no errors.

Can you help point me to what I am doing wrong?

2) As I stated I am working on a dynamic project. I have a php file where I define my tabs, sections, and controls. I can build out the system with this one file. But, the issue I am struggling with is how to dynamically add the script. I cannot just add it to the html page generated. WP doesn't like that. Is it possible to simple call a Jquery function that will initiate the new panel without having to go in and actually add the panel code?

Thanks a million for your help!

/* Initialize panel bars */

$("#panelbar1").kendoPanelBar().data("kendoPanelBar");

$("#panelbar2").kendoPanelBar().data("kendoPanelBar");

$("#panelbar3").kendoPanelBar().data("kendoPanelBar");

$("#panelbar4").kendoPanelBar().data("kendoPanelBar");

$("#panelbar5").kendoPanelBar().data("kendoPanelBar");

$("#panelbar6").kendoPanelBar().data("kendoPanelBar");

$("#panelbar7").kendoPanelBar().data("kendoPanelBar");

$("#panelbar8").kendoPanelBar().data("kendoPanelBar");

$("#panelbar9").kendoPanelBar().data("kendoPanelBar");

$("#panelbar10").kendoPanelBar().data("kendoPanelBar");

$("#panelbar11").kendoPanelBar().data("kendoPanelBar");

/* expand/collapse panel */

$(".triggerItem").click(function (e) {

var target = this;

var panelbar = '#' + target.element.context.id;

var item = $( panelbar ).select();

if (item.hasClass("k-state-active")) {

$( panelBar ).collapse(item);

} else {

$( panelBar ).expand(item);

}

});

// Collapse all the sections in the panel

$('.p-collapse').click(function (e) {

var elementId = this.id;

var target = '#panelbar' + elementId.substring(0, elementId.length - 6) ;

var panelBar = $( target ), clone = $( target ).clone(true);

panelBar.data( "kendoPanelBar" ).collapse( target + ' k-link' );

panelBar.replaceWith( clone );

$(target).kendoPanelBar();

});

PanelBar

answered on 13 Dec 2011

1 answer

85 views

Sample code isn't supported by browsers.

Are there examples that are incremental in complexity or only require minimal CSS to work?

Thanks,

Brian

The Basic Usage example for autocomplete has attributes that are not supported by any of the standard browsers.
( http://www.w3schools.com/html5/att_style_scoped.asp )

        <style scoped="scoped">
                .info {
                    display: block;
                    line-height: 22px;
                    padding: 0 5px 5px 0;
					color: #36558e;
                }
				
				#shipping {
					width: 482px;
					height: 152px;
					padding: 110px 0 0 30px;
					background: url('../content/autocomplete/shipping.png') transparent no-repeat 0 0;
					margin: 30px auto;
 				}

                .k-autocomplete
                {
                    width: 250px;
					vertical-align: middle;
                }

                .hint {
                    line-height: 22px;
                    color: #aaa;
                    font-style: italic;
					font-size: .9em;
					color: #7496d4;
                }
            </style>

AutoComplete

answered on 13 Dec 2011

3 answers

138 views

XML on datasource not working...

Here is my test HTML page (only relevant to the problem):

<ul id="books"></ul>

<script id="template" type="text/x-kendo-template">

<li class="book">

<h3>#= title #</h3>

by #= author #

</li>

</script>

<script>

$(document).ready(function() {

function onChage() {

$("#books").html(kendo.render(template, this.view()));

}

// create a template using the above definition

var template = kendo.template($("#template").html());

var dataSource = new kendo.data.DataSource({

transport: {

read: "filters.xml"

},

schema: {

// specify the the schema is XML

type: "xml",

data: "/Filters/Filter",

model: {

fields: {

title: "title/text()",

author: "@Id",

url: "info/text()"

}

},

change: onChage

});

dataSource.read();

});

</script>

and here is my XML file:

<?xml version="1.0"?>

-<Filters> -<Filter Id="drwho"> <Collection>drwho</Collection> <Title>Favourite Doctor</Title> <Info>link_to_popup_info.html</Info> <Image>drwho.png</Image> </Filter> -<Filter Id="poo"> <Collection>poop</Collection> <Title>smell that?</Title> <Info>link_to_popup_info.html</Info> <Image>poop.png</Image> </Filter> </Filters>

It doesn't work. I've also noticed if I overwrite the books.xml file in the sample line by line it will work. Other than that (which is stupid) I have no idea why the code refuses to run. The code is from the xml-data.html file.

Any ideas?

Data Source

answered on 13 Dec 2011

1 answer

268 views

Documentation update/request

Can we get a list of all the field types available in schema definitions of models?

Data Source

answered on 13 Dec 2011