[CLOSED] auto resize grid when desk top window size changed

  1. #1

    [CLOSED] auto resize grid when desk top window size changed

    I have 2 panels with border layout inside desktop window. The initial display looks good. But when I resize the desktop window, the grid does not resize with it. How should I config it?
    Thanks
    -susan Zhang

    Code details:
    1, Desktop.cshml --

    @using Ext.Net;
    @using Ext.Net.MVC;
    @using CPMExtnet.ViewModels;
    
    
    @model CPMExtnet.ViewModels.DesktopViewModel
    
    
    @section content
    {
        @(
     Html.X().Desktop()
                .ID("Desktop1")
                .Listeners(l =>
                {
                    l.Ready.BroadcastOnBus = "App.Desktop.ready";
                })
                .Modules(
                    Html.X().DesktopModule()
                    .ModuleID("Hello")
                    .AutoRun(false)
                    .Window(
                        Html.X().Window()
                            .Plain(true)
                            .Padding(10)
                            .Width(150)
                            .Height(100)
                            .Title("Greeting")
                            .CloseAction(CloseAction.Destroy)
                            .Maximizable(false)
                            .Minimizable(false)
                            .Html("Welcome to CPM FAB Application!")
                    )
    
    
                )
                .DesktopConfig(
                     Html.X().DesktopConfig()
                        .ShortcutDragSelector(true)
                        .ShortcutDefaults(defaults =>
                        {
                            defaults.IconCls = "x-default-shortcut";
                        })
                        .ContextMenu(
                            Html.X().Menu()
                                .Items(
                                    Html.X().MenuItem().Text("App Settings"),
                                    Html.X().MenuItem().Text("Job Status"),
                                    Html.X().MenuSeparator(),
                                    Html.X().MenuItem().Text("Title").Handler("tile").Icon(Icon.ApplicationTileVertical),
                                    Html.X().MenuItem().Text("Title").Handler("tile").Icon(Icon.ApplicationTileHorizontal),
                                    Html.X().MenuItem().Text("Cascade").Handler("cascade").Icon(Icon.ApplicationCascade)
                                )
                        )
                )
                .StartMenu(
                    Html.X().DesktopStartMenu()
                        .Title("Ext.Net Desktop")
                        .Icon(Icon.Application)
                        .Height(200)
                        
                        .ToolConfig(
                            Html.X().Toolbar()
                                .Width(100)
                                .Items(
                                    Html.X().Button()
                                        .Text("Save App Settings")
                                        .Icon(Icon.DatabaseSave),
                                        
                                    Html.X().Button()
                                        .Text("Restore App Settings")
                                        .Icon(Icon.Reload),
                                        
                                     Html.X().Button()
                                        .Text("App Settings")
                                        .Icon(Icon.Cog),
                                        
                                    Html.X().Button()
                                        .Text("Logout")
                                        .Icon(Icon.Key)
                                        .DirectEvents(de =>
                                        {
                                            de.Click.Action = "Logout";
                                            de.Click.EventMask.ShowMask = true;
                                            de.Click.EventMask.Msg = "Good Bye...";
                                            de.Click.EventMask.MinDelay = 1000;
                                        })
                                )
                        )
                )//end of start menu
                .TaskBar(
                    Html.X().DesktopTaskBar()
                        .TrayWidth(200)
                        .QuickStart(
                            Html.X().Toolbar()
                                .Items(
                                    Html.X().Button()
                                        .Handler("tile")
                                        .Icon(Icon.ApplicationTileHorizontal)
                                        .ToolTip("Tile Horizontal"),
    
                                    Html.X().Button()
                                        .Handler("tile")
                                        .Icon(Icon.ApplicationTileVertical)
                                        .ToolTip("Tile Vertical"),
                                    Html.X().Button()
                                        .Handler("cascade")
                                        .Icon(Icon.ApplicationCascade)
                                        .ToolTip("Cascade windows")
                                )
                        )
                        .Tray(
                            Html.X().Toolbar()
                                .Items(
                                    Html.X().Button()
                                        .ID("")
                                        .Text("FAB % in Key")
                                        .MenuArrow(false)
                                        .Cls("x-bold-text")
                                        .MenuAlign("br-tr")
                                        .MenuItem(
                                            Html.X().CheckMenuItem()
                                                .Group("Application")
                                                .Text("FAB % in Key")
                                                .Checked(true)
                                                .CheckHandler("function(item, checked) {checked && App.LangButton.setText('FAB % in Key');}"),
    
                                            Html.X().CheckMenuItem()
                                                .Group("Application")
                                                .Text("????")
                                                .Checked(true)
                                                .CheckHandler("function(item, checked) {checked && App.LangButton.setText('????');}"),
    
                                            Html.X().MenuSeparator(),
    
                                            Html.X().MenuItem()
                                                .Text("Show Job Status")
                                        ),
                                    Html.X().StatusBar()
                                        .ID ("StatusBar1")
                                        .DefaultText("Ready"),
                                    
                                    Html.X().ToolbarFill()
                                )
                        )
                )
        
        )
       
    
        @foreach (var m in Model.GridViewModels)
         {
                 @Html.Partial("_GridWindow", m);
         }
      }
        
    }
    _GridWindow.cshtml --

    @{
        var X = Html.X();
    }
    
    @model CPMExtnet.ViewModels.GridViewModel
    
    
    @(
     Html.X().DesktopModuleProxy()
            .Module(
                Html.X().DesktopModule()
                    .ModuleID(Model.GridID)
                    .Shortcut(
                        Html.X().DesktopShortcut()
                            .Name(Model.Title)
                            //.IconCls("x-notepad-shortcut")
                            //.SortIndex(1)
                    )
                    .Launcher(
                        Html.X().MenuItem()
                            .Text(Model.Title)
                            .Icon(Icon.ApplicationEdit)
                    )
                    .Window(
                        Html.X().Window()
                            .Icon(Icon.ApplicationEdit)
                            .Width(1000)
                            .Height(500)
                            .Plain(true)
                            .Layout(LayoutType.Border)
                            .Title(Model.Title)
                            .Items(
                                    X.Panel()
                                        .ID("DimSelectorPanel" + Model.GridID)
                                        .Title("Dimension Filter Selector")
                                        .Region(Region.West)
                                        .Floatable(false)
                                        .Width(200)
                                        .Collapsed(true)
                                        .Split(true)
                                        .Collapsible(true)
                                        .BodyPadding(5)
                                        .Loader(X.ComponentLoader()
                                            .Url(Url.Action("DemensionFilterSeletoerPanel", "Grid"))
                                            .Mode(LoadMode.Frame)
                                            .Params(new { gridID = Model.GridID })
                                            .LoadMask(lm => lm.ShowMask = true)),
              
                                 X.Panel()
                                       .Region(Region.Center)
                                        .ID (Model.GridID)
                                        .Loader(X.ComponentLoader()
                                        .Url(Url.Action("DataGridPanel", "Grid"))
                                        .Mode(LoadMode.Frame)
                                        .Params(new { dataGridID = Model.DataGridID })
                                        .LoadMask(lm => lm.ShowMask = true))
                                 
                            ) // end items
                   )//end window
              ) //end module
                    
    )
    GridControler.cs

    public ActionResult DemensionFilterSeletoerPanel(string gridID)
            {
                return PartialView("_DemensionFilterSeletorPanel", gridID);
            }
    
    
            public ActionResult DataGridPanel(int dataGridID)
            {
                var mgr = new GridManager ();
    
                var appDataModel = CPMAppUtil.GetCPMAppModelFromSession();
                var gridDataModel = appDataModel.GridDataModels.Where (it => it.ID == dataGridID).FirstOrDefault();
                //create view model
                var vm = new GridViewModel(gridDataModel);
                vm.Model = mgr.BuildModel(gridDataModel);
                //vm.GridStore = mgr.BuildStore(gridDataModel);
                //var storeModel = vm.GridStore.Model.First();
                vm.Columns = mgr.BuildEditableColumnModel(gridDataModel, vm.Model.Fields);
                return PartialView("_DataGridPanel", vm);
            }
    _DataGridPanel.schtml --

    <script>
            var validateEditor = function (editor, e) {
                alert(e.value);
            }
    
            var editcolor2 = function (value, metadata, record) {
    
                if (!record.isValid()) {
                    metaData.css = 'matrix-cell';
                }
    
                return value;
            };
            var renderFloat = function (value, metaData, record) {
    
                if (value > 100000.00) {
                    metaData.css = 'matrix-cell';
                } else if (!record.isValid()) {
                    metaData.css = 'matrix-cell';
                }
                return value;
            };
    
            var validateOne = function (value) {
                valid = true;
                if (value == 'test') {
                    valid = true;
                    return valid;
                }
    
                else {
                    valid = "this is it";
                    return valid;
                }
            };
    
          
    
            var GetRowClass = function (record) {
                if (record.phantom) {
                    return "new-row";
                }
    
                if (record.dirty) {
                    return "dirty-row";
                }
            };
           
        </script>
            <style>
            /*.word-status .x-status-text {
                color : #777;
            }
            
            .word-status .x-status-busy {
                background   : transparent url(images/saving.gif) no-repeat scroll 3px 0px !important;
                padding-left : 25px !important;
            }
    
            .word-status .x-status-saved {
                background   : transparent url(/icons/accept-png/ext.axd) no-repeat scroll 3px 0px !important;
                padding-left : 25px !important;
            }*/
    
         .dirty-row .x-grid-cell, .dirty-row .x-grid-rowwrap-div {
                background-color: #FFFDD8 !important;
            }
             .matrix-cell
             {
                 background-color: red !important;
             }
            
            .new-row .x-grid-cell, .new-row .x-grid-rowwrap-div {
                background: #c8ffc8 !important;
            } 
        </style>
    
    @model CPMExtnet.ViewModels.GridViewModel
    
    @(Html.X().ResourceManager())
    
    
     @(
     Html.X().GridPanel()
                .ID(Model.GridID)
                .Layout (LayoutType.Anchor)
                .DefaultAnchor("100%")
                .Title("DataEntry -- " + Model.Title)
                //.Icon(Icon.Table)
                .Frame(true)
                .Store(               //Model.GridStore)
                  Html.X().Store()
                      .RemotePaging(false)
                      .PageSize(20)
                      .Proxy (
                            Html.X().AjaxProxy ()
                                .Url (Url.Action("GetData", "Grid"))
                                .Reader(Html.X().JsonReader())
                      )
                      .Model(Model.Model)
                      .Parameters( new { gridId = Model.DataGridID  })
                           
                )      
                .ColumnModel(Model.Columns)
                .TopBar(
                    Html.X().Toolbar()
                         .Items(
                               Html.X().Button()
                                .Text("Add")
                                .Icon(Icon.Add)
                                .Handler("this.up('grid').store.insert(0, new Person());"),
    
                            Html.X().Button()
                                .Text("Delete")
                                .Icon(Icon.Exclamation)
                                .Handler("this.up('grid').deleteSelected()"),
    
                           Html.X().Button()
                                .Text("Save")
                                .Icon(Icon.Disk)
                                .DirectEvents(de =>
                                {
                                    de.Click.Url = Url.Action("HandleChanges");
                                    de.Click.ExtraParams.Add(new Parameter
                                    {
                                        Name = "data",
                                        Value = "this.up('grid').store.getChangedData({skipIdForPhantomRecords : false})",
                                        Mode = ParameterMode.Raw,
                                        Encode = true
                                    });
                                })
                        )//end toolbar items
                )//end toolbar
                .BottomBar(Html.X().PagingToolbar())
                .SelectionModel(
                    Html.X().RowSelectionModel()
                        .Mode(SelectionMode.Single)
    
                )
                .View(
                   Html.X().GridView()
                        .StripeRows(true)
                        .LoadingText("Loading Grid Data...")
                        //.GetRowClass ( new Action<JFunction>("getRowClass")) 
                )
                .Listeners (ls =>
                    ls.ValidateEdit.Fn="validateEditor"
                )
                .Plugins (
                    Html.X().CellEditing()
                )
                 .Plugins (
                    Html.X().FilterHeader()
                )
        )
    _DemensionFilterSeletorPanel.cshtml has plain text.

    One thing weird, I have to define ResourceManager() in _DataGridPanel partial page even though it is already defined in _Layout.cshtml.

    Thanks
    -Susan Zhang
    Last edited by Daniil; May 23, 2014 at 5:15 AM. Reason: Please use [CODE] tags, [CLOSED]
  2. #2
    Hi @susanz,

    Something is wrong with the layout. Please post the DesktopWindow.
  3. #3

    Posted code details

    Hi Daniil, I posted the code. Please let me know if need more.
    Thanks
    -szhang
  4. #4
    Thank you.

    Quote Originally Posted by susanz View Post
    One thing weird, I have to define ResourceManager() in _DataGridPanel partial page even though it is already defined in _Layout.cshtml.
    You doesn't load it as a partial view. You are loading it an iframe, i.e. as a individual page.
    .Mode(LoadMode.Frame)
    I think it is why you don't get it stretched on resizing. If you need an iframe you need to use a Viewport inside the _DataGridPanel view.
  5. #5
    Thanks Daniil. It works after I added viewport.
    Thanks
    -susan zhang
  6. #6

    Question related to this thread

    Sorry, I like to get more info on how other loading option work.
    Do you have example how other load works (component, html). If I switched to these 2, my grid hung on loading.
    Thanks
    -susan zhang
  7. #7
    it is an example of Component Mode.
    https://examples2.ext.net/#/Loaders/...Direct_Method/

    Mode="Html" means that a Loader expects just raw HTML. Here is a small example.

    Example
    <%@ Page Language="C#" %>
    
    <script runat="server">
        [DirectMethod]
        public static string GetHtml()
        {
            return "<span style=\"color:green\">Some HTML<span>";
        }
    </script>
    
    <!DOCTYPE html>
    
    <html>
    <head runat="server">
        <title>Ext.NET v2 Example</title>
    </head>
    <body>
        <ext:ResourceManager runat="server" />    
    
        <ext:Panel
            runat="server"         
            Title="Panel">
            <Loader 
                runat="server" 
                DirectMethod="#{DirectMethods}.GetHtml" 
                Mode="Html"
                />
        </ext:Panel>
    </body>
    </html>

Similar Threads

  1. Replies: 2
    Last Post: May 07, 2014, 6:51 AM
  2. Replies: 0
    Last Post: Jul 15, 2013, 8:34 AM
  3. [CLOSED] window resize to formpanel size?
    By ecko in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Nov 03, 2012, 8:39 PM
  4. Replies: 2
    Last Post: Jul 26, 2012, 2:12 AM
  5. [CLOSED] Grid column auto size
    By SymSure in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Sep 28, 2011, 7:30 PM

Posting Permissions