[Solved] Grid data in pagable grid MVC

[Klas]

Hi is it possible to get all the data from a filterd grid even the data in page 2,3 and so on? 

[Dadv]

Hi,

can you give us more details please?

Do you want the data in client or server side? do you want only the "onscreen" data or all (with out any paging selection) ?

[Klas]

I whant to get the filterd result on the client side in a paged view, so when i have performed the filtering and it ends up in a result of say 160 results and it pages after 10 i still whant to get all the 160 items on the client side. is that possible?

[Dadv]

hi,
in theory it's exactly what it's done in client mode ajax binding (not custom) because filtering/sorting/paging is done on client side: http://demos.telerik.com/aspnet-mvc/Grid/OperationMode?theme=vista 

You could get the data by using the client side api :

<%= Html.Telerik().Grid<OrderDto>()
        .Name("Grid")
        .Columns(columns =>
{
            columns.Bound(o => o.OrderID).Width(100);
            columns.Bound(o => o.ContactName).Width(200);
            columns.Bound(o => o.ShipAddress);
            columns.Bound(o => o.OrderDate).Format("{0:MM/dd/yyyy}").Width(120);
        })
        .DataBinding(dataBinding => dataBinding.Ajax()
                .OperationMode(GridOperationMode.Client)
                .Select("_OperationMode", "Grid"))
        .Pageable()
        .Sortable()
        .Scrollable()
        .Groupable()
        .Filterable()
        .ClientEvents(events => events.   
                    .OnComplete("grid_complete")
            
            )
%>

    <script type="text/javascript">
        var data;
var total;
   
        function grid_complete(e) {
            data = e.response.data;
total = e.response.total;
        }
    </script>

[Klas]

The oncomplete dosent seam to fire, any idea?

[Dadv]

The onComplet is only fire on the first time the page is load, after, the data is manipulate by the client and don't send any other request to the server.

So it's why i buffer the data in the "var data" variable in javascript, and same for the total.

If you want to do some work on databinding  use the other event (onDatabinding, onDatabound).

[Klas]

When i use .OperationMode(GridOperationMode.Client)  the OnComplete never gets fired in my case. and when i use GridOperationMode.Server the e.response.data only returns the 10 visible objects. 

some code...
////////// view
Html.Telerik().Grid(Model)
                        .Name("Grid")
                        .ClientEvents(gridevents => gridevents.OnDataBound("onDataBound").OnComplete("onComplete"))
                        .KeyboardNavigation()
                        .DataBinding(dataBinding => dataBinding.Ajax()
                        .OperationMode(GridOperationMode.Server)
                        .Select("_AjaxBinding", "Home")
                        //Ajax binding
                        //.OperationMode(GridOperationMode.Client)
                        //The action method which will return JSON
                        )
                                .Columns(columns =>
                                {
                                    columns.Bound(c => c.Municipality).Width(100);
                                    columns.Bound(c => c.X).Width(100).Visible(false);
                                    columns.Bound(c => c.Y).Width(100).Visible(false);
                                 })
                        .Sortable()
                        .Groupable()
                        .Filterable()
                        .Localizable("sv-SE")
                        .Selectable()
                        .Pageable()
/////////////////////
/////////////// script i site.master
function onComplete(e) {
        console.debug(e.response.data);
}

[Dadv]

I use the demo to make my sample : (http://demos.telerik.com/aspnet-mvc/grid/operationmode )

- Change .OperationMode((GridOperationMode)ViewData["OperationMode"]) to .OperationMode(GridOperationMode.Client)

- Add   .OnComplete("grid_complete") 

- Add the script : 
 <script type="text/javascript">
        var data;
var total;
   
        function grid_complete(e) {
            data = e.response.data;
total = e.response.total;
        }
    </script>

And all work fine.

Be careful that  .Select("_OperationMode", "Grid")) return all the data server side like in the demo

[Klas]

I have copied the example and added your change but the onComplete envent only fires the first time! it dosent fire when I filter out something in the client... Whats wrong?

[Dadv]

Nothing wrong, ALL the commands will be execute by the client (filtering too..) so .OnComplete will be call 1 time.

You need to bind to OnDataBinding /OnDataBound to do your stuff after.

[Klas]

So if i use the OndataBound I am back to my fist question where do i get the filterd result in all pages?
if i use $('#Grid').data('tGrid').data i get only the visible gridrows....

[Dadv]

Hmm..so you want the filtered values from all the pages.. 

Well the javascript "data" variable have the entire data on start, the only way i see to do what you want is to apply your self the filtering on it, but this will be a big job...

 .ClientEvents(events => events.OnDataBinding("Grid_onDataBinding"))

<script type="text/javascript">
function Grid_onDataBinding(e) {
   //Apply the filter on data
}
</script>

Otherwise, you could try to do something else, do the filtering server side via Ajax :

- Create a Action returning JSON data and accepting GridCommand

[GridAction(EnableCustomBinding = true)]
public ActionResult GetFilteredData(GridCommand command)
{
var data = ApplyFilter(command); //Apply filtering but not the pagging

return new GridModel{ Data = data, Total = data.Count() };
}

and 
 function onDataBinding(e) {

var request = $.ajax({

             url: '<%= Url.Action("GetFilteredData", "ControllerName") %>',

             type: "POST",

             data: { filter: $("#Grid").data("tGrid").filterBy }

         });

 

         request.done(function (msg) {

             data = msg.Data;
     total= msg.Total;

         });

 

         request.fail(function (jqXHR, textStatus) {      

             alert("ko");

         });

    }

But if you want to use this, you should think to use custom ajax binding so you can re-use filter logic server side.