Ok, out the box slickGrid requires you to "double-click" to edit a cell(annoying)
I have gotten around that by modifying the main js file and adding
var cell = getCellFromEvent(e);
if (options.editable) {
gotoCell(cell.row, cell.cell, true);
}
to the bottom of:
function handleClick(e)
which is the function for single click
Anyone know how to edit on tab?
There is a function called handleKeyDown() but if I add that code snippet in there it wont work
Set the autoEdit option to true. See http://mleibman.github.io/SlickGrid/examples/example3-editing.html for an example.
Related
I'm having some issues with Ag-grid and can't really understand the issue.
I'm using cellValueChanged event to pass a Validation function to the cell.
The issue is that on the first time a user edits the cell it runs the validation function but does not mark the cell as "with error" ( red border and tooltip ). All edits after the first edit run fine, showing the red border and tooltip if the cell has an error.
CustomGrid.GridObject[CustomGrid.TemporaryVariables.arrPos].gridOptions.api.addEventListener('cellValueChanged', function(e) {
CustomGrid.ValidationFeature.validation(e);
});
CustomGrid.ValidationCtrl.validation = function (params) {
if(CustomGrid.DirtyCellCtrl.isCellDirty(params) && params.colDef.Validation) {
params.colDef.Validation.call({}, params);
}
};
Note: CustomGrid.DirtyCellCtrl.isCellDirty is a custom helper function to check if cell has a different valid value and returns true/false. For this case admit it always returns true.
Any help or hints will be appreciated.
Thanks in advance.
Can you please try having a look at api.refreshCells() and api.redrawRows(). Maybe you could share a plunk or fiddle which shows the issue as well .
I am using handsontable in my project. Selection of continous rows i.e using shift key to select multiple continous rows is working fine, but when i am trying to select random rows using control key it is not working. I have been told that there is no way to select multiple random rows in handsontable.
We are initializing handson constructor in the following way :-
$element.handsontable({
columns:$scope.handsontable.columns,
data: $scope.handsontable.data,
colHeaders: $scope.handsontable.columnHeaders,
colWidths:$scope.handsontable.columnWidths,
readOnly:$scope.handsontable.readOnly,
fillHandle: false,
**currentRowClassName: 'currentRow',
currentColClassName: 'currentCol',**
variableRowHeights : false,
cells: function () {
this.renderer = $scope.gridConfiguration;
}
});
.css class for handson "currentRowClassName" and "currentColClassName" are provided as :-
.handsontable .currentRow {
background-color: #66A3FF !important;
}
.handsontable .currentCol {
background-color: #F9F9FB;
}
When looking into handsontable.js i found the following if block :-
if (priv.settings.currentRowClassName || priv.settings.currentColClassName) {
instance.view.wt.selections.highlight.clear();
instance.view.wt.selections.highlight.add(priv.selRange.from);
instance.view.wt.selections.highlight.add(priv.selRange.to);
}
i tried commenting out its first line( instance.view.wt.selections.highlight.clear();) so that the selection does not get cleared but even this not working.
Please help me with selection of random(not necessarily continuous) rows using handsontable. Thanks
and tried changing it but nothing worked
I don't think HOT supports this sort of selection but you may be able to use some DOM manipulations to achieve it. What you can try is creating a .beforeMouseDown event where if the ctrl key and nothing else is selected, you append to some array the cell that you are currently on.
Then look through the source code to where this same thing is done for Shift. My guess is that it says that when Shift is held down, set SelectedCells to all cells between start and end of the selections. You just need to change it to ONLY start and end, not things in between.
I upgraded to IPython 2.0 today.
Alot of changes seem good, but the button to insert a new cell, above/below seems to be gone.
The option is still in the menu, and I believe the keyboard short cut works.
But the button is gone.
I'm sure there is a way to turn it back on, but the documentation for the new version doesn't seem super complete.
Possibly to turn it back on I need to adjust something in the config.
Which is just python script.
Maybe even tell it to insert a new element, and bind some javascript to it.
These buttons relocated to "Insert" menu. However, it is always good idea to use shortcut commands:
Ctrl+m+- (split cell)
Ctrl+m+a (insert cell above)
Ctrl+m+b (insert cell below)
If you can master them and other basic commands, it will make your notebook workflow really slick. Full list of commands can be found here.
I ended up teaching myself some javascript to do this.
You can make this change in the custom.js file.
which can be found in ~/.ipython/profile_[profile name]/static/custom.
Replace it with the following:
$([IPython.events]).on('app_initialized.NotebookApp', function(){
IPython.toolbar.add_buttons_group([
{
'label' : 'Insert Cell Above',
'icon' : 'fa-arrow-circle-o-up',
'callback': function () {
IPython.notebook.insert_cell_above('code');
IPython.notebook.select_prev();
IPython.notebook.focus_cell();
}
},
{
'label' : 'Insert Cell Below',
'icon' : 'fa-arrow-circle-o-down',
'callback': function () {
IPython.notebook.insert_cell_below('code');
IPython.notebook.select_next();
IPython.notebook.focus_cell();
}
}
]);
$('#insert_above_below').remove()
});
If you have already modified it,
then you can not replace the whole file, obviously, and should merge the appropriate parts.
The buttons will show up on the right.
The single + button for below is also removed.
as now in 5.7.4 version shortcut to create cell above is esc + a
I'm using the jQuery plugin that generates interactive tables called jqGrid.
I want to use this "editfunc" (2/3rds or 3/4ths down the page) but I can't find a clear example of how to implement it anywhere. I've attempted several differnt things and all of them leave me with total failure.
To be clear, the table generated looks something like this:
That lower bar is called the "navpbar" or "pager", you implement it as a separate DIV, the API and documentation is fairly unclear (to myself anyway) on how exactly I put a custom function onto those buttons such as "add", "edit", "delete", etc... I can get default functionality working, but I can't find anything through websearches, this site, or the API docs on what the actual implementation looks like.
jqGrid has opened source. It helps to clear all questions directly in the code. Look at the lines for example. You will see what navGrid do on click on the 'Edit' button of the navigator:
var sr = $t.p.selrow;
if (sr) {
if($.isFunction( o.editfunc ) ) {
o.editfunc(sr);
} else {
$($t).jqGrid("editGridRow",sr,pEdit);
}
} else {
$.jgrid.viewModal("#"+alertIDs.themodal,{gbox:"#gbox_"+$t.p.id,jqm:true});
$("#jqg_alrt").focus();
}
So if you define editfunc callback function the function will be called with id of selected row as the parameter instead of creating editing dialog by editGridRow.
The method editGridRow have many customization functionality. The prmEdit parameter of the navGrid allow to specify any option used by editGridRow.
If you don't want do display editing form and display any other GUI instead you can use editfunc callback function. For example:
$("#list").jqGrid('navGrid', '#pager', {
editfunc: function (rowid) {
alert('The "Edit" button was clicked with rowid=' + rowid);
}
});
See the demo. Select a row and click on the "Edit" button and you will see the alert instead of the standard editing form.
recently i'm working on a project to make an interactive directory map for a mall without using flash, because they need to access from mobile devices.
but i have issue with jquery , i'm using custom java commands with jquery map highlight. which i use to target my mapcoords.
Method is invoked when someone clicks either on the map or the list below, it'll highlight the map and it'll show the information on right side.
My problem is when somebody clickd another shop from the list or from the map it won't clear the previous highlighted block and the previous one keeps highlighting, it doesn't matter how many time you click.
what i need is to refine my code such that when somebody clicks the 2nd link it will automatically clear the previous one.
anybody can see my demo file under below link
http://www.pad10.com/testsities/directorymap/
i'll appreciate if somebody help me with this
The problem is you don't turn off the highlight for currently selected area when clicking on another.
Place this:
$('.selected').data('maphilight', {alwaysOn: false}).trigger('alwaysOn.maphilight');
in your salhia.js, in the .mapclick click handler:
$('.mapclick').click(function(){
$('.selected').data('maphilight', {alwaysOn: false}).trigger('alwaysOn.maphilight');
$('.mapclick').removeClass('selected');
$(this).addClass('selected');
var shop = '.shopdetails#' + $(this).attr('shop');
var htmlCode = $(shop).html();
$('.shopinfo').fadeOut(500, function(){
$('.shopinfo .shopdetails').html(htmlCode);
$('.shopinfo').fadeIn(500);
});
});
Changed a bit the code shown on previous answer so it is more generic:
// Init
$('.map').maphilight({
stroke: false,
});
// Reset all map
$('.selected').data('maphilight', {alwaysOn:false}).trigger('alwaysOn.maphilight');
$('area').click(function(){
// Reset all areas with class 'selected'
$('.selected').data('maphilight', {alwaysOn: false}).trigger('alwaysOn.maphilight');
// Remove class selected
$('area').removeClass('selected');
// select and highlight this area
$(this).addClass('selected');
$(this).data('maphilight', {alwaysOn: true}).trigger('alwaysOn.maphilight');
});