Connecting Grid to Collection in Model

2 posts, 0 answers
  1. James
    James avatar
    40 posts
    Member since:
    Sep 2014

    Posted 02 Oct 2014 Link to this post

    I have a Grid that I want to use for adding information to a collection in the DataModel of my view.  How do I bind the Grid to my collection and then when it is passed back to the controller ensure that any CRUD changes made to grid are reflected in the DataModel?  Below is my Grid. 

    01.@(Html.Kendo().Grid(Model.Charges)
    02.      .Name("charges_grid")
    03.      .Columns(columns =>
    04.      {
    05.          columns.Bound(charge => charge.Type)
    06.              .Title("Charge Description");
    07.          columns.Bound(charge => charge.Amount)
    08.              .HtmlAttributes(new { @style = "text-align:right;" })
    09.              .Width(100)
    10.              .Title("Amount");
    11.          columns.Command(command =>
    12.          {
    13.              command.Edit();
    14.              command.Destroy();
    15.          }).Width(175);
    16.      })
    17.      .BindTo(Model.Charges)
    18.      .ToolBar(toolbar => toolbar.Create())
    19.      .Editable(editable => editable.CreateAt(GridInsertRowPosition.Bottom))
    20.      .DataSource(dataSource => dataSource
    21.          .Ajax()
    22.          .Model(model => model.Id(p => p.Type))
    23.          .ServerOperation(false)
    24.          .Create(update => update.Action("Create", "Home"))
    25.          .Read(read => read.Action("Read", "Home"))
    26.          .Update(update => update.Action("Update", "Home"))
    27.          .Destroy(update => update.Action("Destroy", "Home"))
    28.      ))

    This is part of a larger view where I am capturing the data for my model, but I can not get my grid to populate with contents of my collection on load or my model to contain updated or new items upon return to the controller.  Below is a sample of my model.

    01.public class Shipment
    02.{
    03.   // other data members
    04.    public string Signed { get; set; }
    05.    public string BundleId { get; set; }
    06.    public float TotalAmountDue { get; set; }
    07. 
    08.    public ICollection<Charge> Charges { get; set; }
    09.}

  2. Petur Subev
    Admin
    Petur Subev avatar
    1882 posts

    Posted 06 Oct 2014 Link to this post

    Hello James,

    The Grid widget is not a form element and it cannot be simply submtted to the server. The Grid uses its own transport that uses Ajax to send the changes to the server via a specific Action method. How to implement editing is covered in our documentation here:

    http://docs.telerik.com/kendo-ui/aspnet-mvc/helpers/grid/ajax-editing

    On a side note if you want to send the Grid changes to the server via a form it is possible through a work-around (using hidden input elements inside the templates) that has several limitations. You can give a try and use it if you find it appropriate:

    http://www.telerik.com/support/code-library/submit-form-containing-grid-along-with-other-input-elements

    Kind Regards,
    Petur Subev
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
Back to Top