Grid View inside a tab IFrame

  1. #1

    Grid View inside a tab IFrame

    Hi I am having trouble trying to get this grid to fill the left over area within the IFrame in MVC3 Razor using EXT.NET 2
    I have attached a screenshot of what it looks like.

    Main View
    @using Ext.Net.MVC
    @{
        Layout = "~/Views/Shared/_Layout.cshtml";
    }
    
    @{
        
        var Device = CCXML.Classes.ActiveDirectory.GetDeviceName();
    
        var mnuPhone = Html.X().Menu();
    
        var topToolBar = Html.X().Toolbar()
            .Region(Ext.Net.Region.North)
            .Height(27)
            .Margins("0 0 4 0")
            .ItemsFromPage(this, "~/Views/Shared/_TopToolBar.cshtml");
    
        var mnuSidebar = Html.X().Panel()
                .ID("WestMenu")
                .Title("Explorer")
                .Margins("0 0 4 4")
                .Layout(Ext.Net.LayoutType.Accordion)
                .CollapseMode(Ext.Net.CollapseMode.Mini)
                .Width(200)
                .Region(Ext.Net.Region.West)
                .ItemsFromPage(this, "~/Views/Shared/_WestMenu.cshtml");
    
        var tabPanel = Html.X().TabPanel()
            .ID("tpMain")
            .Layout(Ext.Net.LayoutType.Absolute)
            .Items(tpmItems => { 
                tpmItems.Add(Html.X().Panel().Title("Test")
                    .Icon(Ext.Net.Icon.ApplicationHome)
                    
                    .Loader(new Ext.Net.ComponentLoader {AutoLoad = true, DisableCaching = true, Url = "/ccxml/Directories",  Mode = Ext.Net.LoadMode.Frame })
                    ); 
            });
    }
    
    @(Html.X().Viewport()
        .Layout(Ext.Net.LayoutType.Border)
        .Control(control =>
        {
            control.Add(topToolBar);
            control.Add(mnuSidebar);
            control.Add(tabPanel);
        })
        )
    GridView Page
    @using Ext.Net.MVC;
    @{
        Layout = "~/Views/Shared/_LayoutContent.cshtml";
        ViewBag.Title = "Edit Personal Directory";
    }
    
    @{
        var PDirStore = Html.X().Store()
                    .PageSize(100)
                    .Buffered(true)
                    .AutoSync(true)
                    .AutoLoad(false)
                    .Proxy(proxy => proxy.Add(Html.X().AjaxProxy()
                                .BatchActions(true)
                                .API(api => { api.Sync = "Directories/EditData"; api.Read = "Directories/GetData"; })
                                .Reader(reader => reader.Add(Html.X().JsonReader()
                                            .Root("data")
                                        ))
                                .Writer(writer => writer.Add(Html.X().JsonWriter()
                                            .Root("data")
                                            .Encode(true)
                                        ))
                                ))
                    .Model(model => model.Add(Html.X().Model()
                                .Fields(fields =>
                                {
                                    fields.Add(Html.X().ModelField().Name("ID").Type(Ext.Net.ModelFieldType.Int));
                                    fields.Add(Html.X().ModelField().Name("Name").Type(Ext.Net.ModelFieldType.String));
                                    fields.Add(Html.X().ModelField().Name("Phone").Type(Ext.Net.ModelFieldType.String));
                                })
                            ));
        
        var PhoneGrid = Html.X().GridPanel()
            .ID("DirectoryGrid")
            .Title("Personal Directory")
            .InvalidateScrollerOnRefresh(false)
            .DisableSelection(false)
            .Store(store => store.Add(PDirStore))
            .ColumnModel(columnModel =>
            {
    
                columnModel.Columns.Add(Html.X().Column()
                                                .Text("ID")
                                                .DataIndex("ID")
                                                .Width(50)
                                                .Hideable(false)
                                                .Sortable(true));
                columnModel.Columns.Add(Html.X().Column()
                                                .Text("Name")
                                                .DataIndex("Name")
                                                .Width(150)
                                                .Editor(nEdit => nEdit.Add(Html.X().TextField().AllowBlank(false)))
                                                .Hideable(false)
                                                .Sortable(true));
                columnModel.Columns.Add(Html.X().Column()
                                                .Text("Phone")
                                                .DataIndex("Phone")
                                                .Width(150)
                                                .Editor(nEdit => nEdit.Add(Html.X().TextField().AllowBlank(false)))
                                                .Hideable(false)
                                                .Sortable(true));
            })
            .ColumnLines(true)
            .View(view => view.Add(Html.X().GridView().TrackOver(true)))
            .VerticalScroller(scroller => scroller.Add(Html.X().GridPagingScroller()))
            .SelectionModel(selectionModel => selectionModel.Add(Html.X().RowSelectionModel()))
            .Plugins(plugin => { plugin.Add(Html.X().RowEditing().AutoCancel(false)); })
            .Listeners(listeners =>
            {
                listeners.AfterRender.Handler = "this.store.guaranteeRange(0, 99);";
                listeners.AfterRender.Delay = 100;
            })
            .BottomBar(bottomBar =>
            {
                bottomBar.Add(Html.X().Toolbar().ID("ToolBarTestRows1")
                    .Items(items =>
                    {
                        items.Add(Html.X().Button().ID("Add").Text("Add New Entry").Icon(Ext.Net.Icon.PhoneAdd)
                            .Listeners(listeners =>
                            {
                                listeners.Click.Fn = "AddNew";
                            })
                        );
                        items.Add(Html.X().Button().ID("Delete").Text("Remove Entry").Icon(Ext.Net.Icon.PhoneDelete)
                            .Listeners(listeners =>
                            {
                                listeners.Click.Fn = "DeleteEntry";
                            })
                        );
                    })
                );
            });
        
        var cm = new Ext.Net.ComponentLoader()
        {
            Url = "Directories/AddDirectoryEntry",
            Mode = Ext.Net.LoadMode.Frame,
            LoadMask = { ShowMask = true }
        };
    }
    
    <script language="javascript">
        var DeleteEntry = function () {
            var grid = App.DirectoryGrid,
                sm = grid.getSelectionModel();
            grid.deleteSelected();
            grid.store.sync();
        };
        var AddNew = function () {
            App.NewEntry.reload();
            App.NewEntry.show();
        };
        var RefreshGrid = function () {
            var grid = App.DirectoryGrid,
                sm = grid.getSelectionModel();
            grid.store.reload();
        };
    </script>
    @PhoneGrid
    @(Html.X().Window()
        .ID("NewEntry")
        .Title("Add New Entry")
        .Height(300)
        .Width(410)
        .Modal(true)
        .Hidden(true)
        .Loader(cm)
        .Listeners(wnd => wnd.Close.Fn = "RefreshGrid")
    )
    Any help would be appreciated. Thanks
    Attached Thumbnails Click image for larger version. 

Name:	IFrame Problem.jpg 
Views:	208 
Size:	72.7 KB 
ID:	4351  
  2. #2
    I'll assume you need a container for the grid in when working with Razor?
    I have a viewport and a borderlayout as containers

    hth /Peter

Similar Threads

  1. Replies: 7
    Last Post: Mar 27, 2013, 6:07 AM
  2. asp.net themes for controls inside a partial view
    By rsaldanhabr in forum 1.x Help
    Replies: 1
    Last Post: Aug 10, 2011, 8:05 AM
  3. [CLOSED] put a data view inside a data view,
    By farisqadadeh in forum 1.x Legacy Premium Help
    Replies: 12
    Last Post: Mar 14, 2011, 7:58 PM
  4. Replies: 6
    Last Post: Feb 15, 2010, 9:15 AM
  5. grid scroll inside iframe
    By [WP]joju in forum 1.x Help
    Replies: 1
    Last Post: Oct 29, 2009, 5:27 AM

Posting Permissions