I would like to cancel Fotorama'a fullscreen by click outside of the images. Fotorama only allows to exit fullscreen clicking on the fotorama__fullscreen-icon button.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
fotoramaDefaults = {
maxwidth: '100%',
allowfullscreen: true,
nav: 'thumbs',
thumbwidth: '100',
thumbheight: '100',
thumbborderwidth: 0,
thumbmargin: 3,
click: false,
swipe: false,
};
</script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.js"></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.css" rel="stylesheet">
<div class="fotorama">
</div>
$('.fotorama').on('click', function (e, fotorama) {
if ($(e.target).hasClass("fotorama__stage__frame")) {
$('.fotorama').data('fotorama').cancelFullScreen();
}
});
Related
I need to add custom buttons to a Kendo Grid toolbar and switch visibility of each other by clicking an another one (e.g. Button1 click hides Button1 and shows Button2, Button2 click hides Button2 and shows Button1).
I'm able to add these buttons but I can't change their visibility.
My code:
<div kendo-grid="grid" k-toolbar="toolbar" k-options="options">
</div>
class customGrid implements ng.IDirective {
public restrict = 'A';
public templateUrl = 'customGrid.directive.html';
public scope = {
options: '=',
grid: '='
};
constructor() {
}
public link = (scope) => {
scope.toolbarItems = [
{
name: 'play',
iconClass: 'fa fa-play',
handler: (toolbar: any) => {
//visibility switch here
}
},
{
name: 'pause',
iconClass: 'fa fa-pause',
handler: (toolbar: any) => {
//visibility switch here
}
}];
const toolbar: any[] = [];
for (let i = 0; i < scope.toolbarItems.length; i++) {
toolbar.push({
template: `<a ng-click="toolbarItems[${i}].handler()" class="k-button k-button-icontext" href="##"><i class="${scope.toolbarItems[i].iconClass}"></i> ${scope.toolbarItems[i].text}</a>`
});
}
scope.toolbar = toolbar;
}
I can manipulate directly to the DOM but maybe it is possible to do the same using angularJS?
Live Demo
P.S. This is just a sample, in real project "toolbarItems" is an directive's argument and their count can be different.
Updated dojo for the same. Instead of having separate button you can have one button and change/toggle their css class based on the need.
https://dojo.telerik.com/#amitdwivedi/ajeVoXUf
Hope this solves your purpose.
<!DOCTYPE html>
<html>
<head>
<base href="https://demos.telerik.com/kendo-ui/grid/angular">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2015.3.930/styles/kendo.default.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<script src="https://kendo.cdn.telerik.com/2015.3.930/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2015.3.930/js/angular.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2015.3.930/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example" ng-app="KendoDemos">
<div ng-controller="MyCtrl">
<kendo-grid options="mainGridOptions" k-toolbar="toolbar">
</kendo-grid>
</div>
</div>
<script>
angular.module("KendoDemos", [ "kendo.directives" ])
.controller("MyCtrl", function($scope){
$scope.toolbarItems = [
{
name: 'pause',
iconClass: 'fa fa-play',
handler: ($event) => {
//visibility switch here
if(event.srcElement.className == 'fa fa-pause')
event.srcElement.className = "fa fa-play"
else
event.srcElement.className = "fa fa-pause"
}
}];
var toolbar = [];
for (var i = 0; i < $scope.toolbarItems.length; i++) {
toolbar.push({
template: `<a ng-click="toolbarItems[${i}].handler()" class="k-button k-button-icontext" href="##"><i class="${$scope.toolbarItems[i].iconClass}"></i></a>`
});
}
$scope.toolbar = toolbar;
$scope.mainGridOptions = {
dataSource: {
type: "odata",
transport: {
read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Employees"
}
},
sortable: true,
columns: [{
field: "FirstName",
title: "First Name",
width: "120px"
},{
field: "LastName",
title: "Last Name",
width: "120px"
},{
field: "Country",
width: "120px"
},{
field: "City",
width: "120px"
},{
field: "Title"
}]
};
})
</script>
</body>
</html>
I am working on this . It displays the data using kendo - grid. However, what I need is when I click on a particular row in the table, all its content get fetched in an object and using that object I can display its fields below the table. How can I achieve that? Also, I believe we need to modify this code as well if we are using objects to display the fields. Any help would be appreciated.
First Name: {{FirstName}}<br>
Last Name: {{LastName}}<br>
Country: {{Country}}<br>
City: {{City}}<br>
It seems you need to listen for row selection (change event), and get the selected row, then bind it to angular variable inside your scope as describe in this update
The key here is the change event triggered upon selection/deselection
grid configs
...
change: function(e) {
var selection = this.select(),
selectedItem
;
if(selection && this.dataItem(selection)) {
$scope.selectedItem = this.dataItem(selection).toJSON();
} else {
$scope.selectedItem = {};
}
$scope.$apply();
}
...
grid configs
Two changes required in your code:
1) in HTML add on-change event handler function <kendo-grid options="mainGridOptions" k-on-change="handleChangeEvent(data, dataItem, columns)"> </kendo-grid>
2) in JavaScript
Set Kendo grid as selectable sortable: true
Define $scope.handleChangeEvent function
Code:
HTML:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.common.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.default.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.dataviz.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.dataviz.default.min.css" />
<script src="http://cdn.kendostatic.com/2014.3.1411/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1411/js/angular.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1411/js/kendo.all.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div id="example" ng-app="KendoDemos">
<div ng-controller="MyCtrl">
<kendo-grid options="mainGridOptions" k-on-change="handleChangeEvent(data, dataItem, columns)"> </kendo-grid>
<h5>You selected: </h5>
First Name: {{FirstName}}<br>
Last Name: {{LastName}}<br>
Country: {{Country}}<br>
City: {{City}}<br>
</div>
</div>
</body>
</html>
And JavaScript:
angular.module("KendoDemos", ["kendo.directives"])
.controller("MyCtrl", function ($scope) {
$scope.handleChangeEvent = function(data, dataItem, columns) {
$scope.FirstName=dataItem.FirstName;
$scope.LastName=dataItem.LastName;
$scope.Country=dataItem.Country;
$scope.City = dataItem.City;
};
$scope.mainGridOptions = {
dataSource: {
type: "odata",
transport: {
read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Employees"
},
pageSize: 5,
serverPaging: true,
serverSorting: true
},
selectable: "row",
sortable: true,
pageable: true,
dataBound: function () {
this.expandRow(this.tbody.find("tr.k-master-row").first());
},
columns: [{
field: "FirstName",
title: "First Name",
width: "120px"
}, {
field: "LastName",
title: "Last Name",
width: "120px"
}, {
field: "Country",
width: "120px"
}, {
field: "City",
width: "120px"
}, {
field: "Title"
}]
};
});
I am using a Shield UI Chart on a page where users can enter 3 values which are than showed on the chart. I have a button which triggers the event. Here is my code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://www.shieldui.com/shared/components/latest/chart/css/shield-chart.min.css">
<script type="text/javascript" src="http://www.shieldui.com/shared/components/latest/chart/js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="http://www.shieldui.com/shared/components/latest/chart/js/shield-chart.all.min.js"></script>
<script>
function myFunction()
{
var containter = $("#chart").swidget();
var info = new Array();
info[0]=parseFloat(document.getElementById("a").value);
info[1]=parseFloat(document.getElementById("b").value);
info[2]=parseFloat(document.getElementById("c").value);
containter.destroy();
$("#chart").shieldChart(
{
seriesSettings: {
line: {
applyAnimation: {
duration: 0
},
pointMark: {
enabled: false
}
}
},
tooltipSettings: {
enabled: false
},
exportOptions:
{
image: false,
print: false
},
axisX: {
min: 0,
max: 5
},
primaryHeader: {
text: "Chart"
},
dataSeries: [
{
seriesType: 'bar',
collectionAlias: 'chart',
data: [info[0],info[1],info[2]]
}
]
}
);
}
</script>
</head>
<body>
<button onclick="myFunction()">Refresh Chart</button>
<table>
<tr>
<td>
<div id="chart" style="width: 300px; height: 300px; margin: auto;"></div>
</td>
</tr>
</table>
<p id="demo"></p>
<input type=text id="a" value='123'>Value A</input>
<input type=text id="b" value='23'>Value B</input>
<input type=text id="c" value='3'>Value C</input>
</body>
</html>
However there is some error that prevents the values from being displayed. Actually the whole chart won’t show. Where might be my mistake?
The is one error that you are making which can be resolved in 2 ways:
1. You can remove the
containter.destroy();
statement. So You will not recreate the existing chart, but create a new one each time the button is pressed.
You could keep the above mentioned statement, but you need to place this code
$(document).ready(function () {
var info = new Array();
info[0]=parseFloat(document.getElementById("a").value);
info[1]=parseFloat(document.getElementById("b").value);
info[2]=parseFloat(document.getElementById("c").value);
$("#chart").shieldChart({
exportOptions:
{
image: false,
print: false
},
tooltipSettings: {
enabled: false
},
seriesSettings: {
line: {
applyAnimation: {
duration: 0
},
pointMark: {
enabled: false
}
}
},
axisX: {
min: 0,
max: 5
},
primaryHeader: {
text: "Chart"
},
dataSeries: [
{
seriesType: 'bar',
collectionAlias: 'Chart',
data: [info[0],info[1],info[2]]
}
]
});
});
so you will already have one chart which to destroy and recreate and you will be able to show the data from the first time page is loaded.
I am new to ExtJS4. I'm testing some simple demos in ExtJs4 Docs. I find that the header of Panel is always little smaller than body of panel, and the panel inside is samller too. The header is always 11px shorter than the body under the measure with Firebug. I test the code in FF, IE8, Chrome, all of them render it like what the screen shot shows (the image link).
Sorry for my poor English. I'm confused with this probelm,help me,please.
the screen shot link:
http://i.stack.imgur.com/vb2Xo.jpg
or
http://www.tu265.com/di-c870adf0409aa61a99c774186dd9afa8.jpg
my js code:
Ext.create('Ext.panel.Panel', {
title: 'container panel',
renderTo: 'container',
width: 400,
height: 300,
layout: 'accordion',
items: [{
tools: [{ type: 'gear', handler: function () {
Ext.Msg.alert('msgWindow', 'btn is Clicked');
}
}, { type: 'refresh'}],
title: 'panel1',
xtype: "panel",
html: "insidePanel1"
}, {
title: 'panel2',
xtype: "panel",
html: "insidePanel2"
}, {
id: 'panel3',
title: 'panel3',
xtype: "panel",
html: "insidePanel3"
}]
});
Ext.create("Ext.Button", {
renderTo: 'container',
text: "open panel3",
handler: function () {
Ext.getCmp('panel3').expand(true);
}
});
html code:
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Layouts</title>
<link href="../../ext-4.0.7-gpl/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
<script src="../../ext-4.0.7-gpl/ext-all-debug.js" type="text/javascript"></script>
</head>
<body>
<div id="container"></div>
<script type="text/javascript">
//js code
</script>
</body>
</html>
Your code works OK on my PC (FF, IE 8 and Chrome). So I think you can try it with several ways:
ext-all-gray.css or ext-all-access.css instead of ext-all.css.
ext-all.js instead of ext-all-debug.js.
re-download ext-4.0.7-gpl from Sencha site.
You could use your own css file and a rule like this for example
.x-panel-body .x-panel-header-text{
font-size:12px;
font-weight:bold;
}
Take a look in a working example
I have similar thing. Try to set scopeResetCSS = false, sometimes it comes with demo examples, so just comment them.
//Ext.scopeResetCSS = true;
This is my Ext Panel and Ext Window
This is Editor Grid Panel
voiceListingEditorGrid = new Ext.grid.EditorGridPanel({
id: 'voiceListingEditorGrid',
store: voiceDataStore,
cm: voiceColumnModel,
enableColLock:false,
resize: false,
autoload: true,
clicksToEdit:2,
sm: colSM,
selModel: new Ext.grid.RowSelectionModel({singleSelect:false}),
tbar: [
{
text: 'Add a site',
tooltip: 'Add a new site',
iconCls:'add',
handler: displayFormWindow
}, '-', {
text: 'Delete selection',
tooltip: 'Select a record from table and delete',
handler: confirmDeleteSite, // Confirm before deleting
iconCls:'remove'
}]
});
This is Ext.Window
voiceListingWindow = new Ext.Window({
id: 'voiceListingWindow',
title: 'Sites',
draggable : false,
resizable: false,
closable: false,
width:805,
height:500,
plain:true,
layout: 'fit',
items: voiceListingEditorGrid
});
The Data Store
voiceDataStore = new Ext.data.Store({
id: 'voiceDataStore',
proxy: new Ext.data.HttpProxy({
url: 'database.php',
method: 'POST'
}),
// these parameters are passed for any HTTP request
baseParams:{
task: "VOICELISTING",
user_id : user_id_param
},
reader: new Ext.data.JsonReader({
root: 'results',
totalProperty: 'total',
id: 'id'
},[
{name: 'queue_code', type: 'string', mapping: 'queue_code'},
{name: 'site_name', type: 'string', mapping: 'site_name'} ,
{name: 'queue_id', type: 'int' , mapping: 'queue_id'}
]),
sortInfo:{field: 'queue_id', direction: "ASC"}
});
The Model
voiceColumnModel = new Ext.grid.ColumnModel(
[
/*{
header: 'ID',
dataIndex: 'queue_id'
},*/
colSM,
{
header: 'Site Name',
dataIndex: 'site_name',
width:330,
editor: new Ext.form.TextField({
allowBlank: false,
maxLength: 20,
regex: /[a-zA-Z0-9]+/
})
},{
header: 'Site Number',
dataIndex: 'queue_code',
width:310,
editor: new Ext.form.TextField({
allowBlank: false,
maxLength: 20,
maskRe: /([0-9\s]+)$/ ,
regex: /[0-9]/
})
},{
header: 'Add Call Queue',
align: 'center',
width: 124,
sortable: false,
//renderer: function(val){ return '<input type="button" onclick="redirect();" value="Add Call Queue" id="'+val+'"/>'; },
renderer: function(val){ return '<input type="image" alt="Add Call Queue" id="'+val+'" src="images/plus.png" name="Add Call Queue" onclick="redirect();" >' ; },
dataIndex: 'user_id'
}
]
);
This is the PHP file
<?php
session_start();
if(!isset($_SESSION['validuser'])){
header( "Location: http://localhost/vcc" );
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>VCC</title>
<link rel="stylesheet" type="text/css" href="customeStyle.css" />
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="stylesheet" type="text/css" href="resources/css/ext-all.css"/>
<script type="text/javascript" src="adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-all.js"></script>
<script type="text/javascript" src="voicesite.js"></script>
<script type="text/javascript" >
function goBack(){
//history.back();
window.location ="http://didyouwonder.com/vcc/users.php";
}
</script>
</head>
<body>
<div id="contianerVoice">
<div id="logoffbtn1">
<a href="logout.php" ><img src="images/signout.gif" alt="Logout" /></a>
</div>
<h1>Account Name: <?php echo $_GET['account_name']?></h1>
<div id="footerVoice">
<div id="left-footer">
<a href="#" onclick="goBack();" ><img src="images/back1.png" alt="Back" /></a>
</div>
<div id="right-footer">
<div id="rdiv">
<ul>
<li><img src="images/plus.png"/><span> Add Voice Site</span></li>
<li><img src="images/enable.png"/><span> Enable</span></li>
<li><img src="images/disable.png"/><span> Disable</span></li>
</ul>
</div>
<div id="ldiv">
<ul>
<li><img src="images/add.gif"/><span> Add</span></li>
<li><img src="images/delete.gif"/><span> Delete</span></li>
<li> Double click to Edit</span></li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
Please see the attached images and then read the explanation below
Page layout is fine when page loads
See this Image
This is what happens when firebug window is opened and page is refreshed.
See this image
Grid appears OK when the page is loaded. The problem is when I open up the firebug window and refresh the page , Grid goes to the top and same thing happens when I open the page on Mac. I don't know how to handle this problem since this is the first time I am working with Ext.
Please suggest something.
OK I have solved the issue ... This is a pluign that serves my purpose. There is an example of using this plugin over here. Read the documentation carefully and then the example.
But at first it didn't work for me, the reason was ext window container, that was rendering the grid panel. So I removed this from code
voiceListingWindow = new Ext.Window({ ...
Now the grid panel is rendered according to this property of Grid panel
... renderTo: 'reportTabContent' // render the grid to the specified div in the page