Page 1 of 1

Costom Cell's Editor Control

Posted: Fri Jul 14, 2017 9:00 am
by support
   
xui.Class('App', 'xui.Module',{
    Instance:{
        iniComponents : function(){
            // [[Code created by CrossUI RAD Studio
            var host=this, children=[], append=function(child){children.push(child.get(0));};
            
            append(
                xui.create("xui.UI.Dialog")
                .setHost(host,"xui_ui_dialog1")
                .setLeft("2.5em")
                .setTop("1.6666666666666667em")
                .setWidth("35.833333333333336em")
                .setHeight("20em")
                .setCaption("Customize Cell's Editor")
                .setMinBtn(false)
                .setMaxBtn(false)
            );
            
            host.xui_ui_dialog1.append(
                xui.create("xui.UI.Block")
                .setHost(host,"xui_ui_block2")
                .setDock("fill")
                .setLeft("2.5em")
                .setTop("2.5em")
                .setBorderType("inset")
                .setBackground("#FFFFFF")
                );
            
            host.xui_ui_block2.append(
                xui.create("xui.UI.TreeGrid")
                .setHost(host,"xui_ui_treegrid2")
                .setLeft("0em")
                .setTop("0em")
                .setRowNumbered(true)
                .setEditable(true)
                .setRowHandler(false)
                .setHeader([{
                    "id":"col3",
                    "caption":"col3",
                    "width":"16em",
                    "type":"label"
                }])
                .setRows([{
                    "cells":[{
                        "value":"item1"
                    }]
                },
                {
                    "cells":[{
                        "value":"item2"
                    }]
                }])
                .beforeIniEditor("_xui_ui_treegrid2_beforeinieditor")
                );
            
            append(
                xui.create("xui.UI.List")
                .setHost(host,"xui_ui_listeditor")
                .setDirtyMark(false)
                .setShowDirtyMark(false)
                .setItems([{
                    "id":"item1",
                    "caption":"item1"
                },
                {
                    "id":"item2",
                    "caption":"item2"
                },
                {
                    "id":"item3",
                    "caption":"item3"
                },
                {
                    "id":"item4",
                    "caption":"item4"
                }])
                .setLeft("35.833333333333336em")
                .setTop("24.166666666666668em")
                .setWidth("19.166666666666668em")
                .setVisibility("hidden")
                .setSelMode("multi")
                .setLabelSize("8.333333333333334em")
                .setLabelPos("none")
                .setValue("")
                .afterValueSet("_xui_ui_listeditor_aftervalueset")
            );
            
            return children;
            // ]]Code created by CrossUI RAD Studio
        },

        _xui_ui_treegrid2_beforeinieditor:function (profile, cell, cellNode, pNode, type){
            var ns = this, 
                list = ns.xui_ui_listeditor,
                ce = list.getRoot();
            
            list.setValue( cell.value||"" );

            ce.popToTop(cellNode);
            list.setTagVar( cell );
                        
            ce.setBlurTrigger(xui.id(),function(){
                ce.hide();
                list.setTagVar( null );
            });
            ce.onKeydown(function(){
                ce.hide();
                list.setTagVar( null );
            },'esc');
            
            return false;
        },
        _xui_ui_listeditor_aftervalueset:function (profile, oldValue, newValue,force, tag){
            var ns = this, cell = ns.xui_ui_listeditor.getTagVar();
            if(cell){
                ns.xui_ui_treegrid2.updateCell(cell,{
                    value:ns.xui_ui_listeditor.getValue(true)
                });
            }
        }
    }
});
xui.Class('App', 'xui.Module',{
    Instance:{
        iniComponents : function(){
            // [[Code created by CrossUI RAD Studio
            var host=this, children=[], append=function(child){children.push(child.get(0));};
            
            append(
                xui.create("xui.UI.Dialog")
                .setHost(host,"xui_ui_dialog1")
                .setLeft("2.5em")
                .setTop("1.6666666666666667em")
                .setWidth("35.833333333333336em")
                .setHeight("20em")
                .setCaption("Customize Cell's Editor")
                .setMinBtn(false)
                .setMaxBtn(false)
            );
            
            host.xui_ui_dialog1.append(
                xui.create("xui.UI.Block")
                .setHost(host,"xui_ui_block2")
                .setDock("fill")
                .setLeft("2.5em")
                .setTop("2.5em")
                .setBorderType("inset")
                .setBackground("#FFFFFF")
                );
            
            host.xui_ui_block2.append(
                xui.create("xui.UI.TreeGrid")
                .setHost(host,"xui_ui_treegrid2")
                .setLeft("0em")
                .setTop("0em")
                .setRowNumbered(true)
                .setEditable(true)
                .setRowHandler(false)
                .setHeader([{
                    "id":"col3",
                    "caption":"col3",
                    "width":"16em",
                    "type":"label"
                }])
                .setRows([{
                    "cells":[{
                        "value":"item1"
                    }]
                },
                {
                    "cells":[{
                        "value":"item2"
                    }]
                }])
                .beforeIniEditor("_xui_ui_treegrid2_beforeinieditor")
                );
            
            append(
                xui.create("xui.UI.List")
                .setHost(host,"xui_ui_listeditor")
                .setDirtyMark(false)
                .setShowDirtyMark(false)
                .setItems([{
                    "id":"item1",
                    "caption":"item1"
                },
                {
                    "id":"item2",
                    "caption":"item2"
                },
                {
                    "id":"item3",
                    "caption":"item3"
                },
                {
                    "id":"item4",
                    "caption":"item4"
                }])
                .setLeft("35.833333333333336em")
                .setTop("24.166666666666668em")
                .setWidth("19.166666666666668em")
                .setVisibility("hidden")
                .setSelMode("multi")
                .setLabelSize("8.333333333333334em")
                .setLabelPos("none")
                .setValue("")
                .afterValueSet("_xui_ui_listeditor_aftervalueset")
            );
            
            return children;
            // ]]Code created by CrossUI RAD Studio
        },

        _xui_ui_treegrid2_beforeinieditor:function (profile, cell, cellNode, pNode, type){
            var ns = this, 
                list = ns.xui_ui_listeditor,
                ce = list.getRoot();
            
            list.setValue( cell.value||"" );

            ce.popToTop(cellNode);
            list.setTagVar( cell );
                        
            ce.setBlurTrigger(xui.id(),function(){
                ce.hide();
                list.setTagVar( null );
            });
            ce.onKeydown(function(){
                ce.hide();
                list.setTagVar( null );
            },'esc');
            
            return false;
        },
        _xui_ui_listeditor_aftervalueset:function (profile, oldValue, newValue,force, tag){
            var ns = this, cell = ns.xui_ui_listeditor.getTagVar();
            if(cell){
                ns.xui_ui_treegrid2.updateCell(cell,{
                    value:ns.xui_ui_listeditor.getValue(true)
                });
            }
        }
    }
});