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

[Marc Plaxton-Harrison]

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

[Danail Vasilev]

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