Here is the colModel for a cell that displays dropdown list. I am trying to get selected text in the dropdown
{name:'pdInstanceType', edittype:'select', formatter:'select',
editable:true, editoptions:{value:"1:Test1;2:Test2"}}
The below code gives me the selected value(1 or 2) instead of text (Test1 or Test2)
jQuery("#tableId").jqGrid('getCell', rowId, 'pdInstanceType');
Is there a way to get the selected text? Greatly appreciate any inputs!
For someone else looking at a similar problem, here is how I was able to get the selected text of a drop down list in a jqGrid Cell.
var dropdown = jQuery('#' + rowId + 'pdInstanceType')[0];
var selectedOption = dropdown.options[dropdown.selectedIndex];
var selectedText = selectedOption.text;
Same code as RRK just a little shorter using all jQuery (v1.8.2):
var stringVal = $('#' + rowId + 'pdInstanceType').val(); // (Returns string)
Related
Edited for clarity and to add images
Using Google Apps Script, how can I:
copy a range from Section 2 sheet (G11:H11, with a checkbox & dropdown) into range G12:G25 N number of times (based on the number of non-empty rows in MASTER DROPDOWN sheet under same header title as 'Section 2'!A2) and then,
set a different value in each dropdown (each unique value listed in MASTER DROPDOWN sheet under the correct header).
For example, first image is "MASTER DROPDOWN" sheet.
This second image is "Section 2" sheet. The user can add or delete items on the list using the buttons on the right side of the page.
And this last image is "Section 2" sheet. I cannot understand how to write the code for this... When user presses "Reset list" button, I want to copy checkbox and dropdown menu (from G11:H11) N number of times (N=3 based on number of items from MASTER DROPDOWN under Section 2). In each dropdown, I want to set value with each item from the original list in the MASTER DROPDOWN sheet. This process should be dynamic and work on Section 1 and Section 3 sheet (not in worksheet currently).
Any advice on the script verbage to search/learn about this type of functionality, or some direction on the script for this is much appreciated. Here's a link to my code that I have so far...
https://docs.google.com/spreadsheets/d/1ZdlJdhA0ZJOIwLA9dw5-y5v1FyLfRSywjmQ543EwMFQ/edit?usp=sharing
function newListAlert (){
var ui = SpreadsheetApp.getUi();
var response = ui.alert("Are you sure you want to delete your current list and create a new one?",ui.ButtonSet.YES_NO);
if(response == ui.Button.YES) {
newList();
} else {
}
}
function newList() {
var ss = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
var range = ss.getRange("G11:H25");
var options = {contentsOnly: true, validationsOnly: true};
//clear current list
range.clear(options);
//add new item to list in first row of range
addNewItem();
//copy new datavalidation row above based on number of non-empty rows in MASTER DROPDOWN with same header as active sheet (-1)
var datass = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("MASTER DROPDOWN");
var range = ss.getRange("A2");
if (range.getCell(1,1)){
var section = datass.getRange(1,1,1,datass.getLastColumn()).getValues();
var sectionIndex = section[0].indexOf(range.getValue()) + 1;
var validationRange = datass.getRange(4,sectionIndex,19);//19 columns: checklist has a maximum of 18 rows (+ 1 for "select option")
}
}
In your situation, how about modifying newList() as follows?
Modified script:
function newList() {
var ss = SpreadsheetApp.getActiveSpreadsheet();
var sheet = ss.getActiveSheet();
var sheetName = sheet.getSheetName();
sheet.getRange("G11:H25").clear({ contentsOnly: true, validationsOnly: true });
var srcSheet = ss.getSheetByName("MASTER DROPDOWN");
var values = srcSheet.getDataRange().getValues();
var obj = values[0].map((_, c) => values.map(r => r[c])).reduce((o, [h, , , ...v], i) => {
if (h != "") {
v = v.filter(String);
v.shift();
o[h] = { values: v, range: srcSheet.getRange(4, i + 1, v.length + 1) };
}
return o;
}, {});
if (obj[sheetName]) {
var validationRule = SpreadsheetApp.newDataValidation()
.setAllowInvalid(false)
.setHelpText('Select an option from the menu. To add more options to the dropdown list, go to MASTER DROPDOWN tab.')
.requireValueInRange(obj[sheetName].range, true)
.build();
var d = obj[sheetName].values.map(_ => [validationRule]);
var v = obj[sheetName].values.map(e => [e]);
sheet.getRange(sheet.getLastRow() + 1, 8, obj[sheetName].values.length).setDataValidations(d).setValues(v).offset(0, -1).insertCheckboxes();
}
}
When this script is run, the values for DataValidations are retrieved from the sheet "MASTER DROPDOWN", and using the sheet name, the dataValidation rules are created, and put to the column "H". And also, the checkboxes are put to the column "G" of the same rows of the dataValidations.
In this case, for example, when you add a new sheet of "Section 1" and run newList(), the dropdown list including "Engineering" and "Design" is put to the column "H" and the checkboxes are also put to the column "G".
Note:
In this modification, the sheet name like "Section 2" is used for searching the column of "MASTER DROPDOWN" sheet. So please be careful about this.
And, from your current script, the last row is used for putting to the dropdown list and checkboxes. So when you want to modify this, please modify the above script.
This sample script is for your sample Spreadsheet. So when your actual Spreadsheet is changed, this script might not be able to be used. Please be careful this.
References:
setDataValidations(rules)
insertCheckboxes()
Is there a way to access the jqGrid's columnChooser's multiselect API objects? I need to call those objects to update the data on ColumnChooser pop-up dialog.
In the snapshot below, is the customized ColumnChooser pop-up dialog. The HTML combo when selected/changes would then change the $ui.multiselect sections (avaiable & unavailable columns).
In the 2nd snapshot below is the view souce using Firefox's firebug and it doesn't have me the option to toggle the 2 columns.
Is there a way to access ColumnChooser's API instead, to manually toggle the columns on the ColumnChooser but not touch the jqGrid's columns? How can I accomplish this?
Thanks...
[Snapshot #1]...
[Snapshot #2]...
After a few days of Google surfing, piecing together sample script from lots of example api and coming up with JQuery to find the html path to a clickable anchor link.
Updated Solution
The "parmSavedBuildDataFormValueColumnModelSetting" value is the colModel's name you passed on to it, whether it be the values you saved from the database or cookie, or anything for populating the MultiSelect "selected" box-windows.
function JqgridColumnChooserSavedBuildsRecordsMultiselectDialogToggler(parmSavedBuildDataFormValueColumnModelSetting) {
//Re-order the $.ui.multiselect's columns in 2 boxed-windows (available & unavailable)...
//http://stackoverflow.com/questions/10439072/add-remove-column-handler-on-jqgrid-columnchooser
//http://stackoverflow.com/questions/11526893/jqgrid-columnchooser-unselected-columns-on-the-right-in-alphabetical-order
var $jqgridColumModelSetting = $('#' + jqgridSpreadsheetId).jqGrid('getGridParam', 'colModel');
var $jqgridColumNameSetting = $('#' + jqgridSpreadsheetId).jqGrid('getGridParam', 'colNames');
//Remove all of the "selected" columns having "-" icon...
//09/11/2013 - This "selected" columns with hyperlink click event does not work too well as it cause 1/3 of all columns not to be visible, so let' use the "Remove All" hyperlink instead...
//#$('#colchooser_' + jqgridSpreadsheetId + ' ul.selected a.action').click();
$('#colchooser_' + jqgridSpreadsheetId + ' div.ui-multiselect div.selected a.remove-all').click();
//Add back the "available" columns having "+" icon, only the one that match the SavedBuilds data...
$.each(parmSavedBuildDataFormValueColumnModelSetting.split('|'), function (i1, o1) { //##parmSavedBuildDataFormValueColumnModelSetting.forEach(function (i, o) {
$.each($jqgridColumModelSetting, function (i2, o2) {
if (o2.name == o1) {
$('#colchooser_' + jqgridSpreadsheetId + ' ul.available li[title="' + $jqgridColumNameSetting[i2] + '"] a.action').click();
return false; //This only break the foreach loop [while "return true" resume the loop] (This have nothing to do with function's returned value)...
}
});
});
}
I'm using SlickGrid with the pager plugin. My intent is to display line items in SlickGrid and allow the user to double click on a row to get more detail. I have code that seems to work fine but it feels as though I'm doing this the hard way:
grid.onDblClick.subscribe(function(e, args) {
var selectedIndex = parseInt(grid.getSelectedRows());
var pageInfo = dataView.getPagingInfo();
var pageSize = pageInfo.pageSize;
var pageNum = pageInfo.pageNum;
var idx = pageSize*pageNum + selectedIndex;
var asset = rows[idx].assetName;
alert("Selected Asset is " + asset);
});
I've seen other questions posted where people did a grid.getData()[selectedIndex] or a dataView.getItemById(selectedIndex), but since selectedIndex is always a 0 to something number, I always got data from the first page in my list regardless of which page I was on. Is there a direct way to map a selected index on a page to the actual row in the data array? Again, the code above seems to work fine - just feels like I'm missing an obvious method somewhere.
grid.onDblClick.subscribe(function(e, args) {
alert("Selected asset is " + args.item);
alert("Or " + grid.getData().getItem(args.row));
alert("Or " + grid.getDataItem(args.row));
});
I have a in-line delete button, I want to append more data to the delete message pop-up like this:
"Delete selected row with code = 7 ?"
I'm using the following in the delOptions:
beforeShowForm: function ($form) {
var sel_id = $("#list").jqGrid('getGridParam', 'selrow');
$("td.delmsg", $form[0]).html("Delete record with <b>code=" + $("#list").jqGrid('getCell', sel_id, 'cd') + "</b>?");}
The problem is If I click on the delete button without first clicking on any part of the row, the selrow is either null or it gets the previously selected row not the currently selected!
How do I make the row selected when clicking on the trash bin icon?
Any help is appreciated
I suppose that you use the example which I posted in the old answer. It was written in case of usage of the Delete button (the part of form editing) from navigator bar.
There are one hidden row in the Delete dialog which could help you. Try this one
beforeShowForm: function ($form) {
// get comma separated list of ids of rows which will be delete
// in case of multiselect:true grid or just id of the row.
// In the code below we suppose that single row selection are used
var idOfDeletedRow = $("#DelData>td:nth-child(1)").text();
$form.find("td.delmsg").eq(0)
.html("Delete record with <b>code=" +
$(this).jqGrid('getCell', idOfDeletedRow, 'cd') + "</b>?");
// REMARK: in old versions of jqGrid you can't use $(this) and
// will have to use something like $("#list")
}
In jqGrid ,if multiselect: true then there will be some the checkbox control.I used the jQuery Selector to choose these checkbox but failed.
My coders areļ¼
jQuery('input[type="checkbox"][name^="jqg"][checked]').each(function(){...});
In general the code which you use is correct. I would rewrite it better as
jQuery('input:checkbox[name^="jqg"]:checked').each(function(){...});
because 'checked' must be not attribute, just a property. It's of course important that you use the code after the grid is filled and some rows are selected.
More better way would be to get the array of rowids of selected rows with respect of getGridParam method:
var selRowIds = $("#list").jqGrid('getGridParam', 'selarrrow');
Then you can get the checkbox of any from the items of selRowIds array by id. If the gridid is "list" for example and the id of selected row is "2" then the id of the corresponding checkbox is "jqg_list_2" ("jqg_" + gridid + "_" + rowid). In the way you can select every checkbox.
Add code event.stopPropagation() will resolve this issue.
Ex jQuery('xxxx').click(function(event){event.stopPropagation();});