highlight row after edit in datatables - javascript

I new to Jquery and Javascript.
I am using datatables to show some data
I am trying to highlight specific rows, ie : rows that have been edited after inline edit. I am using the inline edit (from https://github.com/ejbeaty/CellEdit). The code that I have modified in " Advanced.js" is as follows :
function myCallbackFunction (updatedCell, updatedRow, oldValue) {
if (updatedCell.data() == "Bradley")
{
console.log("highlight required for Name Bradley")
$(updatedRow).css( "background-color", "Orange" )
}
console.log("The new value for the cell is: " + updatedCell.data());
console.log("The old value for that cell was: " + oldValue);
console.log("The values for each cell in that row are: " + updatedRow.data());
}
In the callback function I am trying to change the background color for a specific name. I can see the console.log but the color changes seem to have not taken up.

Did not knew this CellEdit plugin before, but it looks to be really nice, decent and straight forward. Instead of copying an example it is sometimes better to produce a small minimal example from scratch. Look at this
var table = $('#example').DataTable({
}).MakeCellsEditable({
onUpdate: function(cell, row, oldValue) {
if (cell.data() != oldValue) {
row.nodes().to$().addClass('highlight')
}
}
})
I forgot .nodes() in the comment, sorry for that - but the above works -> http://jsfiddle.net/Lccju5bq/

try this `
if (updatedCell.data() == "Bradley")
{
console.log("highlight required for Name Bradley")
var updatedRow = document.getElementbyId("updatedRow);
updatedRow.style.background = 'black';
}

Related

Change color text of specific text in sharepoint

I was doing some testing(issue tracking) and I initiated a workflow, a 3 state workflow. The workflow is shown as completed or in progress. Can I change the color of the words? For example, in progress would be orange and completed would be in green.
Please Advise.
For Reference: https://imgur.com/a/eK8R3UZ
In SharePoint 2013, we can add the following code into a script editor web part to achieve it.
<script src="https://code.jquery.com/jquery-1.12.4.min.js" type="text/javascript"></script>
<script type="text/javascript">
SP.SOD.executeFunc("clienttemplates.js", "SPClientTemplates", function() {
SPClientTemplates.TemplateManager.RegisterTemplateOverrides({
OnPostRender: function (ctx) {
$("td.ms-vb2>a>span").each(function(){
if($(this).text()=="In Progress"){
$(this).css("color","orange");
}
if($(this).text()=="Completed"){
$(this).css("color","green");
}
});
$("td.ms-vb2").each(function(){
if($(this).text()=="Closed"){
$(this).css("color","red");
}
if($(this).text()=="Active"){
$(this).css("color","green");
}
});
}
});
});
</script>
If you are working on a spreadsheet/excel under the home tab there is the font group there you will see an icon with the letter A underlined by a bold color usually red or black, that represents the font color option used to change color for specific text or all text.
Honestly i haven't tried this with workflow's default column but you can create a status field e.g. 'Status' in your list which is updated based on your workflow status i.e. while workflow is in progress, set the field values as 'In Progress' and just before workflow successfully completes, update this to 'Completed' Then using JS link:
(function () {
var overrideCtx = {};
overrideCtx.Templates = {};
overrideCtx.OnPostRender = [];
overrideCtx.Templates.Fields =
{
'Status': { 'View': ChangeColor }
};
SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);
})();
function ChangeColor(ctx){
var val = ctx.CurrentItem["Status"];
if (val == "In Progress")
{
return "<span style='color: orange'>" + val + "</span>";
}
else {
return "<span style='color: green'>" + val + "</span>";
}
}
Put the above code in a js file, and put it somewhere e.g. in Style library. Then you can refer this file by configuring your list view webpart and providing file's server relative url .
Hope this helps.
If you want an easy solution. You will have two change two things.
First, the HTML file. You will need to add an Id to the table if it does not already have one.
Second, you will have to add the following javascript.
What it does is:
When the page is loaded, it will get every 2nd cell in the table we have mentioned with the Id. Then it gets the value of the cell and matchs is with one of the properties of the colors object.
Finally it will apply that color to text
$(document).ready(function(){
var indexOfColumn = 2;
var colors = {"A": "red", "B B": "green", "C.C": "yellow"};
$("#someID tbody tr td:nth-child("+ indexOfColumn +")").each(function(key, value){
$(value).css("color", colors[$(value).text()])
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="someID">
<tr><td>1</td><td>A</td></tr>
<tr><td>2</td><td>B B</td></tr>
<tr><td>3</td><td>C.C</td></tr>
<tr><td>4</td><td>A</td></tr>
</table>

Kendo UI - Text color change when under modification

I have provided a working demo.
Demo in Dojo
Is it possible to change the text color went under modification?
For example, when I click on Edit button, the whole rows will change to blue color text and if I click Cancel back to normal color.
Thank you in advance.
Well. I manage to accomplished this by create a hidden field.
On edit event, I need to add:
function(e) {
e.model.set("HiddenColumnName", "Y");
highlightBlue();
},
then on cancel event, I need to add this as well.
function(e) {
e.model.set("HiddenColumnName", "N");
},
and last but not least the highlight color function.
function highlightBlue() {
var grid = $("#grid").data("kendoGrid");
var data = grid.dataSource.data();
$.each(data, function (i, row) {
if (row.HiddenColunName == "Y") {
$('tr[data-uid="' + row.uid + '"] ').css("background-color", "blue");
}
})
}
Here a I provide a working demo. Don't forget to make the field hidden.

How to refresh datatable column data

I use data table plugin with table as data source. I have to change some column value via javascript when the user types in some numbers into an input (this input is part of the table too and I have to export this values to). It is working well but when I want to export the table the columns witch was changed with javascript is not displayed in the exported file.
I think the problem is that I have not refreshed the datatable plugin. Is this correct? If yes how do I refresh the datasource? If no what can be the problem and how can I solve it?
I tried the refresh() method (var dataTableObject = $(this).parents('table').dataTable(); dataTableObject.refresh();) and the $(this).parents('table').dataTable() but is not working.
Edit: Here is how do I change the cell value:
$item.find('input.quantity-coefficient').each(function (i, d) {
$(d).off('change').on('change', function () {
var multiplier = $(this).val();
//var dataTableObject = $(this).parents('table').dataTable();
$($(this).data("row-price-info-class")).each(function (i, d) {
var priceContainer = $(d);
var price = parseFloat(priceContainer.data('price-value'));
var priceInfoRatioContainer = $(priceContainer.data("ratio-input-class"));
if (multiplier * price == 0) {
priceInfoRatioContainer.closest("td").addClass("no-euro");
priceInfoRatioContainer.html(" ");
} else {
priceInfoRatioContainer.closest("td").removeClass("no-euro");
priceInfoRatioContainer.html(localizeNumber(multiplier * price));
}
});
//TODO redrow the data
$(this).parents('table').dataTable().fnDraw();;
});
});
You can refresh the dataTable with fnDraw(). In your example:
$(this).parents('table').dataTable().fnDraw();
Thank you guys but I think I found the solution in this post: jquery DataTables - change value of a cell not just display value
When I tried it on the first time the problem was that I started the row numbering from 1 and not from 0.
So for the others who may have this issue to, I have to use something like this:
(this).parents('table').dataTable().fnUpdate("new value", 0, 2)
To update the cell value. Actually this is not what I asked because this is not refresh all the table, but this is a solution for me now.

jquery dropdownlist hide value if selected in second dropdown

Okay so I have two drop downs I want the selected item in dropdown one to be hidden in dropdown two and vice versa.
I have done the following so far can't seem to figure out the final step was hoping for a hand.
What I have currently is I have two lists that append to the dropdowns from and to, these list are looped over and append values to the dropdownlists, I then check for change event and when this occurs I remove values from a dropdown based on its index.
I am currently removing on selectedIndex, I want to remove on selectedValue rather then index but could not grasp that either.
<script type="text/javascript">
var fromCurrencies = {
FRO : 'Convert this currency',
AUD : 'AUD, Australian Dollar',
NZD : 'NZD, New Zealand Dollar',
EUR : 'EUR, Euro',
USD : 'USD, United States Dollar',
};
var toCurrencies = {
TOC : 'To this currency',
AUD : 'AUD, Australian Dollar',
NZD : 'NZD, New Zealand Dollar',
EUR : 'EUR, Euro',
USD : 'USD, United States Dollar',
};
$(document).ready(function () {
var ddFrom = $(".ddConvertFrom");
$.each(fromCurrencies, function (val, text) {
ddFrom.append(
$('<option></option>').val(val).html(text)
);
}); /*End ddFrom loop*/
var ddTo = $(".ddConvertTo");
$.each(toCurrencies, function (val, text) {
ddTo.append(
$('<option></option>').val(val).html(text)
);
}); /*End ddTo loop*/
}); /*End document.ready function*/
function doAction(){
if ($('.ddConvertFrom').val == "" || $('.ddConvertFrom').get(0).selectedIndex == 0) {
//Do nothing or hide...?
} else {
/*Hide selected value from other dropdown*/
var index = $('.ddConvertFrom').get(0).selectedIndex;
$('.ddConvertTo option:eq(' + index + ')').remove();
}
}
</script>
The html:
<div class="selectstyler">
<asp:DropDownList ID="ddConvertFrom" OnChange="doAction()" CssClass="ddConvertFrom" runat="server"></asp:DropDownList>
</div>
<div class="selectstyler">
<asp:DropDownList ID="ddConvertTo" CssClass="ddConvertTo" runat="server"></asp:DropDownList>
</div>
Purely for completeness to add to an already working answer from undefined.
To address the vice versa and the extended issue of re-adding those values including auto-selecting the previous value if it exists see: DEMO
See below for the changes I made to your original scripts.
I'm sure the code below can be optimised on several levels but I only tried to get it working first. Making it pretty I leave to you :)
To start I re-factored your code so the values are attached in their respective methods.
The dropdowns are now fully cleared before the values are re-added.
First though we record the value of the currently selected option to ensure we can re-select it if it exists. Adds a more dynamic feel to it and saves the user form re-selecting manually.
See example of attaching values to the from-dropdown:
function attachFromValues() {
var ddFrom = $(".ddConvertFrom");
var selectedValue = ddFrom.val();
var selectedIndex = 0;
ddFrom.html("");
var index = 0;
$.each(fromCurrencies, function(val, text) {
ddFrom.append(
$('<option></option>').val(val).text(text));
if (selectedValue == val) {
selectedIndex = index;
}
index++;
}); /*End ddFrom loop*/
if (selectedIndex > 0) {
ddFrom.get(0).selectedIndex = selectedIndex;
}
};
I also re-factored the code which removes the value in the other dropdown calling the new re-factored methods to re-attach all values first before removing the specific value. That makes sure you do not end up with an empty dropdown after while.
See example of the change event of the to-dropdown:
(taken from undefined's answer, only added call to re-populate)
$('select.ddConvertTo').change(function() {
if ($('.ddConvertTo').val == "") {
//Do nothing or hide...?
} else { /*Hide selected value from other dropdown*/
attachFromValues();
var txt = $(this).val();
$('.ddConvertFrom option[value=' + txt + ']').remove();
}
})
For the complete code changes check the linked DEMO
Edit (25-Jun-2012)
Updated code as I noticed an inconsistency whereby the currencies did not re-set correctly if the default selection (index 0) was made. The latest version of this code now re-binds the currencies correctly.
try this and instead of using onChange attribute you can use change event handler.
$('select:first').change(function(){
/*remove selected value from other dropdown*/
var txt = $(this).val();
$('.ddConvertTo option[value=' + txt + ']').remove();
})
http://jsfiddle.net/ue4Cm/1/

Dynamically added input box problem?

I have dynamically added div.In which i have text box.While adding dynamic div i can put a value to the current div but not the previously open divs. I want to ask how to add Value to the previously open text boxes of Div.
Thank You
here is a solution that refresh ALL. (I don't understand the "previously open text box" part of your question. Well I understand it, but it doesn't show in your code. I assume the "rhythm" column of your table is an input/textarea html element (since you use it's value).
Please note I'm not sure what the vitalset function is supposed to accomplish, or what "vitals_form_readings_1_rhythm" is.
function queryDb(statement)
{
dbQuery = new air.SQLStatement();
dbQuery.sqlConnection = db;
dbQuery.text = statement //"SELECT * FROM rhythm";
//alert(dbQuery.text);
try {
dbQuery.execute();
} catch (error) {
air.trace("Error retrieving notes from DB:", error);
air.trace(error.message);
return;
}
return (dbQuery.getResult());
}
function crhythm()
{
var statement = "SELECT * FROM rhythm";
return queryDb(statement)
}
function reading_speedcode()
{
if (!cvitals) {
var crhythms = crhythm();
var i=0;
$(crhythms).each( function () {
crhythm = this.crhythm;
var pr = 'card_' + i;
$('#rhythm1').append('<br/><td class="content_big" id="'+pr+'" name="'+pr+'">' + crhythm + ' </td>');
i++
});
}
});
$(document).ready( function () {
reading_speedcode();
$('#rhythm1 .content_big').live('click', function(event) {
$('#rhythm1').empty()
reading_speedcode();
});
});
now, there are several things about your code.
variable naming. (for god sake use meaningful names!)
reading full table when you need one row
where is cvitals declared or assigned?
string parsing. Jquery is good at working with set of elements, there should be no need to parse "pr" to recover the row number.
if a value is inserted in rhythm table (or deleted) before your click, the vitalset logic fails. you might want to use the table id instead.
make sure "#vitals_form_readings_1_rhythm" is unique, not retrieved from the table.
if you can answer my question from the top of this post(vitalset function, vitals_form_readings_1_rhythm, cvitals) I will try improve the code.

Categories