[Solved] Jquery Ajax Grid Binding Paging Problem.

[USMAN]

Hi I have bind the grid using  Ajax binding.

and I have also have a form on top of the grid for searching the records. 

In the start it have 7 Records, but when I do a search ( the search is done using $.ajax JQuery function)  
and im using 
$('#Grid').data('tGrid').dataBind(data);

it bind the grid, BUT The problem is, it return more or less records but still it display 7 Records in paging on the footer of grid.

And another issue is that, if I press the refresh button of Grid from footer, it return the first 7 records, it should display only those records which are bind using $.ajax JQuery function. and also if I do a sorting it do the same, it again return first 7 records and my searching records ignored.


My Ajax JQuery Binding Function

    function SearchBookings() {


                      $.ajax({
                   url: "<%: Url.Action("AjaxSearchBookings","Bookings") %>",
                   data: {StartDateFrom: $("#txtStartDateFrom").val(), StartDateTo: $("#txtStartDateTo").val(), MachineID: $("#MachineID").val(), UserID: $("#UserID").val(), Downtime: $("#Downtime").val(), DowntimeReasonID: $("#DowntimeReasonID").val() },
                   dataType: "json",
                   type: "POST",
                   error: function(e) {
                       alert("an Error Occured: ");
                   },
                   success: function(data) {
                       var BookingOverviewGrid = $('#Grid').data('tGrid');
                       BookingOverviewGrid.dataBind(data);


                   }
               });
}

My Grid 

<%= Html.Telerik().Grid<MyProject.Models.BookingsMetaData>()
        .Name("Grid")

        .DataKeys(keys =>
        {
            keys.Add(p => p.BookingID);
        })
        .DataBinding(dataBinding =>
        {
            dataBinding.Ajax()
                .Select("SelectAjaxBookingOverview", "Bookings", new { StartDateFrom = Convert.ToDateTime(ViewData["StartDateFrom"]), StartDateTo = Convert.ToDateTime(ViewData["StartDateTo"]) })

                .Delete("_DeleteAjaxBookingOverview", "Bookings");

        })
        .Columns(columns =>
        {
            columns.Bound(p => p.Site).Width(80);
            columns.Bound(p => p.MachineName).Title("Machine").Width(80);
            columns.Bound(p => p.StartDate).Format("{0:dd/MM/yyyy HH:mm}").Title("Start Date/Time").Width(80);
            columns.Bound(p => p.EndDate).Format("{0:dd/MM/yyyy HH:mm}").Title("End Date/Time").Width(80);
            columns.Bound(p => p.Username).Title("Booker").Width(80);
            columns.Bound(p => p.Downtime).ClientTemplate("<# if(Downtime) { #>Yes<# } else {#>No<# } #>").Width(80);
            columns.Bound(p => p.DownTimeReason).Width(80);


            columns.Command(commands =>
            {
                // Declare a custom command named "ShowRecord"
                commands.Custom("ShowBooking")
                    // Specify that the action command will make ajax requests
                        .Ajax(false)
                    // Set the text which the command button will display
                        .Text("View Booking")
                    // Specify the action method which the command will invoke
                        .Action("Edit", "Bookings");
                // Specify which properties of the data item will be passed as action method arguments
                commands.Delete().ButtonType(GridButtonType.ImageAndText);
            }).Width(200).Title("Commands");
        })
            .Editable(editing => editing
                .Mode(GridEditMode.InLine))
                                    .ClientEvents(events => events.OnError("onError"))//.OnEdit("onEdit"))
            .Pageable()
                  .Scrollable(s => s.Height(300))
                .Sortable()
                .Filterable()
                .Selectable()

%>

Many Thanx.