kendo ui Grid with upload on a toolbar within kendo pop up window

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

    Posted 23 Aug Link to this post

    Hi Guys recently i have been battling with adding a kendo grid with upload on a toolbar within a kendo ui window. I have a command button on the main grid which when clicked it shows the window that has a grid inside. Please see below the code, 

    colums.Command(cmd =>
                      {
                          cmd.Edit();
                          cmd.Custom("Upload images").Click("UploadImages");
                           
                          //cmd.Custom("Upload images").SendDataKeys(true).Click("Upload images");
     
                      }).Title("Actions");
    I have this code on the main grid, when clicked it shows the pop window

    and the code for the window,

      @{Html.Kendo().Window().Name("AuditPic")
        .Title("AuditPictureResult Image")
        .Visible(false)
        .Modal(true)
        .Draggable(true)
        .Width(800).Height(800)
        .Content((Html.Kendo().Grid<KendoUIApp1_Test.Models.AuditPicIncidentModel>()
        .Name("Audit")
     
            .Columns(columns =>
            {
                columns.Bound(b => b.AuditResultPictureID);
                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);
                columns.Command(command => command.Destroy()).Width(100);
     
            })
            .Pageable()
            .Sortable()
            .Scrollable()
            .Filterable()
            .Selectable()
            .DataSource(dataSource => dataSource
            .Ajax()
            .Model(model =>
             {
                 model.Id(m => m.AuditResultPictureID);
     
     
             })
             .Read(read => read.Action("ConfigurationItem_Read", "Home", new { SiteAuditID = "#=SiteAuditID#", QuestionID = "#=QuestionID#" }))
             .Destroy(update => update.Action("FilesDestroy", "Home"))
            )).ToHtmlString()
    ).Render();
                  
                 }
     
    the function for the pop up and reading the data but it doesnt show any data on the grid
     
     function UploadImages(e) {
                e.preventDefault();
     
                var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
                var wnd = $("#AuditPic").data("kendoWindow");
     
              @*  wnd.refresh({
                    url: '@Url.Action("ConfigurationItem_Read","Home")',
                    data: { SiteAuditID: dataItem.SiteAuditID, QuestionID: dataItem.QuestionID }
     
                            });*@
              //  wnd.content(detailstemplate(dataItem));
                wnd.center().open();
     
                $.ajax({
                    type: "POST",
                    data: { SiteAuditID: JSON.parse(dataItem.SiteAuditID), QuestionID: JSON.parse(dataItem.QuestionID) }, //gets the value of the field "Department"
                    url: '@Url.Action("ConfigurationItem_Read","Home")',
                        success: function (result) {
                        //    console.log(result);
                            // var DepartmentID = JSON.parse(model.DepartmentID);
                            //arg.model.set("field name as string", "value as appropriate data type");
                            //alert("success:" + DepartmentID);
                        }
                })
            }

  2. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1490 posts

    Posted 25 Aug Link to this post

    Hello Marc,

    The provided code is not runnable, so that it would be hard to tell you the exact reason for the issue. I see, however, that there is an additional brackets in the content of the window:

    .Width(800).Height(800)
        .Content((Html.Kendo().Grid<KendoUIApp1_Test.Models.AuditPicIncidentModel>()
        .Name("Audit")
      
            .Columns(columns =>
            {
                columns.Bound(b => b.AuditResultPictureID);
                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);
                columns.Command(command => command.Destroy()).Width(100);
      
            })
            .Pageable()
            .Sortable()
            .Scrollable()
            .Filterable()
            .Selectable()
            .DataSource(dataSource => dataSource
            .Ajax()
            .Model(model =>
             {
                 model.Id(m => m.AuditResultPictureID);
      
      
             })
             .Read(read => read.Action("ConfigurationItem_Read", "Home", new { SiteAuditID = "#=SiteAuditID#", QuestionID = "#=QuestionID#" }))
             .Destroy(update => update.Action("FilesDestroy", "Home"))
            )).ToHtmlString()
    ).Render();

    You can try to remove the one pair bracket.

    I have also tried to reproduce the issue by placing the provided window declaration in the following grid demo but everything works as expected - http://demos.telerik.com/aspnet-mvc/grid/remote-data-binding

    The CSHTML I have used for the testing with this demo is as follows:
    @{Html.Kendo().Window().Name("AuditPic")
                                          .Title("AuditPictureResult Image")
                                         
                                          .Draggable(true)
                                          .Width(800).Height(800)
                                          .Content(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.OrderViewModel>()
                          .Name("grid")
                          .Columns(columns =>
                          {
                              columns.Bound(p => p.OrderID).Filterable(false);
                              columns.Bound(p => p.Freight);
                              columns.Bound(p => p.OrderDate).Format("{0:MM/dd/yyyy}");
                              columns.Bound(p => p.ShipName);
                              columns.Bound(p => p.ShipCity);
                          })
                          .Pageable()
                          .Sortable()
                          .Scrollable()
                          .Filterable()
                          .HtmlAttributes(new { style = "height:550px;" })
                          .DataSource(dataSource => dataSource
                              .Ajax()
                              .PageSize(20)
                              .Read(read => read.Action("Orders_Read", "Grid").Data("sendParam"))
                           )
                      .ToHtmlString()
                                    ).Render();
     
    }

    If you are still having issues on the matter I would suggest the following:
         - Debug the problem piece by piece. Start by placing only the grid inside the window on a clean page as we whether it renders as expected. If so, make a test by placing it inside the window.
        - If none of the provided solutions works it would be better to reproduce the issue with the provided sample above and then send it back to us for further investigation.

    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
Back to Top