If I set min value for the date picker, it does not display dates less than min date when it's opened.
My requirement is that dates less than min date should be shown in the date picker, but they should be disabled.
You can make it with CSS styles and using custom content in Kendo datepicker.
HTML:
<input id="datepicker" style="width:150px;" />
CSS:
.disabledDay {
display: block;
overflow: hidden;
min-height: 22px;
line-height: 22px;
padding: 0 .45em 0 .1em;
cursor:default;
opacity: 0.5;
}
JavaScript:
$(document).ready(function() {
disabledDaysBefore = [
+new Date("10/20/2014")
];
var p = $("#datepicker").kendoDatePicker({
value: new Date(),
dates: disabledDaysBefore,
month: {
content: '# if (data.date < data.dates) { #' +
'<div class="disabledDay">#= data.value #</div>' +
'# } else { #' +
'#= data.value #' +
'# } #'
},
open: function(e){
$(".disabledDay").parent().removeClass("k-link")
$(".disabledDay").parent().removeAttr("href")
},
}).data("kendoDatePicker");
});
See demo:
JSFIDDLE
All credit to devlero on this one, I was able to convert this to Razor Syntax, if anyone would like to use that instead.
#(Html.Kendo().DatePicker()
.Name("datepicker")
.Value(DateTime.Today)
.Events(e => e.Open("onOpen"))
.MonthTemplate("# if (data.date < disabledDaysBefore) { #" +
"<div class='disabledDay'>#= data.value #</div>" +
"# } else { #" +
"#= data.value #" +
"# } #")
.HtmlAttributes(new { style = "width: 150px;" })
)
$(document).ready(function () {
disabledDaysBefore = [
+new Date("10/20/2014")
];
});
function onOpen() {
$(".disabledDay").parent().removeClass("k-link")
$(".disabledDay").parent().removeAttr("href")
}
Related
I need to be able to resize, rotate, and move an image. I have managed to find the code below that works but I need to either have a rotation point on the image where I can use it to rotate it with mouse or have the slider to move with the image. The problem starts when the image and the slider are too far apart. I would prefer to have the slider as part of the image if possible, somehow connected. Many thanks in advance for your help. The image is a protractor where it needs to be moved and rotated to measure angles.
Below is my codes
HTML
<!-- Mockup img downloaded from www.magicmockups.com -->
<!-- Change the mockup image to any image of your choice in the img tag bellow. -->
<!-- XXX: WARNING: When the pen is saved, the movable div is RESET to the original
position/size/rotation. -->
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
</div>
<div style="margin-top: 20px">ROTATION SLIDER:</div>
<div id="slider" style="display:inline-block; width: 50%; margin: 10px 0 10px1 0px;">
</div>
<div style="display: inline-block; position: relative;">
<!-- CHANGE IMG TO YOUR IMG -->
<div id="movable" >https://link to image</div>
Javascript
var currentUnit = "pixels"
$( function() {
$("input[type=radio]").checkboxradio();
$("#slider").slider({
min: -360,
max: 360,
slide: function(event, ui) {
// Set the slider's correct value for "value".
$(this).slider('value', ui.value);
$("#movable").css('transform', 'rotate(' + ui.value + 'deg)')
updateText()
}
});
$("#movable").draggable({
drag: function(event, ui) {
updateText()
}
})
$("#movable").resizable({
resize: function(event, ui) {
updateText()
}
})
// Init the text.
updateText();
});
function getPixelDimensions() {
precision = 100
// Save current transform (rotation).
originalTransform = $("#movable").css('transform')
// Remove rotation to make sure position() is the CSS position, not the bounding rect
position.
$("#movable").css('transform', 'rotate(0deg)')
position = $("#movable").position()
// Restore rotation.
$("#movable").css('transform', originalTransform)
dim = {
top: Math.round(position.top * precision) / precision,
left: Math.round(position.left * precision) / precision,
width: Math.round($("#movable")[0].clientWidth * precision) / precision,
height: Math.round($("#movable")[0].clientHeight * precision) / precision
}
return dim;
}
function getPercentageDimensions() {
}
function updateText() {
if(currentUnit == "pixels") {
dim = getPixelDimensions();
sufix = "px"
} else {
dim = getPercentageDimensions();
sufix = "%"
}
$(".d").remove()
for(prop in dim) {
$("#dimensions").append( "<div class='d'>" + prop + ": " + dim[prop] + sufix + "</div>");
}
$("#dimensions").append( "<div class='d'>rotate: " + $("#slider").slider("value") +
"deg</div>");
//console.log($("#outer").position().top)
}
$('input').change(function() {
if(this.id == "radio-1") {
currentUnit = "pixels";
updateText();
} else if(this.id.search("radio") != -1){
currentUnit = "percentage";
updateText();
}
})
function previewFile() {
var preview = document.querySelector('img'); //selects the query named img
var file = document.querySelector('input[type=file]').files[0]; //sames as here
var reader = new FileReader();
reader.onloadend = function () {
preview.src = reader.result;
}
if (file) {
reader.readAsDataURL(file); //reads the data as a URL
} else {
preview.src = "";
}
}
CSS
#movable {
position: absolute;
text-align: center;
/*Manually change values here.*/
width: 400px;
height: 400px;
top: 0px;
left: 0px;
transform: rotate(0deg);
}
In the example below, the split button should remove all semicolons and create a new editor with the following text until the next semicolon.
However, there is an odd bug where all editors except the first one have the cursor flashing at the end of the line, but only the last field has actually got the cursor (e.g. typing after pressing split will put text in the last field). How do I prevent this?
$(function() {
function aceinit() {
var e = ace.edit(this),
t = $(this);
e.setTheme("ace/theme/sqlserver");
e.setOptions({
maxLines: Infinity,
highlightActiveLine: false,
tabSize: 8,
useSoftTabs: false,
fixedWidthGutter: true
});
e.getSession().setMode("ace/mode/sql");
e.getSession().on('change', function() {
$('.output').css('opacity', '0.3');
$('.markdown-toggle').hide();
});
e.commands.bindKey("Tab", null);
e.commands.bindKey("Shift-Tab", null);
e.setAutoScrollEditorIntoView(true);
return e;
}
$('.ace').each(function() {
aceinit.call(this);
});
$('body').on('click', '.plus', function() {
$('main').children().slice(0, 3).clone().insertBefore($(this));
$('.ace').each(function() {
aceinit.call(this);
});
var b = $(this).prev().prev('.batch');
var e = aceinit.call(b.find('.ace').get(0));
e.setValue("");
e.resize();
e.focus();
b.find('.results').html('');
});
$('body').on('click', '.split', function() {
var b = $(this).prev('.batch');
e = ace.edit(b.find('.ace').get(0));
s = ';';
b.find('.results').html('');
setTimeout(function() {
var split = e.getValue().split((new RegExp(s, 'im')));
$.each(split, function(i, v) {
if (v.trim()) {
if (i > 0) {
if (!b.find('.ace').filter(function() {
return ace.edit(this).getValue() === '';
}).length) {
b.next().next('.plus').click();
}
b = b.nextAll().eq(2);
e = ace.edit(b.find('.ace').get(0));
}
e.setValue(split[i].replace(/\s+$/, '').replace(/^\s+/, ''), 1);
}
});
}, 0);
});
});
.batch {
flex-direction: column;
min-width: 0;
overflow-x: hidden;
margin-left: 0.5em;
}
.query.ace {
border: 1px solid #aaa;
height: 1em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://dbfiddle.uk/ace/ace.js"></script>
<main>
add batch
<div class="batch" style="display: flex;">
<div class="ace query">text1
;
text2
;
text3
;
text4
;
text5
;</div>
</div>
split
add batch
</main>
this happens because you are calling
e.focus();
after creating each editor, call it only for the one which you want to be focused.
I'm new here, I'm working with Angular UI-Grid, and I have a small problem. The grid that I handle has a tree structure, that works perfect. But to make it easier to follow that structure for the user, I want to implement different colors per level.
I have created this Plunker with two examples, the first is how you should see the different colors per level, and the second is how it behaves today. Has anyone done something like this or do you have any idea how to fix it?
app.js:
var app = angular.module('app', ['ui.grid','ui.grid.treeView']);
app.controller('MainCtrl', ['$scope', '$http','uiGridTreeViewConstants', function ($scope, $http, uiGridTreeViewConstants) {
$scope.myData = [
{"ubi_id":321,"ubi_nom":"America","ubi_pad_id":null,"ubi_tip_id":1,"$$treeLevel":0},
{"ubi_id":322,"ubi_nom":"Sudamerica","ubi_pad_id":321,"ubi_tip_id":2,"$$treeLevel":1},
...
];
var rowtpl = '';
rowtpl += '<div ng-class="{\'nivelGrilla-{{row.entity.$$treeLevel}}\': row.entity.$$treeLevel != \'undefined\' }">';
rowtpl += '<div ng-repeat="(colRenderIndex, col) in colContainer.renderedColumns track by col.colDef.name"';
rowtpl += 'class="ui-grid-cell" ng-class="{ \'ui-grid-row-header-cell\': col.isRowHeader }" ui-grid-cell>';
rowtpl += '</div></div>';
$scope.gridOptions = {
data:'myData',
rowTemplate:rowtpl,
};
}]);
css:
.nivelGrilla-0{
background-color: #254158;
color: white;
}
.nivelGrilla-1{
background-color: #3F6F96;
color: white;
}
html:
<div id="grid1" ui-grid="gridOptions" ui-grid-tree-view class="grid"></div>
I found a solution, the div that contains the entire row, makes a call to a function that returns the name of the class according to the row level.
Here's a plnkr with my solution
js:
var rowtpl = '';
rowtpl += '<div class=\"{{grid.appScope.rowLevel(row)}}\">';
rowtpl += '<div ng-repeat="(colRenderIndex, col) in colContainer.renderedColumns track by col.colDef.name"';
rowtpl += 'class="ui-grid-cell" ng-class="{ \'ui-grid-row-header-cell\': col.isRowHeader }" ui-grid-cell>';
rowtpl += '</div>';
rowtpl += '</div>';
$scope.gridOptions2 = {
data:'myData',
rowTemplate:rowtpl,
};
css:
.ui-grid-row .ui-grid-cell {
background-color: inherit !important;
color: inherit !important;
}
.ui-grid-row .ui-grid-cell.ui-grid-cell {
background-color: #f0f0ee;
border-bottom: solid 1px #d4d4d4;
}
.rowLevel-0{
background-color: #254158;
color: white;
}
.rowLevel-1{
background-color: #3F6F96;
color: white;
}
.rowLevel-2{
background-color: #5289B6;
}
You can specify a 'cellClass' within your grid's 'columnDefs' and switch the rows according to the tree level. For example:
$scope.gridOptions = {
data:'myData',
columnDefs: [
{ field: 'Id', name: 'Ubi Id'},
{ field: 'Country', name: 'Ubi Nom'},
cellClass: function(grid, row, col, rowRenderIndex, colRenderIndex) {
switch(row.treeLevel)
{
case 0:
return 'red';
case 1:
return 'blue';
case 2:
return 'green';
default:
break;
}
}
]
};
I am using laravel 5.2 framework. I have successfully implemented datatables. By application design requirement, how to implement tables within the datatable cell?
Its not really directly possible unless you define your own table and style it with css as follows
styes for my inner table defined on my view
<style type="text/css">
h3 {
color: steelblue;
}
.subtabletable {
display: table;
width: 100%;
}
.subtable .row {
display: table-row;
}
.subtable .header {
font-weight: bold;
}
.subtable .cell {
display: table-cell;
padding: 5px;
}
</style>
Definition of my table in Html
<table id="example" class="display responsive nowrap" cellspacing="0" width="100%">
My javascript
$(document).ready(function () {
var request = $.ajax({
url: "sort_respones",
type: "GET",
dataType: "html"
});
request.done(function(msg){
dynamicdatatable(msg);
});
});
function dynamicdatatable(mydata){
var myData=JSON.parse(mydata) ;
console.log(myData);
var myColumns = [
{
title : "Employee",
data : "question"
},
{
title : "Type",
data : "response_type"
},
{
title : "Responses",
data : null,
render : function (data, type, row, meta) {
var subtableHtml = "<div class='subtable'>";
subtableHtml += "<div class='row header'><span class='cell'>Response</span><span class='cell'>Occurances</span></div>";
for (var i = 0; i < data.projects.length; i++) {
subtableHtml += "<div class='row'>";
subtableHtml += "<span class='cell'>" + data.projects[i].project + "</span>";
subtableHtml += "<span class='cell'>" + data.projects[i].role + "</span>";
subtableHtml += "</div>";
};
subtableHtml += "</div>";
return subtableHtml;
}
}
];
$('#example').dataTable({
searching: false,
paging: false,
data : myData,
columns : myColumns,
dom: 'Bfrtip',
buttons: [
'copyHtml5',
'excelHtml5',
'csvHtml5',
'pdfHtml5'
]
});
}
My controller function
function sort_respones(Request $request){
$results = DB::select( DB::raw("SELECT
questions.id,
questions.question,
questions.client_id,
surveys_session_answer_transactions.created_at,
surveys_session_answer_transactions.answer_text,
surveys_session_answer_transactions.answer_id,
surveys_session_answer_transactions.question_text,
questions.response_type_id,
Count(surveys_session_answer_transactions.answer_id) AS Occurances,
checkresponses.response,
radioresponses.response,
rating_bar_responses.maximum_value,
response_types.response_type
FROM
questions
INNER JOIN surveys_session_answer_transactions ON surveys_session_answer_transactions.question_id = questions.id
LEFT OUTER JOIN checkresponses ON checkresponses.question_id = surveys_session_answer_transactions.question_id AND checkresponses.id = surveys_session_answer_transactions.answer_id
LEFT OUTER JOIN rating_bar_responses ON rating_bar_responses.question_id = surveys_session_answer_transactions.question_id
LEFT OUTER JOIN radioresponses ON radioresponses.question_id = surveys_session_answer_transactions.question_id AND radioresponses.id = surveys_session_answer_transactions.answer_id
INNER JOIN response_types ON surveys_session_answer_transactions.response_type_id = response_types.type_id
where questions.client_id=:somevariable
GROUP BY
surveys_session_answer_transactions.question_id,
surveys_session_answer_transactions.answer_id"), array(
'somevariable' => "2",
));
//echo '<pre>'.print_r($results,1) .'</pre>';
// echo '<pre>';
// var_dump($results);
// echo '</pre>';
$new_question=0;
$dataUsage=[];
$final_array=[];
$responses=[];
$old_response="";$old_response_type="";
foreach ($results as $key) {
# code...
if ($new_question!=$key->id) {
# code...
if (isset($dataUsage[0])) {
# code...
array_push($final_array, array('question' =>$old_response,'response_type'=>$old_response_type,'projects' => ($responses)));
$responses=[];
//array_push($final_array, $dataUsage);
$dataUsage=[];
$responses_string="<table>";
}
array_push($dataUsage, array('question' => $key->question,'response_type'=>$key->response_type ));
$old_response=$key->question;
$old_response_type=$key->response_type;
// $responses_string='<TR><TD>'.$key->answer_text.'</TD><TD>: '.$key->Occurances.'<br></TD></TR>';
array_push($responses,array('project' => $key->answer_text, 'role' => $key->Occurances ));
}else{
// $responses_string=$responses_string.'<TR><TD>'.$key->answer_text.'</TD><TD> :'.$key->Occurances.'<br></TD></TR>';
array_push($responses,array('project' => $key->answer_text, 'role' => $key->Occurances ));
}
$new_question=$key->id;
}
array_push($final_array, array('question' =>$old_response,'response_type'=>$old_response_type,'projects' => ($responses)));
// echo '<pre>';
// var_dump($final_array);
// echo '</pre>';
// echo json_encode( array('data' =>$final_array ));
// $myData = array( array('employee' =>'Bob Smith', 'projects'=> array(array('project'=>'Alpha', 'role'=>'leader' ), array('project'=>'Alpha1', 'role'=>'leader1' ),array('project'=>'Alpha', 'role'=>'leader' ))));
echo json_encode($final_array);
}
of course don't forget the necessary routes
Can we add a if Condition inside the column while describing the columns of the grid? Whats wrong in this code
I want to display one button in the grid under a column ,if length of the text exceeds more than 40char.
I am trying to put an if condition if the content/data is less than 40 char then display the content else display a button , On click of button open a pop-up to display the complete content inside that pop-up?
How we can put the command conditionally to display the button?
Here is my code
columns: [{
field: "id",
title: "ID",
width: "100px"
}, // fields in the grid
{
field: "name",
title: "Name",
width: "100px"
}, {
field: "remarks",
title: "Remarks",
width: "160px", // under this column button will be displayed in each
var length = 40;
if (data.remarks.length > length) { //here this condition seems to be wrong, is there any other way to display the button for this condition
command: {
name: "remarks",
text: "Remarks",
click: function (e) {
var tr = $(e.target).closest("tr");
var data = this.dataItem(tr);
var win = $('#remarksWindow');
win.html(data.remarks);
if (!win.data('kendoWindow')) {
win.kendoWindow({
width: '600px',
height: '200px',
title: 'Remarks',
actions: ['Close']
});
}
win.parent().css({
top: e.pageY - 50,
left: e.clientX - 640,
width: '600px',
height: '200px'
});
win.data('kendoWindow').open(); // open the pop-up which contains the data
return false;
}
}
}
}
},
First of all, you have a syntax error in JavaScript. Note that you can't put statements or declarations between the properties of an object:
var obj = {
a: 1,
if (true) {
b: 2;
}
}
Or
var obj = {
a: 1,
var b = 1;
}
The examples above doesn't works. So in your column property you have to use a template property:
{
field: "remarks",
title: "Remarks",
width: "160px",
template: "" // <- here goes your logic
}
So a simple template can be set as a string containing html with JavaScript logic, e.g.:
# if (remarks.length > 40) { # <input type='button' class='btn-remarks' /> # } #
Yes, you will have to set the button html by yourself. There is no way to add a condition to a command button(and that is a shame, actually).
You can check how template works here.
Then your column item should be:
{
field: "remarks",
title: "Remarks",
width: "160px",
template: "# if (remarks.length > 40) { # <input type='button' class='remarks' /> # } #"
}
Then you have to set the event for all your buttons(probably in the dataBound event):
$("#yourGrid").on("click", ".btn-remarks", function()
{
// all your click logic here
});
Give it a try and tell me what happens.
Hopefully this dojo is what you are looking for: http://dojo.telerik.com/ETora
(I have used one of Telerik's grid demos and modified to show you the principles)
The functionality you are looking for can be achieved by two means:
1) Apply a client Template to the column
2) Add a databound event that then hooks up the buttons
columns:[ {
field: "CompanyName",
title: "Company Name",
template: "#= displayTextorButton(data.CompanyName) #"
}]
function displayTextorButton(data){
var retString = '';
console.log(data);
if(data !== null && data !== undefined)
{
if(data.length > 20)
{
retString = ' <button type="button" class="btn btn-xs btn-primary"' +
'data-toggle="popover" data-placement="auto right" data-container="body" ' +
'data-content="' + kendo.htmlEncode(data) + '"' +
'data-title="Running Log Information" data-trigger="click" data-role-me="content-popover" > <span class="glyphicons glyphicons-pencil"></span> View</button>';
}
else
{
retString = '<span>' + data + '</span>';
}
}else
{
retString = '<span> - </span>';
}
return retString;
}
so the first bit I have done is added a template to the Company Name column that checks if the name is more than 20 characters if it is then it will display a button if it isn't then it will display the text as normal.
function(e){
$('button[data-role-me="content-popover"]').popover({ trigger: "focus", html: true });
}
I then hook up a databound event to the grid to then attach the event features to the "pop up" in my sample
Also note I have hooked in the bootstrap features just to make things a little easier for the demo. So this is using their popover feature. You could modify this code to work with your window.
Any issues let me know.
This is the kendo grid code
{ field: "marks", title: "marks",width: "160px",
template: function(dataItem) {
var marks = dataItem.marks;
var retString = '';
if(marks !== null && marks !== undefined)
{
if(marks.length > 40)
{
marks1 = marks.substring(0, 40)+'...';
retString1 ='<span>'+ marks1 +'</span>';
retString = retString1 + ' <button id="marksButton" type="button"' +
'data-toggle="popover" data-placement="auto right" data-container="body" ' +
'data-content="' + kendo.htmlEncode(addlRemarks) + '"' +
'data-title="marks" data-trigger="click" data-role-me="content-popover" > marks</button>';
}
else
{
retString = '<span>' + marks + '</span>';
}
}else
{
retString = '<span> - </span>';
}
return retString;
}
And its being called from a HTMl
<div class="panel-body" ng-show="accOpen[$index]">
<!-- Marks TABLE -->
<div marks-table=""
accordion-flag="accOpen[$index]"
name="name"
id="id"
>
</div>
</div>