how to make multiple slick-sliders with one function ? For example data attribute;
div class="my-slick" data-item="3"
div class="my-slick" data-item="4"
div class="my-slick" data-item="6"
$('.my-slick').slick();
Hopefully the following code will work for you
<code>
$('.my-slick').each( function() {
var slick = $(this),
item = $(this).data('item');
slick.slick({
slidesToShow: item,
responsive: [
{
breakpoint: 480,
settings: {
slidesToShow: item < 2 ? item: 1,
}
}
]
});
});
</code>
In slick 1.5 you can now add settings using the data-slick attribute. You still need to call $(element).slick() to initialize slick on the element.
<div data-slick='{"slidesToShow": 4, "slidesToScroll": 4}'>
<div><h3>1</h3></div>
<div><h3>2</h3></div>
<div><h3>3</h3></div>
<div><h3>4</h3></div>
<div><h3>5</h3></div>
<div><h3>6</h3></div>
</div>
You can find more information at http://kenwheeler.github.io/slick/ and https://github.com/kenwheeler/slick/tree/master/slick
Related
I have a kendo wrapper grid with local kendo datasource pointing to vue state.
There is a button "Update" which will update the state so that the grid will be updated as well and it works.
But if I firstly click the button "Test" (just only a same value assignment to state) and then click "Update", strangely it does not work so the grid has no change.
I finally found out the reason is that after clicked "Test" then "Update", the vue state updated but the kendo grid datasource won't (out of sync unexpectedly).
Now the temp solution is I have to manually assign the state to the datasource so that the grid will be updated.
Repo: http://dojo.telerik.com/aGENIHuW
My question is why, after clicked 'Test', the kendo grid datasource became cached and out of sync with the vue state?
If I don't click 'Test', they do sync always.
Problem occur only when "same value assignment" to the state. If "different value assignment", no problem.
<div id="vueapp">
<kendo-datasource ref="dsDS" :data="localDataSource"></kendo-datasource>
<kendo-grid :data-source-ref="'dsDS'">
<kendo-grid-column :field="'ProductID'"
:title="'ID'"
:width="40"></kendo-grid-column>
<kendo-grid-column :field="'ProductName'"></kendo-grid-column>
<kendo-grid-column :field="'UnitPrice'"
:title="'Unit Price'"
:width="120"
:format="'{0:c}'"></kendo-grid-column>
<kendo-grid-column :field="'UnitsInStock'"
:title="'Units In Stock'"
:width="120"></kendo-grid-column>
<kendo-grid-column :field="'Discontinued'" :width="120"></kendo-grid-column>
</kendo-grid>
<input type="button" value="Test" #click="test" />
<input type="button" value="Update" #click="update" />
</div>
new Vue({
el: '#vueapp',
data: {
localDataSource: [{
"ProductID": 1,
"ProductName": "Chai",
"UnitPrice": 18,
"UnitsInStock": 39,
"Discontinued": false,
},
{
"ProductID": 2,
"ProductName": "Chang",
"UnitPrice": 17,
"UnitsInStock": 40,
"Discontinued": false,
},
{
"ProductID": 3,
"ProductName": "Aniseed Syrup",
"UnitPrice": 10,
"UnitsInStock": 13,
"Discontinued": false,
}
]
},
methods: {
test: function(e) {
this.localDataSource = JSON.parse(JSON.stringify(this.localDataSource)); //same value assignment
console.log('test');
},
update: function(e) {
this.localDataSource.splice(0, 1, this.localDataSource[1]); //replace the first object with second object
},
}
})
Update:
Let me emphasize my question below:
Why test2() + update() => Works!
But test() + update() => NOT work
Their different is just the value assignment 'hello' for test2()
methods: {
test: function(e) { //same value assignment
let ds = JSON.parse(JSON.stringify(this.localDataSource));
this.localDataSource = JSON.parse(JSON.stringify(ds));
},
test2: function(e) { //different value assignment
let ds = JSON.parse(JSON.stringify(this.localDataSource));
ds[0]['ProductName'] = 'hello';
this.localDataSource = JSON.parse(JSON.stringify(ds));
},
update: function(e) {
this.localDataSource.splice(0, 1, this.localDataSource[1]); //replace first row with second row
}
}
http://dojo.telerik.com/aGENIHuW/10
Once the datasource is set in the data() object, and the kendo grid is bound, I wouldn't try to edit the localDataSource object. The kendo grid gets your basic array and converts it into a kendo datasource with all the extended properties, so I would target that new object to make changes.
try something like below in your update method - if you can assign the grid an id through a wrapper attribute then the selector would be better than what i have here
let gridDS = $("div[data-role=grid]").data("kendoGrid").dataSource;
let data = gridDS.data();
data.splice(0,1,data[1]);
btw the data method should return a new object otherwise you might have issues with duplicate components sharing the same object
so instead of
data:{
localDataSource:[1,2,3]
}
i would do
data(){
return {
localDataSource:[1,2,3]
}
}
Adding this as answer because comments won't accommodate this much text:
If you do a data dump after the update() function:
console.table(this.localDataSource)
you will see that the localDataSource array is being updated correctly. But the kendo grid isn't aware of it. It still has its own array of data. If you do a corresponding dump of the kendo data source, you will see it has not been synced
let gridDS = $("div[data-role=grid]").data("kendoGrid").dataSource;
let data = gridDS.data();
console.table(data);
What I think is happening is this - since localDataSource is a property of data(), Vue observes any changes to its nested properties.
When it executes code ds[0]['ProductName'] = 'hello' Vue picks up the update, looks for dependencies on the object, and rebinds the kendo-grid component.
I am using DataTables with the responsive extension on our web application, but I have a question.
When the table is made responsive, it should hide the pagination option.
I tried this with "bLengthChange": false:
$(function () {
$("#table1").DataTable({
"language": {
"url": "//cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/Dutch.json"
},
"order": [[1, "asc"]],
"bAutoWidth": false,
responsive: {
details: {
type: 'column'
},
"bLengthChange": false
},
columnDefs: [ {
className: 'control',
orderable: false,
targets: 0
} ],
});
});
However, this does not work. My target is that I can see the pagination amount dropdown menu on fullscreen, but that option should be hidden if responsive.
Can I add options like bLengthChange specific to the "responsive" state?
Can I add options like bLengthChange specific to the "responsive"
state?
No, you cannot. Try inspect $.fn.dataTable.Responsive.defaults again, as I believe you already have done. It does not give so much sense either, the responsive extension is an extension while lengthMenu is a core feature. If you want to hide the lengthMenu you would need to reinitialise the table or do something hackish that may or may not conflict with other features or other extensions. But you can do the hack yourself. Hook into the responsive-resize event and hide or show the lengthMenu according to the responsive status :
table.on( 'responsive-resize', function ( e, datatable, columns ) {
var $lengthMenu = $('.dataTables_length')
var count = columns.reduce( function (a,b) {
return b === false ? a+1 : a;
}, 0 );
if (count>0 && $lengthMenu.is(':visible')) $lengthMenu.hide()
if (count<= 0 && !$lengthMenu.is(':visible')) $lengthMenu.show()
} );
demo -> http://jsfiddle.net/v1dnxLkg/
Thank you.
Fixed it with this CSS:
#media screen and (max-width: 767px){
div.dataTables_wrapper > div.row > div > div.dataTables_length{
display: none;
}
}
How do I trigger on the overlays in jqplot only after I click a checkbox (not when the html loads). When I first set overlay option show to false the overlays are not displayed on plot at 1st and when I used my trigger function the overlays do not appear.
Here is the code I use for the plot :
<div id="fastest" style="margin-top:20px; margin-left:20px; margin-right:200px; width:800px; height:400px;">
<script class="code" type="text/javascript">
$(document).ready(function(){
var dataset="too long to be displayed here"
plot1 = $.jqplot('fastest', dataset, {
title: 'Test_figs',
legend: {show:false},
series: [{
showMarker: false,
color: '#ED0E0E',
label: 'R spectrum',
neighborThreshold: -1
}],
axes:{
xaxis:{
label:'Restframe Wavelength'
},
yaxis:{
label:'Flux',
tickOptions:{formatString:'%.3e'}
}
},
cursor:{
show:true,
zoom:true,
tooltipLocation:'sw'
},
Canvasoverlay: {
show: false,
objects: [
{verticalLine: {
name: 'Na-ID',
x: 5893.000000,
lineWidth: 2,
color: '#F0630C',
lineCap:'butt',
yOffset:0,
shadow: true
}}
]
}
});
});
function NaID_trigger() {
var co = plot1.plugins.canvasOverlay;
var line = co.get('Na-ID');
if (line.options.show==false) line.options.show = true;
else line.options.show = false;
co.draw(plot1);
}
</script>
I then use :
<button onclick="NaID_trigger()">Na-ID</button>
to trigger the overlay on or off for instance.
PS: I tried replacing draw by replot as advised didn't work when show=false in overlays options.
I finally found the solution myself :
to not display the overlays when the jqplot loads I set the overall overlays "show" option to true.
Then within each object I set show to false.
Instead of the external to the plot function I used before I switched to an even handler of the form:
$("input[type=checkbox][name=Na-ID]").change(function(){
plot1.plugins.canvasOverlay.get('Na-ID').options.show = this.checked;
plot1.replot();
});
Now the plot display the selected overlay when checkbox is ticked and not at the beginning.
Hope this will help someone who has the same issues.
I have a treegrid "templatecolumn" that displays an image based on a condition in an XTemplate.
However, I also would like an html formatted tooltip displayed upon mouseover of the image. I've done this with Ext JS 3.x via ext:qtip metatdata attribute in a renderer, but haven't been able to figure out how to do this in Ext JS 4.1 using tpl and haven't found anything in my searching.
Here's what I have to display the image based on a record value:
var myTemplate = new Ext.XTemplate(
'<tpl if="p > 0">',
'<img src="exclamation.gif" height="16" width="16"/>',
'</tpl>'
);
var schedTree = Ext.create('Ext.tree.Panel', {
...
columns:[
{ header:' ', dataIndex:'p', xtype:'templatecolumn', tpl:myTemplate }
]
}
Has anyone done this or have any suggestions? Is there a better way to do this? Thanks
This isn't a method using XTemplate, but this one works for me:
{
text : 'Zdj',
width: 40,
align : 'center',
dataIndex : 'Name',
sortable : false,
resizable: false,
renderer: function (v, m, r) {
if(r.get('leaf')==true) {
m.tdAttr = 'data-qtip="<img src=services/Images.ashx?id='+r.get('id')+' width=60px height=60px>"';
return '<img src="services/Images.ashx?id='+r.get('id')+'" width="25px" height="25px"/>';
}
}
},
In my example I'm showing a bigger image in tooltip, but there is no problem to show HTML formatted tooltip.
You can add conditions to renderer and in my opinion do more that XTemplate can do.
Your small image should go to return line and tooltip content to m.tdAttr.
You can read more about renderer function here: http://docs.sencha.com/ext-js/4-1/#!/api/Ext.grid.column.Column-cfg-renderer
Hope this helps :)
How to show a checkbox in a dojo datagrid?
I would suggest setting cellType to dojox.grid.cells.Bool, instead of the formatter.The formatter gives you much freedom, but also the responsibility of gathering the data from all the checkboxes (for all the rows) afterwards. Something like this as a structure-entry should do the trick:
{
name: "is awesome?",
width: "auto",
styles: "text-align: center",
type: dojox.grid.cells.Bool, editable: true
}
Please make sure to use a write-store (like ItemFileWriteStore) and not just a read-store, otherwise you will be disabled to actually check the checkbox :)
Use formatter function as described in Widgets Inside dojo.DataGrid
You can return new dijit.form.Checkbox from formatter function in dojo 1.4
You need the IndirectSelection plugin for the EnhancedGrid, here's a fiddle: http://jsfiddle.net/raybr/w3XpA/5/
You can use something like this, with Json
HTML
<table id="myGrid" dojoType="dojox.grid.DataGrid"
clientSort="true" autoHeight="true" autoWidth="true">
<script type="dojo/method">
showFields();
</script>
</table>
DOJO
showFields:function () {
dojo.xhrPost({
url:"/getFields.do",
timeout:2000,
handleAs:"json",
load:dojo.hitch(this, "displayInGrid")
});
},
displayInGrid:function (jsonResult) {
var dataStore = new dojo.data.ItemFileReadStore(
{ data:jsonResult }
);
var checkboxLayout = [
[
{name:'ID', field:"id" },
{name:'Value', field:"id", formatter:this.addCheckBox}
]
];
var grid = dijit.byId("myGrid");
grid.setStructure(checkboxLayout);
grid.setStore(dataStore);
},
addCheckBox:function (val) {
var checkbox = "<input type='checkbox' name='myfields' value='" + val + "/>";
return checkbox;
},
If you are trying to show a checkbox selector on each row of the grid you can follow this tutorial
http://dojotoolkit.org/documentation/tutorials/1.8/working_grid/demo/selector.php
If the type of the cell is a boolean, then its value is displayed as either the string true or false. If a check box is desired, setting the cellType to be dojox.grid.cells.Bool and marking it as editable will make a checkbox appear.
http://dojotoolkit.org/reference-guide/1.9/dojox/grid/DataGrid.html#editing-cells
From markup, do like this for the desired result:
<th field="booleanField" cellType="dojox.grid.cells.Bool" editable="true">Checkbox field</th>