This is a migrated thread and some comments may be shown as answers.

Grid inside Popup Template

1 Answer 149 Views
Templates
This is a migrated thread and some comments may be shown as answers.
Alejandro
Top achievements
Rank 1
Alejandro asked on 19 Jan 2016, 07:21 PM
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" }
                      }]
                  }
              }
          }     

1 Answer, 1 is accepted

Sort by
0
Alexander Popov
Telerik team
answered on 21 Jan 2016, 04:43 PM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
Templates
Asked by
Alejandro
Top achievements
Rank 1
Answers by
Alexander Popov
Telerik team
Share this question
or