[Solved] how to bind data for grid use javascript

[rong]

Hi,
There is the requirement for  bind the grid.

when click the buttton, it need rebind the grid using javascript or ajax.

how to rebind the grid when i click the button?

the view:

@using (Ajax.BeginForm("GetGridSource", new AjaxOptions
{
    HttpMethod = "POST",
    InsertionMode = InsertionMode.Replace
 }))
{
    <table width="100%">
        <tr style="height: 30px">
            <td>
                Date Range:   @(Html.Telerik().DatePicker()
               .Name("datePickerFrom")
               .ShowButton(true)
               .Value(ViewBag.FromDate))
                   to   @(Html.Telerik().DatePicker()
               .Name("datePickerTo")
               .ShowButton(true)
               .Value(ViewBag.ToDate))
            </td>
            <td style="width: 150px; text-align: right;">
                Total Clients :
            </td>
            <td width="180px">

            </td>
        </tr>
        <tr style="height: 30px">
            <td>
                Group By:   @Html.RadioButton("groupBy", "Weekly")Weekly
                @Html.RadioButton("groupBy", "Monthly")Monthly
                @Html.RadioButton("groupBy", "Quarterly", true)Quarterly
                @Html.RadioButton("groupBy", "Yearly")Yearly
                <input type="submit" value="Run Report"/>
            </td>
            <td style="text-align: right;">
                System Last Updated :
            </td>
            <td>

            </td>
        </tr>
    </table>
}
<div id="container">
    <div id="navigate">

    </div>
    <div id="outercontent">
        <div id="seperator">
            <img id="arrowIcon" src="../../images/arrowleft.gif" alt="collapse" title="collapse the client panel"/>
        </div>
        <div id="content" >
            @(Html.Telerik().Grid(Model)
            .DataKeys(keys => keys.Add(c => c.id))
            .Columns(columns => columns.AutoGenerate(column =>
             {
                 //customize autogenereted column's settings
                 column.Width = "150px";
                 if (column.Member == "id")
                     column.Visible = false;
             }))
             .Name("clients")
             .DataBinding(dataBinding => dataBinding
             .Ajax() //Ajax binding
             .Select("GetGridSource", "Home")) //The action method which will return JSON
             .Pageable().Sortable())

        </div>
    </div>
</div>

the controller:

public ActionResult GroupGrid()
        {
            DateTime endLastQuarter = DateTime.Now.AddMonths(-1 * (DateTime.Now.Month % 3));
            endLastQuarter = new DateTime(endLastQuarter.Year, endLastQuarter.Month, DateTime.DaysInMonth(endLastQuarter.Year, endLastQuarter.Month));

            ViewBag.FromDate = endLastQuarter.AddMonths(-3).AddDays(1);
            ViewBag.ToDate = endLastQuarter;

            return View();
        }

        [GridAction]
        public ActionResult GetGridSource(DateTime? datePickerFrom, DateTime? datePickerTo, string groupBy)
        {
            var client = new List<Client> {new Client {id = 1, name = "ceshi", databaseName = "database"}};
            if (datePickerFrom != null)
                client.Add(new Client { id = 2, name = "ccc", databaseName = "eee" });

            return View(new GridModel(client));
        }

[Szilard]

Have you tried rebinding the grid?

function onButtonClicked() {
     var grid = $("#clients").data("tGrid");
     grid.rebind();
}