i have two buttons,How i can make alignment right and left based on below code Add entity is left and excel export is right.
CONFIG.JS
toolbar: [
{
template: kendo.template('<a href="" class=\'k-button k-button-icontext k-grid-add\' ng-click=\'addNewRole();\'><span class=\'k-icon k-add\'></span>Add Entity</a>')
},
{"name":"excel"}
],
I play around little bit and got the soultion.I added excel button into template and it worked.
template: '<button class="k-button k-grid-excel pull-right">Export to Excel</button>'
Related
I'm trying to create a simple gallery component where if you click on some image a Light-Box will appear where you can see full size photo and have options like next and previous photo or close the Light-Box.
Currently When I need to change the image to next or previous I change the src of the img-tag and it works.
Here comes my problem. I want to lazy load my images. I use lazysizes in my project.
So the simple implementation to have an image to load is to add the class "lazyload" and to pass the property data-src instead of src.
However if I change to data-src my methods for next and previous image are not working.
< script >
export default {
props: {
data: {
type: Array,
required: true,
},
},
data: () => ({
visible: false,
currentImage: 0,
}),
methods: {
Toggle(index) {
this.currentImage = index
this.visible = !this.visible
},
Next() {
if (this.currentImage !== this.data.length - 1) this.currentImage++
},
Prev() {
if (this.currentImage !== 0) this.currentImage--
},
},
} <
/script>
<template>
<div id="gallery" class="gallery">
<!-- images grid -->
<div v-for="(item, i) in data" :key="'gallery-image' + i" class="image">
<img :src="item.image.thumbnail.url" #click.native="Toggle(i)" class="lazyload"/>
</div>
<!-- image lighbox on click -->
<div v-if="visible" class="lightbox">
<Icon class="cancel" #click="Toggle()"/>
<Icon name="left" :class="{ disable: currentImage == 0 }" #click="Prev()"/>
<img :src="data[currentImage].image.url" class="lazyload"/>
<Icon name="right" :class="{ disable: currentImage == data.length - 1 }" #click="Next()"/>
</div>
</div>
</template>
UPDATE
I forgot to add crucial code. To implement lazysizes in a Nuxt project we need to add in nuxt.config.js the fallowing code. You can read more here.
build: {
extend(config, { isClient, loaders: { vue } }) {
vue.transformAssetUrls.img = ['data-src', 'src']
},
},
As I investigate in the developer tools I found that when triggering click for method like Next image, the src of the image does not change, only the data-src. I'm guessing I need a way to trigger this transform so that everything can work as expected.
Also, on top of my comment, I do recommend looking into the official nuxt image module which do have native lazy loading out of the box: https://image.nuxtjs.org/components/nuxt-img
You could maybe combo this with some simple lightbox that does the trick for you. I've used vue-silentbox before, it is working pretty well.
You can have that kind of code there
<silent-box :gallery="photosToDisplay">
<template #silentbox-item="{ silentboxItem }">
<img :src="silentboxItem.src" :key="silentboxItem.id" />
</template>
</silent-box>
So, I guess that you could totally swap img by a nuxt-img there, and have it lazy-loaded.
The images are not lazy-loaded in the project, but here is a small project that I did to try out the lightbox if you want to quickly look how it renders (URL in the top right corner).
Probably this is not the most elegant way to do it . I force re-render to my image component. You need to assign a key value to component and whenever the value changes a new instance creates of the component.
Hey do you get tinymce editor to show on a page?
I'm wanting to format my textarea when composing or editing blog posts.
But it's not displaying the little interface as expected - just the plain old textarea.
I've inserted the links and code (hopefully in the right place)
I'm using using laravel and bootstrap, also parsely for form validation.
Am I missing something?
Any tips would be great!
cheers.
here's my code:
{!! Html::style('css/parsley.css') !!}
{!! Html::style('css/select2.min.css') !!}
<script src="https://cloud.tinymce.com/stable/tinymce.min.js"></script>
<script>
tinymce.init({
selector: '#textarea',
plugins: 'Link code table',
menubar: 'table',
toolbar: 'table'
});
</script>
May be you need to add table plugin, like below.
<script>
tinymce.init({
selector: '#textarea',
plugins: 'table',
menubar: 'table',
toolbar: 'table'
});
</script>
I have a problem with the initialization of images in CKEditor 4.5.4 with the Enhanced Image plugin (image2). The first time a CKEditor instance is being loaded, the images don't get initialized correctly. See picture image not correctly initialised. The caption field does work correctly, but I cannot move or select the picture.
However, if I navigate to another web page in my web application, and then navigate back to the page where we use CKEditor, everything works fine. In other words if the CKEditor instance has been loaded before, everything works perfectly.
We are using AngularJS 1.4.4 together with ng-ckeditor. This is the editorOptions we use:
$scope.editorOptions = {
language: 'no',
customConfig: '/statisk/app/common/ckeditor/ckeditor-config.js',
extraPlugins: 'sharedspace,image2,widget,lineutils,uploadimage,uploadwidget,filetools',
extraAllowedContent: 'a(*); span(*); figure(align_center, align_left); div{*}; figure; figcaption; img[alt,!src]{width,height};',
toolbar: [
{name: 'paragraph', items: ['BulletedList', 'NumberedList']},
{name: 'links', items: ['Link']},
{name: 'insert', items: ['Image']}
],
sharedSpaces: { top: 'toolbar_hovedtekst' }
};
HTML:
<div id="hovedtekst" data-ng-show="modus.showEditorControls()">
<div id="toolbar_hovedtekst"></div>
<div class="ck_editor_hovedtekst test_hovedtekst" ckeditor="editorOptions" data-ng-model="hovedtekstCtrl.content"></div>
</div>
What could be wrong?
I have a editor template for my kendo grid defined as
<script id="my-editor-template" type="text/x-kendo-template">
<div class="k-edit-label">
<label for="ContactName">Contact</label>
</div>
<div data-container-for="ContactName" class="k-edit-field">
<input type="text" class="k-input k-textbox" name="ContactName" data-bind="value:ContactName">
</div>
<!-- more fields, etc -->
</script>
In my grid definition, I definte editable like this:
editable =
{
mode: 'popup',
template: kendo.template($('#my-editor-template').html()),
confirmation: 'Are you sure you want to delete rec'
};
But I would like to make the popup window wider. I tried wrapping the contents of my template in a
<div style="width: 800px;"></div>
but the popup window stayed the same with, and made the contents scrollable (i.e., 800px content inside a 400px window).
I know I can do a
$(".k-edit-form-container").parent().width(800).data("kendoWindow").center();
after the window is opened, but all the content of the window is formatted for like 400px, and it feels a little hackish. Is there not a way I can dictate teh size in the template markup?
Kendo grid popup window is using kendo window, so you can set the height and width like this
editable: {
mode: "popup",
window: {
title: "My Custom Title",
animation: false,
width: "600px",
height: "300px",
}
}
Here is dojo for you, but since i did not define a custom template it still use default one so as the result the window size already 600 x 300 but the content is not.
After an hour+ long research following code fixed my issue. I had to put this code in the edit event.
$(".k-edit-form-container").attr('style', "width:auto");
I would like to know how to modify the example grouped listview that comes with kendo mobile.
The list view shows both flat view and grouped view. How do you make the items in the list view clickable so they will navigate to a different web page when clicked?
I've tried creating a template with an anchor tag and href and it works in IE but does nothing when clicked on the android phone.
//The Template
<script type="text/x-kendo-tmpl" id="template">
<div class="myclass">
#:name#
</div>
</script>
//The data binding
function mobileListViewDataBindInitGrouped() {
$("#grouped-listview").kendoMobileListView({
dataSource: kendo.data.DataSource.create({ data: groupedData, group: "letter" }),
template: kendo.template($("#template").html()),
fixedHeaders: true
});
}
Thanks
After some trial and error I have found that if i remove the div tag in the template, the anchor tags work correctly. Not sure if this is a bug or by design.
Thanks Whizkid747 for your help.
//Updated Template (removed <div>)
<script type="text/x-kendo-tmpl" id="template">
#:name#
</script>