I just saw this link which is a great explanation by onabai, but i´m trying to also set a template for the temporary popup and i can´t make it work:
$(".k-grid-popup", grid.element).on("click", function () {
// Temporarily set editable to "popup"
grid.options.editable = "popup";
// Insert row
grid.addRow();
// Revert editable to inline
grid.options.editable = "inline";
});
How do you set the template of the popup?
Regards.
While you can access the grid options directly, any change to the options should be made using the setOptions method. This function will notify the grid of any options change and it will be able to make all the internal change the handle the event according the the new options.
$(".k-grid-popup", grid.element).on("click", function () {
grid.setOptions({editable: "popup"});
grid.addRow();
grid.setOptions({editable: "inline"});
});
I don't have any working example of your code so I can't tell if you need to change something else in your code.
Related
I have an Interactive Grid on my page and I want to add a button to a toolbar. I have wrote a javascript function and tried to add the code under Advanced->Javascript. But when I did that my grid content disappeared completely, only heading was left. Is that the wrong place to add my code? How to ensure the function gets called?
Below is my function:
function(config) {
var $ = apex.jQuery,
toolbarData = $.apex.interactiveGrid.copyDefaultToolbar(),
toolbarGroup = toolbarData.toolbarFind("actions3"); // group where Add Row button is
toolbarGroup.controls.push({type: "BUTTON",
action: "selection-delete"
});
config.toolbarData = toolbarData;
return config;
}
I do not know why, but this problem occurs when you use this code in a detail of an interactive grid.
The problem is solved when you put the code in both the reports, the master and the detail.
The problem is that the function "toolbarFind" is deprecated or just removed in current version. Try:
toolbarGroup = toolbarData[toolbarData.length-2];
I'm new in angular. We are using UI-grid for data presentation is is possible to customize filter process. I want to customize it in that way, that filtering is peformmed on button click, not on keydown?
This is idea
$scope.search = function (){
$scope.personCardGrid.useExternalFiltering = false; $scope.grid1Api.core.notifyDataChange(uiGridConstants.dataChange.ALL);
$scope.gridApi.core.refresh() $scope.personCardGrid.useExternalFiltering = true;
$scope.grid1Api.core.notifyDataChange(uiGridConstants.dataChange.ALL);
$scope.gridApi.core.refresh() }
Regards
You need to define your own headerCellTemplate for the column. In the template, add a input text box and a button too. Then, define a function in the controller and call it using the external scope which will filter the records.
When editing my grid, if I click outside the grid, the box I was editing is still editable. How do I get the edited cell to "complete" the edit when it looses focus?
The following code will save the current edit.
Slick.GlobalEditorLock.commitCurrentEdit();
You'll need to place this inside an event handler that you think should trigger the save. For example, if you're using the sample text editor plugin, I believe an editor-text CSS class is added to the input field that's created when you're editing a cell so something like this should work:
$('#myGrid').on('blur', 'input.editor-text', function() {
Slick.GlobalEditorLock.commitCurrentEdit();
});
I found that I needed to wrap clav's handler in a timeout:
$("#myGrid").on('blur', 'input.editor-text', function() {
window.setTimeout(function() {
if (Slick.GlobalEditorLock.isActive())
Slick.GlobalEditorLock.commitCurrentEdit();
});
});
to avoid errors like:
Uncaught NotFoundError: An attempt was made to reference a Node in a context where it does not exist.
when using the keyboard to navigate. Presumably the new blur handler fires before SlickGrid can do its own handling and this causes problems.
Unfortunately, probably due to differences in event processing, Grame's version breaks keyboard navigation in chrome.
To fix this, I added another check to only commit the edit, if the newly focused element is not another editor element within the grid (as the result of keyboard navigation):
$('#grid').on('blur.editorFocusLost', 'input.editor-text', function() {
window.setTimeout(function() {
var focusedEditor = $("#grid :focus");
if (focusedEditor.length == 0 && Slick.GlobalEditorLock.isActive()) {
Slick.GlobalEditorLock.commitCurrentEdit();
}
});
});
This seems to work in current versions of firefox, chrome and ie.
How can I get Aloha Editor to recognize and edit the dynamically created dom/content?
I usually use jquery and use '.live' or '.on' to get this to work but not sure how to using Aloha.
Thanks
To create a dynamic aloha instance:
$(document).ready(function(){
// Add an editable upon clicking on some button Button
$("#Button").click(function () {
var $ = Aloha.jQuery;
$('#somewhere').append('<div class="editable" id="ed" ></div>');
Aloha.jQuery('.editable').mahalo();
Aloha.jQuery('.editable').aloha();
});
Now you can simply get the content:
var e = Aloha.getEditableById('ed');
getContents();
I haven't tested it but it should work.
I need to be able to make the URL input field in the Link Dialog window readonly or disable it. The field gets populated when the user selects a file from the server.
Another user posted this link as a solution, http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.ui.dialog.uiElement.html#disable but there is no example and I can't figure out how to implement it.
In the onLoad handler of the dialog you can disable it this way:
this.getContentElement("info", "url").disable();
this is what I ended up doing. I wrote it in my js file instead of the plugin file, but I dont think that would make a difference. I am using inline ckeditor version 4.0.2
CKEDITOR.on('dialogDefinition', function(event) {
var dialogName = event.data.name;
var dialogDefinition = event.data.definition;
//some code here
if(dialogName == 'flash'){ // flash dialog box name
//some code here
dialogDefinition.onShow = function () {
this.getContentElement("info","width").disable(); // info is the name of the tab and width is the id of the element inside the tab
this.getContentElement("info","height").disable();
}
}
});
You can disable url field by just one line
CKEDITOR.dialog.getCurrent().getContentElement('info','txtUrl').disable()
I got it. I added this.getInputElement().setAttribute( 'readOnly', true ); to the onload funciton in ckeditor\plugins\links\dialogs\link.js. Before I was adding it to ckeditor\_source\plugins\links\dialogs\link.js. I'd still like an example of how to use the CKEDITOR.ui.dialog.uiElement disable feature, if anyone has one.