When i am using the following code, this is working fine
<!doctype html>
<html ng-app="app">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.js"></script>
<script src="ht tp://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular-touch.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular-animate.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/csv.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"></script>
<script src="http://ui-grid.info/release/ui-grid-unstable.js"></script>
<link rel="stylesheet" href="http://ui-grid.info/release/ui-grid-unstable.css" type="text/css">
<link rel="stylesheet" href="main.css" type="text/css">
</head>
<body>
<div ng-controller="MainCtrl">
<br>
<br>
<div id="grid1" ui-grid="gridOptions" class="grid"></div>
</div>
<style type="text/css">
.grid {
width: 500px;
height: 200px;
}
.red { color: red; background-color: yellow !important; }
.blue { color: blue; }
</style>
<script>
var app = angular.module('app', ['ui.grid']);
app.controller('MainCtrl', ['$scope', '$http', function ($scope, $http) {
$scope.gridOptions = {
enableSorting: true,
columnDefs: [
{ field: 'name', cellClass: 'red' },
{ field: 'company',
cellClass: function (grid, row, col, rowRenderIndex, colRenderIndex) {
if (grid.getCellValue(row, col) === 'Velity') {
return 'blue';
}
}
}
];
};
$http.get('https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/100.json')
.success(function (data) {
$scope.gridOptions.data = data;
});
} ]);
</script>
</body>
</html>
When I was using Columndefs as a variable, this is not working?
Is this a bug in angular ui grid
<!doctype html>
<html ng-app="app">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular-touch.js"> </script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular-animate.js"> </script>
<script src="http://ui-grid.info/docs/grunt-scripts/csv.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"></script>
<script src="http://ui-grid.info/release/ui-grid-unstable.js"></script>
<link rel="stylesheet" href="http://ui-grid.info/release/ui-grid-unstable.css" type="text/css">
<link rel="stylesheet" href="main.css" type="text/css">
</head>
<body>
<div ng-controller="MainCtrl">
<br>
<br>
<div id="grid1" ui-grid="gridOptions" class="grid"></div>
</div>
<style type="text/css">
.grid {
width: 500px;
height: 200px;
}
.red { color: red; background-color: yellow !important; }
.blue { color: blue; }
</style>
<script> var app = angular.module('app', ['ui.grid']);
app.controller('MainCtrl', ['$scope', '$http', function ($scope, $http) {
$scope.cv = [
{ field: 'name', cellClass: 'red' },
{ field: 'company',
cellClass: function (grid, row, col, rowRenderIndex, colRenderIndex) {
if (grid.getCellValue(row, col) === 'Velity') {
return 'blue';
}
}
}
];
$scope.gridOptions = {
enableSorting: true,
columnDefs: 'cv'
};
$http.get('https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/100.json')
.success(function (data) {
$scope.gridOptions.data = data;
});
} ]);
</script>
</body>
</html>
Guys if you know, then please help me
I was making a dynamic templates using angular ui grid, And I got this type of silly error very soon.
I was thinking that adding dynamic validation in angular grid fields would be the challenging task, but i never thought that i will get this type of error.
The columnDefs option no longer accepts a string as an argument. It's not well-documented but it's mentioned in the upgrade guide: http://ui-grid.info/docs/#/tutorial/099_upgrading_from_2#updatecolumndefs
You can assign either a named or anonymous array:
$scope.myColDefs = [...];
$scope.gridOptions.columnDefs = $scope.myColDefs;
// or:
$scope.gridOptions.columnDefs = [...];
Related
I want to be able to drag an element from one div into another, keeping the original where it is and making a clone in the second div. Once the cloned element is in the second div it should still be draggable.
I have implemented this twice, once with plain javascript and once using directives in Angular JS.
In the plain javascript implementation everything works as intended; a cloned object can be dragged again.
However, in the Angular JS implementation, cloned objects cannot be dragged. I'm not sure why it isnt keeping the draggable property.
Here is my code:
HTML
<!DOCTYPE html>
<head>
<title>Drag and Drop Test</title>
<!-- JQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Bootstrap CSS CDN -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- Angular JS -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<!-- Jitsi External -->
<script src="https://meet.jit.si/external_api.js"></script>
<!-- Local JS -->
<script type="text/javascript" src="../js/dragdrop.js"></script>
<!-- Local CSS -->
<link rel="stylesheet" href="../css/dragdrop.css">
</head>
<body ng-app="myApp">
<div>
<div class="dragdrop-panel" id="drag-from-div">
<h1>Icons</h1>
<div id="dragme" class="draggablewithjs" draggable="true" ondragstart="drag(event)">
</div>
<div id="dragme2" class="draggablewithangular" drag-item>
</div>
</div>
<div class="dragdrop-panel" id="drop-to-div" drop-area>
<h1>Selected</h1>
</div>
<div class="dragdrop-panel" id="trash-div" drop-area>
<h1>Trash</h1>
</div>
</div>
</body>
Javascript
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
});
app.directive("dropArea", function() {
return {
link: function(scope,elem, attrs) {
elem.bind('drop', function(ev){
ev.preventDefault();
var data;
if (ev.dataTransfer) {
data = ev.dataTransfer.getData('text');
}
else if (ev.originalEvent.dataTransfer){
data = ev.originalEvent.dataTransfer.getData('text');
}
//var dropObj = document.getElementById(data).cloneNode();
//dropObj.id = dropObj.id + "1";
//dropObj.setAttribute('style', 'width:50px;height:50px;background:blue;');
ev.target.appendChild(document.getElementById(data).cloneNode());
});
elem.bind('dragover', function(ev){
ev.preventDefault();
if (ev.target.getAttribute("draggable") == "true"){
ev.originalEvent.dataTransfer.dropEffect = "none";
}
else{
ev.originalEvent.dataTransfer.dropEffect = "all";
}
});
elem.css({
color: "blue"
});
}
}
});
app.directive('dragItem', function() {
return {
restrict: 'A',
replace: 'false',
link: function(scope,elem,attrs){
elem.bind('dragstart', function(ev){
if (ev.dataTransfer) {
ev.dataTransfer.setData("text", ev.target.id);
}
else if (ev.originalEvent.dataTransfer){
ev.originalEvent.dataTransfer.setData("text", ev.target.id);
}
});
elem.bind('dragover', function(ev){
return true;
});
attrs.$set('draggable','true');
}
//draggable="true" ondragstart="drag(event)"
}
});
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data).cloneNode(true));
}
and CSS
.dragdrop-panel {
width:25vw;
margin-right: 5vw;
height: 100vh;
border: 3px solid red;
float: left;
}
.draggablewithjs {
width:50px;
height:50px;
background:blue;
}
.draggablewithangular {
width:50px;
height:50px;
background:red;
}
I have kendo grid separately in a fiddle,
I have delete function seprately in a fiddle
when I select ThreeDots in each row in the grid it should show delete in small popup and when you click delete confirmation popup should open up.
after I click yes it should delete that particular row and when I slect no it should not
delete.
trying to display my confirmation box for delete in jquery way..providing that code below
can you guys tell me how to combine my code.
providing code and fiddle below
http://jsfiddle.net/cjyh8Lyc/4/
https://jsfiddle.net/9qpLukrL/
<div class="sports">
<div class="kendopobUpBox kendoWindow kPopupConfirmationBox">
<div class="row kendoPopUpGridCollection kendoPopUpContent lineHeightInputs">
<div class="kendoContent">Are you sure you want to upload file</div>
</div><div class="clearFloat"></div>
<div class="row kendoPopUpFooter textAligncenterImp">
<button class="commonBtn" type="button" id ="playerDocumentOk" (click)="uploadFile($event,document.value)">OK</button>
<button class="clearBtn" type="button" id ="playerDocumentCancel" (click)="cancel()">Cancel</button>
</div><div class="clearFloat"></div>
</div>
</div>
$('.sports').show();
$('.sports').hide();
#runningDocumentsPopup .sports {
position: relative;
}
.sports .kPopupConfirmationBox {
display: block;
z-index: 3;
left: calc(50% - 175px);
width: 350px;
position: absolute;
}
.sports {
display: none;
}
Not sure what is the purpose of your having delete function in the separate since kendo has built in function that can remove the row.You can attach a javascript function to delete(your code in a separate file for.
<!DOCTYPE html>
<html>
<head>
<link href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.rtl.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.default.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.dataviz.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.dataviz.default.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.mobile.all.min.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2013.3.1119/js/kendo.all.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<div id="grid"></div>
<script>
var data = [
{ Id: 1, Name: "Decision 1", Position: 1 },
{ Id: 2, Name: "Decision 2", Position: 2 },
{ Id: 3, Name: "Decision 3", Position: 3 }
];
var dataSource = new kendo.data.DataSource({
//data: data,
transport: {
read: function(e) {
e.success(data);
},
update: function(e) {
e.success();
},
create: function(e) {
var item = e.data;
item.Id = data.length + 1;
e.success(item);
}
},
schema: {
model: {
id: "Id",
fields: {
Id: { type: "number" },
Name: { type: "string" },
Position: { type: "number" }
}
}
}
});
var grid= $("#grid").kendoGrid({
dataSource: dataSource,
scrollable: false,
editable : true,
navigatable: true,
toolbar: ["save","cancel", "create"],
columns: ["Id", "Name", "Position",{template:"<a class='mybutton'><span class=''></span>ThreeDots</a>"}]
}).data("kendoGrid");
grid.element.on('click','.mybutton',function(){
//var dataItem = grid.dataItem($(this).closest('tr'));
//alert(dataItem.Name + ' was clicked');
//built in kendo function to remove row
grid.removeRow($(this));
})
</script>
</body>
</html>
Jsbin Demo demo with delete confirmation
I am trying to implement ng ui grid but is when i embed it then whole page become horizontally scrollable.
Here is my code
<!DOCTYPE html>
<html lang="en" ng-app="app">
<head >
<title>ISS Core</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!--angular grids based ependency -->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-touch.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-animate.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/csv.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"></script>
<script src="http://ui-grid.info/release/ui-grid.js"></script>
<link rel="stylesheet" href="http://ui-grid.info/release/ui-grid.css" type="text/css">
<style>
.grid {
width: 100%;
height: 50vh;
}
/* angular grip based dependency */
/*$scope.getTableHeight = function() {
var rowHeight = 30; // your row height
var headerHeight = 30; // your header height
return {
height: ($scope.gridData.data.length * rowHeight + headerHeight) + "px"
};
};
$scope.$watchCollection('tableData', function (newValue, oldValue) {
angular.element(element[0].querySelector('.grid')).css($scope.getTableHeight());
});
*/ </style>
<script type="text/javascript">
var app = angular.module('app', ['ngTouch', 'ui.grid', 'ui.grid.exporter', 'ui.grid.selection']);
app.controller('MainCtrl', ['$scope', '$http', '$interval', '$q', function ($scope, $http, $interval, $q) {
var fakeI18n = function( title ){
var deferred = $q.defer();
$interval( function() {
deferred.resolve( 'col: ' + title );
}, 1000, 1);
return deferred.promise;
};
$scope.gridOptions = {
multiSelect : false,
exporterMenuPdf : false,
enableHiding : false,
enableColumnMenus : false,
enableHiding : false,
enableGridMenu : false,
gridMenuTitleFilter: fakeI18n,
columnDefs: [
{ name: 'name' },
{ name: 'gender', enableHiding: false },
{ name: 'company' }
],
gridMenuCustomItems: [
{
title: 'Rotate Grid',
action: function ($event) {
this.grid.element.toggleClass('rotated');
},
order: 210
}
],
onRegisterApi: function( gridApi ){
$scope.gridApi = gridApi;
// interval of zero just to allow the directive to have initialized
$interval( function() {
gridApi.core.addToGridMenu( gridApi.grid, [{ title: 'Dynamic item', order: 100}]);
}, 0, 1);
gridApi.core.on.columnVisibilityChanged( $scope, function( changedColumn ){
$scope.columnChanged = { name: changedColumn.colDef.name, visible: changedColumn.colDef.visible };
});
}
};
$http.get('https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/100.json')
.success(function(data) {
$scope.gridOptions.data = data;
});
}]);
</script>
</head>
<body>
<div class="container-fluid" >
<div class="row" id="grid" ng-controller="MainCtrl"> <h3 style="background-color: #0a4e8f;color:white;">Arrival Flight List</h3>
<div id="grid1" ui-grid="gridOptions" ui-grid-exporter ui-grid-selection class="grid"></div>
<div ng-if='columnChanged'>
Column Visibility Changed - name: {{ columnChanged.name }} visible: {{ columnChanged.visible }}
</div>
</div>
<br>
</div>
</body>
</html>
here is snap shot
how can remove this horizontal scrolling ?
I tried with
body{
overflow-x: hidden;
}
but it also remove scrolling from grid label.
changes in ng ui grid css worked for me
.grid {
width: 99.9%;
height: 50vh;
}
I have a jstree with check boxes.
When I select a node and click on button then I am geting the name of that node.
But now I would like to allow multiple selection so that I have assigned check box to jstree each elements.
No how can I get the c=value of selected nodes.
Also I want to allow search in that but I don't know how to do it.
I have enabled ssearch plugin.
Here is my code
<%#page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
<style>
html { margin:0; padding:0; font-size:62.5%; }
body { max-width:300px; min-width:100px; padding:20px 10px; font-size:14px; font-size:1.4em; }
h1 { font-size:1.8em; }
.demo { overflow:auto; border:1px solid silver; min-height:100px; }
</style>
<link rel="stylesheet" href="style.min.css" />
</head>
<body>
<div id="frmt" class="demo"></div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="jstree.min.js"></script>
<button>>></button>
<script>
$('#html').jstree();
$('#frmt').jstree({
'core': {
'data':[{"id":"NODE 1","text":"node 1","children":[{"id","node 2","text":"node2"}]}]
},
"checkbox" : {
"whole_node" : false,
"keep_selected_style" : true,
"three_state" : true,
"tie_selection" : false
}, "search" : {
"fuzzy" : true
},"plugins" : [ "checkbox", "search", "state", "wholerow", "types", "selectopens" ]
});
$('#frmt').on("changed.jstree", function (e, data) {
console.log(data.selected);
});
$('button').on('click', function () {
alert($('#frmt').jstree("get_selected"));
});
</script>
</body>
</html>
You can get it by
alert($('#frmt').jstree("get_checked"));
You can simply declare a array and loop over the checkboxes to identify which ones are checked and store it.
var checked_ids = [];
$("#frmt").jstree("get_checked",null,true).each
(function () {
checked_ids.push(this.id);
});
I'm trying to grab the <title> tag in Codemirror and set it's value as a input[type=text] value. However I keep getting an integer instead of the text.
In this sample it's "HTML5 canvas demo". Of course it changes.
DEMO
$(document).ready(function() {
var dest = $(".projectname");
var editorTitle = editor.getValue().search("<title>");
dest.val(editorTitle).val(dest.val().split(" ").join(""));
});
var delay;
// Initialize CodeMirror editor
var editor = CodeMirror.fromTextArea(document.getElementById('code'), {
mode: 'text/html',
tabMode: 'indent',
styleActiveLine: true,
lineNumbers: true,
lineWrapping: true,
autoCloseTags: true,
foldGutter: true,
dragDrop : true,
gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter']
});
// Live preview
editor.on('change', function() {
clearTimeout(delay);
delay = setTimeout(updatePreview, 300);
});
function updatePreview() {
var previewFrame = document.getElementById('preview');
var preview = previewFrame.contentDocument || previewFrame.contentWindow.document;
preview.open();
preview.write(editor.getValue());
preview.close();
}
setTimeout(updatePreview, 300);
.CodeMirror, iframe {
border: 1px solid black;
}
.CodeMirror, iframe, .projectname {
float: left;
}
.CodeMirror {
width: 50%;
}
iframe {
width: 49%;
height: 300px;
border-left: 0;
}
.projectname {
width: 99.4%;
}
<!DOCTYPE html>
<html>
<head>
<title>Codemirror: Grab Title Value</title>
<meta charset='utf-8'>
<meta name='viewport' content='initial-scale=1.0'>
<meta http-equiv='X-UA-Compatible' content='IE=9' />
<link type='text/css' rel='stylesheet' href='http://necolas.github.io/normalize.css/3.0.1/normalize.css'/>
<script type='text/javascript' src='http://code.jquery.com/jquery-latest.min.js'></script>
<script src='http://codemirror.net/lib/codemirror.js'></script>
<link rel='stylesheet' href='http://codemirror.net/lib/codemirror.css'>
<link rel='stylesheet' href='http://codemirror.net/addon/fold/foldgutter.css' />
<script src='http://codemirror.net/javascripts/code-completion.js'></script>
<script src='http://codemirror.net/javascripts/css-completion.js'></script>
<script src='http://codemirror.net/javascripts/html-completion.js'></script>
<script src='http://codemirror.net/mode/javascript/javascript.js'></script>
<script src='http://codemirror.net/mode/xml/xml.js'></script>
<script src='http://codemirror.net/mode/css/css.js'></script>
<script src='http://codemirror.net/mode/htmlmixed/htmlmixed.js'></script>
<script src='http://codemirror.net/addon/edit/closetag.js'></script>
<script src='http://codemirror.net/addon/edit/matchbrackets.js'></script>
<script src='http://codemirror.net/addon/selection/active-line.js'></script>
<script src='http://codemirror.net/keymap/extra.js'></script>
<script src='http://codemirror.net/addon/fold/foldcode.js'></script>
<script src='http://codemirror.net/addon/fold/foldgutter.js'></script>
<script src='http://codemirror.net/addon/fold/brace-fold.js'></script>
<script src='http://codemirror.net/addon/fold/xml-fold.js'></script>
<script src='http://codemirror.net/addon/fold/comment-fold.js'></script>
</head>
<body>
<div>
<input type="text" class="projectname" placeholder="Find title tag in editor and add what's inside it here..." />
</div>
<textarea id='code' name='code'><!doctype html>
<html>
<head>
<meta charset=utf-8>
<title>HTML5 canvas demo</title>
</head>
<body>
hello world!
</body>
</html></textarea>
<iframe id='preview'></iframe>
</body>
</html>
The integer you are getting is the index of "<" in the title tag. To get the title you can use regEx.
var content = editor.getValue();
var openTagIndex = content.search(/<title/);
var closeTagIndex = content.search(/<\/title>/);
var titleTag = content.slice(openTagIndex , closeTagIndex);
var editorTitle = titleTag.slice(titleTag.search(/>/) + 1);