I have a kendo grid. I am using an add and custom button in the toolbar as the following code:
toolbar: ["create", {
text: "Print record",
className: "k-grid-custom",
imageClass: "k-add"
}],
I also want to add a custom toolbar (dropdown menu) as this example
I used similar code in the demo like
toolbar: kendo.template($("#toolbarIsExpire").html()),
<script type="text/x-kendo-template" id="toolbarIsExpire">
<div class="toolbar">
<label for="is_expired">Is Expired ?</label>
<input type="search" id="is_expired" style="width: 75px;"/>
</div>
</script>
I want to show in the toolbar the add button and my custom button and the dropdown menu (IsExpired)
How to mix between the two toolbar in order to have both of them ?
Extend your template:
<script type="text/x-kendo-template" id="toolbarIsExpire">
<div class="toolbar">
<label for="is_expired">Is Expired ?</label>
<input type="search" id="is_expired" style="width: 75px;"/>
</div>
<a class="k-button k-button-icontext k-grid-add" href="#"><span class="k-icon k-add"> </span>Add new record</a>
</script>
Related
I want to autosave the content of tinyMce editor
I'm using tinmce version 5.2.2 with laravel V7
tinymce configuration in app.js
require('./bootstrap');
require('tinymce/themes/silver');
require('tinymce/plugins/image');
require('tinymce/plugins/code');
require('tinymce/plugins/save');
import tinymce from 'tinymce';
tinymce.init({
selector:'textarea#inputQuestionTitle',
height:400,
setup: function(editor) {
editor.on('Change Keyup', function () {
editor.save();
//tinyMCE.triggerSave() <-- also tried
});
}
With following View
#extends('dashboard.layout')
#section('content')
<form id='addQ' action="{{route('questions.store')}}" method="post" enctype="multipart/form-data" >
#csrf
<div class="form-row align-items-center " >
<div class="col-md-12">
<label class="sr-only" for="inputQuestionTitle">Title</label>
<textarea name="title" class="form-control mb-2 " id="inputQuestionTitle" placeholder="Question Title"> </textarea>
</div>
</div>
<div class="form-row">
<button type="submit" class="btn btn-primary mb-2">Add new category </button>
</div>
</form>
<script type="text/javascript" src="{{asset('js/app.js')}}"></script>
<script type="text/javascript">
$(function(){
$('#addQ').submit(function(e){
e.preventDefault();
var frmdata = $(this).serialize();
console.log(frmdata);
});
});
</script>
#endsection
Outputs
I had using jquery to show input request with console.log
As showed in output title field does not returns any value
Please tell me how i autosave the content of tinymce editor and send it with input request ..
I had also tried to tinymce.triggerSave() before serialize() method of ajax so that input request will take tinymce content but not works
Instead of trying to update the textarea via the triggerSave() or save() methods while someone is editing the content I would just place tinymce.triggerSave() at the very beginning of the function that submits the page. This will ensure that the triggerSave() is called directly before you grab the content from the textarea.
Well, I am using KendoJS grid and I have this code here in my .js file:
var viewModel = kendo.observable({
people: new kendo.data.DataSource(...),
isActive:true,
friends: new kendo.data.DataSource(...),
selectionChanged: function(){...
}
});
$(document).ready(function () {
kendo.bind($("#sampleGridContainer"), viewModel);
});
In my .html file, I have a kendo grid:
<div id="sampleGridContainer">
<div data-role="grid"
data-columns="[...]"
data-editable="{ 'mode': 'popup', 'template': kendo.template($('#sampleTemplate').html()) }"
data-bind="source: people"></div>
</div>
<script id="sampleTemplate" type="text/x-kendo-template">
<form id="sampleForm">
...
<div data-container-for="somedropdown" class="k-edit-field">
<input name="somedropdown" id="somedropdown"
data-role="dropdownlist"
data-type="text"
data-text-field="name"
data-value-field="value"
data-bind="value: someValue, visible: isActive, source: friends, click: selectionChanged" />
</div>
...
</form>
</script>
Now, in my dropdown input element, someValue, isActive and friends variables are properly working - infact the drop down list shows up fine. But the problem is click event selectionChanged is not called. If I remove this from template, the event starts working, but my question is when all the other variables on the same scope are accessible in template, why does event selectionChanged not get called?
Any help is highly appreciated.
I have also encountered this problem, my workaround for this is that I initialize my kendoDropDownList on the edit event of grid.
edit: function (e){
e.container.find("input[name='somedropdown']").kendoDropDownList({
dataTextField: "name",
dataValueField: "value",
data-bind="value: viewModel.someValue, visible: viewModel.isActive, source: viewModel.friends, click: viewModel.selectionChanged"
});
}
Then the html would look something like this:
<div data-role="grid"
data-columns="[...]"
data-editable="{ 'mode': 'popup', 'template': kendo.template($('#sampleTemplate').html()) }"
data-bind="source: people, events: { edit: onEdit }">
</div>
<script id="sampleTemplate" type="text/x-kendo-template">
<form id="sampleForm">
<div data-container-for="somedropdown" class="k-edit-field">
<input name="somedropdown"/>
</div>
</form>
</script>
Hope this works for you.
Open a page in dialog style, the close button is added by default. Is there a way to catch the click event of the close button of the dialog page. I like to invoke a callback before the dialog page is closed.
<div data-role="page" id="page1">
<div data-role="header" data-position="fixed" data-tap-toggle="true" >
<h1>Page 1</h1>
</div>
<div role="main" class="ui-content">
This is Page1.
Show Dialog
</div>
<script>
function showDialog() {
$(":mobile-pagecontainer").pagecontainer("change", "#page2", { role: "dialog" } );
}
</script>
</div>
<div data-role="page" id="page2">
<div data-role="header" data-position="fixed" data-tap-toggle="true" >
<h1>Dialog</h1>
</div>
<div role="main" class="ui-content">
This is Dialog
</div>
</div>
The pagecontainerhide event can be used. but it did not work for ajax. If the dialog page is dynamically created in DOM, the ui.prevPage is not defined for the hide event.
Thanks for any help.
The close button is an anchor tag (<a></a>) in side a header element with class .ui-header inside a dialog container with class ui-dialog-contain. So you can use the jQuery selector:
".ui-dialog-contain .ui-header a"
When you handle the click event, you can get the parent page by finding the closest() DOM element with the ui-dialog class:
$(document).on("pagecreate", "#page1", function(){
$(document).on("click", ".ui-dialog-contain .ui-header a", function(e){
alert("close dialog: " + $(this).closest(".ui-dialog").prop("id"));
});
});
DEMO
I trying to get an image (cookie policy) that, once clicked, displays a dialog box informing that cookies are used on this website. I was hoping to use a jQuery dialogue box but it seem difficult.
Demo link: http://myfirststepsto.weebly.com/
The jQuery I would like to use: http://jqueryui.com/dialog/#default
<div id="oneout">
<span class="onetitle">
</span>
<div id="oneout_inner">
<centre>
<img src="https://dl.dropboxusercontent.com/u/89687987/mycookie.png" alt="cookie policy" />
</a>
<br></center></div></div>
I made a fiddle for you hope it helps! jsFiddle here
HTML:
<div id="oneout">
<span class="onetitle"></span>
<div id="oneout_inner">
<center>
<a><img id="opener" src="https://dl.dropboxusercontent.com/u/89687987/mycookie.png" alt="cookie policy" /></a>
<br>
</center>
</div>
</div>
<div id="dialog" title="Basic dialog">
<p>This is an animated dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
Javascript:
$(function() {
$( "#dialog" ).dialog({
autoOpen: false,
show: {
effect: "blind",
duration: 1000
},
hide: {
effect: "explode",
duration: 1000
}
});
$( "#opener" ).click(function() {
$( "#dialog" ).dialog( "open" );
});
});
What is the proper way to edit items in a listview when using Kendo UI Mobile & MVVM?
I don't get the expected results when using the following:
HTML
<div id="itemsView"
data-role="view"
data-model="vm">
<ul data-role="listview" data-bind="source: items"
data-template="itemsTemplate">
</ul>
<script id="itemsTemplate" type="text/x-kendo-template">
<li>
#=Name#
</li>
</script>
<input type="text" data-bind="value: newValue" />
<button data-role="button" data-bind="click: update">update</button>
</div>
JavaScript
var vm = kendo.observable({
items: [{
Name: "Item1"}],
newValue: '',
update: function(e) {
var item = this.get("items")[0];
item.set("Name", this.get("newValue"));
//adding the follwoing line makes it work as expected
kendo.bind($('#itemsView'), vm);
}
});
kendoApp = new kendo.mobile.Application(document.body, {
transition: "slide"});
I expect the listview to reflect the change to the Name property of that item. Instead, a new item is added to the listview. Examining the array reveals that there is no additional item, and that the change was made. (re)Binding the view to the view-model updates the list to reflect the change. Re-Binding after a change like this doesn't seem to make any sense.
Here is the jsfiddle:
http://jsfiddle.net/5aCYp/2/
Not sure if I understand your question properly: but this is how I did something similar with Kendo Web UI, I expect mobile is not so different from Web UI from API perspective.
$element.kendoListView({
dataSource: list,
template: idt,
editTemplate: iet,
autoBind: true
});
The way I bind the listview is different, but I guess you can get similar results with your method as well.
I pass two templates to the list view, one for displaying and one for editing.
Display template contains a button (or any element) with css class k-edit to which kendo will automatically bind the listview edit action.
display template:
<div class="item">
# if (city) { #
#: city #<br />
# } #
# if (postCode) { #
#: postCode #<br />
# } #
<div class="btn">
<span class="k-icon k-edit"></span>Edit
<span class="k-icon k-delete"></span>Delete
</div>
</div>
Edit template
<div class="item editable">
<div>City</div>
<div>
<input type="text" data-bind="value: city" name="city" required="required" validationmessage="*" />
<span data-for="city" class="k-invalid-msg"></span>
</div>
<div>Post Code</div>
<div>
<input type="text" data-bind="value: postCode" name="postCode" required="required" validationmessage="*" />
<span data-for="postCode" class="k-invalid-msg"></span>
</div>
<div class="btn">
<span class="k-icon k-update"></span>Save
<span class="k-icon k-cancel"></span>Cancel
</div>
</div>
Clicking that element will put the current element on edit mode using the editTemplate.
Then on the editTemplate there is another button with k-update class, again to which kendo will automatically bind and call the save method on the data source.
Hopefully this will give you more ideas on how to solve your issue.
The problem was caused by the <li> in the template. The widget already supplies the <li> so the additional <li> messes up the rendering. This question was answered by Petyo in the kendo ui forums