editing html files with Visual Designer?

Discontinued products Uncategorized discussions
#1

I am wanting to know if you can edit and create html files with the Visual Designer? (like the example file 01_basic.html that comes with the grid module) Most gui tools I have used produce the finished php/html code that you then access directly. If this tool only uses javascript, must this code generated by the Visual Designer be manually copied and edited into an html file where it will then be used every time? If this is true, it almost seems to defeat the purpose of the Visual Designer as in many cases it would be faster just to code everything by hand… maybe someone can clarify in what ways they use the Visual Designer (workflow process) and how often they just code everything by hand.

thanks,

Matt

#2

When you are using desktop version of schedulre - you can load file directly from filesystem and save it to filesystem as well. Latest build allow to modify such files manually ( by any text editor ) and will preserve ability to change ui related configuration through designer.

Please contact us directly at support@dhtmlx.com or open ticket at support system if you need the latest build.

#3

Hi Stanislav,

My original question was whether you can edit html/php files with the visual editor. Can you do this? The editor only seems to load and save to .js files. This means someone has to manually strip out the code and move it to a respective html or php file every time one wants to test it. I have never seen a visual/gui tool that requires these extra steps. Does this tool only work with .js files? What is the normal devleopment workflow that someone would use to work with this tool if they are using the code in php/html?

thanks,

Matt

#4

You can’t edit the html file directly

has to manually strip out the code and move it to a respective html
why do not include the result js script file by script tag in the html page, instead of inlining ?

#5

I would like to call the .js file created by the visual designer. How would I do this?

#6

What do you mean by “call” ?
You can download js code and include it in your project.

#7

Stanislav stated to:

I do not know how to do this.

Here is the code I am trying to replicate by “including” the .js file that the VisualDesigner creates.

Inlining:[code]

<link rel="STYLESHEET" type="text/css" href="./codebase/dhtmlx.css">

<style>
    /*these styles allows dhtmlxLayout to work in the Full Screen mode in different browsers correctly*/
    html, body {
       width: 100%;
       height: 100%;
       margin: 0px;
       overflow: hidden;
       background-color:white;
    }

<link rel="STYLESHEET" type="text/css" href="./codebase/dhtmlx.css">

<style>
    /*these styles allows dhtmlxLayout to work in the Full Screen mode in different browsers correctly*/
    html, body {
       width: 100%;
       height: 100%;
       margin: 0px;
       overflow: hidden;
       background-color:white;
    }

<script type="text/javascript">
    window.onload = function(){


        var dp = new dataProcessor("./data/grid.php");
        dp.init(CostCode3);

    }
</script>
[/code]

What am I doing wrong?

Since the VisualDesigner doesn’t have a window.onload event inside the .js file is that where it fails?

#8

Check the attached sample it shows how it can be done with inline and with external script.

Code uses standard edition of dhtmlx suite, so I have disabled groupBy functionality in dhtmlx grid.
designer_result.zip (633 KB)

#9

Thanks for the reply. I see how that works, but it still doesn’t do what i want.

I wish to use the Visual Designer, save the .js file it creates, use that file as an inline source WITHOUT MODIFICATION in an html file.

The .js file you attached has been modified, and cannot be reopened in Visual Designer.

I think we would all like to have our page open, AND have VisualDesigner open, make changes in VisualDesigner, save them, refresh the web page and voila have the changes appear.

Instead we need to copy and paste from the VisualDesigner CODE section, or destroy the ability to reopen the generated .js file in VisualDesigner.

#10

I got it to work using Stanislavs suggestion, but changing ONCE the VisualDesigner generated .js file to comment out Function init(){ like this /* function init() {/ and to comment out the ending brace for the function like this /}*/.

See working VisualDesigner AND Inline src code below. Ididn’t have to mess with the /#CONFIG#/ code at the end at all.

[code]/* function init(){ /
/#GENERATED_CODE#*/ dhtmlx.image_path=’./codebase/imgs/’;

var main_layout = new dhtmlXLayoutObject(document.body, '1C');

var WBSLookup = main_layout.cells('a');
WBSLookup.setText('Cost Code to WBS lookup');
var CostCode3 = WBSLookup.attachGrid();
CostCode3.setIconsPath('./codebase/imgs/');

CostCode3.setHeader(["Phase","Dept ID","Resource","Account","Fund","Extended","WBS","Column 8"]);
CostCode3.setColTypes("ed,ed,ed,ed,ed,ed,ed,ro");

CostCode3.attachHeader(["#text_filter","#text_filter","#text_filter","#text_filter","#text_filter","#text_filter","#text_filter",""]);
CostCode3.setColAlign('left,left,left,left,left,left,left,left');
CostCode3.setColSorting('str,str,str,str,str,str,str,str');
CostCode3.groupBy('0');
CostCode3.init();
CostCode3.load('./data/grid.php', 'xml');

var toolbar = WBSLookup.attachToolbar();
toolbar.setIconsPath('./codebase/imgs/');

toolbar.attachEvent('onClick', function(id){
	if(id=="addRow"){
	var newId = (new Date()).valueOf()
    CostCode3.addRow(newId,"%,%,%,%,None",CostCode3.getRowsNum())
    CostCode3.selectRow(CostCode3.getRowIndex(newId),false,false,true);
}else if(id=="delRow"){   
	var rowId = CostCode3.getSelectedRowId();
						if(rowId!=null){
     CostCode3.deleteRow(CostCode3.getSelectedRowId());
    }
}
});

toolbar.loadXML('./data/toolbar.xml', function(){});

/#END_GENERATED_CODE#/

/}/

/#CONFIG#/
var stored_data = [{“element”:“fake”,“id”:“gui”,"_text":“Main UI”,“freeze”:true,“open”:true,"$parent":0,"$level":1,"$count":1,"$selected":false},{“element”:“main_layout”,“open”:true,“id”:“top”,“name”:“main_layout”,"_text":“Main Layout : main_layout”,“events”:{},“freeze”:“partially”,“image_path”:"./codebase/imgs/",“scheme”:“1C”,"$parent":“gui”,"$level":2,"$count":1,"$selected":false,“container”:"",“status”:0,“toolbar”:0},{“element”:“cell”,“id”:“1”,“cell_name”:“a”,“name”:“WBSLookup”,“events”:{},"_text":“Cell : WBSLookup”,"$parent":“top”,"$level":3,"$count":2,"$selected":false,“header”:“Cost Code to WBS lookup”,“collaps_header”:"",“open”:true,“body”:“grid”,“toolbar”:1},{“element”:“grid”,"_text":“Grid : CostCode3”,“datatype”:“xml”,“icon_path”:"./codebase/imgs/",“datasource”:“grid.php”,“date_format”:"%m/%d/%Y",“per_page”:“6”,“selectors”:“3”,“style”:“toolbar”,“paging_css”:“height:25px;text-align:left;background:transparent;border-color:white;padding:0px;”,“events”:{},“id”:1345664284918,"$count":8,"$level":4,"$parent":“1”,“name”:“CostCode3”,“open”:true,“key_support”:“1”,"$selected":true,“context_menu”:"",“smartrendering”:0,“paging”:0,“ss_selCell”:"",“ss_grid”:""},{“element”:“column”,"_text":“Column : phase”,“format”:“0,000.00”,“group_sep”:" “,“dec_sep”:”.",“events”:{},“id”:1345664285195,"$count":1,"$level":5,"$parent":1345664284918,“name”:“phase”,“label”:“Phase”,"$selected":false,“readonly_cell”:0,“type”:“ed”,“group”:1,“width”:"",“min_width”:"",“header_style”:"",“open”:true},{“element”:“header_line”,"_text":“Header”,“events”:{},“id”:1345764731912,"$count":0,"$level":6,"$parent":1345664285195,“type”:"#text_filter","$selected":false,“label”:""},{“element”:“column”,"_text":“Column : dept”,“format”:“0,000.00”,“group_sep”:" “,“dec_sep”:”.",“events”:{},“id”:1345664284919,"$count":1,"$level":5,"$parent":1345664284918,“name”:“dept”,“label”:“Dept ID”,"$selected":false,“type”:“ed”,“align”:“left”,“open”:true,“group”:0},{“element”:“header_line”,"_text":“Header”,“events”:{},“id”:1345764731935,"$count":0,"$level":6,"$parent":1345664284919,“type”:"#text_filter","$selected":false},{“element”:“column”,"_text":“Column : resource”,“format”:“0,000.00”,“group_sep”:" “,“dec_sep”:”.",“events”:{},“id”:1345664284920,"$count":1,"$level":5,"$parent":1345664284918,“name”:“resource”,“label”:“Resource”,"$selected":false,“type”:“ed”,“align”:“left”,“open”:true},{“element”:“header_line”,"_text":“Header”,“events”:{},“id”:1345764731950,"$count":0,"$level":6,"$parent":1345664284920,“type”:"#text_filter","$selected":false},{“element”:“column”,"_text":“Column : account”,“format”:“0,000.00”,“group_sep”:" “,“dec_sep”:”.",“events”:{},“id”:1345664285178,"$count":1,"$level":5,"$parent":1345664284918,“name”:“account”,“label”:“Account”,"$selected":false,“type”:“ed”,“align”:“left”,“open”:true},{“element”:“header_line”,"_text":“Header”,“events”:{},“id”:1345764731967,"$count":0,"$level":6,"$parent":1345664285178,“type”:"#text_filter","$selected":false},{“element”:“column”,"_text":“Column : fund”,“format”:“0,000.00”,“group_sep”:" “,“dec_sep”:”.",“events”:{},“id”:1345664285183,"$count":1,"$level":5,"$parent":1345664284918,“name”:“fund”,“label”:“Fund”,"$selected":false,“type”:“ed”,“align”:“left”,“open”:true},{“element”:“header_line”,"_text":“Header”,“events”:{},“id”:1345764731982,"$count":0,"$level":6,"$parent":1345664285183,“type”:"#text_filter","$selected":false},{“element”:“column”,"_text":“Column : extended”,“format”:“0,000.00”,“group_sep”:" “,“dec_sep”:”.",“events”:{},“id”:1345664285188,"$count":1,"$level":5,"$parent":1345664284918,“name”:“extended”,“label”:“Extended”,"$selected":false,“type”:“ed”,“align”:“left”,“open”:true},{“element”:“header_line”,"_text":“Header”,“events”:{},“id”:1345764731997,"$count":0,"$level":6,"$parent":1345664285188,“type”:"#text_filter","$selected":false},{“element”:“column”,"_text":“Column : phaseWBS”,“format”:“0,000.00”,“group_sep”:" “,“dec_sep”:”.",“events”:{},“id”:1345664285200,"$count":1,"$level":5,"$parent":1345664284918,“name”:“phaseWBS”,“label”:“WBS”,"$selected":false,“type”:“ed”,“open”:true},{“element”:“header_line”,"_text":“Header”,“events”:{},“id”:1345764732014,"$count":0,"$level":6,"$parent":1345664285200,“type”:"#text_filter","$selected":false},{“element”:“column”,"_text":“Column : column_15”,“format”:“0,000.00”,“group_sep”:" “,“dec_sep”:”.",“events”:{},“id”:1346167605561,"$count":0,"$level":5,"$parent":1345664284918,“name”:“column_15”,“label”:“Column 8”},{“element”:“toolbar”,"_text":“Toolbar : toolbar”,“datasource”:“DefaultToolbar”,“events”:{“onClick”:“if(id==“addRow”){\n\t\tvar newId = (new Date()).valueOf()\n CostCode3.addRow(newId,”%,%,%,%,None",CostCode3.getRowsNum())\n CostCode3.selectRow(CostCode3.getRowIndex(newId),false,false,true);\n\t}else if(id==“delRow”){ \n\t\tvar rowId = CostCode3.getSelectedRowId();\n \t\t\t\t\t\t\tif(rowId!=null){\n CostCode3.deleteRow(CostCode3.getSelectedRowId());\n }\n }"},“id”:1345739268655,"$count":0,"$level":4,"$parent":“1”,“iconpath”:"./codebase/imgs/",“name”:“toolbar”,"$selected":false},{“element”:“windows”,“id”:“windows”,“name”:“windows”,"_text":“Popups”,“freeze”:“partially”,"$parent":0,"$level":1,"$count":0,"$selected":false}];
/#END_CONFIG#/[/code]