Grid inside Popup Template

2 posts, 0 answers
  1. Alejandro
    Alejandro avatar
    1 posts
    Member since:
    Nov 2013

    Posted 19 Jan Link to this post

    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" }
                          }]
                      }
                  }
              }     
  2. Alexander Popov
    Admin
    Alexander Popov avatar
    1416 posts

    Posted 21 Jan Link to this post

    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!
     
  3. Kendo UI is VS 2017 Ready
Back to Top