Binding to JSONP

[sitefinitysteve]

I have my returned JSONP object, which I normally pass into my jQuery template, but I'd like to attempt to throw it into the KendoUI grid if possible....how do I go about that?

I don't want to CALL the service via the datasource, I just want to pass the grid the resulting data

Steve

[Atanas Korchev]

Hi Steve,

 Then you can check the "Binding to local data" example.

All the best,
Atanas Korchev
the Telerik team

[sitefinitysteve]

AHAH, was user error, I was trying to bind to "data" instead of "data.mediaitems"

Here's a followup though...

In jQuery templates I can do something like this

<ul id='dt_rating'>\

                            <li class='{{if rating >= 1}} rated {{else}} notrated {{/if}}'> </li>\

                            <li class='{{if rating >= 2}} rated {{else}} notrated {{/if}}'> </li>\

                            <li class='{{if rating >= 3}} rated {{else}} notrated {{/if}}'> </li>\

                            <li class='{{if rating >= 4}} rated {{else}} notrated {{/if}}'> </li>\

                            <li class='{{if rating >= 5}} rated {{else}} notrated {{/if}}'> </li>\

                        </ul>\

So I could style a 5 star rating list

How can I do this in a kendo grid column?

[Atanas Korchev]

Hi Steve,

 Kendo UI should support jQuery templates. You can check this online demo for a working example.

Regards,
Atanas Korchev
the Telerik team

[sitefinitysteve]

I still want to keep my kendo grid syntax...how do I do this in the context of a single column?

{ field: "rating", title: "Rating", width: "100px", template: $.template("#rowTemplate") },

I need to get this to happen on a column level, not a row level

<script id="rowTemplate" type="text/x-jquery-tmpl">

    <ul id='dt_rating'>

        <li class='{{if rating >= 1}} rated {{else}} notrated {{/if}}'> </li>

        <li class='{{if rating >= 2}} rated {{else}} notrated {{/if}}'> </li>

        <li class='{{if rating >= 3}} rated {{else}} notrated {{/if}}'> </li>

        <li class='{{if rating >= 4}} rated {{else}} notrated {{/if}}'> </li>

        <li class='{{if rating >= 5}} rated {{else}} notrated {{/if}}'> </li>

    </ul>

</script>

When I specify this I'm not getting errors per say, but the grid just doesn't populate

[Atanas Korchev]

Hi Steve,

 I've made a working example here: http://jsfiddle.net/korchev/UVaKQ/

Regards,

Atanas Korchev
the Telerik team

[sitefinitysteve]

....seems to be the same right?...

http://screencast.com/t/Y5QWjEXnJBYQ

[Atanas Korchev]

Hello Steve,

 Does the code from the  jsfiddle work ok in your application? I am not sure what may have gone wrong. Perhaps you can try tweaking the jsfiddle so it breaks as it does in your case. Or you can check what the output of $.template($("#rowTemplate")) is. It could be that $("#rowTemplate") returns nothing.

All the best,
Atanas Korchev
the Telerik team

[sitefinitysteve]

Hmmmm, I mean you saw the demo, I'd say unlikely it's null...but I'll have a look...in two weeks when I get back to the office :), I'm heading into the middle of nowhere today w/ no Internet :/ So goin off the radar for a bit, good luck with the kendoing :)

[Atanas Korchev]

Hello Steve,

 I saw the demo and it looks the same from first sight. Yet it does not work while my demo does. We need more info and perhaps a reproducible case.

Regards,
Atanas Korchev
the Telerik team

[sitefinitysteve]

Ok, so finally getting back to this

This is what an alert on the template returns

function anonymous(jQuery, $item) {

    var $ = jQuery, call, _ = [], $data = $item.data;

    with ($data) {

        _.push("<ul id='dt_rating'>             <li class='");

        if (typeof (rating >= 1) !== "undefined" &&

            rating >= 1 != null &&

            (typeof (rating >= 1) === "function" ? (rating >= 1).call($item) : rating >= 1)) {

            _.push(" rated ");

        } else {

            _.push(" notrated ");

        }

        _.push("'> </li>             <li class='");

        if (typeof (rating >= 2) !== "undefined" &&

            rating >= 2 != null &&

            (typeof (rating >= 2) === "function" ? (rating >= 2).call($item) : rating >= 2)) {

            _.push(" rated ");

        } else {

            _.push(" notrated ");

        }

        _.push("'> </li>             <li class='");

        if (typeof (rating >= 3) !== "undefined" &&

            rating >= 3 != null &&

            (typeof (rating >= 3) === "function" ? (rating >= 3).call($item) : rating >= 3)) {

            _.push(" rated ");

        } else {

            _.push(" notrated ");

        }

        _.push("'> </li>             <li class='");

        if (typeof (rating >= 4) !== "undefined" &&

            rating >= 4 != null &&

            (typeof (rating >= 4) === "function" ? (rating >= 4).call($item) : rating >= 4)) {

            _.push(" rated ");

        } else {

            _.push(" notrated ");

        }

        _.push("'> </li>             <li class='");

        if (typeof (rating >= 5) !== "undefined" &&

            rating >= 5 != null &&

            (typeof (rating >= 5) === "function" ? (rating >= 5).call($item) : rating >= 5)) {

            _.push(" rated ");

        } else {

            _.push(" notrated ");

        }

        _.push("'> </li>         </ul>");

    }

    return _;

}

So I stripped out everything, then tried to make my sample the same as the JSFiddle

So this is what fixed it...
http://cdn.kendostatic.com/2011.2.804/js/kendo.all.min.js

I changed the all.min.js from the local "Updated" version you sent me to fix a couple other issues, back to this one, and it all renders again.

Steve

[sitefinitysteve]

...problem is http://cdn.kendostatic.com/2011.2.804/js/kendo.all.min.js has a bucketload of splitter issues for me so I can't use it

[Georgi Krustev]

Hello Steve,

 
We further investigate this issue and figure out  the we do not pass the correct arguments to the jQuery template. Here is a workaround of this issue:

<script type='text/javascript'>
//<![CDATA[
$(window).load(function(){
    var jQueryTemplate = $.template($("#rowTemplate"));

    $("#grid").kendoGrid({
        dataSource: [{
            id: 1,
            rating: 1
        },
        {
            id: 2,
            rating:2
        }
        ],
        columns: [
            {
                field: "id",
                title: "ID"
            },
            {
                field: "rating",
                title: "Rating",
                template: function(data) {
                    return jQueryTemplate($, {data: data});
                }
            }]
        });
    });
    //]]>
</script>

We will further investigate this issue and possibly find better solution of it.

Best regards,
Georgi Krustev
the Telerik team

[sitefinitysteve]

Works!  Thanks