How to load Grid asynchronously (not GridBuilder.DataBinding)?

[Parker]

I'm writing an application where I'd like to load an entire MVC Telerik Grid asynchronously via ajax.  I've have a containing div into which I want to render a telerik grid that gets configured and returned to the client via ajax.

Currently, when you render a grid on the server, it will render the skeleton code and a snippet of javascript that spins up and initializes the Telerik Grid.  The snippet of javascript that I'm talking about is:

<script type="text/javascript">
    jQuery('#MyTelerikGrid').tGrid({....telerik-grid-json-serialized});
</script>

I see two solutions and would like the community's opinion on both:

1. Parse thorough the ajax response, dynamically evaluating <script></script> using javascript's built in eval function.  I don't like this because different browsers evaluate dynamically injected <script></script> tags.  In some browser versions we could be inadvertently evaluating the script twice.
2. Leverage Telerik to configure the GridModel, render the html skeleton, but do not render the javascript snippet that initializes the grid.  Ideally I'd want to then have a handle on the GridModel so that I could generate the serialized the GridModel to JSON so that the client could initialize the Grid.

I can see #2 being a ToJsonHtml() method on ViewComponentBuilderBase that returns a JSON object or JSON object string with the following properties:

{

        html: "The skeleton html that would have been rendered, less the javascript init code",

        config: { ..... component serialized to json .......},
           jQueryFunc: "tGrid",
           rootNode: "#ComponentName"

}

You could then initialize your own Component with the appropriate call.  For example for a telerik grid you could initialize it with:

var boundingBox = jQuery("#myboundingbox"); /* the container into which you want to render the component */
var componentConfig = /* the json object from ToJsonHtml() */

boundingBox.html(componentConfig.html);

jQuery(componentConfig.rootNode).tGrid(componentConfig.config);

 

/* or most generically */

jQuery(componentConfig.rootNode)[componentConfig.jQueryFunc](componentConfig.config);

I haven't took a dive into the Telerik source in a couple months, but will try a give my second approach a go.

Thanks
Parker