[Solved] Client binding with no initial source?

[David]

I'm doing something similar to the client side selection demo, with a Grid that changes its data binding based on what's selected on another grid. However I want to start off the second grid as hidden, then rebind with the correct parameter and show it when something is selected. I don't have an initial value to bind to, like what is in the demo.

But when I try, the page always pops up an error dialog on the initial load. Is there any way to do this?

[Atanas Korchev]

Hi David,

 You can check the twitter binding example which shows a grid which is bind entirely on the client-side. Perhaps it would help. 

Regards,
Atanas Korchev
the Telerik team

[David]

Well I was able to get the client-side binding to work, but paging and sorting don't work in that case.

[Atanas Korchev]

Hello David,

 Indeed paging and sorting are not enabled in the twitter binding example. The grid currently expects that the paging and sorting is done by the service which provides the data. However I am willing to help you achieve your goal. Could you please provide some sample which I can check out?

Regards,

Atanas Korchev
the Telerik team

[David]

Here's the grid definition and code to populate it:

Html.Telerik().Grid<Cpx.Models.FeedSummary>()
                .Name("Feeds")
                .Columns(columns =>
                {
                    columns.Bound(c => c.Name).Title(SharedRes.Name);
                    columns.Bound(c => c.FeedId).Title(SharedRes.Id).Width(100);
                    columns.Bound(c => c.FeedId)
                        .Format("<a href=\"/Feeds/Edit/{0}\">" + SharedRes.Edit + "</a> | <a href=\"/Feeds/Delete/{0}\">" + SharedRes.Delete + "</a>")
                        .Title(SharedRes.Actions)
                        .Width(150);
                })

        function refreshFeeds(publisherId) {
            var feedsGrid = $("#Feeds").data('tGrid');
            $.getJSON("/Feeds/JsonFeedList/" + publisherId, function (data) {
                feedsGrid.dataBind(data);
                $("#FeedsArea").show();
            });
        }

I also tried populating with OnDataBind but that didn't change anything (when I tried to add paging and sorting). Also earlier I had an empty Ajax data binding but that would give a pop up error on start.

[Atanas Korchev]

Hi David,

 I am sending a sample project which shows how to perform client-side binding with paging and sorting.

I hope this helps,
Atanas Korchev
the Telerik team

[David]

Ahh, so you have to do all the paging and sorting yourself in the AJAX method. Is it possible to sort the grid without going back out to the server?

[Atanas Korchev]

Hello David,

 This is currently not supported out of the box. However it is possible to implement paging and sorting entirely on the client-side. Find attached the modified sample project.

Regards,
Atanas Korchev
the Telerik team

[David]

Just FYI for everyone. I talked to Atanas through email and he suggested another way to solve my original problem. If you have AJAX binding you can suppress the initial databinding:

function onDataBinding(e) {
    if (cancelBinding) {
        e.preventDefault();
    }
}

[Craig Fisher]

Thanks! I was just looking for this also.

[Rahul]

Thanks this is really helpful.

But Grouping is not working on this sample. How can we make grouping work?

For sample: 222878_gridclientbinding.zip Posted on Nov 8, 2010 

Thanks