I have a SlickGrid with some Editors on a form with some buttons above it. (Save and Cancel). When i edit a cell in the grid and click the buttons above the grid - the cell does not commit it's edit. I've debugged and it is not calling : commitCurrentEdit. I've also tested on clicking an empty area anywhere out of the grid area...
Has anyone noticed this scenario and have a solution to get the cell to commit when one clicks out of the grid. Due to the various positions the grid good be in it would be hard to do an overlay.
Thanks
You can try this:
$("#buttonName").bind("click", function(){
gridName.getEditController().commitCurrentEdit()
});
Related
I need expand/collapse feature to show/hide rows in SlickGrid.
So to implement this feature, I have a expand/collapse icon on the Grid header row. And by pressing it, it should Show/Hide all data of the grid (Toggle Visibility).
The feature I want to implement is exactly same as grouping where parent row can be expanded/collapsed by clicking on **+ or -** icon. But without applying grouping.
Should be pretty easy. Just find the viewport div and toggle its visibility on click. Everything else should collapse around it.
I have some pages where I have a kendo ui grid (wired up to full CRUD services), but use a separate Kendo UI Toolbar control (as opposed to the toolbar configuration in the grid itself). I have a number of different buttons/menus on the toolbar, but am seeing a strange behavior when calling saveChanges() on the grid. If a cell is being edited when the save button is clicked, the grid is saved, but the edited value is lost (it reverts back to where it was). The following details what I see in different situations:
When using a save button configured in the grid (command: "save"), any changes in a cell being edited are committed with the save.
When using a plain html button that calls the saveChanges() method of the grid, any changes in a cell being edited are committed with the save.
When using a save button configured in a toolbar control, the changes in a cell being edited are LOST when saveChanges() is called.
The following jsbin shows the behavior of all three:
http://jsbin.com/jazobexatu/2/edit?html,js,output
I have tried calling the save from the toolbar button a number of different ways (even trying to trigger the click event of the external button), but nothing seems to correct the behavior. I also tried calling closeCell() on the grid (to try to force the value back into the data, but that doesn't work either). I haven't been able to debug the javascript enough to figure out what is different. I'm hoping someone with a deeper understanding of these controls can help me out.
For some reason, the mouse down event on the toolbar button doesn't cause a blur on the editor.
You can try it yourself by clicking in the cell to edit it, then click and hold the mouse button down on the "normal" button. The editor closes on mouse down, causing a blur of the editor, and persists the change.
If you do the same thing, click and hold mouse down, on the toolbar button, the editor stays open.
I've been poking through the source, but haven't figured out exactly why this happens. My best guess would be that the mousedown handler on the toolbar prevents the event from bubbling or running its default action and the editor doesn't blur.
Additional detail: On mousedown on the grid header button and the normal button, the focused element changes (which is what causes the editor blur). But on mousedown of the toolbar button, the editor input element still has the focus.
Shifting the focus on mousedown of the toolbar might be a workaround.
Sort of a weird hack, but this works in Chrome (any should in any browser that supports activeElement
click: function (e) {
$(document.activeElement).blur();
$("#grid").data("kendoGrid").saveChanges();
}
I am facing the problem of positioning of the update confirmation box/ delete confirmation box/ No row selected error box/ edit modal popup/ add modal popup etc to the center of the screen ….. I have looked a lot but could not find any helpful answers ….. can you please suggest that what can be done to achieve this result. I have two grids and the default positioning is not going well with it as for the second grid the popup's appear underneath and I have scroll down to get to the edit/add modal popup.
I think that the most effective way to change position of all message boxes and dialogs displayed by jqGrid would be subclassing of $.jgrid.showModal method internally used in jqGrid. I hope that you'll can create the corresponding solution based on idea from the answer. Instead of animation effects you can change position of the dialog/message box before is will be shown.
When enableCellNavigation is enabled, the initial click and double-click on my grid immediately scrolls the page down so that the clicked row is at the top of the screen. This is quite annoying since it is not expected. Is there some way to turn this off? If enableCellNavigation is disabled, rows cannot be selected so this is not an option.
You are looking for focusOnCurrentCell()
In my case grid was scrolling to the end horizontally when clicked.
Commenting the focusOnCurrentCell() inside the function setSelectedCell(newCell,editMode) solved my problem.
I am working in MVC and I want to show my data in an asp GridView and I also want to change the row backcolor whenever mouse hover that particular row. Please let me know how can I do that.
Thanks in advance,
gbhatnagar.
Use Javascript (JQUERY!) and have an on hover event for the row. So when hovered over, you switch the previously highlighted row go back to normal and change the colour of the current row.
You could easily do it with Jquery and by having a row css class and a highlighted row css class.