[Solved] Grid inside Popup Template

[Alejandro]

Hello, I'm building a grid with a editor in popup mode, with a custom template like this:

<script id="popup-editor" type="text/x-kendo-template">

       <div class="k-edit-label">

           <label for="Transporte">Transporte</label>

       </div>

       <div class="k-edit-field">  #=Transporte# </div>

 

       <div class="k-edit-label">

           <label for="Trayecto">Trayecto</label>

       </div>

       <div class="k-edit-field">  #=Trayecto# </div>

 

       <div class="k-edit-label">

           <label for="Cobertura">Cobertura</label>

       </div>

       <div class="k-edit-field">  #=Cobertura# </div>

 

       <div class="k-edit-label">

           <label for="TasaCobertura">Tasa Cobertura</label>

       </div>

       <div class="k-edit-field">

           <input type="text" name="TasaCobertura" data-bind="value:TasaCobertura">

       </div>

 

       <div class="k-edit-label">

           <label for="Mercancia">Mercancía</label>

       </div>

       <div class="k-edit-field">  #=Mercancia# </div>

 

       <div class="k-edit-label">

           <label for="TasaMercancia">Tasa Mercancia</label>

       </div>

       <div class="k-edit-field">

           <input type="text" name="TasaMercancia" data-bind="value:TasaMercancia">

       </div>

 

       <div class="k-edit-label">

           <label for="Embalaje">Embalaje</label>

       </div>

       <div class="k-edit-field">  #=Embalaje# </div>

 

       <div class="k-edit-label">

           <label for="TasaEmbalaje">Tasa Embalaje</label>

       </div>

       <div class="k-edit-field">

           <input type="text" name="TasaEmbalaje" data-bind="value:TasaEmbalaje">

       </div>

 

       <div class="k-edit-label">

           <label for="AltoRiesgo">Alto Riesgo</label>

       </div>

       <div class="k-edit-field">           

           <input type="checkbox" id="AltoRiesgo" class="k-input k-checkbox" data-bind="value:AltoRiesgo" disabled="disabled"/>

       </div>

        

   </script>

 

Now, I want to create a Grid inside this template, the source of the grid is the "LstCatalogoCoberturas" field, but I don't know how create this grid, I search some examples about autocomplete or combobox and works fine, but not with a grid, can you help me providing a example please?, so many thanks!, regards.

 

PD: this is my model:

schema: {
              model: {
                  id: "CatalogoProductoId",
                  fields: {
                      CatalogoProductoId: {type: 'number', editable: false},
                      MercanciaId: { type: 'number', nullable: false, editable: false },
                      Mercancia: { type: 'string', editable: false },
                      TasaMercancia: { type: 'number', editable: true, validation: { required: true } },
                      Embalaje: { type: 'string', editable: false },
                      EmbalajeId: { type: 'number', nullable: false, editable: false },
                      TasaEmbalaje: { type: 'number', editable: true, validation: { required: true } },
                      Transporte: { type: 'string', editable: false },
                      TransporteId: {type: 'number', editable: false },
                      Trayecto: { type: 'string', editable: false },
                      TrayectoId: {type: 'number', editable: false },
                      AltoRiesgo: { type: "boolean", editable: false },
                      Cobertura: { type: 'string', editable: false },
                      CoberturaID: {type: 'number', editable: false },
                      TasaCobertura: { type: 'number', editable: true, validation: { required: true } },
                      TipoBien: { type: 'string', editable: false },
                      TipoBienId: {type: 'number', editable: false },
                      MinutaTransporte: { type: 'string', editable: false },
                      MontoMaximoEmbarque: {type: 'number', editable: false},
                      CatalogoProductoItemId: {type: 'number', editable: false},
                      LstCatalogoClausulas: [
                      {
                          ClausulaId: { type: "number" },
                          TipoClausula: { type: "number" }
                      }],
                      LstCatalogoCoberturas: [
                      {
                          CoberturaId: { type: "number" },
                          TasaCobertura: { type: "number" },
                          TipoCobertura: { type: "number" }
                      }]
                  }
              }
          }

           model: {
                  id: "CatalogoProductoId",
                  fields: {
                      CatalogoProductoId: {type: 'number', editable: false},
                      MercanciaId: { type: 'number', nullable: false, editable: false },
                      Mercancia: { type: 'string', editable: false },
                      TasaMercancia: { type: 'number', editable: true, validation: { required: true } },
                      Embalaje: { type: 'string', editable: false },
                      EmbalajeId: { type: 'number', nullable: false, editable: false },
                      TasaEmbalaje: { type: 'number', editable: true, validation: { required: true } },
                      Transporte: { type: 'string', editable: false },
                      TransporteId: {type: 'number', editable: false },
                      Trayecto: { type: 'string', editable: false },
                      TrayectoId: {type: 'number', editable: false },
                      AltoRiesgo: { type: "boolean", editable: false },
                      Cobertura: { type: 'string', editable: false },
                      CoberturaID: {type: 'number', editable: false },
                      TasaCobertura: { type: 'number', editable: true, validation: { required: true } },
                      TipoBien: { type: 'string', editable: false },
                      TipoBienId: {type: 'number', editable: false },
                      MinutaTransporte: { type: 'string', editable: false },
                      MontoMaximoEmbarque: {type: 'number', editable: false},
                      CatalogoProductoItemId: {type: 'number', editable: false},
                      LstCatalogoClausulas: [
                      {
                          ClausulaId: { type: "number" },
                          TipoClausula: { type: "number" }
                      }],
                      LstCatalogoCoberturas: [
                      {
                          CoberturaId: { type: "number" },
                          TasaCobertura: { type: "number" },
                          TipoCobertura: { type: "number" }
                      }]
                  }
              }
          }

[Alexander Popov]

Hello Alejandro,

This is not supported out of the box and in order for it to work properly, an elaborate custom implementation is needed. Currently we do not have an example written in JavaScript only, however you can check this Code Library. It shows how the desired behavior can be implemented in ASP.NET MVC. The core principles remain the same.

Regards,
Alexander Popov
Telerik