The last posts show you how to get data records from a backend, and how to display them on a grid object using a widget. now is time to see the hb_grid in more detail.
Like you know the hb_grid widget let you show data in a tabular way. you can create many instances of a grid using only an hb_grid widget, like is shown on this image:
Like you know the hb_grid widget let you show data in a tabular way. you can create many instances of a grid using only an hb_grid widget, like is shown on this image:
Every instance is completely independent from the others instances of the widget.You use the dataProvider property to indicate to a grid where are the data to be show.
The data showed on a grid are tied to the variable containing those data when you use the dataProvider property with an arrayCollection variable, and if the user modify some data item on a grid he (she) really modify the variable containing that data.
now look at the following image:
The property that allow edit the data showed on a grid is the editable property, you must note that the grid has a editable property and the dataGridColumn has an editable property too, but this last one, if not indicated, is set to true by default.
Now watch this image:
Now watch this image:
On the above image there are two grids (grid1 and grid2), created using the same hb_grid widget, the left most grid (grid1) has its editable property set to true and the right most grid (grid2) has its editable property set to false, however when we change any data item on the grid 1 automatically the data are refreshed on the grid 2, like you can see on the second row (the 'titulo' column).
If you want to add a new row (either with data or not) you must to add the data to the dataProvider variable not to the widget, lets say you add the data to the variable containing the data for the grid.
in the same way if you want to delete a data row from the hb_grid widget you only must delete it in the variable associated to the dataProvider property.
The widget always is refreshed automatically when you change a data, add rows, or delete rows from the variable associated with the widget.
The variable that you assign to the dataProvider is a variable of type array or arrayCollection, where every element into the array corresponds to a data row in the grid, and every one of this elements really is an object with attributes which will be the columns (fields) of the hb_grid.
do you remember the previous posts ? there you find a line in the serverResponse event that look so:
var registros=page.loadArrayCollection(result.Table.serverInfo);
that line takes the data returned from the midleware and convert them into an arrayCollection, which could be used with the hb_grid. when the data are converted into the arrayCollection every data row (data base row) returned from the midleware is converted into a element (object) of the arrayCollection, and each element (object) into the array will has so many attributes like data fields (data base columns) has the returned rows .
to clarify this look this code:
// using an arrayCollection will ensure that the data are automatically refreshed
// the variable registros could be used assigned later to the dataProvider of an hb_grid widget
var registros=new ArrayCollection();
registros.addItem({id:10,name:"alex araya",valor:true});
registros.addItem({id:12,name:"jaime araya",valor:false});
the above code creates an arrayCollection with two elements. Its equivalent using an array is:
var registros=new Array();
registros.push({id:10,name:"alex araya",valor:true});
registros.push({id:12,name:"jaime araya",valor:false});
here we are constructing our array in a harcoded way. The first line creates a empty array, on the second we push our first element (data record) into the array with three attributes (data fields). this attributes are id, name and valor (value). the third line creates another data record into the array with the same attributes and other values for every attribute. this array could be used later like a dataProvider for the hb_grid.
Other useful properties of the hb_grid are:
selectedItem: it is an object that represents the selected row of the hb_grid, is null if there is no one row selected.
selectedIndex: it is a number representing the subscript in the array of the selected item of the hb_grid.
alpha: is the alpha transparency value of the hb_grid . Valid values are 0 (fully transparent) to 1 (fully opaque). The default value is 1. objects with
enabled: (true/false) indicates whether the component (hb_grid) can accept user interaction.
id: is a string corresponding to the ID of the hb_grid. it could be useful to identify the hb_grid that has triggered an event, like you'll see later.
showHeaders: (true/false) indicates whether the widget should show column headers.
visible: (true/false) if true the hb_grid is visible, if false is invisible.
selectedItem: Represents a reference to the selected item in the data provider, if there is no item selected it will be null.
selectedIndex: is the index in the data variable (dataProvider property) of the selected item. If there is no selected item it will be -1.
The events triggered for the hb_grid are the following:
item_change: executed when selectedIndex or selectedItem property changes as a result of user interaction. The parameters passed to your event script for this event are:
me: is the hb_grid instance that triggered the event.
info: is an object that in the case of this event will have the following attributes:
info.row: is the row of the hb_grid's cell where the user is now.
info.col: is the col of the hb_grid's cell where the user is now.
item_click: executed when the user click on a cell of the grid. The parameters passed to your event script for this event are:
me: is the hb_grid instance that triggered the event.
info: is an object that in the case of this event will have the following attributes:
info.row: is the row of the hb_grid's cell where the user made click.
info.col: is the col of the hb_grid's cell where the user made click.
item_editBeginning: executed when the user begins the editing of a cell. The parameters passed to your event script for this event are:
me: is the hb_grid instance that triggered the event.
info: is an object that in the case of this event will have the following attributes:
info.row: is the row of the hb_grid's cell being edited.
info.col: is the col of the hb_grid's cell being edited.
dataField: is the name of the field or property in the data associated with the item's column.
item_editEnd: executed when the user ends the editing of a cell. The parameters passed to your event script for this event are:
me: is the hb_grid instance that triggered the event.
info: is an object that in the case of this event will have the following attributes:
info.row: is the row of the hb_grid's cell being edited.
info.col: is the col of the hb_grid's cell being edited.
dataField: is the name of the field or property in the data associated with the item's column.
This event is cancelable, meaning that if you event script returns false, the value entered by the user will be rejected. This is useful for custom data validation.
The above image show you two grids (grid1 and grid2). Every event triggered for the grid2 (the right most grid) is registered in a text component trough scripting, so we can watch the moment when a event is triggered for the hb_grid.
The hb_grid allows you using other controls for data input instead of the default text control, like you see on the next image where you can see a combo box:
At the present the controls that you can use for editing a cell are:
- ComboBox
- CheckBox
- Text Input
- Button
- NumericStepper
If you want to add a new row (either with data or not) you must to add the data to the dataProvider variable not to the widget, lets say you add the data to the variable containing the data for the grid.
in the same way if you want to delete a data row from the hb_grid widget you only must delete it in the variable associated to the dataProvider property.
The widget always is refreshed automatically when you change a data, add rows, or delete rows from the variable associated with the widget.
The variable that you assign to the dataProvider is a variable of type array or arrayCollection, where every element into the array corresponds to a data row in the grid, and every one of this elements really is an object with attributes which will be the columns (fields) of the hb_grid.
do you remember the previous posts ? there you find a line in the serverResponse event that look so:
var registros=page.loadArrayCollection(result.Table.serverInfo);
that line takes the data returned from the midleware and convert them into an arrayCollection, which could be used with the hb_grid. when the data are converted into the arrayCollection every data row (data base row) returned from the midleware is converted into a element (object) of the arrayCollection, and each element (object) into the array will has so many attributes like data fields (data base columns) has the returned rows .
to clarify this look this code:
// using an arrayCollection will ensure that the data are automatically refreshed
// the variable registros could be used assigned later to the dataProvider of an hb_grid widget
var registros=new ArrayCollection();
registros.addItem({id:10,name:"alex araya",valor:true});
registros.addItem({id:12,name:"jaime araya",valor:false});
the above code creates an arrayCollection with two elements. Its equivalent using an array is:
var registros=new Array();
registros.push({id:10,name:"alex araya",valor:true});
registros.push({id:12,name:"jaime araya",valor:false});
here we are constructing our array in a harcoded way. The first line creates a empty array, on the second we push our first element (data record) into the array with three attributes (data fields). this attributes are id, name and valor (value). the third line creates another data record into the array with the same attributes and other values for every attribute. this array could be used later like a dataProvider for the hb_grid.
Other useful properties of the hb_grid are:
selectedItem: it is an object that represents the selected row of the hb_grid, is null if there is no one row selected.
selectedIndex: it is a number representing the subscript in the array of the selected item of the hb_grid.
alpha: is the alpha transparency value of the hb_grid . Valid values are 0 (fully transparent) to 1 (fully opaque). The default value is 1. objects with
enabled: (true/false) indicates whether the component (hb_grid) can accept user interaction.
id: is a string corresponding to the ID of the hb_grid. it could be useful to identify the hb_grid that has triggered an event, like you'll see later.
showHeaders: (true/false) indicates whether the widget should show column headers.
visible: (true/false) if true the hb_grid is visible, if false is invisible.
selectedItem: Represents a reference to the selected item in the data provider, if there is no item selected it will be null.
selectedIndex: is the index in the data variable (dataProvider property) of the selected item. If there is no selected item it will be -1.
The events triggered for the hb_grid are the following:
item_change: executed when selectedIndex or selectedItem property changes as a result of user interaction. The parameters passed to your event script for this event are:
me: is the hb_grid instance that triggered the event.
info: is an object that in the case of this event will have the following attributes:
info.row: is the row of the hb_grid's cell where the user is now.
info.col: is the col of the hb_grid's cell where the user is now.
item_click: executed when the user click on a cell of the grid. The parameters passed to your event script for this event are:
me: is the hb_grid instance that triggered the event.
info: is an object that in the case of this event will have the following attributes:
info.row: is the row of the hb_grid's cell where the user made click.
info.col: is the col of the hb_grid's cell where the user made click.
item_editBeginning: executed when the user begins the editing of a cell. The parameters passed to your event script for this event are:
me: is the hb_grid instance that triggered the event.
info: is an object that in the case of this event will have the following attributes:
info.row: is the row of the hb_grid's cell being edited.
info.col: is the col of the hb_grid's cell being edited.
dataField: is the name of the field or property in the data associated with the item's column.
item_editEnd: executed when the user ends the editing of a cell. The parameters passed to your event script for this event are:
me: is the hb_grid instance that triggered the event.
info: is an object that in the case of this event will have the following attributes:
info.row: is the row of the hb_grid's cell being edited.
info.col: is the col of the hb_grid's cell being edited.
dataField: is the name of the field or property in the data associated with the item's column.
This event is cancelable, meaning that if you event script returns false, the value entered by the user will be rejected. This is useful for custom data validation.
The above image show you two grids (grid1 and grid2). Every event triggered for the grid2 (the right most grid) is registered in a text component trough scripting, so we can watch the moment when a event is triggered for the hb_grid.
The hb_grid allows you using other controls for data input instead of the default text control, like you see on the next image where you can see a combo box:
At the present the controls that you can use for editing a cell are:
- ComboBox
- CheckBox
- Text Input
- Button
- NumericStepper
post not ended...
Posts
No comments:
Post a Comment