This is a migrated thread and some comments may be shown as answers.

Grid Control Binding Parameters through JQuery

1 Answer 44 Views
Grid
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
Arjuna
Top achievements
Rank 1
Arjuna asked on 11 Aug 2011, 09:05 AM
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>

1 Answer, 1 is accepted

Sort by
0
Igniter
Top achievements
Rank 1
answered on 11 Aug 2011, 03:36 PM
How about loading grid on DateChanged event?

@Html.Telerik().DatePicker().Name("marketDate").Format("dd-MM-yyyy").Value(DateTime.Now.Date).ClientEvents(events => events.OnChange("DatePicker_onChange")
<div id="myGridDiv"></div>

<script type="text/javascript">   
   function DatePicker_onChange(){   
     var date = $(this).data('tDatePicker').value();  
     $('#myGridDiv').load('/Controller/LoadGrid', {date: date})
   }
</script>

And on the controller:
public ActionResult LoadGrid(DateTime date)
        {
            ViewData["MarketDate"] = date;
            return PartialView("GrdNamePartialView");
        }

And put you grid code to GrdNamePartialView partial view control with Ajax().Select ..., new { marketDate = DateTime.Parse(ViewData["MarketDate"].ToString()) }
Tags
Grid
Asked by
Arjuna
Top achievements
Rank 1
Answers by
Igniter
Top achievements
Rank 1
Share this question
or