How to pass values from telerik mvc ajax grid to controller

Question

I have 2 telerik mvc ajax grids which needs to be populated based on the selected row on the first grid.

below is my code:

@(Html.Telerik().Grid<PurchaseRequest>()
   .Name("grdPurchaseRequest")
   .DataBinding(binding => binding.Ajax()
     .Select("GetPurchaseRequests", "PurchaseOrder"))
   .DataKeys(keys => keys
    .Add(o => o.PurchaseRequestID))
  .Columns(cols =>
  {
    cols.Bound(c => c.PurchaseRequestID).ReadOnly().Hidden();
    cols.ForeignKey(c => c.ProjectID,(System.Collections.IEnumerable)ViewData["prProjects"],
               "ProjectID", "ProjectName");
    cols.Bound(c => c.FullName);
    cols.Bound(c => c.RequestDate).Format("{0:MM/dd/yyyy}");
    cols.Bound(c => c.Remarks);
    cols.Bound(c => c.CheckedBy);
    cols.Bound(c => c.ApprovedBy);
  })
  .ClientEvents(clientEvents => clientEvents.OnRowSelect("onRowSelected"))
  .RowAction(row =>
  {
    row.Selected = row.DataItem.PurchaseRequestID.Equals(ViewData["id"]);
  })
  .Pageable()
  .Sortable()
  .Filterable()
  .Selectable()

)

====Second GRID=====

This the the second Grid that will be populated based on the selected record on the first grid

 @(Html.Telerik().Grid<PurchaseRequestDetail>().HtmlAttributes(new { style = "width: 50%"   })
 .Name("grdDetails")    
 .DataKeys(keys => keys
    .Add(o => o.PurchaseRequestDetailID)
    .RouteKey("PurchaseRequestDetailID"))
 .Columns(cols =>
 {
    cols.ForeignKey(c => c.ItemID, (System.Collections.IEnumerable)ViewData["prItems"],
                    "ItemID", "ItemName").Width(200).Title("Description");
    cols.Bound(d => d.ItemQuantity).Width(100).Title("Quantity");
    cols.Bound(d => d.ItemValue).Width(100).Title("Value per quantity").Format("Php  {0:###,###.00}");
    cols.Bound(d => d.TotalPrice).Width(500).Format("Php {0:###,###.00}")
        .Aggregate(aggs => aggs.Sum())
        .ClientFooterTemplate("Php <#= $.telerik.formatString('{0:n}', Sum) #>");
})    
 .DataBinding(binding => binding.Ajax()
    .Select("GetPurchaseRequestDetails", "PurchaseOrder", new { purchaseRequestID = "<#= PurchaseRequestID #>" }))
 .ClientEvents(clientEvents => clientEvents.OnDataBinding("onDataBinding"))
 .Pageable()
 .Sortable()

)

the Script code

<script type="text/javascript">
  var purchaseRequestID;
  var purchaseRequestName;
  function onRowSelected(e) {
    var detailsGrid = $('#grdDetails').data('tGrid');
    purchaseRequestID = e.row.cells[0].innerHTML;
    purchaseRequestName = e.row.cells[1].innerHTML;
    // update ui text
    $('#purchaseRequestName').text(purchaseRequestName);
    // rebind the related grid
    //alert(purchaseRequestID);
    //location.href = "/PurchaseOrder/Index/" + purchaseRequestID;
    detailsGrid.rebind();
}
function onDataBinding(e) {
    e.data = $.extend(e.data, { purchaseRequestID: purchaseRequestID });
}

below is the code in the controller:

[HttpPost]
public ActionResult Create(PurchaseOrder purchaseorder)
    {
       if (ModelState.IsValid)
       {
           HERE, I WANT TO BE ABLE TO GET AND SAVE THE SELECTED ROW IN THE VIEW
           //purchaseorder.PurchaseRequestID = ViewBag.SelectedID;
           db.PurchaseOrders.Add(purchaseorder);
           db.SaveChanges();
           return RedirectToAction("Index");
        }

        ViewBag.SupplierID = new SelectList(db.Suppliers, "SupplierID", "Name", purchaseorder.SupplierID);
        ViewBag.OfficeID = new SelectList(db.Offices, "OfficeID", "OfficeName", purchaseorder.OfficeID);
        return View(purchaseorder);
    }

Thanks

samantha07 · Accepted Answer · 2012-04-10 11:01:08Z

2

In case some of you might encounter the same problem, I used the HiddenFor to solve this. Please suggest if you have a better way than this.

@Html.HiddenFor(model => model.PurchaseRequestID)

and then i updated the script

<script type="text/javascript">
var purchaseRequestID;
var purchaseRequestName;
function onRowSelected(e) {
    var detailsGrid = $('#grdDetails').data('tGrid');
    purchaseRequestID = e.row.cells[0].innerHTML;
    purchaseRequestName = e.row.cells[1].innerHTML;
    // update ui text
    $('#purchaseRequestName').text(purchaseRequestName);
    $('#PurchaseRequestID').val(purchaseRequestID);
    detailsGrid.rebind();
}
function onDataBinding(e) {
    e.data = $.extend(e.data, { purchaseRequestID: purchaseRequestID });
}

answered Apr 10, 2012 at 11:01

samantha07

5072 gold badges7 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

felipekm Over a year ago

Hey @samantha07, how did you implemented your viewmodel? i'm mean, to set your PurchaseRequestID as get; set; ? thx

Collectives™ on Stack Overflow

How to pass values from telerik mvc ajax grid to controller

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related