Setting Combobox Value for RowEditing Editor in Extjs - javascript

I am kinda facing an interesting problem where my combobox is behaving weird.
I have a grid with three columns ID , Name , Associated Part.
I have enabled Rowediting plugin and editors for ID is textfield(EditID), Name is textfield(EditName) and Associated Part is combobox(EditPartCombo).
I have a button called Update.
When I select any row in the grid and press Update, rowediting starts at that exact position.
EditID and EditName shows default values that has been selected but EditCombo populates as Blank.
Code on Update button:
{
text: 'Update Part',
handler: function(btn){
var grid = btn.up('grid');
var selection = grid.getSelectionModel().getSelection();
if(selection.length > 0){
alert(selection[0].get('ID_PART'));
Ext.getCmp('EditPartCombo').setValue(selection[0].get('ID_PART'));
var rowEditing = grid.getPlugin('RowEditPlugin');
var rowno = grid.store.indexOf(selection[0]);
rowEditing.cancelEdit();
rowEditing.startEdit(rowno, 1);
}
else{ Ext.Msg.alert('Error' , 'Please Select any Row'); }
}
Following alert gives me proper value of selected column:
alert(selection[0].get('ID_PART'));
but somehow it does net set the value to combobox.
Same thing works fine if I open a new pop-up window and apply the value to combobox created on window.
Please help.
Thanks in advance.

Related

focus in record interactive grid oracle apex

I have a grid where I do data manipulation using a sql pl, when I update the registry I use the command
var model = apex.region("event")
.widget()
.interactiveGrid("getViews")
.grid
.model;
model.fetchRecords(model.data);
so that the focus remains on the record, however when inserting the record I did not find a way for the focus to fall on the released record, can you help me?
I don't think you can focus the particular cell that you have changed because more than one records can be modified simultaneously and saved.
By default the last modified row will be focused by IG.
If the select all check box is checked and more than or row is modified all the rows will be selected.
If you want to focus the last modified row even if the select all checkbox is checked then please follow the below steps:
Dynamic Action: Save Interactive Grid, Selection Type: Column(s), Region: Your IG Region, Columns: Select the columns for for which the focus of the row must happen when IG is saved
True Action: Javascript code
$( ".selector" ).grid( "GRID_STATIC_ID" );
If you want to the last selected row to be selected even after page submit then please follow the below steps:
Dynamic action: On Selection Change IG
, True action: Javascript Code
var gridID = "GRID_STATIC_ID";
var ig$ = apex.region(gridID).widget();
var grid = ig$.interactiveGrid("getViews","grid");
var selectedRecord = grid.getSelectedRecords();
console.log(selectedRecord);
localStorage.setItem('lastSelectedRecord', JSON.stringify(selectedRecord));
Dynamic action: Page Load
, True action: Javascript Code
var gridID = "GRID_STATIC_ID";
var ig$ = apex.region(gridID).widget();
var grid = ig$.interactiveGrid("getViews","grid");
grid.setSelectedRecords(JSON.parse(localStorage.getItem('lastSelectedRecord')));

jqxTreeGrid Disable selecting / deselecting of a row if I click a particular cell in that row

I am working on jqxTreeGrid. I have a row with four fields. Name, Org, Phone and Select Preference (This is a dropdown). Now when ever i click on a particular row / cell, it selects that row and i save the row data to a local array.
My problem here is the 4th column. If i click on that column (dropdown) i don't want the rowSelect event to be fired because of the following reasons:
It deselects a all previously selected rows which I ofcourse don't want to happen.
It selects a row but my intention is to set the value of dropdown for that row.
I want nothing should happen as i am only selecting the value from preference dropdown.
I went though this post : JQGrid Not select row when clicking in a particular cell but it is not helping as jqxTreeGrid doesnot have this method.
I tried the following approach but its not working for me.
$('#ad_sendAlert_jqxGrid').on('rowClick',function(event){
// event args.
var args = event.args;
// row data.
var row = args.row;
// row key.
var key = args.key;
// data field
var dataField = args.dataField;
if(dataField === 'alertpreference'){
event.preventDefault();
//event.stopPropagation();
return false;
}
});
And this is my rowSelect method:
$('#ad_sendAlert_jqxGrid').on('rowSelect',function(event){
// event args.
var args = event.args;
// row data.
var row = args.row;
// row key.
var key = args.key;
if(row.level !== 0){
var selectedUser = self.tempUserList[row.id];
self.addUserToList(selectedUser);
}
self.renderUserCount();
});
Looks like jqxTreeGrid has selectionMode option. Setting its value to "custom" will disable its default behavior of selecting row on click. Only API will then be able to select rows.
$('#treeGrid').jqxTreeGrid({selectionMode: "custom" });

the combo box editor in cell editing grid does not deselect after choosing a value

I am having an editor grid with four columns and i am trying to implement a sql builder. The where statement will have four fields namely "condition1" "operator" "condition2" "and/or".
I am using a combo box to select between and/or/none and there is a delete button as row action. when I delete a row and if that row is the last,the value of and/or combo in the previous row will be set as "none". I am able to achieve that but the problem is , when the combo box is selected in the previous row and i delete the row next to it, the value changes in the store but not in the view. the value changes in the view when the combo box is not selected in the previous row.
my code is :
if(rowIndex == grid.all.endIndex)
{
//get the previous record and set the vale to none
var previousRowRecord = grid.store.getAt(rowIndex-1);
previousRowRecord.set('andor','NONE');
//delete the current record
grid.getStore().removeAt(rowIndex);
grid.getView().refresh();
}
else
{
grid.getStore().removeAt(rowIndex);
}
How to deselect a combo box once the value is selected ? i think this can be a work around
Not sure if I understood you correctly (a screenshot would help out a lot here), but it may sound like the combo box is still in the edit state when you are deleting the row below. If so, try the following:
First make sure the grid editor plugin has an id:
plugins: [{
ptype: 'cellediting',
...
pluginId: 'celleditplugin'
}],
Then, before deleting the row, do the following:
yourGrid.getPlugin('celleditplugin').completeEdit();

Dynamically setting multiSelect for combobox in extJS

I am kinda facing an interesting problem with my combobox's multiSelect property.
I have a grid with three columns ID, Name, Associated Part.
I have enabled Rowediting plugin and editors for ID is textfield(EditID), Name is textfield(EditName) and Associated Part is combobox(EditPartCombo with multiSelect true).
I have two buttons Add and Update.
When I select any row in the grid and press Update, rowediting starts at that exact position. In the Update button code, i am setting the multiselect property of EditPartCombo to false but somehow it is not reflecting.
Code on Update button:
{
text: 'Update Press',
handler: function(btn){
var grid = btn.up('grid');
var selection = grid.getSelectionModel().getSelection();
if(selection.length > 0){
combo = Ext.getCmp('EditPartCombo');
combo.multiSelect = false;
delete combo.picker;
combo.createPicker();
combo.reset();
var rowEditing = grid.getPlugin('RowEditPlugin');
var rowno = grid.store.indexOf(selection[0]);
rowEditing.cancelEdit();
rowEditing.startEdit(rowno, 1);
}
else{ Ext.Msg.alert('Error' , 'Please Select a row to Update'); }
}
In firebug when I inspect combo - it shows that multiSelect as false but still i am able to select multiple values.
Not sure what am I doing wrong?
Please help.
Thanks in advance.
If you cange a config value after a component is created, it is not guaranteed that this value is applied. For some config option, it is and for other it doesn't work.
I would recommend you to Ext.create the combobox, and inject this multiSelect configuration at that time. Like this for one button you create it with multiSelect enabled, and disabled for the other.

jquery populating a dialog checkbox with the value of a table checkbox

I am attempting to populate a checkbox in a dialog based upon the checkbox in a selected table row. The page has multiple tables. The tables have the same columns and a variable number of rows. Each row has one checkbox. When clicking on the row's edit icon, I open a dialog window. I am attempting to set the property of the dialog property checkbox to the property of the row property and am not having success: I have read every jquery checkbox posting and tried the solutions. These are my last 2 tries:
$('.ui-icon-pencil').click(function(e) {
var initialRow = $(this).parent().parent();
var $thisFieldset = $("#bookmark-data-fieldset");
var urlid = $("td:first", initialRow).text();
/*default dialog checkbox to not checked*/
$('#dialoggoalstatus').removeAttr('checked');
var urlname = $("td:nth-child(2)", initialRow).text();
var newurlname = urlname.trim();
var goal_date = $("td:nth-child(3)", initialRow).text();
$('#bookmark-goaldate').val(goal_date);
/* populate the dialog checkbox with the property of the
row checkbox*/
$("#dialoggoalstatus").prop($("td:nth-child(4)",
initialRow).find(':checkbox').prop('checked'));
/* I also tried this*/
$("#dialoggoalstatus").prop($(initialRow).
find('td input:eq(4)').is(':checked'));
This did not work. Can you help me identify what I am missing?
In addition, I attempting to then populate the table with the selection of made in the dialog form.
I am using this:
var goalid = $("td:first", initialRow).text();
$("td:nth-child(2)",initialRow).text($("#namefield").val());
$("td:nth-child(3)", initialRow).text($("#datefield").val());
$("td:nth-child(4)", initialRow).
prop($( "#dialoggoalstatus").prop('checked'));
This also is not working.
Any help would be greatly appreciated.

Categories

Resources