The onItemSelect callback method for Blueprint's select component gets triggered only when an option is clicked or the 'enter' key is pressed. I would like it to be triggered when the 'Tab' key is pressed too.
const DropSelect = Select.ofType<IDropdownOption>();
<DropSelect
onItemSelect={onItemSelect}
/>
Related
I wasn't sure of the best way to word the title, but hopefully the description will clarify.
I have an Angular2 component that uses Redux for state management.
That component uses *ngFor to render an array of small inputs with buttons like this. The "state" is something like this...
// glossing over how I'd get this from the Redux store,
// but assume we have an Immutable.js List of values, like this...
let items = Immutable.fromJS([{value: foo}, {value: bar}, /*...etc*/ })
And the template renders that like so...
<input *ngFor="let item of items, let i = index"
type="text"
value="item.get('value')"
(blur)="onBlur($event, i)">
<button (click)="onClick($event)">Add New Input</button>
When an input is focused and edited, then focus is moved away, the onBlur($event) callback is called, a redux action (ie: "UPDATE_VALUE") is dispatched with the new value.
onBlur($event, index) {
let newValue = $event.target.value;
this.ngRedux.dispatch({
type: "UPDATE_VALUE",
value: {index, newValue}
});
}
And the reducer updates the value (using Immutable.js):
case "UPDATE_VALUE": {
let index = getIndex(action.value.index); // <-- just a helper function to get the index of the current value.
return state.updateIn(["values", index], value => action.value.newValue);
}
The state is updated, so the component is re-rendered with the updated value.
When the button next to the input is clicked, the onClick($event) callback is fired which dispatches a different redux action (ie: "ADD_VALUE"), updates the state, and the component is re-rendered with a new blank input & button.
The problem comes up when the input is focused (editing) and the user clicks the button. The user intended to click the button, but because they happened to be focused on the field, it doesn't behave as expected. The (blur) event is fired first, so the input onBlur callback is fired, redux action dispatched, state updated, component re-rendered. BUT, the button (click) is lost, so the new input isn't created.
Question:
Is there a way to keep track of the click event and trigger the second action after the re-render? Or, is there a way to somehow chain the redux actions so they happen in sequence before the re-render?
Side-note - I've tried changing the (click) event to use (mousedown) which is triggered before the (blur) but that caused Angular (in devMode) to complain that the #inputs to the components were changed after being checked (the state changed during the change detection cycle). I didn't dig into that too deeply yet though. I'm hoping to find a solution using click and blur as is.
Thanks!
I am currently working on a project in which the end user has two ways of submitting data for analysis.
The first way is: he clicks on a button - the button's listener fires an event called "ProcessBtnClick"
The second way is: he/she presses ENTER - the ENTER key fires the "ProcessBtnClick" event
When the ENTER key is pressed, the "ProcessBtnClick" event gets fired twice, it seems like the click event gets fired this way as well. Is there any way of avoiding this behavior? If so, How?
I enabled the ENTER key as follows:
this.control({
'container *' : {
specialkey : this.onHandleSpecialKey
}
});
The onHandleSpecialKey is defined as follows:
onHandleSpecialKey: function(field, event, options) {
if (event.getKey() == event.ENTER) {
QuickCloseUI.app.fireEvent("ProcessBtnClick");
}
}
The documentation here is not very clear:
http://www.trirand.com/jqgridwiki/doku.php?id=wiki:inline_editing&s[]=editurl#saverow
Do I have to manually make a saveRow call after the user finishes editing a table cell/row, or will jqGrid automatically trigger saveRow when the row (cell?) loses focus?
I'm giving jqGrid a editurl value in the initial setup, but I don't see any ajax requests going out when I finish editing a row.
You have two options:
You use editRow with the parameter keys: true. In the case the method saveRow will be called if the user press Enter and the method restoreRow will be called if the user press Esc. In the case you don't need to call saveRow explicitly. Inside of onSelectRow one calls typically restoreRow see here an example.
You can call saveRow instead of restoreRow in the onSelectRow callback. Additionally (or alternatively) you can gives the user an interface to save current editing row. It can be some kind of "Save" button.
Although that's an old question, I'd like to add an example of explicitly calling editRow and then saveRow, which is a pretty frequent case.
The following code allows the user to just move freely between selected rows, and save the previous selected, edited row:
var grid = $('#gridName').jqGrid({
// ... some grid properties ...
editurl: 'clientArray',
cellEdit: false, // that's the default, but just to make clear that wer'e in inline edit mode
onSelectRow: utils.onSelectRow
// ... some more grid properties ...
});
var utils = {
prevRowId: null, // we have to keep the previous row id
onSelectRow: function (rowId, selectionStatus, event) {
if (rowId && rowId !== utils.prevRowId) {
var $grid = $(event.target).closest('table');
$grid.jqGrid('saveRow', utils.prevRowId);
$grid.jqGrid('editRow', rowId, { keys: true });
utils.prevRowId = rowId;
}
},
};
I couldn't find one of Oleg's official examples doing exactly this (they're all using buttons, as this one, or calling retrieveRow instead of saveRow, as this one).
I am trying to bring up a fancybox widget using a custom button in jqgrid. To do this, I would need to grab the Id of the selected row. I am currently trying this to do it. And it is not working. The custom button shows, it responds to the click event, but I cannot get the selected id. Can anyone help me out? Thanks!!!
jQuery("#list").jqGrid('navGrid','#pagernav',
{edit:true,add:false,del:false,search:false},
{
height:280,
reloadAfterSubmit:true,
closeAfterEdit:true,
editCaption: "Edit Sample",
bSubmit: "Submit",
bCancel: "Cancel",
bClose: "Close",
checkOnSubmit:true,
saveData: "Data has been changed! Save changes?",
bYes : "Yes",
bNo : "No",
bExit : "Cancel"
}
).jqGrid('navButtonAdd','#pagernav',{
caption:"Add",
buttonicon:"ui-icon-add",
onClickButton: function(lastsel){
alert("Adding Row to id" + lastsel);
},
position:"last"
});
Look the answer. It shows how to get 'selrow' parameter of jqGrid which you need. In case of multiselect scenario (multiselect: true) you should use 'selarrrow' parameter instead.
The only parameter of navButtonAdd is the event object from the click event (see jqGrid code). Because the click is on your custom button it bring you very little information. You can use the event only for example to implement different actions if the button was clicked in combination with Ctrl or Shift or some other keys pressed. In all standard scenarios you have to use 'selrow' or 'selarrrow' parameters.
You should be careful, because the custom button can be clicked even if no rows are selected. In the case the value of 'selrow' parameter is null (the value of 'selarrrow' is empty array []).
You can consider to implement hide/show or enable/disable some navigator buttons based on whether or which row is selected. See this and this demos from this and this old answers.
i would like to ask how i can intercept the ajax delete functionality of a grid using ajax binding? specifically, up to the point wherein, after i click on delete, as the confirm prompt pops up, i would like to do something based on the user's choice,
basically, if OK, do this, if CANCEL do that..
You need to use the OnRowDataBound and attach a click handler to the delete button. Then you can display custom confirmation and decide what to do. If you want' to prevent the grid deletion code - call e.stopPropagation(). Here is a quick sample:
<%: Html.Telerik().Grid(Model)
// Prevent the grid from displaying the default delete confirmation
.Editable(editing => editing.DisplayDeleteConfirmation(false))
// Subscribe to the OnRowDataBound event
.ClientEvents(e => e.OnRowDataBound("onRowDataBound"))
%>
<script>
function onRowDataBound(e) {
$(e.row) // get the current table row (TR) as a jQuery object
.find(".t-grid-delete") // find the delete button in that row
.click(function(e) { // handle its "click" event
if (confirm("Do you want to delete this record?")) {
// User clicked "OK"
} else {
// User clicked "Cancel"
e.stopPropagation(); // prevent the grid deletion code from executing.
}
});
}
</script>
The demo page seems to contain an example of what you are looking for.