Comments (2)
  • Add a Comment
  • Edit
  • More Actions v
  • Quarantine this Entry

1 AndreasGronert commented Permalink

Hello HuangJiYong, <br /> with your example I have coded a complete handler like shown down here. Unfortunately it's not working. During debug myFunction will never be entered and neither data are displayd nor fields are editable. <div>&nbsp;</div> Also it was needed to place the grid directly as initialUI. When placing as part of ui and ui as initialUI nothing will be shown. What am I doing wrong? Would you please give me the complete code from the running handler, that shows the snap shot? <br /> Kind regards <br /> Andreas Gronert <div>&nbsp;</div> package myDataGrid; <div>&nbsp;</div> import com.ibm.egl.rui.widgets.CheckBox; <br /> import com.ibm.egl.rui.widgets.Combo; <br /> import com.ibm.egl.rui.widgets.DataGrid; <br /> import com.ibm.egl.rui.widgets.DataGridColumn; <br /> import com.ibm.egl.rui.widgets.GridLayout; <br /> import com.ibm.egl.rui.widgets.TextField; <br /> import egl.idl.java.class; <br /> import egl.ui.rui.Widget; <div>&nbsp;</div> handler MyDataGrid4_Input type RUIhandler{initialUI =[grid <br /> ], onConstructionFunction = start, cssFile = "css/EGLRichUI.css", title = "MyDataGrid4_Input"} <div>&nbsp;</div> ui GridLayout{columns = 3, rows = 4, cellPadding = 4, children =[]}; <div>&nbsp;</div> grid DataGrid{editorBehaviors =[myFunction <br /> ], id = "EditorBehaviorDemo", columns =[ <br /> new DataGridColumn{name = "id", displayName = "ID"}, <br /> new DataGridColumn{name = "age", displayName = "Age"}, <br /> new DataGridColumn{name = "name", displayName = "First Name"}, <br /> new DataGridColumn{name = "home", displayName = "@Home"} <br /> ], pageSize = 7, margin = 20}; <div>&nbsp;</div> function myFunction(grid DataGrid in, cell Widget in, rowData any in, rowIndex int in, column DataGridColumn in, value any in) returns(Widget) <br /> // Set different widgets for different column cells. <br /> case(column.name) <br /> when("name") <br /> combo Combo{width = 50, values =["Jane", "Joe", "Mary", "Fred" <br /> ], onChange ::= handleComboChange}; <br /> selIndex int = 0; <br /> for(n int from 1 to combo.values.getSize() by 1) <br /> if(value as string == combo.values[n]) <br /> selIndex = n; <br /> exit for; <br /> end <br /> end <br /> combo.selection = selIndex; <br /> return(combo); <br /> when("age") <br /> editor TextField{backgroundColor = "transparent", borderWidth = 1, padding = 0, marginTop = -1, marginBottom = -1, text = value, fontSize = "1.0em", onChange ::= handleTextFieldChange, class = "EditableGridEditor"}; <br /> return(editor); <br /> when("home") <br /> editor CheckBox{selected =(value as string == <br /> "true"), onChange ::= handleCheckBoxChange, class = "EditableGridCheckBox"}; <br /> return(editor); <br /> otherwise <br /> return(null); <br /> end <br /> end <div>&nbsp;</div> function handleTextFieldChange(e Event in) <br /> text TextField = e.widget; <br /> cell Widget = text.parent; <br /> rowNumber int = cell.getAttribute("row"); <br /> columnNumber int = cell.getAttribute("column"); <br /> columnName String = strlib.lowerCase(grid.columns[columnNumber].name); <br /> grid.data[rowNumber][columnName] = text.text; <br /> end <br /> function handleCheckBoxChange(e Event in) <br /> check CheckBox = e.widget; <br /> cell Widget = check.parent; <br /> rowNumber int = cell.getAttribute("row"); <br /> columnNumber int = cell.getAttribute("column"); <br /> columnName String = strlib.lowerCase(grid.columns[columnNumber].name); <br /> grid.data[rowNumber][columnName] = check.selected; <br /> end <br /> function handleComboChange(e Event in) <br /> combo Combo = e.widget; <br /> cell Widget = combo.parent; <br /> rowNumber int = cell.getAttribute("row"); <br /> columnNumber int = cell.getAttribute("column"); <br /> columnName String = strlib.lowerCase(grid.columns[columnNumber].name); <br /> grid.data[rowNumber][columnName] = combo.values[combo.selection]; <br /> end <div>&nbsp;</div> function start() <br /> end <br /> end

2 AndreasGronert commented Permalink

Hello, <br /> for all who will get similar problems in running this example. <div>&nbsp;</div> Now I have coded the example myself within a complete handler like follows and it's working. The problem in my first example was the missing data. Without data only the header will be rendered and no editable fields. With the data property like coded down here it works <br /> Kind regards <br /> Andreas Gronert <div>&nbsp;</div> package myDataGrid; <div>&nbsp;</div> import com.ibm.egl.rui.widgets.CheckBox; <br /> import com.ibm.egl.rui.widgets.Combo; <br /> import com.ibm.egl.rui.widgets.DataGrid; <br /> import com.ibm.egl.rui.widgets.DataGridColumn; <br /> import com.ibm.egl.rui.widgets.GridLayout; <br /> import com.ibm.egl.rui.widgets.TextField; <br /> import egl.idl.java.class; <br /> import egl.ui.rui.Widget; <div>&nbsp;</div> record demo type BasicRecord <br /> id String; <br /> age String; <br /> name String; <br /> home String; <br /> end <div>&nbsp;</div> handler MyDataGrid4_Input type RUIhandler{initialUI =[grid <br /> ], onConstructionFunction = start, cssFile = "css/EGLRichUI.css", title = "MyDataGrid4_Input"} <div>&nbsp;</div> demoList demo[] = [ <br /> new demo{id = "1", age = "21", name = "Joe", home = "true"}, <br /> new demo{id = "2", age = "22", name = "Mary", home = "false"}]; <br /> ui GridLayout{columns = 3, rows = 4, cellPadding = 4, children =[grid]}; <br /> grid DataGrid{editorBehaviors =[myFunction], id = "EditorBehaviorDemo", columns =[ <br /> new DataGridColumn{name = "id", displayName = "ID"}, <br /> new DataGridColumn{name = "age", displayName = "Age"}, <br /> new DataGridColumn{name = "name", displayName = "First Name"}, <br /> new DataGridColumn{name = "home", displayName = "@Home"} <br /> ], pageSize = 7, margin = 20, data = demoList as any[]}; <div>&nbsp;</div> function myFunction(grid DataGrid in, cell Widget in, rowData any in, rowIndex int in, column DataGridColumn in, value any in) returns(Widget) <br /> // Set different widgets for different column cells. <br /> case(column.name) <br /> when("name") <br /> combo Combo{width = 50, values =["Jane", "Joe", "Mary", "Fred" <br /> ], onChange ::= handleComboChange}; <br /> selIndex int = 0; <br /> for(n int from 1 to combo.values.getSize() by 1) <br /> if(value as string == combo.values[n]) <br /> selIndex = n; <br /> exit for; <br /> end <br /> end <br /> combo.selection = selIndex; <br /> return(combo); <br /> when("age") <br /> editor TextField{backgroundColor = "transparent", borderWidth = 1, padding = 0, marginTop = -1, marginBottom = -1, text = value, fontSize = "1.0em", onChange ::= handleTextFieldChange, class = "EditableGridEditor"}; <br /> return(editor); <br /> when("home") <br /> editor CheckBox{selected =(value as string == <br /> "true"), onChange ::= handleCheckBoxChange, class = "EditableGridCheckBox"}; <br /> return(editor); <br /> otherwise <br /> return(null); <br /> end <br /> end <div>&nbsp;</div> function handleTextFieldChange(e Event in) <br /> text TextField = e.widget; <br /> cell Widget = text.parent; <br /> rowNumber int = cell.getAttribute("row"); <br /> columnNumber int = cell.getAttribute("column"); <br /> columnName String = strlib.lowerCase(grid.columns[columnNumber].name); <br /> grid.data[rowNumber][columnName] = text.text; <br /> syslib.writeStdout(text.text); <br /> end <br /> function handleCheckBoxChange(e Event in) <br /> check CheckBox = e.widget; <br /> cell Widget = check.parent; <br /> rowNumber int = cell.getAttribute("row"); <br /> columnNumber int = cell.getAttribute("column"); <br /> columnName String = strlib.lowerCase(grid.columns[columnNumber].name); <br /> grid.data[rowNumber][columnName] = check.selected; <br /> end <br /> function handleComboChange(e Event in) <br /> combo Combo = e.widget; <br /> cell Widget = combo.parent; <br /> rowNumber int = cell.getAttribute("row"); <br /> columnNumber int = cell.getAttribute("column"); <br /> columnName String = strlib.lowerCase(grid.columns[columnNumber].name); <br /> grid.data[rowNumber][columnName] = combo.values[combo.selection]; <br /> end <div>&nbsp;</div> function start() <br /> end <br /> end