how can i lock the rows in editable grid?
Based on one of the parameter of the store i want to configure the grid to show lock symbol against the row and lock those rows to mark them as read only.
To add an symbol to a row depending on a row (record) field you can use a renderer for this column or a new symbol column, something like this :
columns : [{
header : 'Locked',
dataIndex : 'locked',
renderer : function(value, metaData, record, rowIndex, colIndex, store, view) {
if (record.data.locked == true) {
return '<img src="img/lockedIcon.jpg">';
} else {
return '<img src="img/freeIcon.jpg">';
}
}
}]
To avoid editing on a row you could register to the beforedit event of the editor plugin. To prevent editing just cancel the event someway like this:
onBeforeEdit : function(object, options) {
if (object.record.locked == true) {
return false;
} else {
// do what is needed to start editing
}
}
Edit: You could also use a store param instead of a record field, but this would make locking grid wide instead of per row basis.
Related
Starting from WinForms Data Grid v14.2 by enabling the GridOptionsMenu.ShowConditionalFormattingItem property, the Conditional Formatting feature becomes available.
By doing a right click on any column header, the Conditional Formatting menu item is showed up, allowing end-users to apply conditional formatting to grid columns.
My question is that is it possible to disable the feature for a specific column? I'm thinking of having the menu item grayed out, or simply not having it (by hiding it somehow) in the list of items.
I'm aware of the fact that the cells of a specific column can be formatted by the conditional formattings put on other columns by applying the formatting to the entire row. But, my goal is only to make sure the user can not access the functionality for a specific column.
You can remove the corresponding menu-item using the GridView.PopupMenuShowing event:
using System.Windows.Forms;
using DevExpress.XtraGrid.Localization;
using DevExpress.XtraGrid.Menu;
using DevExpress.XtraGrid.Views.Grid;
namespace WindowsFormsApplication2 {
public partial class Form1 : Form {
public Form1() {
InitializeComponent();
gridView1.PopupMenuShowing += gridView1_PopupMenuShowing;
}
void gridView1_PopupMenuShowing(object sender, PopupMenuShowingEventArgs e) {
var columnMenu = e.Menu as GridViewColumnMenu;
if(columnMenu != null && columnMenu.Column == this.gridColumn1) {
var conditionalFormattingItem = e.Menu.Items.FirstOrDefault(x => object.Equals(x.Tag, GridStringId.MenuColumnConditionalFormatting));
if(conditionalFormattingItem != null)
conditionalFormattingItem.Visible = false;
}
}
}
}
I have a grid with a "change" function which gets fired every time a row is selected or when I click edit/delete/update/cancel button.
What I want is to have an ability to tell the difference, because I only what to execute certain code when a row is selected, and not execute it when I am doing cruds or a row.
change: function(e) {
// Body of the function...
IF ROW IS SELECTED
EXECUTE CODE
ELSE IF ROW IS DELETED, EDITED, ETC.
DO NOTHING
END IF
}
Is there a way to tell the difference inside the "change" function?
You can use the "action" property from the event data:
function onChange(e) {
if(e.action == "itemchange") {
//update
} else if (e.action == "add") {
//add
} else {
//delete
}
}
I'm using Flash Builder 4.6 to create a schedule for the next 12 hours. The rows hold employees and the columns represent the hours. I want one GridItemRenderer that can be used by all cells to display the info appropriately.
I'm currently setting a GridItemRenderer in the GridColumn to try and accomplish this. I can get it to recognize data related to the row, but I can not get the renderer to recognize the column it is being applied to, so I can calculate if the current cell is between the start/end times for the current employee.
Any thoughts?
use "column" property in your item renderer.
override public function set data(value:Object):void {
if( value != null ) {
super.data = value;
if( column.dataField == "col1" ) {
myLabel.text = data.col1;
} else {
myLabel.text = data.col2;
}
}
}
I find the answer from this:
Flex: get column index in custom itemrenderer for spark datagrid
and tested, it's ok.
i have a grid and a form, i need to show different items on the form each time we select a row on that grid
i ve been looking on how to do this, and found
Ext.getCmp('myform').hide() // or .show()
and
listeners: { selectionchange: function () {...}
now i dont know which row is selected so i can specify which item to show
thanks
You get the selected rows as second parameter in the selectionchange event handler:
listeners: {
selectionchange: function (view, selections, options) {
console.log(view, selections, options);
}
}
So the first selected row is the first element in the selections array:
record = selections[0]
This is described in the Ext JS 4 API documentation for the selectionchange event.
Try to following code in your grid.
listeners:{
itemclick:function(view, record, item, index, e ) {
var v = record.get('firstName');
....
....
}
}
firstName will be your dataindex of colums in your grid.
You can get value of any field like this.
How can I filter a datagrid based on the value in the combo box? Can anyone show me some good examples on it?
In my application, I already filter a datagrid based on the text entered by the user. I check if the entered string matches the column entry of the datagrid and if a match is found,the filterFunction on the dataprovider is called. All this I did with the help of a tutorial only, as I'm learning flex as I do my project.
This is that code:
<mx:FormItem direction="horizontal">
<mx:ComboBox id="searchCriteria1" dataProvider="{criteriaDP1}" change="searchFunction()"/>
<mx:TextInput id="search" change="searchFunction()"/>
<mx:Button label="Clear Search" click="clear()" />
</mx:FormItem>
private function searchFunction():void{
defectList.filterFunction = filterItems;
defectList.refresh();
}
private function filterItems(item:Object):Boolean
{
var isMatch:Boolean = false
if(searchCriteria1.selectedItem.label == "Defect Id")
{
if(item.defId.toString().search(search.text.toString()) != -1)
{
isMatch = true
}
}
else if(searchCriteria1.selectedItem.label == "Review Id")
{
if(item.revId.toString().search(search.text.toString()) != -1)
{
isMatch = true
}
}
return isMatch;
}
Here defectList is the dataprovider to the Data Grid, revId,defId are the columns of the data grid .
Now how do I filter, with combo boxes. I have a combo box called "priority" with values "high","medium","low","all". If I select all,no filtering is done. If I select "high" only those fields with priprity column value as "high" should appear.
EDIT
I even tried like this:
if(searchCriteria2.selectedItem.label=="Priority")
{
if (item.revType.toLowerCase().search(searchCriteria.selectedLabel.toLowerCase()) != -1)
{
Alert("yes");
isMatch=true
}
}
searchCriteria is the comboBox,where I have the items, "ALL","HIGH"...
I have two rows with value "high" and I get the Alert "yes" for two times only..
But in the data grid all the four rows are displayed.
You appear to be searching on the revType column, rather than the Priority column.
It may be worth finding a way to reduce the amount of duplicated code in your app to help avoid bugs like this. For example, your list of fields could look like this:
[Bindable]
var criteriaDP1:ArrayCollection = new ArrayCollection([{label:"Review ID", value:"RevID"},
{label:"Defect Id", value:"DefID"}]);
Setting it up like that would let you use the value field as an index on your dataProvider, like this:
public function search_clickHandler():void
{
defectList.filterFunction = function(item:Object):Boolean
{
var gridValue:String = item[searchCriteria.selectedItem.value].toString().toLowerCase();
var searchValue:String = search.text.toLowerCase();
if(gridValue.search(searchValue) != -1)
{
return true;
}
return false;
};
defectList.refresh();
}