We have need of a way to show an editor when user clicks on a plain HTML element. There will be more fields than visible when the div goes into edit mode. Same way we use a clientTemplate in our KendoGrids.
I picture,
- listening for click on a div
- showing an already-instantiated kendoWindow
- populate it with the edit values we want
- Prefer to position window exactly over the element being edited
- allowing the user to edit
- on enter key or tab out of the last field, transfer the changes back to the div
- hide the kendoWindow ready for re-use
If no examples exist, it would be nice to hear from moderators on why this couldn't be done. Or, better, how nicely it could work :-)
I've done something like this about 7 years ago and it worked well, but I no longer have access to that code-base.
Bob Graham
1 Answer, 1 is accepted
Hi Robert,
To achieve the desired behavior you could set the visible option of the Window initially to false. When the needed element is clicked you can open the Window. In the Window you can place the needed input elements or other needed content.
$('#div-btn').on('click', function(е){
$("#window").data("kendoWindow").open();
}) Next, you can bind a keypress event to the last editable element. You can check the pressed key and if the key is 'Enter' you can check the current value of the input fields and change the content of the initially clicked element. Below you will find such an example:
$('#textbox2').on('keypress', function(e){
if(e.keyCode == 13){
var editorVal = $("#editor").data("kendoEditor").value();
var textboxVal = $("#textbox").data("kendoTextBox").value();
$("#textbox2").blur()
var textbox2Val = $("#textbox2").data("kendoTextBox").value();
var content = textboxVal + '\n' + editorVal +'\n' + textbox2Val;
$('#div-btn').text(content)
$("#window").data("kendoWindow").close();
}
})To set the position of the Window you can use the position configuration.
The above is demonstrated in the Dojo linked here.
I hope this helps.
Regards,
Neli
Progress Telerik
Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.
Rank 1
Thank you Neli.
I had arrived at a very similar design, which works quite well.
I also added modal to the instantiation of the window and attached a click event handler on the overlay to handle "click anywhere else" that would close the window.
I put my value transfer back to the html in the close event of the window. I have some fine tuning to do, but it all works quite well. Important to us was to get the position of the focused element using getBoundingClientRect(), then adding window.scrollX and window.scrollY to get the true position.
There are many libraries out there for in-place editing, some of them not free. This is a great tool for this purpose!
Thanks again for your help!