Kendo Grid columns' data-bind click event in the footer template is not working.
Please see the example http://dojo.telerik.com/ALAZo
The click event on column template for price is working fine but not for the footer template for the same.
Any resolution which uses MVVM binding would be greatly appreciated
By default, the header and footer of the Grid are not bound to the ViewModel. A workaround is to find the footer with an appropriate jquery selector after the grid has been initialised and then bind it manually. So something like this:
kendo.bind($("body"), viewModel);
kendo.bind($("#grid").find(".k-grid-footer"), viewModel);
Here I've added id="grid" to your grid declaration like so in order to find it:
<div id="grid" data-role="grid" data-bind="source:dataSource"
I have reworked your example in order to get a solution where click event works on both column and footer template.
<a onclick='test()'... seems to do the trick.
Related
Am working on kendo-UI.
I have an requirement to have two horizontal scroll bars, one at below the header fields and another one at the bottom.
I have seen some samples, which have two horizontal scroll bars, one at above the grid and another one at the bottom.That wont suits my requirement.
Do help, because I tried alot and I couldnt come up with a solution.
Add a wrapper div the Header and footer in your grid template.
<script id="javascriptTemplate" type="text/x-kendo-template">
<div class="wrapper1">
</div>
Grid template content header, body and footer
<div class="wrapper2">
</div>
</script>
then
$(".wrapper1").scroll(function(){
$(".wrapper2")
.scrollLeft($(".wrapper1").scrollLeft());
});
$(".wrapper2").scroll(function(){
$(".wrapper1")
.scrollLeft($(".wrapper2").scrollLeft());
});
If you would like the scroll to be in the header or footer you need to use the header and footer templates respectively.
Here is the api reference to the header templates. kendo grid header templates
I want to use in line editing option in Vuetify Datatable component instead of opening a dialog box for editing.
Is there a way to use contenteditable attribute in element in vuetify Datatable component.
According to MDN https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/contentEditable you can apply contenteditable attribute to any HTMLElement.
Try adding the attribute to the element you want to edit.
eg
<div contenteditable="true"></div>
Vuetify has an inbuild content editable mode.
DOCS
The idea is that in every slot you add a v-edit-dialog and v-text-field and then sync the data using v-model and return-value.sync
Instead of using contenteditable attribute, I used the following code and worked perfectly (editable without opening a dialog box and save to bind variable)
<template v-slot:item.name="props">
<v-text-field v-model="props.item.name"> </v-text-field>
</template>
I have a custom button in CKeditor, which is responsible to open a modal showing picture the user has in order to insert one of them into the CKeditor.
This is a textarea:
<textarea name="editor1" id="editor1" rows="10" cols="80"></textarea>
Here is the init code of the editor:
CKEDITOR.replace( 'editor1');
I refereed to the documentation to know how to insert HTML to the editor when an event fires and it looks like below:
CKEDITOR.instances.editor1.insertHtml( '<img src="Media/smiley.gif>' );
But nothing is shoiwing on the editor even in the source
What i have tired so far :
I tried to insert <p>test</p> ==> with no luck
CKeditor version : latest
this is because of calling the insert code before Creditor is initialized, you should tie your insert element code with an event that fires after the CKeditor is %100 ready.
It appears there is a conflict between kendo 2013.2.716 and jquery ui 1.10.3. If I have a kendo grid inside a jquery ui dialog I cannot place the cursor in the textbox inside the filter editor. I've created a jsBin to demo the problem.
http://jsbin.com/itehom/14/edit
Repo steps
click "pull the grid into a dialog"
click the filter icon on any column
try to place your mouse in the text field inside the filter editor.
Set modal: false for jQuery dialog.
Try following
$('#myModal').on('shown', function() {
$(document).off('focusin.modal');
});
If you used the jquery dialog instead of the Bootstrap modal, Varde's script might not fix your problem. I spent a few hours on this. Then I noticed the following line can be added after opening your jquery dialog, and it fixed the problem.
$(document).off('focusin');
As you may have noticed, the event doesn't contain a namespace. Keep in mind that this might turn off more "focusin" event handlers that you wish to turn off. I checked the jquery UI source code and didn't find the namespace and am unsure if they used a namespace.
The entire code block of my prototype is like:
<button id="opener">Open Dialog</button>
<div class="row" id="viewSearchResults">
blah, blah, ...
</div>
<script>
$(function () {
$("#viewSearchResults").dialog({
autoOpen: false,
modal: true,
minWidth: 700
});
$("#opener").click(function () {
$("#viewSearchResults").dialog("open");
$(document).off('focusin');
});
});
</script>
Hope the above can save some time for some developers. Thanks.
We have our custom button that is ASP.NET custom server control. We use it on all our pages for action buttons (< NS:OurButton ID='btn' runat="server" Text="Search"/ >).
Now we want to use that button to open our custom search form to filter the records in jqGrid.
Our business requirement that the search button must be a part of jqGrid pager.
How I can do it? I tried to search google and wiki help for jqGrid, but didn't found any way how to add that custom search button to the jqGrid pager.
If it's matters, the button rendered to the client in that markup:
<div id="btn" class="OurCustomButton">
<div class="LeftSide"></div>
<div class="ButtonContent">Search</div>
<div class="RightSide"></div>
</div>
Or maybe it's possible to create totally my own custom pager, with my own design and buttons and then to tell the jqGrid to use it's controls as triggers or to trigger events on my own with correct parameters?
One solution I can think of is to use jQuery's insertBefore()(or insertAfter) and have the html for your button inserted on the document.ready() event.
The code could be:
jQuery(document).ready(function(){
$('<div class="ButtonContent">Search</div>').insertBefore('.RightSide');
});