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

[Gusev]

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

[Daniel]

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

[Gusev]

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

[Daniel]

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

[Gusev]

Thanks for great work, Daniel!

[Gusev]

 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

@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}"})

                )

       )

[Daniel]

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

[Gusev]

Daniel,Thanks for your help!
I get instead 

idComplectation:

- [object HTMLInputElement]

[Daniel]

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

[Gusev]

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

[Daniel]

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

[Gusev]

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>

[Daniel]

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

[Gusev]

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!

[Daniel]

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

[Gusev]

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

[Daniel]

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

[Gusev]

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