Get the value if selected item of dropdown in EditorGridPanel

January 6th, 2009

Hi,

I need to add the drop down in the EditorGridPanel, and then the selected value of that drop down will be saved to the database. Here the values represent the id of the files and text represent the description. I need to show only the description.

For that I have created drop down which fills the data from the database. However to save the id of the selected fields I had to used the following format [id]Description, and then I had to split the id and then save the data. Is there any solution by which I can only show the Description and during the save of selected item of the grid, it will save the id.

Here is the code..

var storePersonInjury;
var gridPersonInjury;

/*Create the injury type dropdown list box*/
function CreateInjuryTypeDropDown()
{
try
{
var datatable = InjuredPersonDetails1.FillIncidentInjuryType().val ue;

var select = document.createElement('select');
select.id = "drpInjuryType";
//var drpdwn=document.getElementById('ddlInjured');
select.style.display ='none';
for (i = 0; i < datatable.Rows.length; i++)
{
newOption = document.createElement("option");
newOption.value = "[" + datatable.Rows[i]["ID"] + "]" + datatable.Rows[i]["Description"];
newOption.text = datatable.Rows[i]["Description"];
//drpdwn.DataValueField=dataTable.Rows[i]["Id"];

try
{
select.add(newOption); // this will fail in DOM browsers but is needed for IE
}
catch (e)
{
select.appendChild(newOption);
}
}

document.getElementById('divInjuryType1').appendCh ild(select);
}
catch(ex)
{
//alert(ex);
}

}

/*Create the Bodily Location dropdown list box*/
function CreateBodilyLocationDropdown()
{

try
{
var datatable = InjuredPersonDetails1.FillAllBadilyLocations().val ue;

var select = document.createElement('select');
select.id = "drpBodilyLocation";
//var drpdwn=document.getElementById('ddlInjured');
select.style.display ='none';
for (i = 0; i < datatable.Rows.length; i++)
{
newOption = document.createElement("option");
newOption.value = "[" + datatable.Rows[i]["ID"] + "]" + datatable.Rows[i]["Description"];
newOption.text = datatable.Rows[i]["Description"];
//drpdwn.DataValueField=dataTable.Rows[i]["Id"];

try
{
select.add(newOption); // this will fail in DOM browsers but is needed for IE
}
catch (e)
{
select.appendChild(newOption);
}
}

document.getElementById('divBadilyLocation').appen dChild(select);
}
catch(ex)
{
//alert(ex);
}

}

/*Create the Direct Cause Mechanism dropdown list box*/
function CreateDCMechanismDropdown()
{

try
{
var datatable = InjuredPersonDetails1.FillDirectCauseMechanism().v alue;

var select = document.createElement('select');
select.id = "drpDCMechanism";
//var drpdwn=document.getElementById('ddlInjured');
select.style.display ='none';
for (i = 0; i < datatable.Rows.length; i++)
{
newOption = document.createElement("option");
newOption.value = "[" + datatable.Rows[i]["ID"] + "]" + datatable.Rows[i]["Description"];
newOption.text = datatable.Rows[i]["Description"];
//drpdwn.DataValueField=dataTable.Rows[i]["Id"];

try
{
select.add(newOption); // this will fail in DOM browsers but is needed for IE
}
catch (e)
{
select.appendChild(newOption);
}
}

document.getElementById('divDCMechanism').appendCh ild(select);
}
catch(ex)
{
//alert(ex);
}

}

/*Create the ageny dropdown list box*/
function CreateAgencyDropdown()
{

try
{
var datatable = InjuredPersonDetails1.FillAllAgencies().value;

var select = document.createElement('select');
select.id = "drpAgency1";
//var drpdwn=document.getElementById('ddlInjured');
select.style.display ='none';
for (i = 0; i < datatable.Rows.length; i++)
{
newOption = document.createElement("option");
newOption.value = "[" + datatable.Rows[i]["ID"] + "]" + datatable.Rows[i]["Description"];
newOption.text = datatable.Rows[i]["Description"];
//drpdwn.DataValueField=dataTable.Rows[i]["Id"];

try
{
select.add(newOption); // this will fail in DOM browsers but is needed for IE
}
catch (e)
{
select.appendChild(newOption);
}
}

document.getElementById('divAgency1').appendChild( select);
}
catch(ex)
{
//alert(ex);
}

}

CreateInjuryTypeDropDown();
CreateBodilyLocationDropdown();
CreateDCMechanismDropdown();
CreateAgencyDropdown();

Ext.onReady(function()
{
Ext.QuickTips.init();

function formatDate(value){
return value ? value.dateFormat('d M Y') : '';
};

// shorthand alias
var fm = Ext.form;

var cmPersonInjury = new Ext.grid.ColumnModel([
// {

// id:'RowID',
// header: "",
// dataIndex: 'RowID',
// width: 0,
// visible:false,
// sortable: true
//
// },
{
id:'RowID',
header: "Injury Type",
dataIndex: 'InjuryTypeDesc',
width: 190,
sortable: true,
editor: new Ext.form.ComboBox({
typeAhead: true,
triggerAction: 'all',
transform:'drpInjuryType',
lazyRender:true
})
},
{

header: "Bodily Location",
dataIndex: 'BadilyLocationDesc',
width: 200,
sortable: true,
editor: new Ext.form.ComboBox({
typeAhead: true,
triggerAction: 'all',
transform:'drpBodilyLocation',
lazyRender:true

})
},
{
header: "Direct Cause - Mechanism",
dataIndex: 'DCMechanismDesc',
width: 200,
sortable: true,
editor: new Ext.form.ComboBox({
typeAhead: true ,
triggerAction: 'all',
transform:'drpDCMechanism',
lazyRender:true

})
},

{

header: "Agency",
dataIndex: 'AgencyDesc',
width: 200,
sortable: true,
editor: new Ext.form.ComboBox({
typeAhead: true,
triggerAction: 'all',
transform:'drpAgency1',
lazyRender:true

})
}
]);

// by default columns are sortable
cmPersonInjury.defaultSortable = true;

// this could be inline, but we want to define the Plant record
// type so we can add records dynamically

PersonInjuryColumns = Ext.data.Record.create([
// the "name" below matches the tag name to read, except "availDate"
// which is mapped to the tag "availability"
{name: 'RowID',type:'int'},
{name: 'InjuryTypeID',type:'int'},
{name: 'InjuryTypeDesc',type:'string'},
{name: 'BadilyLocationID',type:'string'},
{name: 'BadilyLocationDesc',type:'string'},
{name: 'DCMechanismID', type: 'int'},
{name: 'DCMechanismDesc',type:'string'},
{name: 'AgencyID', type: 'int'},
{name: 'AgencyDesc', type: 'string'}

]);

// create the Data Store
storePersonInjury = new Ext.data.Store({
// load using HTTP
url: 'xml/IncidentPersonInjury.xml',

// the return will be XML, so lets set up a reader
reader: new Ext.data.XmlReader({
// records will have a "plant" tag
record: 'PersonInjury'
}, PersonInjuryColumns)//,

//}
//sortInfo:{field:'Title', direction:'ASC'}
});

var rsmPersonInjury=new Ext.grid.RowSelectionModel({singleSelect:true});
rsmPersonInjury.addListener('rowselect',
function (grid, rowIndex, e)
{

var record2 = rsmPersonInjury.getSelected();
}
);

// create the editor grid
gridPersonInjury = new Ext.grid.EditorGridPanel({
store: storePersonInjury,
cm: cmPersonInjury,
sm:rsmPersonInjury,
renderTo: 'divPersonInjury',
width: 800,
height:190,
title:'Injury',
iconCls: 'icon-grid',
frame:false,

collapsible:false,
clicksToEdit:2,

tbar:[{
text: 'Add',
// id:'ext-inc-inv-grid-add-action',
tooltip:'Add new injury',
iconCls:'add',
handler : function()
{

var p = new PersonInjuryColumns({
RowID: '',
InjuryTypeDesc: 'Select',
BadilyLocationDesc:'Select',
DCMechanismDesc:'Select',
AgencyDesc: 'Select'

});

gridPersonInjury.stopEditing();
storePersonInjury.insert(storePersonInjury.data.le ngth, p);
gridPersonInjury.startEditing(storePersonInjury.da ta.length-1,0 );
}
}, {
text:'Delete',
// id:'ext-inc-inv-grid-delete-action',
tooltip:'Remove the selected item',
iconCls:'remove',
handler : function(){

// var selectionModel = gridPersonInjury.getSelectionModel();
// var record = selectionModel.getSelected();
//
// var userId = getSessionUserId();
// var OwnerID = GetOwnerID();
// if(record.data.TaskStatus == 2 )
// {
// Ext.MessageBox.show({
// msg: 'Can not deleted complted person injury.',
// width:250,
// buttons: Ext.MessageBox.OK
// });
// return false ;
//
// }
var selectionModel = gridPersonInjury.getSelectionModel();
var record = selectionModel.getSelected();
if(record == null)
{
Ext.MessageBox.show({
title: 'Injury',
msg: 'Please Select injury',
width:150,
buttons: Ext.MessageBox.OK
});
return false ;
}
else
{

Ext.MessageBox.confirm('Confirm', 'Are you sure you want to delete selected injury?',ShowConfirmDelete );
}
}
}]

});

var btnres="no";

function ShowConfirmDelete(btn)
{
btnres=btn;

if(btnres=="yes")
{

//var selectionModel = gridPersonInjury.getSelectionModel();

//get selected row index
//var selectedRowIndex = gridPersonInjury.ddText.toString().split("selected row{").toString().split("}").toString().split(",")[2].toString(); //selectedArray[1].toString().split("}")[0];

//var record = selectionModel.getSelected();

var selectionModel = gridPersonInjury.getSelectionModel();

var record = selectionModel.getSelected();

var rIndex = gridPersonInjury.store.indexOf(record);

InjuredPersonDetails1.DeletePersonInjury(parseInt( rIndex));

storePersonInjury.load();
}
};

gridPersonInjury.addListener('afteredit',function (e){
try
{

AddPersonInjury(e);
}
catch(ex)
{
alert(ex);
}
});

gridPersonInjury.on("rowclick", function rowClick(grid, rowID, e)
{
var x = e.browserEvent.srcElement;
if (x.id == "chk")
{
//Incident.UpdateInvestigationStatus(rowID,e.target. checked);
storePersonInjury.load();
}
return true;
});

storePersonInjury.load();
});

Hi Saki,
just found something similar to your point 2)

http://extjs.com/forum/showthread.php?p=184376

is that a good solution?
jarlau

Hi Saki,
I'm having the same problem as debadiroy, I want my editor grid show description and pass id to the server.

I would like to know how you implement your above solutions?
1) where/when to update the id of combo store to grid' store record?
2) If u are talking about the custom renderer in ColumnModel, but how the renderer method can access the combo store?

Anyway, I've attached a sample files for this case, the 'Zone' column is the combo I want to show description to user but pass id to server.
pls help.

(P.S. you may need to deploy the files to the web server.)
Thank you.
jarlau

There are more solutions:

1) deliver both id and description in json of the grid but display only description. An additional logic is needed to update the id in underlying record when user selects a value in combo. This is the way I do it.

2) write a custom rederer that will take the description to be displayed from combo store having an id.

Would you please describe in the code.

ColumnModel::getCellEditor(col, row)

I have no postable code ready - my code is full of other additional things and posting it as it is would do no good. Just start coding I'll help you if you'd need.

but how do I access combo store in the renderer?

Yes, the renderer part of that post is what I've meant. I don't know why that GridView override though.

#If you have any other info about this subject , Please add it free.#

Posted in freedeadaim.com | edit

freedeadaim

Get the value if selected item of dropdown in EditorGridPanel

Author

Categories

Archives

Meta