[Solved] Grid Control Binding Parameters through JQuery

[Arjuna]

I have the following block of code
 1. A datetime control
 2. A grid control which does data binding through Ajax.  One of the parameters to the binding method on the controller is the date selected on the datetime control.  How do I pass this to the action method of the controller.  I have given the sample code which I am trying to use down below.


@Html.Telerik().DatePicker().Name("marketDate").Format("dd-MM-yyyy").Value(DateTime.Now.Date)


 @(Html.Telerik().Grid<StPo.EntityInterfaces.IFetchedStockInfo>().Name("GrdName")
    .Columns(columns =>
    {
        columns.Bound(stk => stk.Code).Width(100);
        columns.Bound(stk => stk.Title).Width(200);
    })
    .DataBinding(dataBinding => dataBinding.Ajax().Select("FetchNextMarketValueSet", "Home", new { marketDate = DateTime.Now.Date }))
    .EnableCustomBinding(true)
    .Pageable(pagerSettings =>
                  {
                      pagerSettings.Total(int.Parse(ViewData["Total"].ToString()));
                      pagerSettings.PageSize(10);
                  })
        .ClientEvents(events => events.OnDataBinding("Grid_onDataBinding"))        
    )


<script type="text/javascript">
    function Grid_onDataBinding(e) {
        alert("binding");
        var grid = $("#GrdName").data('tGrid');
        var marketValueDate = $("#marketDate").val();
        alert(marketValueDate);        
    }    
</script>

I know there is a rebind method, but not too sure on how to use this.

[Atanas Korchev]

Hello Arjuna,

 You can try passing the date like this:

<script type="text/javascript">
    function Grid_onDataBinding(e) {
        alert("binding");
        var grid = $("#GrdName").data('tGrid');
        var marketValueDate = $("#marketDate").val();
        e.data = { marketValueDate: marketValueDate };
    }    
</script>

Regards,
Atanas Korchev
the Telerik team

[Arjuna]

Hi Atanas,

What does the .data attribute do.  My problem is that I need to pass in some parameters to the Action method in a Controller as given in the code below.


[GridAction(EnableCustomBinding = true)]
public ActionResult FetchNextSet(GridCommand command, DateTime dt)
{
}

So in this situation I need to pass in the dt parameter.

[Atanas Korchev]

Hi Arjuna,

 It should do exactly the same thing. Just make sure the argument name in "data" is the same as the argument of the action method:

public ActionResult FetchNextSet(GridCommand command, DateTime dt)

e.data = { dt: marketValueDate };

All the best,
Atanas Korchev
the Telerik team

[Arjuna]

Hi Atanas,

this does not work, it still takes the parameter which I set through the initial setup highlighted in bold

For example

@(Html.Telerik().Grid<StPo.EntityInterfaces.IFetchedStockInfo>().Name("GrdName")
    .Columns(columns =>
    {
        columns.Bound(stk => stk.Code).Width(100);
        columns.Bound(stk => stk.Title).Width(200);
    })
    .DataBinding(dataBinding => dataBinding.Ajax().Select("FetchNextMarketValueSet", "Home", new { marketDate = DateTime.Now.Date.AddDays(1) }))
    .EnableCustomBinding(true)
    .Pageable(pagerSettings =>
                  {
                      pagerSettings.Total(int.Parse(ViewData["Total"].ToString()));
                      pagerSettings.PageSize(10);
                  })
        .ClientEvents(events => events.OnDataBinding("Grid_onDataBinding"))
    )

It does not take the parameter set on the Grid_onDataBinding event as given below

 function Grid_onDataBinding(e) {
        alert("binding");
        var grid = $("#GrdName").data('tGrid');
        grid.data = { marketDate: '5 / 5 / 2011' };               
    }    

[Atanas Korchev]

Hi Arjuna,

 I suggest you check the client selection online example which implements a similar approach. Check the View tab of the codeviewer for the source code.

Regards,
Atanas Korchev
the Telerik team

[Arjuna]

Hi Antanas,

The link you provided does not work.

Thanks
Arjuna.

[Atanas Korchev]

Hi Arjuna,

 The link is now fixed.

Greetings,
Atanas Korchev
the Telerik team