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

Having problems adding upload kendo ui control with tool bar inside subgrid

17 Answers 384 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Marc Plaxton-Harrison
Top achievements
Rank 1
Marc Plaxton-Harrison asked on 11 Jul 2016, 05:20 PM

Hi guys is it possible to add upload control inside subgrid with clientdetailtemplate?because after adding the control the main grid it nolonger loads the data, please see below the code 

<div  style="clear:both;  position:relative; padding-top: 10px">
 
@(Html.Kendo().Grid<KendoUIApp1_Test.Models.IncidentsViewModel>()
              .Name("grid")
          
 
              .Columns(colums =>
              {
                   * http://www.telerik.com/blogs/kendo-ui-r1-2016-webinar-wrapup
                   */
                  colums.Bound(p => p.DepartmentID).Hidden(true);
                  colums.Bound(p => p.SiteAuditID).Hidden(true);
                  colums.Bound(p => p.QuestionID).Hidden(true);
 
                  colums.Bound(p => p.StatusName).Title("Status").Filterable(false).ClientTemplate(
                                                                                                   "# if (StatusID === 1 ) { #" +
                                                                                                     "<span class='CBdrawingstatusGreen'>#:StatusName#</span>" +
                                                                                                  "# } else if (StatusID === 2 ) { #" +
                                                                                                      "<span class='CBdrawingstatusYellow'>#:StatusName#</span>" +
                                                                                                  "# } else { #" +
                                                                                                      "<span class='CBdrawingstatusred'>#:StatusName#</span>" +
                                                                                                  "# } #"
 
                                                                                                );
                  colums.Bound(p => p.ReferenceNo).Title("ReferenceNo").Filterable(true);
                  colums.Bound(p => p.IncidentDate).Title("IncidentDate").ClientTemplate("#= kendo.format('{0:MM/dd/yyyy HH:mm:ss}',kendo.parseDate(IncidentDate)) #"); //.Filterable(model => model.UI("IncidentDateFilter"));
                  colums.Bound(p => p.AccountName).Title("Airport").Filterable(false).Width(200);
                  colums.Bound(p => p.SiteName).Title("Site").Filterable(false);
                  colums.Bound(p => p.Department1).Title("Department").Filterable(false);
                  colums.Bound(p => p.Description).Title("Description").Filterable(false);
                  colums.Bound(p => p.Comments).Title("Comments").Filterable(false);
                  colums.Bound(p => p.ContactName).Title("CurrentAssignedContact").Filterable(false).Width(200);
                  colums.Bound(p => p.FirstName).Title("CurrentAssignedUser").Filterable(false);
                  colums.Bound(p => p.IncidentID).ClientTemplate("<a class='k-button' href='" + Url.Action("GetPDF", "Home") + "?IncidentID=#= IncidentID #'" + "> <span span class='k-icon k-i-pdf''></span>Get Incident Pdf</a>").Title("Download PDF").Filterable(false);
                
                  colums.Command(cmd =>
                  {
                      cmd.Edit();
                      //cmd.Custom("Upload").Click("onCustomCommandClick");
                  });
 
              })
              .ClientDetailTemplateId("client-template")
          .Filterable(filterable => filterable
            .Extra(true)
            .Operators(operators => operators
                .ForString(str => str.Clear()
                    .StartsWith("Starts with")
                    .IsEqualTo("Is equal to")
                    .IsNotEqualTo("Is not equal to")
 
                ))
            )
 
    .HtmlAttributes(new { style = "height:550px;" })
    .DataSource(datasource => datasource
    .Ajax() //Configure the grid data source
     
    .Events(Eevents => Eevents.RequestEnd("OnChangeRefresh"))
    .Model(model =>
    {
        model.Id(m => m.IncidentID);
 
 
    })
    .Read(read =>
    {
        read.Action("GetIncidents", "Home").Data("IncidentsFilter");
    })// set the action method which will return the data in json format
 
    .Update(update => update.Action("Incidents_Update", "Home"))
    )
 
    .Navigatable()
    .Groupable()
    .Pageable()
    .Reorderable(reorder => reorder.Columns(true))
    .Sortable()
    .Scrollable()
        .Events(events =>
        {
            events.Save("onIncidentUserAssign");
            // events.Save("onStatusChange");
 
        })
 
            .Events(eEvents => eEvents.Edit("disableOnEdit"))
            .Events(x => x.DataBound("onDataBound"))
        //.Events(events =>
        //{
        //  events.Save("onStatusChange");
        //   // events.Save("onStatusChange");
 
        //})
 
 
    .Editable(ed => ed.Mode(GridEditMode.PopUp).TemplateName("Incidents")
                                               .Window(w => w.Animation(true)
                                               .Scrollable(false)
                                               .Name("editWindow")))
     
 
        )
    
    </div>
 
<script id="client-template" type="text/x-kendo-template">
    @(Html.Kendo().Grid<KendoUIApp1_Test.Models.AuditPicIncidentModel>()
        .Name("Grid_#=SiteAuditID#")
          .ToolBar(toolbar => toolbar.Template(
     
        @<text>
            @(Html.Kendo().Upload()
                  .Name("files")
                  .Async(a => a.Save("Save", "Home"))
                  .Events(e => e.Success("onUploadSuccess"))
                  .ShowFileList(false) // Hide the file list as we're displaying uploaded files in the Grid
            )
          </text>
    ))
        .Columns(columns =>
                            {
                                columns.Bound(b => b.FileName).Title("File Name");
                                columns.Bound(b => b.PictureCaption).Title("Picture Caption").HtmlAttributes(new { style = "overflow: hidden;text-overflow: ellipsis;white-space:nowrap;" }).EditorTemplateName("ConfigurationSettingItemEditor");
                          
                                columns.Command(command => command.Destroy()).Width(100);
                                 
                            }
                )
        .Sortable()
        .Pageable(c => c.PageSizes(new int[] { 10, 20, 50, 100 }))
        .Scrollable()
        .HtmlAttributes(new { style = "height:430px;" })
        .DataSource(datasource => datasource
                    .Ajax()
                      .Model(model =>
                            {
                                model.Id(q => q.AuditResultPictureID);
                                //model.Field(q => q.KeyValue).Editable(true);
                                //model.Field(q => q.Enabled).DefaultValue(true);
  
                            })
                    .PageSize(10)
                    .ServerOperation(true)
                    .Read(read => read.Action("ConfigurationItem_Read", "Home", new { SiteAuditID = "#=SiteAuditID#", QuestionID = "#=QuestionID#" }))
                    .Destroy(update => update.Action("FilesDestriy", "Home"))
                     )
                      
                      
        .ToClientTemplate()
          
          
  
  
    )
 
   
  
</script>

17 Answers, 1 is accepted

Sort by
0
Danail Vasilev
Telerik team
answered on 13 Jul 2016, 12:55 PM
Hi Marc,

You should ensure to always call the ToClientTemplate method when using Telerik UI for ASP.NET MVC widgets in a client template.
<script id="template" type="text/kendo-tmpl">
    @(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.OrderViewModel>()
            .Name("grid_#=EmployeeID#") // template expression, to be evaluated in the master context
            .ToolBar(toolbar => toolbar.Template(
 
                @<text>
                    @(Html.Kendo().Upload()
                  .Name("files")
                  .Async(a => a.Save("Save", "Home"))
     
                  .ShowFileList(false).ToClientTemplate() // Hide the file list as we're displaying uploaded files in the Grid
                    )
                </text>
    ))
            .Columns(columns =>
            {
                columns.Bound(o => o.OrderID).Width(110);
                columns.Bound(o => o.ShipCountry).Width(110);
                columns.Bound(o => o.ShipAddress).ClientTemplate("\\#= ShipAddress \\#"); // escaped template expression, to be evaluated in the child/detail context
                columns.Bound(o => o.ShipName).Width(300);
            })
            .Selectable(x => x.Mode(GridSelectionMode.Multiple))
            .DataSource(dataSource => dataSource
                .Ajax()
                .PageSize(10)
                .Read(read => read.Action("HierarchyBinding_Orders", "Grid", new { employeeID = "#=EmployeeID#" }))
            )
            .Pageable()
            .Sortable()
            .ToClientTemplate()
    )
</script>

More information on the matter is available in this article - http://docs.telerik.com/kendo-ui/aspnet-mvc/helpers/grid/templating/client-detail-template

Regards,
Danail Vasilev
Telerik by Progress
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Marc Plaxton-Harrison
Top achievements
Rank 1
answered on 14 Jul 2016, 11:55 AM

Hi Danail, thanks for the quick reply, i have been patiently waiting. The "ToClientTemplate" it is working and nothing is breaking so far... The idea in having that upload in a subgrid inside toolbar, is to allow users to be able to upload image files into the database. After uploading the files they will be able to view the image after uploading it. so as you can see below i tryd to use the success event function to force the rebinding of the grid on successful upload...How can i use the success even where i have upload telerik ui inside a subgrid clientdetailtemplate? where its already inside a "script block"?

@(Html.Kendo().Grid<KendoUIApp1_Test.Models.AuditPicIncidentModel>()
         .Name("Grid_#=SiteAuditID#")
 
         .Columns(columns =>
         {
             columns.Bound(b => b.FileName).Title("File Name").ClientTemplate("<img src ='" + Url.Content("~/App_Data/") + "\\#=FileName\\#' alt='#=Name#' Title='#=Name#' height='62' width='62'/>");
             columns.Bound(b => b.PictureCaption).Title("Picture Caption").HtmlAttributes(new { style = "overflow: hidden;text-overflow: ellipsis;white-space:nowrap;" }).EditorTemplateName("ConfigurationSettingItemEditor");
 
             columns.Command(command => command.Destroy()).Width(100);
 
         }
               )
           //  .ToolBar(t=> t.Create())
                         .ToolBar(toolbar =>
                         {
                             toolbar.Template(@<text>
                                                   @*<label class="category-label" for="category">Show uploaded images:</label>*@
                                              @(Html.Kendo().Upload()
                                                         .Name("attachments")
                                                         .Async(async => async.Save("GetFileInfo", "Home", new { SiteAuditID = "#=SiteAuditID#",  QuestionID = "#=QuestionID#"}))
                                                         .Events(e => e.Success("onUploadSuccess"))
                                                         .ShowFileList(false)
                                                         .ToClientTemplate()
                                                          
                                                   )
                                                  </text>);
                         })

0
Danail Vasilev
Telerik team
answered on 18 Jul 2016, 07:30 AM
Hello Marc,

You can either refresh the grid or call its dataSource.read() method:

function onUploadSuccess(e) {
    //$("#grid").data("kendoGrid").dataSource.read();
    $("#grid").data("kendoGrid").refresh();
}

Regards,
Danail Vasilev
Telerik by Progress
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Marc Plaxton-Harrison
Top achievements
Rank 1
answered on 18 Jul 2016, 02:26 PM

Thanks Danail for the reply, But where do i call that function? outside my kendo template or inside 

<script id="client-template" type="text/x-kendo-template">
    @(Html.Kendo().Grid<KendoUIApp1_Test.Models.AuditPicIncidentModel>()
          .Name("Grid_#=SiteAuditID#")
 
          .Columns(columns =>
          {
              columns.Bound(b => b.FileName).Title("File Name").ClientTemplate("<img src ='" + Url.Content("~/App_Data/") + "\\#=FileName\\#'  height='62' width='62'/>");
              columns.Bound(b => b.PictureCaption).Title("Picture Caption").HtmlAttributes(new { style = "overflow: hidden;text-overflow: ellipsis;white-space:nowrap;" }).EditorTemplateName("ConfigurationSettingItemEditor");
 
              columns.Command(command => command.Destroy()).Width(100);
 
          }
                )
            //  .ToolBar(t=> t.Create())
                           .ToolBar(toolbar =>
                          {
                              toolbar.Template(@<text>
                                                   
                                               @(Html.Kendo().Upload()
                                                          .Name("attachments")
                                                          .Async(async => async.Save("GetFileInfo", "Home", new { SiteAuditID = "#=SiteAuditID#",  QuestionID = "#=QuestionID#"}))
                                                          .Events(e => e.Success("onUploadSuccess"))
                                                          .ShowFileList(false)
                                                          .ToClientTemplate()
                                                           
                                                    )
                                                   </text>);
                          })
       .Sortable()
       .Pageable(c => c.PageSizes(new int[] { 10, 20, 50, 100 }))
       .Scrollable()
       .HtmlAttributes(new { style = "height:430px;" })
       .DataSource(datasource => datasource
       .Ajax()
         .Model(model =>
         {
             model.Id(q => q.AuditResultPictureID);
             //model.Field(q => q.KeyValue).Editable(true);                                                                                                                             
             //model.Field(q => q.Enabled).DefaultValue(true);                                                                                                                           
 
         })
           .PageSize(10)
          .ServerOperation(true)
          .Read(read => read.Action("ConfigurationItem_Read", "Home", new { SiteAuditID = "#=SiteAuditID#", QuestionID = "#=QuestionID#" }))
           // .Create(create => create.Action("PacketsForRequests_Create", "Home"))                                                                                                               
          .Destroy(update => update.Action("FilesDestriy", "Home"))
           )
          .ToClientTemplate()
 
          )
 
</script>
?
<script  type="text/javascript">
 
    function onUploadSuccess(e) {
        $("#Grid_").data("kendoGrid").dataSource.read();
    }
 
</script>

 

and also Im having problems trying to display images on the grid? using this escapes#\\=

columns.Bound(b => b.FileName).Title("File Name").ClientTemplate("<img src ='" + Url.Content("~/App_Data/") + "\\#=FileName\\#'  height='62' width='62'/>");

0
Marc Plaxton-Harrison
Top achievements
Rank 1
answered on 19 Jul 2016, 02:22 PM

also here is the attachement of what im getting

 

0
Danail Vasilev
Telerik team
answered on 20 Jul 2016, 09:43 AM
Hi Marc,

The success event handler seems to be properly attached. Is it triggered? Can you place some alert() inside it ? Can you also ensure the file is properly saved on the server by putting a debugger in the GetFileInfo action?

Regarding displaying the images I guess this is because IIS doesn't let you directly access files from the App_Data folder. Can you try to select other folder - for example ~/images?

Regards,
Danail Vasilev
Telerik by Progress
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Marc Plaxton-Harrison
Top achievements
Rank 1
answered on 20 Jul 2016, 08:34 PM

Hi Danail thanks for the reply, i tryed the solution you suggested by placing the alert("success"); inside the success function it was triggered, and then i saw that the id name of the grid was Grid_#=SiteAuditID# so i changed it to "Grid"

@(Html.Kendo().Grid<KendoUIApp1_Test.Models.AuditPicIncidentModel>()
          .Name("Grid_#=SiteAuditID#") changed it to Name("Grid") and it was able to call the refreshing of the grid after uploading a file,

Displaying images? i changed the the folder to images and images are now showing correctly thanks for this hope this will help someone in the future references.

But however i noticed another strange behaviour on the subgrid... where when i click on the firts row and expand it to show the subgrid information everything looks well rendered and loaded. But the moment i click on the second row? the grid does get rendered correctly i dont know what causes this behaviour perhaps i missed something like a curly bracket? cause i know javascripts are very sensetive? Please see below attachment images off the subgrid

 

0
Danail Vasilev
Telerik team
answered on 21 Jul 2016, 01:24 PM
Hi Marc,

The ids' of the details grids and the corresponding upload compontents should be unique. Also you can set the async.saveField to match the files' parameter name from the controller:

cshtml:
<script id="template" type="text/kendo-tmpl">
    @(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.OrderViewModel>()
            .Name("grid_#=EmployeeID#") // template expression, to be evaluated in the master context
            .ToolBar(toolbar => toolbar.Template(
 
                @<text>
                    @(Html.Kendo().Upload()
                  .Name("files_#=EmployeeID#")
                  .Async(a => a.Save("SaveFiles", "Grid", new { FirstName = "#=FirstName#" }).SaveField("files"))
 
                  .Events(e => e.Success("onUploadSuccess"))
                  .ShowFileList(false).ToClientTemplate() // Hide the file list as we're displaying uploaded files in the Grid
                    )
                </text>
    ))

controller:
public ActionResult SaveFiles(IEnumerable<HttpPostedFileBase> files, string FirstName)
{
    // The Name of the Upload component is "files"
    if (files != null)
    {
        foreach (var file in files)
        {
            // Some browsers send file names with full path.
            // We are only interested in the file name.
            var fileName = FirstName + "." + file.FileName.Split('.')[1];//Path.GetFileName(file.FileName);
            var physicalPath = Path.Combine(Server.MapPath("~/images"), fileName);
 
            // The files are not actually saved in this demo
             file.SaveAs(physicalPath);
        }
    }
 
    // Return an empty string to signify success
    return Content("");
}



Regards,
Danail Vasilev
Telerik by Progress
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Marc Plaxton-Harrison
Top achievements
Rank 1
answered on 21 Jul 2016, 02:16 PM

Hi Danail thanks for the reply, i did what you suggested, the uploading of files works. But However when i first expand to see the subgrid my Upload control is loading correctly but the moment i click the next record on the main grid to view the subgrid the upload control is looking differently or mayb something is missing. Please see below attachments to see what im talking about

 

0
Danail Vasilev
Telerik team
answered on 25 Jul 2016, 10:41 AM
Hello Marc,

I have been observing this behavior on my side before applying the approach from my previous post. Can you ensure you have applied this approach as well?

You can find below a fully runnable modified version of the Grid / Hierarchy demo with this approach. The most important parts are highlighted:

hierarchy.cshtml:
@(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.EmployeeViewModel>()
        .Name("grid")
        .Columns(columns =>
        {
            columns.Bound(b => b.FirstName).Title("File Name").ClientTemplate("<img src ='" + Url.Content("~/images/") + "#=FirstName#.jpg' alt='#=FirstName#' Title='#=FirstName#' height='62' width='62'/>");
            columns.Bound(e => e.FirstName).Width(110);
            columns.Bound(e => e.LastName).Width(110);
            columns.Bound(e => e.Country).Width(110);
            columns.Bound(e => e.City).Width(110);
            columns.Bound(e => e.Title);
            
        })              
        .Sortable()
        .Pageable()
        .Scrollable()
        .ClientDetailTemplateId("template")
        .HtmlAttributes(new { style = "height:600px;" })
        .DataSource(dataSource => dataSource
            .Ajax()
            .PageSize(6)
            .Read(read => read.Action("HierarchyBinding_Employees", "Grid"))           
        )       
        .Events(events => events.DataBound("dataBound"))
)
<script id="template" type="text/kendo-tmpl">
    @(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.OrderViewModel>()
            .Name("grid_#=EmployeeID#") // template expression, to be evaluated in the master context
            .ToolBar(toolbar => toolbar.Template(
 
                @<text>
                    @(Html.Kendo().Upload()
                  .Name("files_#=EmployeeID#")
                  .Async(a => a.Save("SaveFiles", "Grid", new { FirstName = "#=FirstName#" }).SaveField("files"))
 
                  .Events(e => e.Success("onUploadSuccess"))
                  .ShowFileList(false).ToClientTemplate() // Hide the file list as we're displaying uploaded files in the Grid
                    )
                </text>
    ))
            .Columns(columns =>
            {
                columns.Bound(o => o.OrderID).Width(110);
                columns.Bound(o => o.ShipCountry).Width(110);
                columns.Bound(o => o.ShipAddress).ClientTemplate("\\#= ShipAddress \\#"); // escaped template expression, to be evaluated in the child/detail context
                columns.Bound(o => o.ShipName).Width(300);
            })
            .Selectable(x => x.Mode(GridSelectionMode.Multiple))
            .DataSource(dataSource => dataSource
                .Ajax()
                .PageSize(10)
                .Read(read => read.Action("HierarchyBinding_Orders", "Grid", new { employeeID = "#=EmployeeID#" }))
            )
            .Pageable()
            .Sortable()
            .ToClientTemplate()
    )
</script>
<script>
    function onUploadSuccess(e) {
        //$("#grid").data("kendoGrid").dataSource.read();
        $("#grid").data("kendoGrid").refresh();
    }
    function dataBound() {
        this.expandRow(this.tbody.find("tr.k-master-row").first());
    }
</script>

hierarchycontroller.cs:
public ActionResult Hierarchy()
{
    return View();
}
 
public ActionResult HierarchyBinding_Employees([DataSourceRequest] DataSourceRequest request)
{
    return Json(GetEmployees().ToDataSourceResult(request));
}
 
public ActionResult HierarchyBinding_Orders(int employeeID, [DataSourceRequest] DataSourceRequest request)
{
    return Json(GetOrders()
        .Where(order => order.EmployeeID == employeeID)
        .ToDataSourceResult(request));
}
 
public ActionResult SaveFiles(IEnumerable<HttpPostedFileBase> files, string FirstName)
{
    // The Name of the Upload component is "files"
    if (files != null)
    {
        foreach (var file in files)
        {
            // Some browsers send file names with full path.
            // We are only interested in the file name.
            var fileName = FirstName + "." + file.FileName.Split('.')[1];//Path.GetFileName(file.FileName);
            var physicalPath = Path.Combine(Server.MapPath("~/images"), fileName);
 
            // The files are not actually saved in this demo
             file.SaveAs(physicalPath);
        }
    }
 
    // Return an empty string to signify success
    return Content("");
}

You can also see the behavior with the grid refresh after uploading an image in this video - http://screencast.com/t/hYkO79dJ

Regards,
Danail Vasilev
Telerik by Progress
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Marc Plaxton-Harrison
Top achievements
Rank 1
answered on 26 Jul 2016, 01:42 PM

Hi Danail, thanks for this great response now getting to understand how the grid Hierachy works. I managed to fix the behaviour by doing what you suggested me to do, thanks finally its fixed. But however. on the video you supplied i see that the upload is refreshing the main grid after uploading the image. Im focusing on refreshing my subgrid after uploading image. I'm struggling on calling the grid to refresh see below...

<script id="template" type="text/kendo-tmpl">
      @(Html.Kendo().Grid<KendoUIApp1_Test.Models.AuditPicIncidentModel>()
          .Name("Grid_#=SiteAuditID#")
           .ToolBar(toolbar => toolbar.Template(@<text>
                                                   
                                               @(Html.Kendo().Upload()
                                                          .Name("attachments_#=SiteAuditID#")
                                                          .Async(a => a.Save("GetFileInfo", "Home", new { SiteAuditID = "#=SiteAuditID#", QuestionID = "#=QuestionID#" }).SaveField("attachments"))
                                                          .Events(e => e.Success("onUploadSuccess"))
                                                          .ShowFileList(false).ToClientTemplate() // Hide the file list as we're displaying uploaded files in the Grid
                                                           
 
 
                                                 )
                                                    </text>
                                       ))
                                         
          .Columns(columns =>
          {
              columns.Bound(b => b.AuditResultPictureID).Hidden(true);
              columns.Bound(b => b.FileName).Title("File Name").ClientTemplate("<img src ='" + Url.Content("~/Images/") + "\\#=FileName\\#'  height='62' width='62'/>");
              columns.Bound(b => b.PictureCaption).Title("Picture Caption").HtmlAttributes(new { style = "overflow: hidden; text-overflow: ellipsis;white-space:nowrap;" }).EditorTemplateName("ConfigurationSettingItemEditor");
              columns.Bound(b => b.ReplID).Hidden(true);
              columns.Command(command => command.Destroy()).Width(100);
 
          }
                )
                 
                
                 
 
 
                 .Sortable()
                 .Pageable(c => c.PageSizes(new int[] { 10, 20, 50, 100 }))
                 .Scrollable()
                 .HtmlAttributes(new { style = "height:430px;" })
                 .DataSource(datasource => datasource
                 .Ajax()
                 .Model(model =>
                        {
                        model.Id(q => q.AuditResultPictureID);
                        //model.Field(q => q.KeyValue).Editable(true);                                                                                                                             
                       //model.Field(q => q.Enabled).DefaultValue(true);                                                                                                                           
 
                         })
                  .PageSize(10)
                  .ServerOperation(true)
                  .Read(read => read.Action("ConfigurationItem_Read", "Home", new { SiteAuditID = "#=SiteAuditID#", QuestionID = "#=QuestionID#" }))
                   // .Create(create => create.Action("PacketsForRequests_Create", "Home"))                                                                                                               
                  .Destroy(update => update.Action("FilesDestroy", "Home"))
                                                            )
                  .ToClientTemplate()
 
                 )
 
 
</script>
 
<script  type="text/javascript">
 
    function onUploadSuccess(e) {
       // var model = e.model;
       // alert("success:");
        $("#Grid_" + "#=SiteAuditID#").data("kendoGrid").dataSource.read();
 
        
    }
 
</script>

or maybe I'm referencing the subgrid incorrectly?

function onUploadSuccess(e) {
      // var model = e.model;
      // alert("success:");
 
       $("#Grid_" + "#=SiteAuditID#").data("kendoGrid").dataSource.read();
 
       
   }

0
Danail Vasilev
Telerik team
answered on 28 Jul 2016, 08:34 AM
Hi Marc,

A possible approach for referencing the child grid instance from the UploadSuccess event of its Upload component is to get initially the grid id from the Upload's name. For example:

function onUploadSuccess(e) {
    var gridID = e.sender.name.split('_')[1];
    var grid = $("#grid_" + gridID).data("kendoGrid");
  ...
}

Regards,
Danail Vasilev
Telerik by Progress
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Marc Plaxton-Harrison
Top achievements
Rank 1
answered on 29 Jul 2016, 09:42 AM

Hi Danail thanks for this awesome reply, one last thing, okay...when i upload image format with jpg for some reason it breaks, but when i upload images with format of png everything is uploaded succesfully and i can see the images, and is it possible that i can allow users to upload files like pdfs? so basically they can upload jpg,png and pdfs? Also i allowed users flexibility to delete what ever files they have uploaded, but when i deployed the app to the iis it doesnt delete the image from the database but i can see that its removed from the subgrid. when i reload the subgrid the image file still appears... see below code that im using

columns.Bound(b => b.FileName).Title("File Name").ClientTemplate("<img src ='" + Url.Content("~/Images/") + "\\#=FileName\\#'  height='62' width='62'/>");
 
and for deleting part
 
 columns.Command(command => command.Destroy()).Width(100);
 
controller action method
 
public ActionResult FilesDestroy([DataSourceRequest] DataSourceRequest request, AuditPicIncidentModel file)
        {
            if(file != null)
            {
                IntelligentThinkingACSAEntities db = new IntelligentThinkingACSAEntities();
                db.AuditResultPictures.Remove(db.AuditResultPictures.FirstOrDefault(f => f.AuditResultPictureID == file.AuditResultPictureID));
                db.SaveChanges();
            }
            return Json(new[] { file }.ToDataSourceResult(request, ModelState));
        }

is possible that i should match the "file" parameter with .SaveField("attachments")) "attachments"?

0
Danail Vasilev
Telerik team
answered on 02 Aug 2016, 07:38 AM
Hello Marc,

Uploading and loading .jpg files in the grid of the provided sample works properly on my side. You can see the short video test I have recorded here - http://screencast.com/t/SHKUnhl4zup. The .pdf format files are also properly uploaded on my side. You can examine the browser console for the existence of any JavaScript/server-side errors.

Regarding the deletion of the file where do you store the image - in a database or as a file? You can try to debug the server-side code logic where happens the database update or the file deletion.

Regards,
Danail Vasilev
Telerik by Progress
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Marc Plaxton-Harrison
Top achievements
Rank 1
answered on 04 Aug 2016, 06:05 PM

Hi Denail thanks for the reply again, however i did try what you suggested on examining the browser console. here are the results that i see perhaps im referencing the files incorrectly?

and again that upload behaviour still occurs after doing what you told me,

 

0
Accepted
Danail Vasilev
Telerik team
answered on 08 Aug 2016, 07:27 AM
Hello Marc,

From the provided snapshots it seems that some of the kendo scripts are not loaded (404 error) also there are multiple requests for loading them. You can ensure the required scripts are loaded properly.

Regarding the uploading issue it would be hard to tell you the cause, judging from the provided information. What I can suggest is that you open a support ticket where you can provide a fully runnable sample and details about reproducing the issue.

I would also like to ask you to open separate forum threads / support tickets when you have different questions for the future. Thus we can keep the threads concise and easy to track if needed. Also you can get a better and faster answer.

Thank you for your cooperation.

Regards,
Danail Vasilev
Telerik by Progress
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Marc Plaxton-Harrison
Top achievements
Rank 1
answered on 18 Aug 2016, 02:21 PM

Hi Denail, i have opened a support ticket here is the number 1057525,

I will mark this thread as an answer so that we could continue on the support ticket from

thanks

 

Tags
Grid
Asked by
Marc Plaxton-Harrison
Top achievements
Rank 1
Answers by
Danail Vasilev
Telerik team
Marc Plaxton-Harrison
Top achievements
Rank 1
Share this question
or