We Keep Coding

JavaScript: dynamically changing values of data range rule

I have an input field that either allows negative and positive numbers, or only positive numbers based on a value of a select.
When changing the value of the select option, I'm trying to modify the rule of the input field like this:
const id = '#myId';
$(id).attr("data-val-range-min", -10000);
removeRules(id);
addRules(id);
$(id).change(); // trying to trigger the validation of the rule
The removeRules is a function:
let removeRules = function removeRules(field) {
$(field).rules('remove');
}
And so is the addRules:
let addRules = function addRules(field) {
let $field = $(field);
if ($field.attr("data-val-required")) {
$field.rules("add", {
required: true,
messages: {
required: $field.attr("data-val-required")
}
});
}
if ($field.attr("data-val-number")) {
$field.rules("add", {
number: true,
messages: {
number: $field.attr("data-val-number")
}
});
}
if ($field.attr("data-val-range")) {
$field.rules("add", {
range: [$field.attr("data-val-range-min"), $field.attr("data-val-range-max")],
messages: {
range: $field.attr("data-val-range")
}
});
}
}
When I change the select in the UI, the data-val-range-min attribute is set correctly, but the rule is not reapplied.
Only when I manually click into the input-field and deselect it again, the rule is applied...
What am I doing wrong here?
Thanks in advance

Only when I manually click into the input-field and deselect it again, the rule is applied...
There's a validation trigger you expect that isn't part of the plugin.
By default, this plugin triggers validation on:
onfocusout - when you leave an element
onkeyup - when you're typing inside a text box
onclick - interactions with radio, checkbox, and select
Adding and removing the rules though is not enough... you'll also need to force a validation test after adding or removing the rule.
Simply call the .valid() method on the element or form when you want to programmatically force validation. Since your OP contains zero HTML markup or working demo, I cannot be more specific with a solution.

How to change styling of cells that has been edited in ag-Grid?

I want to mark cells who has been edited so the user can see which cells have been touched and altered. I know there is a cell flash option, but that just changes the background colors for a bit. What I want is a background color change when an edit has been done.
Cannot seem to find any specific documentation on accessing for example the html element or the styling of affected cell.
Anyone got any ideas?

You can use ColDef.onCellValueChanged to detect if something changes and update the cell style accordingly using GridApi.refreshCells()
const columnDefs = [{
headerName: "Athlete",
field: "athlete",
onCellValueChanged: this.markAsDirty
},...]
...
private markAsDirty(params: ICellRendererParams) {
params.colDef.cellClass = (p) =>
p.rowIndex.toString() === params.node.id ? "ag-cell-dirty" : "";
params.api.refreshCells({
columns: [params.column.getId()],
rowNodes: [params.node],
force: true // without this line, the cell style is not refreshed at the first time
});
}
In your css file
:host ::ng-deep .ag-cell-dirty {
background-color: rgba(255, 193, 7, 0.5) !important;
}
You may also want to use defaultColDef if you want this behavior applied to all columns
this.gridOptions = {
defaultColDef: {
editable: true,
onCellValueChanged: this.markAsDirty
},
};
Live Demo

I did this on a project I was working on.
There is a cellClass property that you can define in your column definitions (https://www.ag-grid.com/javascript-grid-cell-styles/) and it can take a callback function with params: CellClassParams.
So try doing:
cellClass: (params: CellClassParams) => {
// you need to have a handle on the original untouched data
// See if the original value does not equal the modified value in params
// For shortness, I will write pseudocode
if (originalValue !== modifiedValue) {
return 'ag-cell-was-modified';
}
}
If many columns are editable, you may want to use a re-usable function for cellClass for each column.
That should apply the class ag-cell-was-modified conditionally whether the cell was modified or not and in your style.scss or main stylesheet, you can add:
.ag-cell-was-modified {
background: red;
}
Of course, if you are using SASS, you can place this class definition in somewhere more appropriate.

Non editable kendo grid ID

I'm new using kendo grid UI, i'm trying to make a non editable column (when updating) using a simple code :
schema: {
id: 'ID',
fields: {
id: { editable: false }
}
}
This default schema, makes by default non editable id column, and i can't even create a new row with id .
I want to make it non editable (when updating) but i want the possibility to create a row and assign an id from user (when creating).
Any ideas ?
Edit :
PS : the proprety is not related to only id, it can be on every column (can't update but can create)

The editable required a function instead of a value.
columns: [
{ field: 'value', editable: function () { return false; } }
],
Checkout here:
https://dojo.telerik.com/oROJayAd

I always doubt about that model editable option. It never really worked for me. It should have something very deep in the setup to make it work which I never realized what it. So this is a way to acomplish what you need that I know it indeed works: To cancel the edit event. Check it out:
edit: function(e) {
// Cancels a new row
if (arguments, e.model.isNew()) {
this.cancelRow(e.container.parent());
}
else { // Cancels a cell editing
this.closeCell(e.container);
}
}
Demo
Now, if you like to add a condition in that event based on what you have set in your model, you can access it within event as well:
edit: function(e) {
let currentColumn = this.options.columns[e.container.index()].field,
model = this.dataSource.options.schema.model.fields[currentColumn];
if (model.editable === false) {
// Cancels a new row
if (arguments, e.model.isNew()) {
this.cancelRow(e.container.parent());
}
else { // Cancels a cell editing
this.closeCell(e.container);
}
}
}
Demo
You can add an option yourself in the model to set if the column can be updated or only created, and handle that information inside the event, canceling the editing whenever you like.

This is how I just did it, though there are other ways.
In columns option if you remove the field option from a column it doesn't know from where to bind it.
Then use the template option to show(bind) the id. Thus making it readonly
columns: [
{
title: 'Id', width: "40px",
template: "#= id #",
},
...]

Set a default value on Jquery progress bar

I'm using this Jquery plugin
http://t.wits.sg/misc/jQueryProgressBar/demo.php#
and I just want to create a default value, in the HTML, when the page loads.... I don't need a click action or any animation...any ideas?

Pass the default value when you initialize the progress bar -
$("#pb1").progressBar(65); // Will have 65% as the default value
// Will have 95% as default value with additional options.
$("#pb4").progressBar(95, { showText: false, barImage: 'images/progressbg_red.gif'} );

$(document).ready(function() {
var defaultProgress = $("#progressbarVal").text();
$("#YourID").progressBar(defaultProgress);
};
And a HTML div with the value:
<div id="progressbarVal">40</div>

How to use options when writing a jQuery plugin?

Here's my code ( http://jsfiddle.net/nB4Hg/ ):
JQuery:
// plugin code
(function($) {
$.fn.coloredDiv = function(options) {
// defaults
var options = {
'color' : 'black'
};
$(this).css('background', options.color);
}
})(jQuery);
// use the plugin
$(function() {
$("#foo").coloredDiv({ 'color' : 'red' });
$("#bar").coloredDiv();
});
CSS:
div { width: 100px; height: 100px; margin-bottom: 10px; }
HTML:
<div id="foo"></div>
<div id="bar"></div>
Now I am trying to learn how to use options when writing plugins. In my code what I'm trying to do is specify that the first div should be colored red and the second since it has no options should be the default black. However both are black. What am I doing wrong?

Your current approach is accepting a parameter named options, but then declaring another variable named options that "shadows" the parameter, and thus the passed-in options never get seen by the subsequent code.
Instead, you should declare your default options, then use $.extend to overwrite those defaults with the ones passed in by the user, where applicable:
$.fn.coloredDiv = function (userOptions) {
var options = $.extend({
color: "black"
}, userOptions);
// ...
};