This is a migrated thread and some comments may be shown as answers.

Binding to JSONP

13 Answers 135 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Steve
Top achievements
Rank 2
Veteran
Steve asked on 23 Aug 2011, 05:07 AM
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

13 Answers, 1 is accepted

Sort by
0
Atanas Korchev
Telerik team
answered on 23 Aug 2011, 06:46 AM
Hi Steve,

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

All the best,
Atanas Korchev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Steve
Top achievements
Rank 2
Veteran
answered on 23 Aug 2011, 02:18 PM
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?
0
Atanas Korchev
Telerik team
answered on 24 Aug 2011, 07:09 AM
Hi Steve,

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

Regards,
Atanas Korchev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Steve
Top achievements
Rank 2
Veteran
answered on 24 Aug 2011, 03:44 PM
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
0
Atanas Korchev
Telerik team
answered on 24 Aug 2011, 04:43 PM
Hi Steve,

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

Regards,

Atanas Korchev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Steve
Top achievements
Rank 2
Veteran
answered on 24 Aug 2011, 04:53 PM
....seems to be the same right?...

http://screencast.com/t/Y5QWjEXnJBYQ
0
Atanas Korchev
Telerik team
answered on 25 Aug 2011, 07:39 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Steve
Top achievements
Rank 2
Veteran
answered on 25 Aug 2011, 09:01 AM
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 :)
0
Atanas Korchev
Telerik team
answered on 25 Aug 2011, 09:06 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Steve
Top achievements
Rank 2
Veteran
answered on 13 Sep 2011, 09:48 PM
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
0
Steve
Top achievements
Rank 2
Veteran
answered on 13 Sep 2011, 09:56 PM
...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
0
Georgi Krustev
Telerik team
answered on 16 Sep 2011, 05:05 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Steve
Top achievements
Rank 2
Veteran
answered on 16 Sep 2011, 05:23 PM
Works!  Thanks
Tags
Grid
Asked by
Steve
Top achievements
Rank 2
Veteran
Answers by
Atanas Korchev
Telerik team
Steve
Top achievements
Rank 2
Veteran
Georgi Krustev
Telerik team
Share this question
or