Hi all

I am digging deeper and deeper into the world of Kendo, encountering new challenges behind each corner ... :-)

I am now trying to implement two cascading dropdown lists similar to the demo.

However I cannot replicate the behavior of the demo, and I am looking to encounter this challenge.

The demo contains three dropdownlists, of which initially two are disabled.
When I select an option in the first, the second will be enabled and I can see some options connected to the selected option.
The datasources are independent webservices which are queried on the moment of rendering the page or later (this is not clear to me).
I assume the second dropdownlist is populated on rendering, and filtered upon enabling it.

I have tried to implement two cascading dropdowns, of which both are enabled from the start.
Both are populated from the startm and there is no filtering at all.

This is my code:

<% 
    Using Html.BeginForm()%>
 
    <div id="legent">
    </div>
     <div id="numbers" disabled="disabled" >
    </div>
    <input type="submit" value="choose" name="r1"/>
 
 
<%end using %>
    <script>
        $(document).ready(function () {
            $("#legent").kendoDropDownList({
                optionLabel: "Legent...",
                dataTextField: "Name",
                dataValueField: "Id",
                dataSource: {
                    transport:
                    {
                        read:
                        {
                            type: "GET",
                            contentType: "application/json; charset=utf-8",
                            url: "http://jason.platform4telecom.com/JsonProfiling/enableme/test%5Eoneoverview%5Ecom/abc/xyz",
                            jsonpCallbackString: "mycallback",
                            dataType: "jsonp"
                        }
                    },
                }
            });
 
            var numbers = $("#numbers").kendoDropDownList({
                autoBind: false,
                cascadeFrom: "legent",
                optionLabel: "Select product...",
                dataTextField: "Identifier",
                dataValueField: "Custnr",
                dataSource: {
                    transport: {
                            read:
                            {
                                type: "GET",
                                contentType: "application/json; charset=utf-8",
                                url: "http://jason.platform4telecom.com/JsonProfiling/FindNumbers/test%5Eoneoverview%5Ecom/abc/xyz",
                                jsonpCallbackString: "mycallback",
                                dataType: "jsonp"
                            }
                    }
                }
            }).data("kendoDropDownList");
 
        });
    </script>

I follow exactly the sample on the site; nevertheless it is not working.

I have following questions:

- where is the filtering taking place?
- how is the value selected in the first dropdownlist passed to the second dropdownlist?
- why is the second dropdownlist not disabled (as in the sample)?

The scripts I am using, are:

    <script src="/Content/kendo_scripts/console.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="http://cdn.kendostatic.com/2012.1.322/js/kendo.all.min.js"></script>
    <link href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.common.min.css" rel="stylesheet" />
    <link href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.default.min.css" rel="stylesheet" />
    <link href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.mobile.all.min.css" rel="stylesheet" />

Looking forward to your help!

Henk Jelt

Hi,

Just wanted to let you all know that it is possible to use the Kendo framework in C# using SharpKit - a C# to JavaScript cross compiler.

Reference documentation and SDK:
http://sharpkit.net/help/SharpKit.KendoUI/SharpKit.KendoUI/ 
http://sharpkit.net/help/SharpKit.KendoUI.Web/SharpKit.KendoUI.Web/ 

Cheers!

Kendo mobile Icons(Tab strip icons and nav bar icons) are not loaded correctly in the internal build Q2.815 when "launched from add to home screen button". However, it works all right from the browser itself. I am on iPhone4 ios 5.1.1.
Has anyone noticed this issue? Has anyone solution for this?

What I mean by 'not properly' is that it shows wrong tab strip icons (yes it does load but wrong items) and this is same for the nav back button, it doesn't load the back arrow ended buttons but some funny looking buttons. Functionally, it works ok though.

I guess this is a mix up on the image pallette but stragely this only happens when luanched from the "add to home screen button".

Thanks heaps for reading!

Joon Choi

Hi there,

We experience this in Android Jelly Bean, default browser for 'onlick' event. We just used the modal window sample. The test page is attached.

How to reproduce: Click to open the modal window and let's say there is a button in the modal window at the same position as the button used to open the modal window. Then it automatically triggers the modal window button's 'onclick' too.

But this works fine with 'data-click'. But needs to verify that, can't we use onclick/mouseup...? Is there a workaround?

/Maddy  

Hi,

I'm using a telerik grid, and i found that when trying to display a string which first character is a white space, the telerik grid trims it, although in the markup, the white space is there.

Any solutions to this issue?

Hi,

I have problem with Czech sorting rules (we have native special chars on different position in alphabet). During debuging the Kendo.web.js library I discovered global variable Comparer with 'methods' asc and desc. How to I can override it or force main custom fuctions to compare values. I don't want to change original code.

Thanks, Petr

Didn't like how the MVC Destroy() method worked so I wired up my own. This is a simple function to help you get the row's data when you fire off the custom event.

Essential "e" is the event that is fired from the custom command event in your Kendo UI grid. It takes the target and turns it into a JQuery object. It grabs the uid of the row and then matches it with the uid in the data. Its very quick and works nicely. Sure there are other ways to skin this cat but this seemed to be very smooth. Seems to me there should be a JQuery data object for the row but all I saw was the uid hence this function below. Anyway thought I'd share.

   function getRowData(e) {
        var target, grid, uid, row, data;
        target = $(e.target);
        uid = target.parent().parent().data().uid;      
        grid = $('#Grid').data('kendoGrid');        
        row = grid._data;
        for (var i = 0; i < row.length; i++) {
            if (row[i].uid == uid) {
                data = row[i];
            }
        }
        return data;
    }

What you'll get is your data for the row as an object so you can simple do:

// note below assumes you have a custom column command that on .click() is attached to the "deleteRow" function "e" is the event that the click event will pass in.

function deleteRow(e){
var data = getRowData(e);
var name = data.full_name // where full_name is a column in your grid. 
alert('Are you sure you want to delete ' + name);
// TODO: wire up your delete event passing in an id or something
$.post('/your/path', {}, function (result) {
if(result.deleted){
// load your UI or whatever
}
});
} 

The getRowData function you can copy/paste but the above "deleteRow" is just an example you'll need to modify to your needs.

I'm having an issue with binding a json file to my chart. I am attempting to have a multi axes chart with stacked and grouped columns. I have it working with static data but cannot get it to work with the dataSource json file. I believe I need to be able to filter the datasource differently for each series. I've included a sample of the function, am I going about this wrong?

$("#ApplesOrangesChart").kendoChart({
theme: $(document).data("kendoSkin") || "default",
datasource: {
transport: {
read:  "testjson.json",
},
sort: {
field: "MonthNumber",
dir: "asc"
},
},
title: {
text: "Apples to Oranges 2011 vs 2012",
},
legend: {
visible: true,
position: "bottom",
},
seriesDefaults: {
type: "column",
},
series: [{
name: "2011 Apples",
stack: "2011",
axis: "monthly",
field: "AppleValue",
filter: { field: "Year", operator: "eq", value: 2011 },
}, {
name: "2011 Oranges",
stack: "2011",
axis: "monthly",
field: "OrangeValue",
filter: { field: "Year", operator: "eq", value: 2011 },
}, {
name: "2012 Apples",
stack: "2012",
axis: "monthly",
field: "AppleValue",
filter: { field: "Year", operator: "eq", value: 2012 },
}, {
name: "2012 Oranges",
stack: "2012",
axis: "monthly",
field: "OrangeValue",
filter: { field: "Year", operator: "eq", value: 2012 },
},{
type: "line",
axis: "cumulative",
field: "CumlativeValue",
filter: { field: "Year", operator: "eq", value: 2011 },
name: "2011 Cumulative",
}, {
type: "line",
axis: "cumulative",
field: "WonCumlativeValue",
filter: { field: "Year", operator: "eq", value: 2012 },
name: "2012 Cumulative",
}],
valueAxis: [{
name: "monthly",
title: {text: "Monthly"},
labels: {
template: "#= kendo.format('{0:N0}', value / 1000) # M"
},
},
{
name: "cumulative",
title: {text: "Cumulative"},
labels: {
format: "C"
},
}],
categoryAxis: {
categories: ["Jan", "Feb", "Mar", "Apr", "May", "June", "July", "Aug", "Sep", "Oct", "Nov", "Dec"],
majorGridLines: {
visible: false
},
},
});

Hi,

I'm having a problem with Kendo Grids and Adobe Air.

When I create a new DataSource (let's call it DS) and then set it to a Grid when the page is loading (document ready), it works great  and  the grid is correctly populated.

But I try to do it after page load, I get the following error:


So I thought I could just create a row template, and I did it with:


And the error give is very similar. I then proceeded to create a "dumb" template in order to test everything thoroughly, and did as follows:


Which produces the following error:


I started digging in Adobe Air configuration, since it could the source of error, and found the following: 

Adobe Air Security Issues

So basically Adobe Air does not support eval (which I believe is used for the templating system).

Is there any workaround for this issue?

Tks,

HL

Hi everyone,
I have a strange issue.
I am loading my kendo mobile app in iframe and the some css isn't applied and the tab button images are not showing up(just blank buttons). This seems happening on the initial loading and if I hit F5 to refresh the page, it then shows ok.

This happens in Chrome and the url is http://www.bookingbay.net

The reason I do this is basically to allow users to use the app on browsers as well as the mobile devices. It detects the http header to see if the user is connecting from the desktop browsers and if so it redirects the desktop users to the desktop.html page which does this iframing to enclose the app into smaller real estate.

Anyone experienced similar issues? Thanks in advance,

Warm regards,

John Choi