height dynamic datatable

{ 
    id: "datatable_preventivo_prodotti", css:"my_style", 
    view:"datatable", autoConfig:true, footer:true, 
    editable:true, resizeColumn: true, resizeRow: true, 
    columns:[
        { id:"IdProdotto", header:"Id Prodotto", fillspace:true,hidden:true}, 
        { 
            id:"cCodiceProdotto", fillspace:true, 
            header:"Codice",footer:{text:"Totale:", colspan:3} 
        },
        { id:"cNomeProdotto", fillspace:true, header:"Prodotto" },
    ]
},
{ margin:5, cols:[
    {},
    { 
        view:"button", value:"Salva" , type:"form",
        width:120, align:"right",click:Save_Preventivo_Cliente
    },
    { 
        view:"button", value:"Annulla", width:120, 
        align:"right", click:"$$('window_preventivo').hide()"
    }
]}

the problem is that toolbar does not follow the downsizing

Comments

  • AFAICS, only the following scenarios are available:

    • If height isn't specified and the datatable adjusts to the available space.

    • If height is defined strictly.

    In both cases, resize of the row won't affect the size of the grid, but the height of the scroll area will change accordingly.

    • If you set autoheight:true for the grid, it will be resized regarding the height of the rows, but the vertical scroll will be constantly disabled.

    But can you please clarify, what behavior do you need/expect?

  • the problem is that if you manually imposed the height of the datatable to 500, in the notebook I see the layout, if I set the height of more than 500 datatable I do not see the toolbar if i scroll datatable with key arrow not problem, whereas with the mouse wheel datatable not scroll

  • Check the following snippet http://webix.com/snippet/a1f38d94

    It uses the same code as in your case and with any screen size, the toolbar is still visible ( I have removed autoConfig:true from the code, as it is not necessary in case of predefined config )

  • hi and thanks. Understand the problem! Sidebar create conflict! code is this: webix.ui({ rows: [ {view: "toolbar", padding:3, elements: [ {view: "button", type: "icon", icon: "bars",width: 37, align: "left", css: "app_button", click: function(){$$("$sidebar1").toggle() } }, { view: "label", label: "PIERUCCI GROUP"}, {},
    {}, {}, { view:"menu", id : "menu", data:[ {value:"Utente", submenu:[ {id: 1, icon: "sign-out", value: "Logout"} ] } ], type:{ subsign:true, height:30 }, openAction:"click", on:{ onMenuItemClick:function(id){ if(id==1){ webix.confirm({ text:"Logout. <br/> Sicuro?", ok:"Si", cancel:"No", callback:function(res){ if(res){ window.location.href="login.html"; } } }); } } } } ] }, { cols:[ { view: "sidebar", data: menu_data, width:280, height:800, on:{ onAfterSelect: function(id){
    $$("mview_main").setValue(id); } } }, { view:"resizer" }, {id:"mview_main", animate:true, cells:[ { id: "datatable_preventivo_prodotti", view:"datatable", footer:true, pager:"pagerProdottiSottoScorta", columns:[ { id:"IdProdotto", header:"Id Prodotto", fillspace:true,hidden:true}, { id:"cCodiceProdotto", fillspace:true, header:"Codice",footer:{text:"Totale:" }}, { id:"cNomeProdotto", fillspace:true, header:"Prodotto" }, ], url: "load.php?cmd=load_prodotti_sottoscorta", }, { view:"pager", id:"pagerProdottiSottoScorta", size:20, group:10 }, { view:"toolbar", cols:[ {}, { view:"button",id:"btnAddProdottoStandby",name:"btnAddProdottoStandby", label: 'Ordina Prodotti', type:"form", width: 140, align: 'right'} ] } ]
    } ] } ] });

  • or problem is that datatable is contains in multiview?

  • edited March 24

    try this code, with sidebar and multiview

    <html>
    <head>
    <meta charset="utf-8">
    <title>Documento senza titolo</title>
        <link rel="stylesheet" href="webix/codebase/webix.css" type="text/css" media="screen" charset="utf-8">
        <script src="webix/codebase/webix.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript" src="webix/codebase/sidebar.js"></script>
        <link rel="stylesheet" type="text/css" href="webix/codebase/sidebar.css">
        <link rel="STYLESHEET" type="text/css" href="webix/codebase/dataview_styles.css">
    </head>
    <body>
    <script>var menu_data = [
            {id: "clienti_menu", icon: "webix_icon icon fa-users", value:"Clienti", data:[
                {id: "preventivi_cliente", icon: "webix_icon icon fa-list-alt", value:"Ordini StandBy"},
                {id: "ordini_cliente", icon: "webix_icon icon fa-list-alt", value:"Ordini da Preparare"},
                {id: "ordini_bollettizzare", icon: "webix_icon icon fa-list-alt", value:"Ordini in Partenza"},
                {id: "ordini_monitorare", icon: "webix_icon icon fa-list-alt", value:"Ordini da Monitorare"},
                {id: "ordini_chiusi", icon: "webix_icon icon fa-list-alt", value:"Ordini Chiusi"},
            ]}
        ];
     
    webix.ui({
            rows: [
                    {view: "toolbar", padding:3, 
                        elements: [
                            {view: "button", type: "icon", icon: "bars",width: 37, align: "left", css: "app_button", click: function(){$$("$sidebar1").toggle() }
                    },
                    { view: "label", label: "PIERUCCI GROUP"},
                    {},        
                    {},
                    {},
                    {
                        view:"menu", 
                        id : "menu", 
                        data:[ 
                               {value:"Utente", submenu:[ 
                               {id: 1, icon: "sign-out", value: "Logout"}
                            ] } 
                        ], 
                        type:{
                            subsign:true,
                            height:30
                        },
                        openAction:"click",
                        on:{
                            onMenuItemClick:function(id){
                                if(id==1){
                                    webix.confirm({
                                        text:"Logout. <br/> Sicuro?", ok:"Si", cancel:"No",
                                        callback:function(res){
                                            if(res){
                                                window.location.href="login.html";
                                            }
                                        }
                                    });
                                }
                            }
                        }
                    }
                ]
                },
                {
                    cols:[
                        {
                            view: "sidebar",
                            data: menu_data,
                            width:280,
                            //height:300,
                            on:{
                                onAfterSelect: function(id){      
                                    $$("mview_main").setValue(id);
                                }
                            }
                        },
                        { view:"resizer" },
                        {id:"mview_main", animate:true, 
                            cells:[
                                    { 
                                        id: "datatable_preventivo_prodotti", 
                                        view:"datatable", footer:true, pager:"pagerProdottiSottoScorta",
                                        columns:[
                                            { id:"IdProdotto", header:"Id Prodotto", fillspace:true,hidden:true}, 
                                            { id:"cCodiceProdotto", fillspace:true, header:"Codice",footer:{text:"Totale:" }},
                                            { id:"cNomeProdotto", fillspace:true, header:"Prodotto" },
                                        ],
                                        url: "load.php?cmd=load_prodotti_sottoscorta",
                                    },
                                    {
                                        view:"pager", 
                                        id:"pagerProdottiSottoScorta",
                                        size:20,
                                        group:10
                                    },
                                    {
                                        view:"toolbar", cols:[
                                        {},
                                        { view:"button",id:"btnAddProdottoStandby",name:"btnAddProdottoStandby", label: 'Ordina Prodotti',  type:"form", width: 140, align: 'right'}
                                        ]
                                    }
                                ]                           
                            }
                    ]
                }
            ]
        });
    </script> </body> </html>
Sign In or Register to comment.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Sign In with Facebook Sign In with Google Sign In with OpenID Sign In with Twitter

In this Discussion