I have a Kendo NumericTextBox. This text box allows positive and negative numbers.
As expected, negative numbers have a '-' prefix.
Is it possible to prefix a '+' on positive numbers?
I'm using ASP.NET MVC 5. Here's a code sample:
#Html.Kendo().NumericTextBoxFor(model => model.PositveNegative).Step(0.25f)
Any help with this would be greatly appreciated.
Thanks.
Abrar
You can use Change and Spin event handler.
Here are the code in javascript version.
$("#inputID").kendoNumericTextBox({
format: "+#",
change: function() {
var value = this.value();
if(value>0) this.options.format="+#";
else this.options.format="#";
},
spin: function() {
var value = this.value();
if(value>0) this.options.format="+#";
else this.options.format="#";
}
});
Using Mr Cocococo's answer as a starting point here is the MVC wrapper version for you:
#(Html.Kendo().NumericTextBox().Name("Test").Step(0.25f)
.Events(events => events.Change("Testing").Spin("Testing"))
)
<script>
function Testing()
{
var numeric = $("#Test").val();
if (numeric > 0)
{
$("#Test").kendoNumericTextBox({ format: "+##.##", decimals: 2 });
}
else
{
$("#Test").kendoNumericTextBox({ format: "##.##", decimals: 2 });
}
console.log(numeric);
}
</script>
This works with either typing or using the spinners and should give you the desired results.
Related
I am using Chart JS v.1.0.2. When I have one line and missing data, the tooltip shows x-label.
Does anyone know how to disable the tooltip when the point value is null?
Thanks very much!
If you don't mind a few console messages you can throw an error to exit out of the tooltip method for null values, like so
var myLineChart = new Chart(ctx).Line(data, {
tooltipTemplate: function (d) {
if (d.value === null)
throw '';
else
// else return the normal tooltip text
return d.label + ': ' + d.value;
}
});
The alternative would be to extend the chart or write a custom tooltips function
Fiddle - http://jsfiddle.net/y4zunrx6/
Using chart.js 2.3.0 and angular-chart.js 1.1.1, I solved the problem globally by resolving the ChartJsProvider provider in my angular.module('shared').config(...) function and specifying a custom label callback for the tooltips option:
ChartJsProvider.setOptions({
tooltips: {
enabled: true,
//mode: 'single',
callbacks: {
label: function (tooltipItem, data) {
const tooltip = data.datasets[tooltipItem.datasetIndex];
const value = tooltip.data[tooltipItem.index];
return value === 0 ? null : tooltip.label + ': ' + value;
}
}
}
});
By returning null the tooltip is not shown for that specific tooltipItem.
Reference: Chart.js Tooltip Configuration
I wanted to disable the tooltip all times. The version I'm using is 2.1.6, and I did it like this:
var options = {
tooltips : {
enabled: false
}
};
Note: This will not display tool-tip at all, use it only when you want to disable the tool-tip appearing.
Better approach is to customize tooltip template to show no data :
tooltipTemplate: "<%if (label && value){%><%=label%>: <%= value %><%} else {%> No data <%}%>"
I'm using Select2 now since 2 years and I really enjoy all dev made. however, version 3.5.x has his limit, so I'm moving to version 4.0, which give me headaches!
For your record, I'm using Select2 with large table (> 10.000 entries), so AJAX & infinite data (page set to 50 items).
With version 3.5.2, I can reproduce the underline match when searching for data (using formatSelection and query.term). Any idea how to make it with version 4.0.0 (function templateResult only passes result and not query anymore?
With version 3.x, you can add free entries using search value was not in the list (using createSearchChoice). Version 4.0 does not have this option, any idea how to make it again?
I try to replace the Select bar with an input bar (still using the select dropdown). It seems possible to force the adapter but I was unable to find how.
I need to add either a line (at row 1) or a button (floating to the right) to add new item (similar to createTag, but for an item). has someone made it already?
I'd highly recommend reading the release notes and the 4.0 release announcement when migrating from Select2 3.5.2 to Select2 4.0.0.
With version 3.5.2, I can reproduce the underline match when searching for data (using formatSelection and query.term).. any idea how to make it with v4.0.0 (function templateResult only pass 'result' and not 'query' anymore ?
This was removed in 4.0 because the results have been separated from the queries, so it didn't make sense to keep passing along the information. Of course, this doesn't mean you can't get the query and store it. All you would need to do is store the query, something like the following might work
var query = {};
var $element = $('#my-happy-select');
function markMatch (text, term) {
// Find where the match is
var match = text.toUpperCase().indexOf(term.toUpperCase());
var $result = $('<span></span>');
// If there is no match, move on
if (match < 0) {
return $result.text(text);
}
// Put in whatever text is before the match
$result.text(text.substring(0, match));
// Mark the match
var $match = $('<span class="select2-rendered__match"></span>');
$match.text(text.substring(match, match + term.length));
// Append the matching text
$result.append($match);
// Put in whatever is after the match
$result.append(text.substring(match + term.length));
return $result;
}
$element.select2({
templateResult: function (item) {
// No need to template the searching text
if (item.loading) {
return item.text;
}
var term = query.term || '';
var $result = markMatch(item.text, term);
return $result;
},
language: {
searching: function (params) {
// Intercept the query as it is happening
query = params;
// Change this to be appropriate for your application
return 'Searching…';
}
}
});
With version 3.x, you can add free entries using search value was not in the list (using createSearchChoice). V4.0 has not this option, any idea how to make it again ?
This can still be done in 4.0 using the tags option (set it to true). If you want to customize the tag, you can use createTag (similar to createSearchChoice).
var $element = $('#my-happy-select');
$element.select2({
createTag: function (query) {
return {
id: query.term,
text: query.term,
tag: true
}
},
tags: true
});
Simple way to underline matched results with select2 4.x
$element.select2({
escapeMarkup: function (markup) { return markup; }
,
templateResult: function (result) {
return result.htmlmatch ? result.htmlmatch : result.text;
}
,
matcher:function(params, data) {
if ($.trim(params.term) === '') {
return data;
}
if (typeof data.text === 'undefined') {
return null;
}
var idx = data.text.toLowerCase().indexOf(params.term.toLowerCase());
if (idx > -1) {
var modifiedData = $.extend({
'htmlmatch': data.text.replace(new RegExp( "(" + params.term + ")","gi") ,"<u>$1</u>")
}, data, true);
return modifiedData;
}
return null;
}
})
I'm close but still can't quite get this to work.
I have a new custom property editor that is loading correctly and is doing almost everything expected until I try to set the text field to be a jQuery UI element.
As soon as I add a directive in Angular for setting it to call the jQuery UI datepicker function, I get the following error suggesting it hasn't loaded the jQueryUI script library correctly:
TypeError: Object [object Object] has no method 'datepicker'
Trouble is, I can't see where I should be adding it as the logical places (to my mind, at least) seem to make no difference. Here is the code in full:
function MultipleDatePickerController($scope, assetsService) {
//tell the assetsService to load the markdown.editor libs from the markdown editors
//plugin folder
//assetsService
// .load([
// "http://code.jquery.com/ui/1.10.4/jquery-ui.min.js"
// ])
// .then(function () {
// //this function will execute when all dependencies have loaded
// });
//load the seperat css for the editor to avoid it blocking our js loading
assetsService.loadCss("/css/jquery-ui.custom.min.css");
if (!$scope.model.value) {
$scope.model.value = [];
}
//add any fields that there isn't values for
//if ($scope.model.config.min > 0) {
if ($scope.model.value.length > 0) {
for (var i = 0; i < $scope.model.value.length; i++) {
if ((i + 1) > $scope.model.value.length) {
$scope.model.value.push({ value: "" });
}
}
}
$scope.add = function () {
//if ($scope.model.config.max <= 0 || $scope.model.value.length < $scope.model.config.max) {
if ($scope.model.value.length <= 52) {
$scope.model.value.push({ value: "" });
}
};
$scope.remove = function (index) {
var remainder = [];
for (var x = 0; x < $scope.model.value.length; x++) {
if (x !== index) {
remainder.push($scope.model.value[x]);
}
}
$scope.model.value = remainder;
};
}
var datePicker = angular.module("umbraco").controller("AcuIT.MultidateController", MultipleDatePickerController);
datePicker.directive('jqdatepicker', function () {
return {
restrict: 'A',
require: 'ngModel',
link: function (scope, element, attrs, ngModelCtrl) {
$(function () {
element.datepicker({
dateFormat: 'dd/mm/yy',
onSelect: function (date) {
scope.$apply(function () {
ngModelCtrl.$setViewValue(date);
});
}
});
});
}
}
});
I faced the same problem when adapting a jQuery Date Range Picker for my Date Range Picker package for Umbraco 7. It's frustrating! The problem (I think) is that Angular's ng-model listens for "input" changes to trigger events and so doesn't pick up on a jQuery triggered event.
The way around it I found was to force the input event of the element you wish to update to fire manually, using jQuery's .trigger() event.
For example, the date picker I was using had this code for when a date was changed:
updateInputText: function () {
if (this.element.is('input')) {
this.element.val(this.startDate.format(this.format) + this.separator + this.endDate.format(this.format));
}
},
I just adapted it to force an input trigger by adding this.element.trigger('input') to the code block, so it now reads:
updateInputText: function () {
if (this.element.is('input')) {
this.element.val(this.startDate.format(this.format) + this.separator + this.endDate.format(this.format));
this.element.trigger('input');
}
},
This forces Angular to "see" the change and then ng-model is updated. There may well be a more elegant way (as I'm an Angular newbie), but I know this worked for me.
Got it. This is probably a bit of a hack, but it's simple and effective so it's a win nonetheless.
The assetsService call is the key, where I've put code into the deferred .then statement to call jQueryUI's datepicker on any item that has the "jqdp" CSS class:
//tell the assetsService to load the markdown.editor libs from the markdown editors
//plugin folder
assetsService
.load([
"/App_Plugins/Multidate/jquery-ui.min.js"
])
.then(function () {
//this function will execute when all dependencies have loaded
$('.jqdp').datepicker({ dateFormat: 'dd/mm/yy' });
});
I've then gone and added that class to my view:
<input type="text" jqdatepicker name="item_{{$index}}" ng-model="item.value" class="jqdp" id="dp-{{model.alias}}-{{$index}}" />
Finally, I've added a directive to ensure that dynamically-added items also display a datepicker:
datePicker.directive('jqdatepicker', function () {
return function (scope, element, attrs) {
scope.$watch("jqdatepicker", function () {
try{
$(element).datepicker({ dateFormat: 'dd/mm/yy' });
}
catch(e)
{}
});
};
});
As I said, this is possibly a bit hacky but it achieves the right result and seems like a simple solution.
I want to create "CRUD" functions by calling a modal form by clicking on a row in Datatables.
I've been at this for hours traversing through each step of my code and it seems I'm getting a conflict between my JQ-UI and Datatables. I found several examples, including the Datatables example for "live" functions, where you can initialize a table and call a simple jquery function.
I'm using:
code.jquery.com/jquery-1.9.1.js
code.jquery.com/ui/1.10.2/jquery-ui.js
../DataTables-1.9.4/media/js/jquery.dataTables.js
This example will give me the cursor, then makes the table "jump" across the page.
Does anyone have a working example or a fiddle I can experiment with?
function openDialog() {
$("#dialog-modal").dialog({
height: 140,
modal: true
});
}
/* Init DataTables */
$('#example').dataTable();
/* Add events */
$('#example tbody tr').on('click', function () {
$('#example tbody tr').css('cursor', 'pointer');
var sTitle;
var nTds = $('td', this);
var sBrowser = $(nTds[1]).text();
var sGrade = $(nTds[4]).text();
/*
if (sGrade == "A")
sTitle = sBrowser + ' will provide a first class (A) level of CSS support.';
else if (sGrade == "C")
sTitle = sBrowser + ' will provide a core (C) level of CSS support.';
else if (sGrade == "X")
sTitle = sBrowser + ' does not provide CSS support or has a broken implementation. Block CSS.';
else
sTitle = sBrowser + ' will provide an undefined level of CSS support.';
*/
openDialog();
//alert( sTitle )
});
A little sleep and another stab at this yielded a solution that at least solves the Datatable Dialog issue, I'll have to assume that any other issues I was having lies the other add-ins that I included. So to me this is solved.
The answer was 99% in this post - thanks to the author for the great working example.
I modified their link solution, combined with Datatables "live" solution example with variables, and was able to successfully pass data to a working dialog that works with pagination as the previous link explains.
This set up would allow me to create JQuery-UI Modal Forms, pass the ID from mySQL table column, and execute the form that's handing the Server Side PHP CRUD functions I needed.
(I can't take credit for any part of this, other than time spent making sure it worked).
The working example is taken straight from Datatables "live events" example, should be easy to drop in if you remove the sAjaxsource and go with a plain Datatable..
$('#example').dataTable( {
"bProcessing": true,
"bServerSide": true,
"bJQueryUI": true,
"bStateSave": true,
"sPaginationType": "full_numbers",
"sAjaxSource": " /*your data source page here*/ "
} );
/* Add events */
$("body").on("click", "#example tbody tr", function (e) {
e.preventDefault();
var nTds = $('td', this);
//example to show any cell data can be gathered, I used to get my ID from the first coumn in my final code
var sBrowser = $(nTds[1]).text();
var sGrade = $(nTds[4]).text();
var dialogText="The info cell I need was in (col2) as:"+sBrowser+" and in (col5) as:"+sGrade+"" ;
var targetUrl = $(this).attr("href");
$('#table-dialog').dialog({
buttons: {
"Delete": function() {
window.location.href = targetUrl;
},
"Cancel": function() {
$(this).dialog("close");
}
}
});
//simple dialog example here
$('#table-dialog').text(dialogText ).dialog("open");
});
Im currently using input type number, but as ie9 does not support this type, does anyone have any good alternatives(and example)? im using ASP.NET MVC4 if that helps
The jQuery UI Spinner Widget is an alternative. You could combine it with Modernizr to only use the jQuery UI Spinner Widget with browsers that natively doesn't support number as input type
<script>
$(function () {
if (!Modernizr.inputtypes.number) {
$("input[type=number]").spinner();
};
});
</script>
Have a look at this jsFiddle demonstration using Modernizr
Yes basically give your input field a class as jqNos
And use this script:
<script language="javascript" type="text/javascript">
$(".jqNos").each(function () {
$(this).keypress(function (e) {
var code = $.browser.mozilla ? e.charCode : e.keyCode;
if (((code >= 48) && (code <= 57)) || code == 0) {
return true;
}
else {
return false;
}
})
});
</script>
This script will allow only numbers in your text box.