How to show a Grid into modal window

Hello

I'm trying to do this from weeks and now I'm very confused and lost. Im really newbie with asp.net , my background is desktop dev.

I'm using asp.net mvc for this project. I have a telerik grid with headers of documents I want with a double click or click a button to show a modal window with data of the headers and a grid whith details of orders.

So far: I have a functional grid with header data, I double click and I can fire the modal window but the grid doesnt show anything I tried with partial views and directly using only the modal.
I tried with jquery only and with telerik grid with pretty much same result.

The controller that returns json data is working. I tried with another view.

Any help, tip, hint would be very apreciated,. Thanks in advance!!!!

This is the code of the view:

```

@model System.Data.DataTable
 
@{
    ViewBag.Title = "Lista de pedidos abiertos de clientes";
}
 
<script src="~/Scripts/kendo/cultures/kendo.culture.es-MX.min.js"></script>
 
<script type="text/javascript">
kendo.culture("es-MX");
</script>
<script src="~/Scripts/kendo/messages/kendo.messages.es-ES.min.js"></script>
 

<h2>PEDIDOS DE CLIENTES ABIERTOS</h2>
 
@(Html.Kendo().Grid<dynamic>()
            .Name("PedidosClientes")
            .HtmlAttributes(new { style = "font-size:12px;line-height:2em" })
            .Columns(columns =>
            {
                columns.Bound("NumeroInternoSAP").Title("Número Interno").Width(100);
                columns.Bound("Serie").Title("Serie").Width(100);
                columns.Bound("NumeroPedidoSAP").Title("No.Pedido").Width(115);
                columns.Bound("DocCur").Title("Moneda").Width(100);
                columns.Bound("DocStatus").Title("Status").Filterable(true).Width(100);
                columns.Bound("Cancelado").Title("Cancelado").Filterable(true).Width(120);
                columns.Bound("FechaPedido").Title("Fecha Pedido").Filterable(true).Template(@<text></text>).ClientTemplate("#= kendo.toString(kendo.parseDate(FechaPedido),'dd/MMM/yyyy') #").Width(110);
                columns.Bound("FechaEntrega").Title("Fecha Entrega").Filterable(true).Template(@<text></text>).ClientTemplate("#= kendo.toString(kendo.parseDate(FechaEntrega),'dd/MMM/yyyy') #").Width(110);
                columns.Bound("DocTotal").Title("Monto Pedido").Filterable(false).Format("{0:#,##0.00}").HtmlAttributes(new { style = "text-align:right" }).Width(120);
                columns.Bound("ClienteCodigo").Title("Código Cte.").Filterable(true).Width(100);
                columns.Bound("ClienteNombre").Title("Cliente Nombre").Filterable(true).Width(250);
                columns.Bound("ProgramaComercial").Title("Programa Comercial").Filterable(true).Width(250);
                columns.Bound("Asesor").Title("Asesor").Filterable(true).Width(250);
                columns.Bound("IdAdPro").Title("Id AdPro").Width(100);
                columns.Bound("LineaDeNegocio").Title("Línea de Negocio").Width(100);
                columns.Bound("Sucursal").Title("Sucursal").Width(100);
 
            })
            .Pageable()
            .Sortable()
            .Filterable()
            .Groupable()
            .Scrollable(s => s.Height(400))
            .ColumnResizeHandleWidth(100)
            .Selectable()
            .ToolBar(tools => tools.Excel())
            .Excel(excel => excel
                 .FileName("DetallePedidos.xlsx")
                 .Filterable(true)
                 .AllPages(true)
                 .ProxyURL(Url.Action("Excel_Export_Save", "DetallePedidos"))
                 )
            .DataSource(dataSource => dataSource
                 .Ajax()
                 .PageSize(15)
                 .Read(read => read.Action("ReadListaCtes", "Home"))
            )
 
)
 

<div id="Luis" style="display:none"> 
 
    <div style="margin: 0px 0px 0px 10px !important;">
        <label>Nombre del Asesor: </label>&nbsp;<div id="asesor" style="margin-top: -23px !important; margin-left: 10em !important;"><input type="text" id="nombre_asesor"value="" /></div>
    </div>
    <div style="margin-top: -15px; margin-left: 30em;">
        <label>Nombre del Cliente: </label>&nbsp;<div id="cliente" style="margin-top: -22px; margin-left: 10em;"><input type="text" id="ncliente"value="" /></div>
    </div>
    <div style="margin: 10px 0px 5px 10px !important;">
        <label>Programa Comercial: </label>&nbsp;<div id="pcomercial" style="margin-top: -22px; margin-left: 11em;"><input id="ncomercial" /></div>
    </div>
    <div class="row" style="margin-top: 25px;">
        <div class="col-md-4">
            <label>Numero SAP: </label>&nbsp;<div id="nsap" style="margin-top: -22px; margin-left: 7em;"><input id="numeroS" type="text"value="" /></div>
        </div>
        <div class="col-md-4">
            <label>Numero de Pedido: </label>&nbsp;<div id="npedido" style="margin-top: -22px; margin-left: 10em;"><input type="text" id="numeroP"value="" /></div>
        </div>
        <div class="col-md-3">
            <label>Status: </label>&nbsp;<div id="status" style="margin-top: -22px; margin-left: 4em;"><input type="text" id="sstatus"value="" /></div>
        </div>
    </div>
    <div style="margin-top: 1em;">
        <label>Linea de Negocio: </label>&nbsp;<div id="lnegocio" style="margin-top: -22px; margin-left: 9em;"><input type="text" id="li_negocios"value="" /></div>
    </div>
    <div style="margin-top: -22px; margin-left: 30em;">
        <label>Sucursal: </label>&nbsp;<div id="nsucursal" style="margin-top: -22px; margin-left: 9em;"><input type="text" id="NSucursales"value="" /></div>
    </div>
 
    <div style="margin-top: 10px;">
 
        <input id="nDocEntry" type="text"  name="nDocEntry"value="">
       @(Html.Kendo().Grid<dynamic>()
             .Name("DetallePedido")
             .Columns(columns =>
             {
             columns.Bound("DocEntry").Title("#Int SAP").Width(80);
             columns.Bound("LineNUm").Title("LineNum").Width(80);
             columns.Bound("LineStatus").Title("LineStatus").Width(80);
             columns.Bound("ItemCode").Title("ItemCode").Width(120);
             columns.Bound("Dscription").Title("Descripcion").Width(500);
             columns.Bound("Quantity").Title("Cantidad").Width(75);
             columns.Bound("ShipDate").Title("Fecha Envio").Template(@<text></text>).ClientTemplate("#= kendo.toString(kendo.parseDate(ShipDate),'dd/MMM/yyyy') #").Width(110);
             columns.Bound("OpenQty").Title("OpenQty").Width(80);
             columns.Bound("Price").Title("Price").Filterable(false).Format("{0:#,##0.00}").HtmlAttributes(new { style = "text - align:right" }).Width(110);
             columns.Bound("Currency").Title("Currency").Width(60);
             columns.Bound("Rate").Title("Rate").Filterable(false).Format("{0:#,##0.00}").HtmlAttributes(new { style = "text - align:right" }).Width(80);
             columns.Bound("DiscPrcnt").Title("DiscPrcnt").Filterable(false).Format("{0:#,##0.00}").HtmlAttributes(new { style = "text - align:right" }).Width(80);
             columns.Bound("LineTotal").Title("Importe").Filterable(false).Format("{0:#,##0.00}").HtmlAttributes(new { style = "text - align:right" }).Width(80);
             columns.Bound("TotalFrgn").Title("TotalFrgn").Filterable(false).Format("{0:#,##0.00}").HtmlAttributes(new { style = "text - align:right" }).Width(80);
             columns.Bound("OpenSum").Title("OpenSum").Filterable(false).Format("{0:#,##0.00}").HtmlAttributes(new { style = "text - align:right" }).Width(80);
             columns.Bound("OpenSumFC").Title("OpenSumFC").Filterable(false).Format("{0:#,##0.00}").HtmlAttributes(new { style = "text - align:right" }).Width(80);
             columns.Bound("VendorNum").Title("VendorNum").Filterable(true).Width(80);
             columns.Bound("SerialNum").Title("SerialNum").Filterable(true).Width(80);
             columns.Bound("WhsCode").Title("WhsCode").Filterable(true).Width(80);
             columns.Bound("SlpCode").Title("SlpCode").Filterable(true).Width(50);
             columns.Bound("Commission").Title("Comission").Filterable(false).Width(50);
             columns.Bound("TreeType").Title("TreeType").Filterable(true).Width(40);
             columns.Bound("TaxStatus").Title("TaxStatus").Filterable(true).Width(40);
             columns.Bound("PriceBefDi").Title("Precio Antes Impto").Filterable(false).Format("{0:#,##0.00}").HtmlAttributes(new { style = "text - align:right" }).Width(80);
             columns.Bound("DocDate").Title("Fecha Pedido").Template(@<text></text>).ClientTemplate("#= kendo.toString(kendo.parseDate(DocDate),'dd/MMM/yyyy') #").Width(110);
             columns.Bound("OcrCode").Title("LineaNegocio").Width(90);
             columns.Bound("OcrCode2").Title("Sucursal").Width(90);
             columns.Bound("OcrCode3").Title("CentroCosto").Width(90);
             columns.Bound("OcrCode4").Title("CentroUtilidad").Width(90);
             columns.Bound("OcrCode5").Title("Asesor").Width(90);
             columns.Bound("Project").Title("Proyecto").Width(90);
             columns.Bound("VisOrder").Title("Orden").Width(80);
             columns.Bound("Address").Title("Direccion").Width(500);
             columns.Bound("TaxCode").Title("Código Impto").Width(80);
             columns.Bound("FreeTxt").Title("Texto Libre").Width(170);
             columns.Bound("unitMsr").Title("UM").Width(80);
             columns.Bound("LineType").Title("Tip.Linea").Width(80);
             columns.Bound("Text").Title("Texto").Width(500);
             columns.Bound("ShipToCode").Title("Código Envío").Width(120);
             columns.Bound("ShipToDesc").Title("Descrip.Dir.Envío").Width(500);
             columns.Bound("U_Estatus").Title("Estatus Partida").Width(90);
             columns.Bound("U_Observaciones").Title("Observaciones").Width(200);
             columns.Bound("U_Comentarios").Title("Comentarios").Width(200);
             columns.Bound("U_ObsLogistica").Title("Observaciones Log").Width(200);
             columns.Bound("U_Sucursal").Title("Sucursal").Width(80);
             columns.Bound("U_Pcomer").Title("Programa Comercial").Width(200);
             columns.Bound("U_Cantidad").Title("Cantidad Pedido").Width(70);
             columns.Bound("U_NumPedido").Title("Pedido No.").Width(90);
             columns.Bound("U_NumArticulo").Title("No.Articulo").Width(90);
             }
                   )
             .Pageable()
             .Sortable()
             .Filterable()
             .Scrollable(s => s.Height(300))
             .ColumnResizeHandleWidth(110)
             .DataSource(dataSource => dataSource
                 .Ajax()
                 .Read(read => read.Action("Read_Pedido_Detalles2", "Pedido", new { name = "docEntry2", id = "nsap" }))
              )
        )
 
       
    </div>
</div>
 
<script type="text/javascript">
        $(document).ready(function () {
            $(document).on("dblclick", "#PedidosClientes td[role='gridcell']", function (e) {
                // do something
//alert('dobleclick');
                var grid = $("#PedidosClientes").data("kendoGrid");
                var selectedRow = grid.select();
                //var index = selectedRow.index();
//alert(index);
                var data = grid.dataItem(selectedRow);
 
               ////Inicio del Codigo del nombre
                var contenedor = document.getElementById("asesor");//contenedor DIV
                var nombre_asesores = data.Asesor; //Aqui contiene el nombre del Asesor
                var nombres = document.getElementById("nombre_asesor");//Imprime en el input

                nombres.value = nombre_asesores;
                contenedor.innerHTML = nombre_asesores;
                //Fin del Codigo del nombre del asesor
//Inicio del Codigo del Nombre del Cliente
                var contenedor = document.getElementById("cliente");//contenedor DIV
                var nombre_cliente = data.ClienteNombre; //Aqui contiene el nombre del Asesor
                var cliente = document.getElementById("ncliente");//Imprime en el input

                cliente.value = nombre_cliente;
                contenedor.innerHTML = nombre_cliente;
                //Fin del Codigo para el Nombre del Cliente
//Inicio del Codigo del Nombre del Programa Comercial
                var contenedor = document.getElementById("pcomercial");//contenedor DIV
                var nombre_cliente = data.ProgramaComercial; //Aqui contiene el nombre del Asesor
                var cliente = document.getElementById("ncomercial");//Imprime en el input

                cliente.value = nombre_cliente;
                contenedor.innerHTML = nombre_cliente;
                //Fin del Codigo para el Nombre del Programa comercial
//Inicio del Codigo del Nombre del Numero SAP
                var contenedor = document.getElementById("nsap");//contenedor DIV
                var nombre_cliente = data.NumeroInternoSAP; //Aqui contiene el nombre del Asesor
                var cliente = document.getElementById("numeroS");//Imprime en el input

                cliente.value = nombre_cliente;
                contenedor.innerHTML = nombre_cliente;
                //Fin del Codigo para el Nombre del Numero SAP
//Inicio del Codigo del Nombre del Numero de Pedido
                var contenedor = document.getElementById("npedido");//contenedor DIV
                var nombre_cliente = data.NumeroPedidoSAP; //Aqui contiene el nombre del Asesor
                var cliente = document.getElementById("numeroP");//Imprime en el input

                cliente.value = nombre_cliente;
                contenedor.innerHTML = nombre_cliente;
                //Fin del Codigo para el Nombre del Numero de Pedido
//Inicio del Codigo del Status
                var contenedor = document.getElementById("status");//contenedor DIV
                var nombre_cliente = data.DocStatus; //Aqui contiene el nombre del Asesor
                var cliente = document.getElementById("sstatus");//Imprime en el input

                cliente.value = nombre_cliente;
                contenedor.innerHTML = nombre_cliente;
                //Fin del Codigo del Status
//Inicio del Codigo de la Linea de Negocio
                var contenedor = document.getElementById("lnegocio");//contenedor DIV
                var nombre_cliente = data.LineaDeNegocio; //Aqui contiene el nombre del Asesor
                var cliente = document.getElementById("li_negocios");//Imprime en el input

                cliente.value = nombre_cliente;
                contenedor.innerHTML = nombre_cliente;
                //Fin del Codigo de la Linea de Negocio
//Inicio del Codigo de la Sucursal
                var contenedor = document.getElementById("nsucursal");//contenedor DIV
                var nombre_cliente = data.Sucursal; //Aqui contiene el nombre del Asesor
                var cliente = document.getElementById("NSucursales");//Imprime en el input

                cliente.value = nombre_cliente;
                contenedor.innerHTML = nombre_cliente;
                //Fin del Codigo de la Sucursal
///////////////////////////-///////////////////////////////////////////////////////////////////////////////////////////////
               var nDocEntry = data.NumeroInternoSAP;
                contenedor.innerHTML = nDocEntry;
             //  testwindow(nDocEntry);
                createKendoWindow(data.NumeroInternoSAP);
           });
        });
</script>
 
<div id="dialog"></div>
<script>
    function testwindow(contenido) {
        $("#dialog").kendoWindow({
            content: "http://www.telerik.com/",
            iframe: false
        });
    }
</script>
 

<script id="ventana" type="text/javascript">
    function createKendoWindow(contenido) {
 
        $(document).ready(function () {
            $("#Luis").kendoWindow(
                  {
                    title: "Detalles de Pedido",
                    modal: true,
                    resizable: true,
                    width: 1024,
                    visible: true,
                    minHeight: 460,
                    position: {
                        top: 20,
                        left: 150
                              },
                    animation: {
                                 open: {
                                         effects: "expandVertical",
                                         duration: 1500
                                       },
                               },
                    close: function () {
                                                     setTimeout(function () {
                                                                               $('#Luis').kendoWindow('destroy');
                                                     }, 300);
                                                     document.location.reload(true), 1500;
                                       }
 
                  });
        });
    }
</script>

```