How do you add an upload control in each row of a grid

2 posts, 0 answers
  1. StevenDale
    StevenDale avatar
    100 posts
    Member since:
    Apr 2007

    Posted 18 Jun 2013 Link to this post

    Do you have any examples of having a upload control in each row of a grid used in the following way:

    .ToolBar(toolBar => toolBar.Create())
    .Columns(columns =>
    columns.ForeignKey(e => e.Type, (System.Collections.IEnumerable)ViewData["RepairTypes"], "Id", "Name")
    columns.Bound(r => r.Cost);
    columns.Bound(r => r.RepairDate);
    columns.Bound(r => r.Description);
    columns.Bound(r => r.Mileage);
    columns.Bound(r => r.RepairLocation);
    columns.Command(commands =>
    .DataSource(dataSource => dataSource
    .Events(events => events.Error("grid_error"))
    .Read(read => read.Action("GetRepairs", "Equipment", new { equipmentId = "#=Id#" }))
    .Create(create => create.Action("CreateRepair", "Equipment", new { equipmentId = "#=Id#" }))
    .Update("UpdateRepair", "Equipment")
    .Destroy("DestroyRepair", "Equipment")
    //.Group(g => g.Add(gi => gi.Type))
    .Sort(g =>
    g.Add(gi => gi.Type);
    g.Add(gi => gi.RepairDate);
    .Model(model =>
    model.Id(m => m.Equipment);
    model.Field(m => m.Id).DefaultValue(new Guid());
    model.Field(m => m.Equipment).DefaultValue(new Guid());
    model.Field(m => m.Type).Editable(true).DefaultValue(((List<RepairTypeModel>)ViewData["RepairTypes"]).Any() ? ((List<RepairTypeModel>)ViewData["RepairTypes"])[0].Id : Guid.Empty);


    Billy Jacobs
  2. Petur Subev
    Petur Subev avatar
    1882 posts

    Posted 20 Jun 2013 Link to this post

    Hello Billy,

    How to put a Kendo widget inside the template of a column is covered multiple times on the forums. Check the following example to get the idea:

    Basically you put an input element (of type file) element inside the template which you later initialize and turn into upload when the dataBound event of the Grid is triggered.

                            var grid = this;
                              var chart = $(this);
                              var tr = chart.closest('tr');
                              var model = grid.dataItem(tr);
                              chart.kendoUpload({ ...options }

    Kind Regards,
    Petur Subev
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top