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

18 posts, 1 answers
  1. Marc Plaxton-Harrison
    Marc Plaxton-Harrison avatar
    38 posts
    Member since:
    Mar 2008

    Posted 11 Jul Link to this post

    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>

  2. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1493 posts

    Posted 13 Jul Link to this post

    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
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Marc Plaxton-Harrison
    Marc Plaxton-Harrison avatar
    38 posts
    Member since:
    Mar 2008

    Posted 14 Jul in reply to Danail Vasilev Link to this post

    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>);
                             })

  5. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1493 posts

    Posted 18 Jul Link to this post

    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
  6. Marc Plaxton-Harrison
    Marc Plaxton-Harrison avatar
    38 posts
    Member since:
    Mar 2008

    Posted 18 Jul Link to this post

    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'/>");

  7. Marc Plaxton-Harrison
    Marc Plaxton-Harrison avatar
    38 posts
    Member since:
    Mar 2008

    Posted 19 Jul Link to this post

    also here is the attachement of what im getting

     

  8. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1493 posts

    Posted 20 Jul Link to this post

    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
  9. Marc Plaxton-Harrison
    Marc Plaxton-Harrison avatar
    38 posts
    Member since:
    Mar 2008

    Posted 20 Jul Link to this post

    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

     

  10. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1493 posts

    Posted 21 Jul Link to this post

    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
  11. Marc Plaxton-Harrison
    Marc Plaxton-Harrison avatar
    38 posts
    Member since:
    Mar 2008

    Posted 21 Jul Link to this post

    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

     

  12. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1493 posts

    Posted 25 Jul Link to this post

    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
  13. Marc Plaxton-Harrison
    Marc Plaxton-Harrison avatar
    38 posts
    Member since:
    Mar 2008

    Posted 26 Jul in reply to Danail Vasilev Link to this post

    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();
     
           
       }

  14. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1493 posts

    Posted 28 Jul Link to this post

    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
  15. Marc Plaxton-Harrison
    Marc Plaxton-Harrison avatar
    38 posts
    Member since:
    Mar 2008

    Posted 29 Jul Link to this post

    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"?

  16. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1493 posts

    Posted 02 Aug Link to this post

    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
  17. Marc Plaxton-Harrison
    Marc Plaxton-Harrison avatar
    38 posts
    Member since:
    Mar 2008

    Posted 04 Aug in reply to Danail Vasilev Link to this post

    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,

     

  18. Answer
    Danail Vasilev
    Admin
    Danail Vasilev avatar
    1493 posts

    Posted 08 Aug Link to this post

    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
  19. Marc Plaxton-Harrison
    Marc Plaxton-Harrison avatar
    38 posts
    Member since:
    Mar 2008

    Posted 18 Aug in reply to Danail Vasilev Link to this post

    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

     

Back to Top
UI for ASP.NET MVC is VS 2017 Ready