I have a Kendo grid that uses a drop down of foreign key values. I need to be able to update these foreign key values based on the value of an external drop down on my page. I am able to set the drop down's new values with Javascript, but the grid itself has the old values in that foreign key column. I need to be able to set those values as well so the drop down works in edit mode. Has anyone attempted to do this or seen an example of doing this? I have searched a ton for this and can't find anything.
Taken from telerik forum,
function onGridEdit(e){
var ddl = e.container.find("[data-role='dropdownlist']");
if(ddl){
ddl.getKendoDropDownList().bind("change", function(evt){
e.model.set("ProductData.ProductValue.MasterDataText", this.text());
});
}
},
Alternatively, then you define drop down as an editor for a grid column, you can
do like this:
var customDdlEditor = function (container, options) {
//some code...
change: function (e) {
options.model.Name = this.value();
},
}
Related
I am using Kendo Grid with inline editing .
I need, on click of checkbox which is present in the grid i have to make row as editable and come out of edit mode.
To make kendo grid as editable i am using this code
var grid = $("#GridID").data("kendoGrid");
var gridDataArray = grid.dataSource._data;
var ctrl = event.target;
var row = $(this).parents('tr');
var index = row.index();
grid.editRow(row);
so the selected row is in edit Mode. Now, i need to get out of edit mode using javascript/JQuery.
Use saveRow or cancelRow, depending on whether you want to save the user changes or not.
On a side note, use the official data method
grid.dataSource.data()
instead of internal fields:
grid.dataSource._data
I have a web application that uses ExtJS 4 that incorporates a Ext.grid.EditorGridPanel.
One of the columns of the Ext.grid.EditorGridPanel has a combobox editor that I would like to disable programmatically when the store loads based on the value of another field in the store.
It seems like this should be pretty simple - but so far nothing seems to work.
When the Grid's store loads, I have a listener to check each row and disable the combobox in index 4 depending on the value of another field.
The only thing that I can't get to work is actually disabling the combobox.
Any suggestions?
Here is the psuedo-code. Thanks in advance
listeners: {
'load': function(st, records, options) {
var view = getMyEditorGridPanel().getView();
for (var i = 0; i < this.getCount(); i++) {
if (store.getAt(i).get('setDisabled') === 'Y') {
//The cell at index 4 has a combobox editor - I CAN'T GET IT TO DISABLE!!
view.getCell(i,4).setDisabled(true);
}
}
}
From my point of view you have two different things you need to manage here:
Cell Styling, the way a cell looks when not being edited (either is enabled or disabled)
Editor Availability, how to react when a cell is about to be edited (should be possible to edit the cell)
Cell Styling
For the first one I would advice to provide a style to each cell in order to make it look disabled, this can be achieved during rendering time instead trying to do it when the store loads (btw nothing ensures you that the grid items have been fully rendered just after getting the load event callback). You can return a custom class per row by providing an implementation to Ext.grid.ViewView.getRowClass
viewConfig: {
getRowClass: function(record, rowIndex, rowParams, store) {
return record.get("disabled") ? "mail-disabled" : "";
}
}
Editor Availability
You will also need to handle the Ext.grid.plugin.CellEditingView.beforeedit event and provide a custom logic to determine when the editor will be available
plugins: [
Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1,
listeners: {
beforeedit: function(editor, e, eOpts) {
return e.record.get("disabled") == false;
}
}
})]
You can find a working example of both solutions here, hope it helps to solve your problem.
I need to implement a hierarchical choice list in my DataGrid. Depending on the value of the first column, the available options for the second column need to change. Is there any way to attach a selection listener to the DataGrid (or all cells?) and modify the options value of the second column (in this specific row) to display values depending on the first columns value?
I haven't tried this but the dojox.grid.DataGrid has among its defined events:
onApplyCellEdit(inValue, inRowIndex, inFieldIndex)
so you can:
dojo.connect(grid, 'onApplyCellEdit',
function(inValue,inRowIndex, inFieldIndex){
var colObj = grid.getCell(2);
var node = colObj.getNode(inRowIndex);
var select = dojo.query(".dojoxGridSelect",node)[0];
console.log(select);
}
);
as long as the field is set alwaysEditing=true
That will give you access to the node and the cell... but if you change the options it rewrites it. There should be a better way of doing it by using the dojo's methods.
http://jsfiddle.net/dacabdi89/2acjt/
This is kind of a strange question, but this requirement came up about showing only those values inside a table which were selected using a dropdown list, I used dataTable plugin to display this data and to achieve the requirement I used the search[Filter plugin] feature. So whenever I selected any value from my dropdown list I entered it in the search input tag of dataTable. However, filtering of the data would not occur unless I changed the added data myself.
Have used the following script to add the selected value in the search box of DataTable; this function is triggered using onchange in the HTML tag:
function changeService(val) {
var service = val;
$('#example_filter').find('input').val(service);
}
This function adds the value in the required search input tag - I can see the value in the textbox; but the data within the dataTable is not filtered until I change this...
Instead of trying to hack around the ui, why not use the DataTables api for this:
http://datatables.net/api#fnFilter
So when you're dropdown list changes, you could call the fnFilter function on your datatable:
$('#dropdownlist').on('change', function() {
var val = $(this).val();
var dataTable = $('#table').dataTable();
dataTable.fnFilter(val);
});
Is it possible to disable editing in jqGrid for certain cells in a column that is marked as editable?
From what I've seen, the only options are "all cells are editable" or "no cells are editable".
Is there a way to work around this?
I'll recommend you to use so named "Inline Editing" for row editing. The most advantage of this method, that it is very intuitive and the user. You can see how it works on the demo page http://trirand.com/blog/jqgrid/jqgrid.html. Choose on this demo "Row Editing" and then "Using Events" or "Input types" on the left tree part. With this method you can implement any custom verification whether the selected row should be allowed to be edited or not inside of the event handle onSelectRow or ondblClickRow. If you allow editing, then you call editRow method of jqGrid. This method creates input controls for all editable columns and the user can modify the row values in a natural way. The modifications will be saved if the user press "enter" key or canceled on "esc" key.
I personally prefer to implement calling of editRow method inside of ondblClickRow event handler. So the user can continue selecting of rows like usual and can use double click for the row editing. The pseudo code will look like folowing:
var lastSel = -1;
var isRowEditable = function (id) {
// implement your criteria here
return true;
};
var grid = jQuery('#list').jqGrid({
// ...
ondblClickRow: function(id, ri, ci) {
if (isRowEditable(id)) {
// edit the row and save it on press "enter" key
grid.jqGrid('editRow',id,true);
}
},
onSelectRow: function(id) {
if (id && id !== lastSel) {
// cancel editing of the previous selected row if it was in editing state.
// jqGrid hold intern savedRow array inside of jqGrid object,
// so it is safe to call restoreRow method with any id parameter
// if jqGrid not in editing state
grid.jqGrid('restoreRow',lastSel);
lastSel = id;
}
},
pager: '#pager'
}).jqGrid('navGrid','#pager',{edit:false});
You can do it logically. You must have some criteria for cells that some cells can be editable and some are not.
I have implemented it row wise.
When you create XML for jqgrid, give some id to each row.
Based on these ids you can make those rows' cells editable or noneditable using jqgrid methods.
Below is beforeEditCell method:
beforeEditCell: function(rowid, cellname, value, iRow, iCol) {
// here identify row based on rowid
// if the row should not be editable than simply make the cells noneditable using
editCell(iRow, iCol, false);
jQuery(gridid).jqGrid("restoreCell",iRow,iCol);
}
You can further implement yourself.
Hope my suggestion would help you. :)