I’m using splitAt(1) to freeze my first column, and while using buttonTwoState to turn on/off editing it doesn’t seem to be affecting the first column at all (it remains editable even when the button is not pressed but the rest of the grid is not editable in that case), however the first column was affected while using a checkbox to toggle editing.
Here is my full code as is:
[code]
My Grid
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<link rel="stylesheet" type="text/css" href="../codebase/skins/web/dhtmlx.css"/>
<script src="../codebase/dhtmlx.js"></script>
<script src="../codebase/excells/dhtmlxgrid_excell_context.js"></script>
<script src="../codebase/ext/dhtmlxgrid_hmenu.js"></script>
<script src="../codebase/ext/dhtmlxgrid_splt.js"></script>
<script src="../codebase/ext/dhtmlxmenu.js"></script>
<script src="../codebase/ext/dhtmlxgrid_export.js"></script>
<style>
html, body {
background: #fff;
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
overflow: hidden;
}
div#page_header {
height: 60px;
}
.dhtmlxGrid_selection {
-moz-opacity: 0.5 !important;
filter: alpha(opacity = 50) !important;
background-color:#83abeb !important;
opacity:0.5 !important;
}
.dhxlayout_base_dhx_web div.dhx_cell_layout div.dhx_cell_hdr {
font-family: Tahoma, Arial !important;
font-size: 13px !important;
color: #333 !important;
font-weight: bold !important;
border: 1px solid #ccc !important;
background-color: #f5f5f5 !important;
cursor: default !important;
}
.dhxlayout_base_dhx_web div.dhx_cell_layout div.dhx_cell_cont_layout {
padding: 0 !important;
}
.dhxlayout_base_dhx_web div.dhx_cell_layout div.dhx_cell_hdr div.dhxlayout_arrow {
background-image: url('../codebase/skins/terrace/imgs/dhxlayout_terrace/dhxlayout_cell_btns.gif') !important;
}
.dhxlayout_base_dhx_web div.dhxlayout_sep.dhxlayout_sep_resize_v {
background-image: url('../codebase/skins/terrace/imgs/dhxlayout_terrace/dhxlayout_sep_v.gif') !important;
}
.dhxlayout_base_dhx_web div.dhx_cell_layout.dhxlayout_collapsed_v div.dhx_cell_hdr {
width: 18px !important;
}
.dhx_header_cmenu {
position: absolute;
cursor: default;
line-height: normal;
background-color: #e7f1ff;
border: 1px solid #a4bed4;
box-shadow: 0 0 3px #ccc;
padding: 3px 0;
border-bottom-left-radius: 2px;
border-bottom-right-radius: 2px;
border-top-right-radius: 2px;
overflow: hidden;
z-index:2;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}
.dhx_header_cmenu_item {
padding: 4px 8px 4px 4px;
font-family: Tahoma, Arial, Helvetica, Tahoma, serif;
font-size: 12px;
}
.dhx_header_cmenu_item:hover {
padding: 3px 8px 3px 4px;
background: #B5DEFF;
border-top: 1px solid #A1CEED;
border-bottom: 1px solid #A1CEED;
}
</style>
<script>
var myLayout, t, myHeader, myToolbar, sbObj, mygrid, myForm, isPressed;
dhtmlxEvent(window,"load",function(){
// initializing and loading layout
myLayout = new dhtmlXLayoutObject({
parent: document.body,
pattern: "2U",
cells: [
{id: "a", text: "Client Database: Toronto"},
{id: "b", text: "Client Information", width: "200"}
]
});
myLayout.setAutoSize("a", "a;b");
window.onresize = function() { onBrowserResize(); }
function onBrowserResize(){
window.clearTimeout(t);
t = window.setTimeout(function(){ myLayout.setSizes() },300);
}
// attach header
myHeader = myLayout.attachHeader("page_header");
// attach toolbar
myToolbar = myLayout.attachToolbar({
parent: "toolbarObj",
icons_path: "../codebase/icons_web/"
});
myToolbar.addButton("new", 0, "New", "new.gif", "new_dis.gif");
myToolbar.addButton("delete", 1, "Delete", "cut.gif", "cut_dis.gif");
myToolbar.addSeparator("sep1", 2);
myToolbar.addButton("load", 3, "Reload", "open.gif", "open_dis.gif");
var saveOpts = Array( Array('save_p', 'obj', 'Adobe PDF File (*.pdf)', 'presentation.gif'),
Array('save_e', 'obj', 'MS Excel File (*.xlsx)', 'stylesheet.gif'));
myToolbar.addButtonSelect("save", 4, "Save", saveOpts, "save.gif", "save_dis.gif");
myToolbar.addSeparator("sep2", 5);
myToolbar.addButton("undo", 6, "", "undo.gif", "undo_dis.gif");
myToolbar.addButton("redo", 7, "", "redo.gif", "redo_dis.gif");
myToolbar.addSeparator("sep3", 8);
var printOpts = Array( Array('print_view', 'obj', 'Print View', 'page.gif'),
Array('print_sep1', 'sep'),
Array('print_cfg', 'obj', 'Options', 'settings.gif'));
myToolbar.addButtonSelect("print", 9, "Print", printOpts, "print.gif", "print_dis.gif");
myToolbar.addSeparator("sep4", 10);
myToolbar.addButtonTwoState("toggle_editing", 11, "Editing", "paste.gif", "paste_dis.gif");
myToolbar.addButton("help", 12, "Help", "open.gif", "open_dis.gif");
myToolbar.attachEvent("onClick", function(id) {
if(id=="new"){
row_addtop();
}
else if(id=="delete"){
row_remove();
}
else if(id=="load"){
grid_reload();
}
else if(id=="save"){
// grid_save();
alert("You clicked Save!");
}
else if(id=="save_p"){
mygrid.toPDF('../codebase/grid-pdf-php/generate.php','color');
}
else if(id=="save_e"){
mygrid.toExcel('../codebase/grid-excel-php/generate.php');
}
else if(id=="undo"){
// grid_undo();
alert("You clicked Undo!");
}
else if(id=="redo"){
// grid_redo();
alert("You clicked Redo!");
}
else if(id=="print"){
// grid_print();
alert("You clicked Print!");
}
else if(id=="print_view"){
mygrid.printView();
}
else if(id=="print_cfg"){
// print_options();
alert("You clicked Print Options!");
}
else if(id=="help"){
// window_help();
alert("You clicked Help!");
}
else {
return false
}
});
// toggle editing
myToolbar.attachEvent("onStateChange", function(id, state) { // button two state
isPressed = myToolbar.getItemState(id); // returns true/false
if(id=="toggle_editing"){
toggle_editing();
}
else {
return false
}
});
function toggle_editing(){
if(isPressed==true){
mygrid.enableEditEvents(false,true,false); // allows double click to edit cells
}
else {
mygrid.enableEditEvents(false,false,false);
}
}
function row_addtop(){ //add rows
if(isPressed==true){
var newId = (new Date()).valueOf();
mygrid.addRow(newId,0,0);
mygrid.selectRowById(newId);
} else {
alert("Editing is currently turned off, please enable it first.");
}
}
function row_remove() { //remove rows
if(isPressed==true){
var r = confirm("Are you sure you'd like to remove the selected rows?");
if (r == true) {
mygrid.deleteSelectedRows();
} else {
return false
}
} else {
alert("Editing is currently turned off, please enable it first.");
}
}
// attach status bar
sbObj = myLayout.attachStatusBar({text:"The information displayed on this page is confidential and therefore prohibited from being shared outside of Fountain Creations. Designed by Mr. Design, © 2014"});
// initializing and loading grid
mygrid = myLayout.cells("a").attachGrid();
mygrid.setImagePath("../codebase/skins/web/imgs/");
mygrid.setHeader("Client Name/Title,Status,Type,Contact Information,#cspan,#cspan,Address,Region,Product,#cspan,Service Cost,#cspan,Date (MM/DD/YYYY),#cspan,#cspan");
mygrid.attachHeader("#text_filter,#select_filter_strict,#select_filter_strict,Email Address,Phone,Mobile,#text_filter,#select_filter_strict,#select_filter_strict,Dimensions,Basic,Full,Installed On,Last Service,Next Contact");
mygrid.setInitWidths("140,80,80,200,90,90,220,100,100,90,50,50,100,100,100")
mygrid.setColAlign("left,left,left,left,left,left,left,left,left,center,right,right,right,right,right")
mygrid.setColSorting("str,str,str,str,int,int,str,str,str,str,int,int,date,date,date")
mygrid.setColTypes("edtxt,context,context,edtxt,edn,edn,edtxt,context,context,edtxt,price,price,edtxt,edtxt,edtxt");
mygrid.attachEvent("onKeyPress",onKeyPressed);
mygrid.enableTooltips("true,true,true,true,true,true,true,true,true,true,true,true,true,true,true");
mygrid.enableStableSorting(true);
mygrid.forceLabelSelection(true);
// context menus for editing
menuA = new dhtmlXMenuObject();
menuA.renderAsContextMenu();
menuA.loadStruct("../xml/menuA.xml");
menuB = new dhtmlXMenuObject();
menuB.renderAsContextMenu();
menuB.loadStruct("../xml/menuB.xml");
menuC = new dhtmlXMenuObject();
menuC.renderAsContextMenu();
menuC.loadStruct("../xml/menuC.xml");
menuD = new dhtmlXMenuObject();
menuD.renderAsContextMenu();
menuD.loadStruct("../xml/menuD.xml");
mygrid.setSubContext(menuA,1,0);
mygrid.setSubContext(menuB,2,0);
mygrid.setSubContext(menuC,7,0);
mygrid.setSubContext(menuD,8,0);
mygrid.init();
mygrid.splitAt(1); // use for spliting grid
mygrid.loadXML("../db/test.xml?etc="+new Date().getTime(), function(){
mygrid.sortRows(12,"date","des");
});
mygrid.enableHeaderMenu();
mygrid.enableMultiselect(true);
mygrid.enableBlockSelection();
// init form
formData = [
{type:"fieldset", offsetTop:0, label:"Edit Form", width:253, list:[
{type:"input", name:"title", label:"Name", offsetTop:13,
labelWidth:60},
{type:"input", name:"quantity", label:"Quantity", offsetTop:7,
labelWidth:60},
{type:"input", name:"price", label:"Price", offsetTop:7,
labelWidth:60},
{type:"button", name:"save", value:"Submit", offsetTop:18}
]}
];
myForm = myLayout.cells("b").attachForm();
myForm.loadStruct(formData, "json");
myForm.bind(mygrid);
var mydp = new dataProcessor ("griddata.php"); //inits dataProcessor
mydp.init(mygrid);//associates the dataProcessor instance with the grid
myform.attachEvent("onButtonClick", function(id){
myform.save(); //sends the values of the updated row to the server
});
// copy and paste
function onKeyPressed(code,ctrl,shift){
if(code==67&&ctrl){
mygrid.setCSVDelimiter("\t");
mygrid.copyBlockToClipboard();
}
if(code==86&&ctrl){
mygrid.setCSVDelimiter("\t");
mygrid.pasteBlockFromClipboard();
}
return true;
}
// reload grid
function grid_reload() {
mygrid.clearAll();
mygrid.loadXML("../db/test.xml");
}
});
</script>
[/code]
Sample XML file:
<?xml version="1.0" encoding="UTF-8"?>
<rows>
<row id="1">
<cell>Matthew Roberts</cell>
<cell>Active</cell>
<cell>Residential</cell>
<cell>matt@gmail.com</cell>
<cell>9055555226</cell>
<cell>6475552677</cell>
<cell>1 Never Land Dr, Never Land</cell>
<cell>Toronto</cell>
<cell>Eternity Falls</cell>
<cell>W x H x D</cell>
<cell>$400</cell>
<cell>$400</cell>
<cell>11/30/2014</cell>
<cell>11/30/2014</cell>
<cell>11/30/2014</cell>
</row>
<row id="2">
<cell>Matthew Roberts</cell>
<cell>Active</cell>
<cell>Residential</cell>
<cell>matt@gmail.com</cell>
<cell>9055555226</cell>
<cell>6475552677</cell>
<cell>1 Never Land Dr, Never Land</cell>
<cell>Toronto</cell>
<cell>Eternity Falls</cell>
<cell>W x H x D</cell>
<cell>$400</cell>
<cell>$400</cell>
<cell>11/30/2014</cell>
<cell>11/30/2014</cell>
<cell>11/30/2014</cell>
</row>
<row id="3">
<cell>Matthew Roberts</cell>
<cell>Active</cell>
<cell>Residential</cell>
<cell>matt@gmail.com</cell>
<cell>9055555226</cell>
<cell>6475552677</cell>
<cell>1 Never Land Dr, Never Land</cell>
<cell>Toronto</cell>
<cell>Eternity Falls</cell>
<cell>W x H x D</cell>
<cell>$400</cell>
<cell>$400</cell>
<cell>11/30/2014</cell>
<cell>11/30/2014</cell>
<cell>11/30/2014</cell>
</row>
</rows>
The second question I have is this: with the following code, how would I go about adding a variable to check if any rows are highlighted or not first before it goes ahead with the action of showing a popup and deleting anything (if nothing is highlighted it will popup asking if you’d like to delete rows any ways).
function row_remove() { //remove rows
if(isPressed==true){
var r = confirm("Are you sure you'd like to remove the selected rows?");
if (r == true) {
mygrid.deleteSelectedRows();
} else {
return false
}
} else {
alert("Editing is currently turned off, please enable it first.");
}
}
Thanks!