Grid editable(Mode.PopUp) Window fails with Combobox in subGrid

18 posts, 3 answers
  1. Gusev
    Gusev avatar
    83 posts
    Member since:
    Dec 2012

    Posted 25 Jan 2013 Link to this post

    Help me please! :)

    Hi,

    I am using Grid popup editing to edit or add entries,

    I have many issues:
    1) I want to center the window after adding an additional grid (now i use specific css:
      .k-edit-form-container {
            width: 700px;
            height: 730px;
        })
    2) Grid editable(Mode.PopUp) Window fails with Combobox in subGrid (if i remove combobox then all works)
    3) When i use EditorTemplates for custom editable popUp Window, @Model.Id is always = 0 and i can't filter
    subGrid in this Window by @Model.Id.

    I have objects: Press,Plywood,PressPlywood  (Pmasc.Mes.PlywoodMillWeb.Business\Entities\Catalogues)
    "View Press" has EditorTemplates
    Object Plywood has attribute Uihint["PlywoodList"] for Combobox
    PlywoodList and Press are in Views\Catalogues\EditorTemplates

    I attached my project
  2. Answer
    Daniel
    Admin
    Daniel avatar
    2219 posts

    Posted 29 Jan 2013 Link to this post

    Hello,

    The window is not centered because an error is thrown and it is never initialized. To avoid the error, you should use the ToClientTemplate method of the Grid in the editor template because when popup editing is used, the editor is basically a Kendo Template e.g.

    @(Html.Kendo().Grid<PressPlywood>()
        .Name("PressPlywood")
        .....
        .ToClientTemplate()
    )
    This should also solve the issue when a combobox is used.
    The Model.Id is always zero because when Ajax editing is used, the template is serialized on the server and the data is loaded later on the client. In this scenario, you could evaluate the the master model ID in the template using the following syntax.
    .Read(read => read.Action("Select2", "PressPlywood", new { idPress = "${Id}" }))
    The alternative is to use the Request Data function to get the ID from the master Grid model. Regards,
    Daniel
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Gusev
    Gusev avatar
    83 posts
    Member since:
    Dec 2012

    Posted 29 Jan 2013 Link to this post

    Thanks, Daniel!
    Grid works fine!

    But the window is not centered, when I don't use specific css (I know why it happens(load grid with ajax), but.....can I fix this bug?)

    Sorry,but can I ask another question?
    1) please see the project and answer,why when i create or update entries, this (new or update entry) displayed how first entries in grid, so  I need to reload Grid :(
    2) .Editable(editable => editable.Mode(GridEditMode.PopUp).Window(w => w.Title("EditWindow").Width(400).Height(400).Name("abrakadabra")
    why Name,Width,Height etc. doesn't work...only 'Title' works

    английский
    русский
    украинский
    ask
    английский
    русский
    украинский
    ask
    английский
    русский
    украинский
    ask
  4. Answer
    Daniel
    Admin
    Daniel avatar
    2219 posts

    Posted 31 Jan 2013 Link to this post

    Hello again,

    The window will not be centered when the styles are not set because the Grid content is loaded dynamically after the window has already been centered. If you do not wish to set the size then you should call the window center method again after the Grid data is loaded.
    Regarding your other questions:

    1. The data is not shown correctly because the entire collection is returned again from the server. Check this documentation topic and the offline demo project included with the installation for information and examples on how the actions should be configured.
    2. Not all Window options are serialized when using Ajax editing. It is possible to set them after the Grid initialized like shown in the snippet below:
      $(function () {
          var grid = $("#Press").data("kendoGrid");
          grid.options.editable.window.height = 100;
      });
    Regards,
    Daniel
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  5. Gusev
    Gusev avatar
    83 posts
    Member since:
    Dec 2012

    Posted 31 Jan 2013 Link to this post

    Thanks for great work, Daniel!

  6. Gusev
    Gusev avatar
    83 posts
    Member since:
    Dec 2012

    Posted 12 Feb 2013 Link to this post

     Good Day!
     Sorry, but I have another question and sorry for my bad english 
    I want use custom PopUp Window in Detail View,but window falls
    I attached my code,where Plywod is main model
    In Grid<Plywood> I call 
    .ClientDetailTemplateId("complectationTemplate") with Complectation
    and then i call custom editing with PopUp


    1. @model Plywood 
       
      @(Html.Kendo().Grid<Plywood>()
              .Name("Plywood")
              .ToolBar(commands =>
                {
                    commands.Create().Text("Создать");
                })
              .Columns(columns =>
              {
                  columns.Bound(o => o.Id).Hidden(true);
                  columns.Bound(o => o.Name);
                  columns.Command(command =>
                  {
                      command.Edit();
                      command.Destroy();
                  })
              })
              .ClientDetailTemplateId("complectationTemplate")
              .DataSource(dataBinding => dataBinding
                          .Ajax()
                          .Model(model =>
                          {
                              model.Id(p => p.Id);
                          })
                          .Read("Select", "Plywood")
                          .Update("Edit", "Plywood")
                          .Create("Create", "Plywood")
                          .Destroy("Delete", "Plywood"))
              .Editable(editable => editable.Mode(GridEditMode.InLine))
      )
       
      <script id="complectationTemplate" type="text/kendo-tmpl">
      @(Html.Kendo().Grid<Complectation>()
                .Name("Complectation_#=Id#")
                .ToolBar(commands =>
                   {
                    commands.Create();
                  })
                  .Columns(columns =>
                      {
                          columns.Bound(o => o.Id).Hidden(true);
                          columns.Bound(o => o.Number);
                          columns.Command(command =>
                  {
                      command.Edit();
                      command.Destroy();
                  }).Width(300);
                      })
                  .DataSource(dataBinding => dataBinding
                              .Ajax()
                                .Model(model =>
                                {
                                    model.Id(o => o.Id);
                                })
                                .Read("SelectComplectation", "Plywood", new { idPlywood = "#=Id#" })
                                .Update("EditComplectation", "Plywood", new { idPlywood = "#=Id#" })
                                .Create("CreateComplectation", "Plywood", new { idPlywood = "#=Id#" })
                                .Destroy("DeleteComplectation", "Plywood", new { idPlywood = "#=Id#" })
                  )    
                  .Editable(editable => editable.Mode(GridEditMode.PopUp).Window(w => w.Title("Редактировать")))
                  .ToClientTemplate()
      )
      </script>
    2. <h2>Custom Popup window in DetailView</h2>
       
      @(Html.Kendo().Grid<ComplectationVeneer>()
                .Name("ComplectationVeneer")
                .ToolBar(commands =>
                {
                    commands.Create();
                })
                .Columns(columns =>
                   {
                          columns.Bound(o => o.Id).Hidden(true);
                          columns.Bound(o => o.Veneer).ClientTemplate("\\#= Veneer.Description \\#");
                          columns.Bound(o => o.VeneerThickness).ClientTemplate("\\#= VeneerThickness.Thickness \\#");
                          columns.Bound(o => o.Count);
                          columns.Command(command =>
                          {
                              command.Edit();
                              command.Destroy();
                          }).Width(300);
                   })
                   .DataSource(dataBinding => dataBinding
                                      .Ajax()
                                      .Model(model =>
                                      {
                                          model.Id(p => p.Id);
                                          model.Field(p => p.Veneer).DefaultValue(new Veneer());
                                          model.Field(p => p.VeneerThickness).DefaultValue(new VeneerThickness());
                                      })
                                      .Read("SelectComplectationVeneer", "Plywood", new { idComplectation = "${Id}" })
                                      .Update("EditComplectationVeneer", "Plywood", new { idComplectation = "${Id}" })
                                      .Create("CreateComplectationVeneer", "Plywood", new { idComplectation = "${Id}" })
                                      .Destroy("DeleteComplectationVeneer", "Plywood", new { idComplectation = "${Id}"})
                   )
          )
  7. Daniel
    Admin
    Daniel avatar
    2219 posts

    Posted 14 Feb 2013 Link to this post

    Hello Gusev,

    This scenario is not supported out of the box because the editors in the popup Grid cannot be escaped properly. You could use the JavaScript or declarative initialization in order to add an editable Grid to the popup. It should also be possible to use the wrappers by using an approach similar to the one used for the templates and the detail Grid edit event e.g.

    var template;
    $(function () {
        template = kendo.template($("#popupGridTemplate").html());
    });
     
    function edit(e) {
        e.container.append(template({ id: e.model.id }));
    }
    <script  type="text/kendo" id="popupGridTemplate">
    @(Html.Kendo().Grid<ComplectationVeneer>()
              .Name("ComplectationVeneer")
              .ToolBar(commands =>
              {
                  commands.Create();
              })
              .Columns(columns =>
                 {
                        columns.Bound(o => o.Id).Hidden(true);
                        columns.Bound(o => o.Veneer).ClientTemplate("\\#= Veneer.Description \\#");
                        columns.Bound(o => o.VeneerThickness).ClientTemplate("\\#= VeneerThickness.Thickness \\#");
                        columns.Bound(o => o.Count);
                        columns.Command(command =>
                        {
                            command.Edit();
                            command.Destroy();
                        }).Width(300);
                 })
                 .DataSource(dataBinding => dataBinding
                                    .Ajax()
                                    .Model(model =>
                                    {
                                        model.Id(p => p.Id);
                                        model.Field(p => p.Veneer).DefaultValue(new Veneer());
                                        model.Field(p => p.VeneerThickness).DefaultValue(new VeneerThickness());
                                    })
                                    .Read("SelectComplectationVeneer", "Plywood", new { idComplectation = "${Id}" })
                                    .Update("EditComplectationVeneer", "Plywood", new { idComplectation = "${Id}" })
                                    .Create("CreateComplectationVeneer", "Plywood", new { idComplectation = "${Id}" })
                                    .Destroy("DeleteComplectationVeneer", "Plywood", new { idComplectation = "${Id}"})
                 ).ToClientTemplate() 
        )
    </script>
    Regards,
    Daniel
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  8. Gusev
    Gusev avatar
    83 posts
    Member since:
    Dec 2012

    Posted 18 Feb 2013 Link to this post

    Daniel,Thanks for your help!
    I get instead 
    idComplectation:
    - [object HTMLInputElement]

  9. Daniel
    Admin
    Daniel avatar
    2219 posts

    Posted 20 Feb 2013 Link to this post

    Hello,

    Could you share the code you are currently using? An input with the same ID could be evaluated if the data passed to the template does not contain the field with this name.

    Kind regards,
    Daniel
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  10. Gusev
    Gusev avatar
    83 posts
    Member since:
    Dec 2012

    Posted 21 Feb 2013 Link to this post

    oh...my fail
    "{ id: e.model.id }));"
    and 
    " .Read("SelectComplectationVeneer", "Plywood", new { idComplectation = "${Id}" }) "

    updated "{ Id: e.model.id }));"
    and all good

    how I can add for PopUpEditWindow my parents field,because i see Id,which i hide

    Grid<Complectation>
    columns.Bound(o => o.Id).Hidden(true);
    columns.Bound(o => o.Number);

    and my UIHINT fail
    columns.Bound(o => o.Veneer).ClientTemplate("\\#= Veneer.Description \\#");
    columns.Bound(o => o.VeneerThickness).ClientTemplate("\\#= VeneerThickness.Thickness \\#");
    but I have Combobox instead textbox

    thanks for help!
    and sorry for my english and inattention
  11. Daniel
    Admin
    Daniel avatar
    2219 posts

    Posted 25 Feb 2013 Link to this post

    Hello again,

    I am not sure if I understand correctly where should the ID be passed. Could you clarify a bit?

    Regards,
    Daniel
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  12. Gusev
    Gusev avatar
    83 posts
    Member since:
    Dec 2012

    Posted 25 Feb 2013 Link to this post

    I can't understand the question, or rather translate) :D

    I get ID for ComplectationVeneer from Complectation
    function edit(e) {
        e.container.append(template({ Id: e.model.id }));
    }
    I Read, Update or Create ComplectationVeneer with this ID,which I get from function 
    edit
    .Read("SelectComplectationVeneer", "Plywood", new { idComplectation = "${Id}" })

    but in PopUpWindow I see it:
    Code(which is idComplectation) : 1(it's idComplectation)
    Number(which is numberComplectation) : 1(it's numberComplectation)
    and a huge gap between Number and grid<ComplectationVeneer>

    but I want:
    Number(which is numberComplectation) : 1(it's numberComplectation)
    and a small gap between Number and grid<ComplectationVeneer>




  13. Daniel
    Admin
    Daniel avatar
    2219 posts

    Posted 27 Feb 2013 Link to this post

    Hi,

    If the problem is the position in which the Grid in the popup is displayed then you should set the HTML to a specific element instead of the appending it to the container:

    //popup template
    .....
    <div id="popupGridWrapper">
    </div>
    <script type="text/javascript">
        var template;
        $(function () {
            template = kendo.template($("#popupGridTemplate").html());
        });
     
        function edit(e) {
            $("#popupGridWrapper").html(template({ id: e.model.id }));
        }
    </script>
    Regards,
    Daniel
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  14. Gusev
    Gusev avatar
    83 posts
    Member since:
    Dec 2012

    Posted 14 Mar 2013 Link to this post

    Hello!
    my window is not centered
    and if I use :
    <style type="text/css">
        .k-edit-form-container {
            width: 750px;
            height: 750px;
        }
    </style>
    then  e.container.append(template({ Id: e.model.id })); 
    as expected moves my popupGridTemplate to end
    but I want to see data from my template were between data from "Complectation" and two buttons "Update" and "Cancel"

    sorry for my bad English and thanks for Help!
  15. Daniel
    Admin
    Daniel avatar
    2219 posts

    Posted 18 Mar 2013 Link to this post

    Hello again,

    In order to add the Grid in the described position, you should include the placeholder <div> at the end of your custom editor template and use the approach from my previous reply. Since the  size of the "edit-form-container" is explicitly set, it should be necessary to center the Window again when the Grid is added to the form container.

    Regards,
    Daniel
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  16. Gusev
    Gusev avatar
    83 posts
    Member since:
    Dec 2012

    Posted 22 Mar 2013 Link to this post

    Hello again))))))

    I use 
    <div id="popupGridWrapper">
    <h2>Edit ComplectationVeneer</h2>
    </div>
    <script type="text/javascript">
        var template;
        $(function () {
            template = kendo.template($("#complectationVeneerTemplate").html());
        });
     
        function edit(e) {
            $("#popupGridWrapper").html(template({ Id: e.model.id }));
        }
    </script>
    but I don't see "<h2>Edit ComplectationVeneer</h2>" and my Grid  complectationVeneerTemplate

    I see fields from Grid which cause editable mode

    Thanks fort help and Sorry for my bad questions
  17. Answer
    Daniel
    Admin
    Daniel avatar
    2219 posts

    Posted 26 Mar 2013 Link to this post

    Hi,

    I attached a sample project with the Grid inserted inserted below the field editors and above the buttons. Please check it and let me know if I am missing something.

    Kind regards,
    Daniel
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  18. Gusev
    Gusev avatar
    83 posts
    Member since:
    Dec 2012

    Posted 27 Mar 2013 Link to this post

    Hello , Daniel!
    You did a great job, and I thanks you!
    This is nice sample project!
    All my problems are gone))))
Back to Top