In a column a of a grid panel I use a combobox as editor and a renderer to display values :
editor: {
xtype: 'combobox',
alias: 'bienTypeCombobox',
store: 'BienTypesStore',
valueField: 'id_bien_type',
displayField: 'nom',
autoHeight: true,
editable: false,
autoSelect: true,
allowBlank: false
},
renderer: function (value, metaData, record, rowIndex, colIndex, store, view) {
var display = '';
Ext.data.StoreManager.get("BienTypesStore").each(
function (rec) {
if (rec.get('id_bien_type') === value) {
display = rec.get('nom');
return false;
}
});
return display;
}
So, when the cells are edited the combo box is displayed and when the cells are not edited the displayField of this combo box is displayed.
My problem is that for now,, when I click on the header of this column, the rows are sorted by the valueField of the combo box.
I would like to make the user able to sort this column by the displayedField of the combo box.
Please help, thanks
I don't think there is easy solution for this. The only one way I can think of is the following:
Create a virtual field in your model (with display field basically). Create convert function for this virtual field, so when it's set real value field is get updated.
Use this virtual field in the grid without additional rendered
Use editor for this field with both valueField and displayField pointing to this field.
Related
Is it possible to use a dropdown column in a HandsOnTable without the editable textbox?
I know you can set the type to dropdown and it will validate/highlight red when you enter an invalid value, but is there a way to completely disable text entry for dropdown columns? It seems just using the readOnly property on the column blocks the dropdown altogether.
As you said, the readOnly option will disable you dropdown. So I believe the closest solution you can use is the allowIndvalid = false (true by default) :
allowInvalid: true (optional) - allows manual input of value that does not exist in the source. In this case, the field background highlight becomes red and the selection advances to the next cell
allowInvalid: false - does not allow manual input of value that does not exist in the source. In this case, the ENTER key is ignored and the editor field remains opened.
Documentation Link
You can use this JSFiddle to quickly check this option
I have the same issue and was able to resolve it with such steps. Maybe this could help:
1 when creating columns add a special className to the necessary column type:
{
data: 'priceUnitsName',
type: 'dropdown',
invalidCellClassName: 'colored',
source: Object.keys(unitNames),
width: 100,
className: 'disable-edit',
}
2 Subscribe to events to handle cancel editing:
private targetCell: HTMLTableCellElement;
public settings: GridSettings = {
// your settings
afterOnCellMouseDown: (event: MouseEvent, coords: CellCoords, TD: HTMLTableCellElement) => {
this.targetCell = TD;
},
afterBeginEditing: (row: number, column: number) => {
if (this.targetCell.classList.contains('disable-edit')) { // this handle only necessary columns with special class
setTimeout(() => {
const inputCollection: HTMLCollection = document.getElementsByClassName('handsontableInput');
Array.from(inputCollection).forEach((input: HTMLTextAreaElement) => {
input.blur(); // this calls blur on element manually
});
});
}
},
Maybe this is not the best decision, but by default, handsontable can't make dropdown elements readonly with leaving open-close dropdown functional and I can't find any workable suggestion with this.
Checked on 'dropdown' and 'date' types, and it works.
I've got a Kendo UI Grid displaying a set of data and I need to be able to select specific cells (cells in specific columns), and when selected, return the DataItem for the row the selected cell is in, and the property of that DataItem that was clicked on. I don't know if this is possible, but I've been working on it all day and have concluded that I need some help.
Here's my grid and dataBound function, which currently gets me the DataItem, but that's it:
var hhGrid = hhDiv.kendoGrid({
dataSource: housing,
scrollable: false,
sortable: true,
selectable: 'cell',
columns: [
{ field: "Start", title: "Start", format: "{0:MM/dd/yyyy}", type: "date" },
{ field: "Stop", title: "Stop", format: "{0:MM/dd/yyyy}", type: "date" },
{ field: "Facility" },
{ field: "Area" },
{ field: "Pod" },
{ field: "Cell" },
{ field: "Comment" }
]
}).data('kendoGrid');
hhGrid.bind('change', grid_change);
function grid_change(e) {
var selectedCells = this.select();
var dataItem = this.dataItem(selectedCells[0].parentNode);
}
So first of all, is there a way to 'turn off' selection of specific columns in the grid definition? I can't find anything on doing this. I only want users to be able to select cells in the 'Area', 'Pod' and 'Cell' columns. If they click the other columns nothing should happen. Also, when they do click on those selected cells, I want to get the DataItem for the row the cell is in (which I currently can do using that grid_change method), as well as the column that was selected, or the property in the DataItem that was selected.
So, for example, if the user clicks a 'Pod' cell, I want to know that it was the pod cell that was clicked, and the other data for the row the cell is in. It seems that all of the data is there, so it shouldn't be this difficult, but I'm really struggling to find the data needed to accomplish this.
Thanks for your help!
Getting the data item is:
// Get selected cell
var selected = this.select();
// Get the row that the cell belongs to.
var row = this.select().closest("tr");
// Get the data item corresponding to this cell
var item = grid.dataItem(row);
For getting the column name you can get it doing:
// Get cell index (column number)
var idx = selected.index();
// Get column name from Grid column definition
var col = this.options.columns[idx].field;
An alternative method for getting the field associated to a columns is:
// Get column name from Grid column header data
var col = $("th", this.thead).eq(idx).data("field");
The advantage is that is columns are sortable this will work anyway.
In order to clear selection for columns that you don't want just need to invoke clearSelection().
if (col !== 'Area' && col !== 'Pod' && col !== 'Cell') {
this.clearSelection();
}
Check an example here : http://jsfiddle.net/OnaBai/m5J9J/1/ and here: http://jsfiddle.net/OnaBai/m5J9J/2/ (using column header for getting column name)
I have a Grid which has edit set to Popup.
In my grid model, I have defined a field level validation for uniqueness like below. How can I know which is the currently select row so I can avoid comparing my field value with the same row's value?
model: {
id: "id",
fields: {
id: {
nullable: false,
editable: false,
hidden : true
},
"timeStamp": {
type: "date",
validation: { // validation rules
required: true, // the field is required
unique: function (input) {
if (!input.is("[name=timeStamp]")) {
return true;
}
input.attr("data-unique-msg", '${msg.UNIQUE_TIME}' );
var data = grid.dataSource.data();
//HOW CAN I KNOW WHICH ROW Is currently selected?
I am also working with custom validators on a Kendo Grid Popup Window. I used the following code to obtain the model:
var m = $(input).closest('.k-popup-edit-form').data('kendoEditable').options.model;
I prefer this mechanism because I don't have refer to the grid object, making the code more portable from page to page.
Maybe a little tricky solution but it should work... Each record in a DataSource has a Unique Id assigned by Kendo UI. These uid, for popup editing is used in the window in such a way that Kendo UI can easily identify the record being edited without having to save the state. You should do the same.
Your function just need to do:
var uid = $(input).closest(".k-popup-edit-form").data("uid");
var item = grid.dataSource.getByUid(uid);
Now, item contains all the fields of the record being edited.
I am using form editing. I would like to disable certain fields in my add and edit forms based on the selection from a drop down box. What event is best to use to trigger this? I have attempted using dataEvents:
{ name:'type_cd',
edittype:'select',
editoptions:{
dataUrl:'functions.php',
dataEvents:[{
type:'change',
fn: function(e){
$(this).setColProp('cntrct_id',{
editoptions:{editable:false}
});
}
}]
}
},
This has no visible effect on my form fields, but I know that it's being reached because I can get an alert message from it if I put one in.
EDIT
If I submit the form, the next time I open it, the column that was set to editable:false will not appear. This is a step in the right direction, BUT I want it to immediately be uneditable. Really, I would like it to be visible, but disabled (i.e. disabled:true)
First of all dataEvents allows you to register callbacks on elements of edit elements. Inside of callbacks this will be initialized to the DOM element which will be bound. So $(this) inside of change handler it will be wrapper on <select> element and not on the grid. The usage of $(this).setColProp will be incorrect.
To disable some input field in Add/Edit form you can use the fact that all input elements get the same id like the value of name property on the corresponding column in colModel. So if you need to disable input of cntrct_id you can set disabled property to true on the element with id="cntrct_id"
{
name: 'type_cd',
edittype: 'select',
editoptions: {
dataUrl: 'functions.php',
dataEvents: [{
type: 'change',
fn: function (e) {
// disable input/select field for column 'cntrct_id'
// in the edit form
$("#cntrct_id").prop("disabled", true);
}
}]
}
}
It's important to understand that editoptions will be used for any existing editing modes (form editing, inline editing and cell editing). If you want to write the code of dataEvents which supports all editing modes you have to detect editing mode and use a little other ids of editing fields. The code (not tested) can be about as below
{
name: 'type_cd',
edittype: 'select',
editoptions: {
dataUrl: 'functions.php',
dataEvents: [{
type: 'change',
fn: function (e) {
var $this = $(e.target), $td, rowid;
// disable input/select field for column 'cntrct_id'
if ($this.hasClass("FormElement")) {
// form editing
$("#cntrct_id").prop("disabled", true);
} else {
$td = $this.closest("td");
if ($td.hasClass("edit-cell") {
// cell editing
// we don't need to disable $("#cntrct_id")
// because ONLY ONE CELL are edited in cell editing mode
} else {
// inline editing
rowid = $td.closest("tr.jqgrow").attr("id");
if (rowid) {
$("#" + $.jgrid.jqID(rowid) + "_cntrct_id")
.prop("disabled", true);
}
}
}
}
}]
}
}
The last remark. If you still use old version of jQuery (before jQuery 1.6) which don't support prop method you have to use attr instead.
#Oleg: This is working(could get the alert messages) but its not disabling the field.
Should the form field require any special values?
I have a jqGrid (using inline editing) with an autocomplete column. When the user selects a value from the autocomplete column, an event handler sets a value on another column, and also sets the value on the autocomplete column to something other than the label returned from the autocomplete source. The two column definitions (complete jsFiddle example here):
{
name: 'cartoonId',
index: 'cartoonId',
width: 90,
editable: false},
{
name: 'cartoon',
index: 'cartoon',
width: 200,
editable: true,
edittype: 'text',
editoptions: {
dataInit: function(elem) {
$(elem).autocomplete({
source: autocompleteSource,
select: function(event, ui){
var rowId = $("#inlineGrid").jqGrid('getGridParam', 'selrow');
if(ui.item){
$("#inlineGrid").jqGrid('setCell', rowId, 'cartoonId', ui.item.CartoonId);
$("#inlineGrid").jqGrid('setCell', rowId, 'cartoon', ui.item.Name);
}
return false;
}
});
}
}},
The problem is that whenever the user selects a value from the autocomplete, either by clicking it or using arrows and pressing the tab key, that cell is no longer editable, and the grid appears to lose focus entirely. If I comment out the line that sets the cartoon cell value, it behaves normally. Is there any way I can get around this behavior? I need the entire row to remain in edit mode, including the cartoon column, until the user completes the edit.
jqGrid 4.4.1
jQuery 1.7.2
jQuery UI 1.8.18
You should rename Name property of the items from the autocompleteSource to value because jQuery UI Autocomplete examines the label and value per default (see the documentation).
You can't use setCell of the 'cartoon' column which is currently in the editing mode. You should remove return false; from select callback too. So the code could looks about the following
dataInit: function (elem) {
$(elem).autocomplete({
source: autocompleteSource,
select: function (event, ui) {
var rowId = $("#inlineGrid").jqGrid('getGridParam', 'selrow');
if (ui.item) {
$("#inlineGrid").jqGrid('setCell', rowId, 'cartoonId',
ui.item.CartoonId);
}
}
});
}
See http://jsfiddle.net/27dLM/38/