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

[Solved] grid popup editing issue - bug?!

0 Answers 13 Views
Grid
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
Ismael
Top achievements
Rank 1
Ismael asked on 16 Nov 2012, 01:26 PM
hi there,

i have a simple grid with popup editing. the editor template contains a basic dropdownlist with an onchange event creating a basic window with a second, different grid with popup editing. calling the editor template of the first grid with the insert button everything goes fine, however editing an item and opening the window with the second grid from the dropdownlist causes a problem - calling the editor template of the second grid overrides the editor template of the first / underlying grid making it disappear and 'killing' the purpose of the first grid e.g. creating / editing a data item.

i have provided a basic, stripped down - quick and dirty - example displaying the issue described above.

first grid

@{
    IEnumerable<ViewIndustrialSectorBase> viewIndustrialSectorBases = new [] {
        
        new ViewIndustrialSectorBase { IndustrialSectorBaseId = "IndustrialSectorBaseId" }
    };
}

@(
    Html.Telerik().Grid<ViewIndustrialSectorBase>(viewIndustrialSectorBases)
        .Name("IndustrialSectorBaseGrid")
        .DataKeys(keys => {
            keys
                .Add(property => property.IndustrialSectorBaseId);
        })
        .ToolBar(commands => {
            commands
                .Insert()
                .ButtonType(GridButtonType.Image);
        })
        .Editable(editing => {
            editing
                .Mode(GridEditMode.PopUp)
                .TemplateName("PopUp");
        })
        .DataBinding(binding => {
            binding
                .Ajax()
                    .Insert("Create", "IndustrialSectorBase")
                    .Update("Update", "IndustrialSectorBase");
        })
        .Columns(columns => {
            columns
                .Command(commands => {
                    commands
                        .Edit()
                        .ButtonType(GridButtonType.Image);
                })
                .Width(47);
            columns
                .Bound(property => property.IndustrialSectorBaseId);
        })
)

editor template of the first grid - PopUp.cshtml - with inline window and basic javascript

@(
    Html.Telerik().DropDownList()
        .Name("IndustrialSectorList")
        .Placeholder("--- select an item ---")
        .BindTo(
            new[] {
                
                new SelectListItem {
                    
                    Text  = "..."
                }
            }
        )
        .ClientEvents(events => {
            events
                .OnChange(
                    @<text>
                        function(event) {
                            
                            $('#IndustrialSectorWindow').data('tWindow').center().open();
                        }
                    </text>
                );
        })
)

@(
    Html.Telerik().Window()
        .Name("IndustrialSectorWindow")
        .Content(
            Html.Partial("WindowContent").ToHtmlString()
        )
        .Visible(false)
)

second grid with automated editor template - WindowContent.cshtml

@using De.Foerch.Xtend.MasterData.Models.ViewModels

@{
    IEnumerable<ViewIndustrialSector> viewIndustrialSectors = new [] {
        
        new ViewIndustrialSector { IndustrialSectorId = 1 }
    };
}

@(
    Html.Telerik().Grid<ViewIndustrialSector>(viewIndustrialSectors)
        .Name("IndustrialSectorGrid")
        .DataKeys(keys => {
            keys
                .Add(property => property.IndustrialSectorId);
        })
        .ToolBar(commands => {
            commands
                .Insert()
                .ButtonType(GridButtonType.Image);
        })
        .Editable(editing => {
            editing
                .Mode(GridEditMode.PopUp);
        })
        .DataBinding(binding => {
            binding
                .Ajax()
                    .Insert("Create", "IndustrialSector")
                    .Update("Update", "IndustrialSector");
        })
        .Columns(columns => {
            columns
                .Command(commands => {
                    commands
                        .Edit()
                        .ButtonType(GridButtonType.Image);
                })
                .Width(47);
            columns
                .Bound(property => property.IndustrialSectorId);
        })
)

i hope i could make my point - thanks in advance ... best regards ismael.
Tags
Grid
Asked by
Ismael
Top achievements
Rank 1
Share this question
or