Delay Loading of the Grid until a Client Side Event Fires??

[Robert]

Hi,

Is there a way to postpone the loading of a grid until a client side event happens. My requirement is to show a search form on a page and only display the grid when the 'search' button is clicked. I need to do all of this on the client side.

To limit the amount of javscript it would be nice if I could still setup the grid declaritively in my view to specify all of the columns, but then only trigger the Grid to load when the search button is clicked. I have configured the grid for ajax binding but the problem is that the grid is immediately rendered on the page (without any data) and then immediately calls back to the server to load the data (before the user has had a chance to fill out the form).

This is triggered by the script registrar. So ideally there would be a way, to include the $('#grid').tGrid() snippet generated by the script registrar elsewhere in a script block that could be executed later on.

Maybe I am just going about this in the wrong way, but can anyone think of a way to do this?

Thanks in advance for any help you can give me,
Rob

[Rush]

were you able to figure this out? I have a similar situation.

[Saul]

I too would like to know how to do this. Did you ever figure this out?

[Carlo]

Hi,
I solved a similar problem loading an invisible grid  in the view:

.Pageable(pag => pag.PageSize(12))
.HtmlAttributes(new { style = "display:none" })

then I added a button that displays a telerik window with comboboxes for criteria selection.

After user has confirmed his selection I call this  jscript code :

function conferma() {
  $('#Criteri').data('tWindow').close();
  aggDati();
  aggiornaCampi();
  aggiornaInfo();
  $('#ElencoDocumenti').show();
  $('#ElencoDocumenti').data('tGrid').rebind();
}

this shows the grid: "$('#ElencoDocumenti').show();"
and this rebind the data."$('#ElencoDocumenti').data('tGrid').rebind();"

Hope this can help.

[Robert]

Hi Guys,

I did manage to solve this in the end with the help of the following page which describes the grid's client-side API: http://www.telerik.com/help/aspnet-mvc/telerik-ui-components-grid-client-api-and-events.html

To stop the first time call back issue I did the following:

1) added the following javascript to the page:

var first = true;
function onDataBinding(e) {
    if (first) {
        e.preventDefault();
        first = false;
        return false;
    }
}

2) configured my grid to use this callback as follows:

@( Html.Telerik().Grid<MyEntityDTO>()
        .Name("Grid")
        .Columns(columns =>
        {
            columns.Bound(o => o.CustomerText).Title("Customer Text")
                .ClientTemplate("<#= CustomerText #>");
        })
        .ClientEvents(events => events.OnDataBinding("onDataBinding"))
        .DataBinding(dataBinding => dataBinding.Ajax().Select(MVC.Samples.Grid.TelerikClientCallback().GetRouteValueDictionary()))
        .EnableCustomBinding(true)
        .Pageable(p => p.PageSize(WebConstants.DEFAULT_GRID_PAGE_SIZE))
        .Sortable()
)

So the ClientEvents() part above will call into the javascript method on the DataBinding event. The first time this is called the event will be cancelled by the javascript function. This means I have an empty grid showing without getting a call to my callback method.

To get my search form hooked up to trigger the grid to load I added the following javascript:

$(document).ready(function () {
    $('#search-user-form').submit(function (e) {
        // user has clicked search so get hold of grid and tell it to bind
        // this will cause the onDataBinding event to fire on the Grid
        var grid = $('#Grid').data('tGrid');
        grid.rebind({ customerText: $('#txtCustomerText').val(), claimId: $('#txtClaimId').val(), damageCategoryId: 1 });
        //Prevent the submit event and remain on the screen
        e.preventDefault();
        return false;
    });
});

This works well as it lets me use the grids callback settings as they are (configured previously) but just pass through my additional search criteria parameters.

My controller method signature for the callback is:

public virtual ActionResult TelerikClientCallback(GridCommand command, string customerText, string claimId, int damageCategoryId)

So this controller now has access to the standard GridCommand object for paging and sorting info, as well as my extra custom search parameters.

Hope that helps someone out there.

Cheers,
Rob

[Saul]

Thanks for the reply.

I really wanted a solution that would avoid the initial databind of the grid as it is a data intensive query. My solution was to not bind the grid at all. When the user clicks a button I do an AJAX post to get the data and use the grids databind to bind the data to the grid.

grid.dataBind(response.data)

The problem with my method is that paging, sorting. and filtering do not work.

[Saul]

Sorry Rob, I did not notice your reply and was responding to Carlos method.

Your solution is exactly what I was looking for.

Thanks.