Conditional formatting in Dash Table is not working - plotly-dash

I am trying to color some cells based on their numerical value but the code doesn't work (Doesn't display anything). Is there a way to fix it?
I have tried using all techniques mentioned in Dash Table Documentation (https://dash.plot.ly/datatable/style) it didnt work. Also upgraded the libraries to latest version and the code stopped displaying even the table, so I switched back to older version of Dash_Table
{'if': {'column_id': '24H Base', 'filter': 'num(24H Base) > num(4)'},
'backgroundColor': '#3D9970',
'color': 'white'}
On using latest libraries - Even table isnt displayed
Older Libraries (Dash Table v 3.7) Code doesnt format specific cell, but the table is displayed
Both cases No error message is displayed

Try filter_query instead of filter:
{'if': {'column_id': '24H Base', 'filter_query': 'num(24H Base) > num(4)'},
'backgroundColor': '#3D9970',
'color': 'white'}

Related

PrimeFaces 7.0 <p:textEditor HTML-sanitizer discards text formatting, such as centering

In PrimeFaces 8, it seems to be possible to enable / disable HMTML -sanitizer when using the <p:textEditor component by just specifying secure='false' for disabling it and secure='true' for enabling it. I tried to disable it in PrimeFaces 7.0 like this:
<p:textEditor id="quillToolbarId" secure='false' widgetVar="editor2" height="300" value="#{editTemplatesBean.kaufAnbotTemplate}" placeholder="Enter your content">
but the sanitizer still seems to be working.
My problem is that whenever I format a text in the primeFaces p:textEditor to be center-aligned, the HTML sanitizer just removes my formatting, so the text ends up without formatting.
One way to work this around is to use directly Quill and not Sanitize the input.This works, but then I face other problems, such as this one:
https://github.com/quilljs/quill/issues/1379
which also need to be worked-around.
Please help!
There is no secure property in TextEditor for PrimeFaces 7. If you look at the code of TextEditorRenderer.decode you will see that the sanitzier is called
if (PrimeApplicationContext.getCurrentInstance(context).getEnvironment().isHtmlSanitizerAvailable()) {
value = HtmlSanitizer.sanitizeHtml(value,
editor.isAllowBlocks(), editor.isAllowFormatting(),
editor.isAllowLinks(), editor.isAllowStyles(), editor.isAllowImages());
}
And if you look into PrimeEnvironment you'll see that the property will be set if the class org.owasp.html.PolicyFactory is available on classpath:
htmlSanitizerAvailable = LangUtils.tryToLoadClassForName("org.owasp.html.PolicyFactory") != null
So you either:
update to PF 8
make sure that you don't have this class on the classpath
override the renderer and change/remove the code for the check

angular 5 select IE no value

I am currently having an issue with Angular.X (Tested with A5 & A6). It appears when using a "Select" within the html, Internet Explorer doesn't bind appropriately with ngModel. I've tested with Chrome and Edge and they work fine, When trying to use this combination in edge- the select never gets set as its default value (The value that is assigned within the model/property its bound to). So the page will load with empty values in the select. I've tried searching but have not had any luck finding an answer how to fix this. 9/10 of the posts I find when searching for this are related to AngularJS. Which always makes troubleshooting fun!
Here is a bit of the code as to how I am doing this:
HTML:
// The repeater is up top somewhere and looks like this:
// <tr *ngFor="let i of this.imgArr">
<td class="ImageCell">
<select [disabled]="this.ApplyingChanges" [(ngModel)]="i.ImageType" class="form-control" (change)="this.ChangeInput(i)">
<option>Part</option>
<option>Model</option>
</select>
</td>
TS Class:
export class PartImage{
public ImageType = 'Part';
The above code is broken up to show what matters.
Thanks for the help in advance!
Sorry I actually resolved this.
After tinkering around, I discovered: With Edge and Chrome, an "option" is not required to have the attribute "value" and uses the label by default. With Internet Explorer this is not true and requires that attribute (Or ngValue) to work correctly.

WTL CCommandBarCtrl imagelist (default and hot/disabled) ignored when set

I am trying to modify the images in a ribbon's Quick-Access-Toolbar but all my attempts seem to be in vain. I had the WTL-wizard create a simple ribbon-based application to start with. The wizard creates a CMainFrame with the a member var called 'm_CmdBar' of type 'CCommandBarCtrl'.
In 'CMainFrame::OnCreate()' the m_CmdBar is created with 'Create( m_hWnd, rcDefault, NULL, ATL_SIMPLE_CMDBAR_PANE_STYLE )' and the images are loaded with 'LoadImages(IDR_MAINFRAME)'. The images come from the default visual-studio provided 4-bit Bitmap toolbar-resource. If I leave 'LoadImages(IDR_MAINFRAME)' untouched, then the crappy 4bit icons are visible in the QAT.
Now, reading through the very sparsely only available WTL documentation (and Win32 API docu about about image lists) some people suggest to change the image list. I tried the following approaches (after commenting out 'LoadImages(IDR_MAINFRAME)' in order to start with a blank slate.).
1st attempt (load a 32Bit bitmap-strip with 5 16x15px consecutive icons):
CBitmap bmp;
bmp.LoadBitmap( IDB_TEST32BPP );
WTL::CImageList imgList = m_CmdBar.GetImageList();
imgList.Create( 16, 15, ILC_COLOR32, 8, 1 );
imgList.Add( bmp.m_hBitmap, RGB( 255, 255, 255 ) ); // also tried different masks
m_CmdBar.SetImageList( imgList );
imgList.Detach(); // also tried once without detaching
But to no avail. I tried to force the imagelist with:
m_CmdBar.SendMessage( TB_SETIMAGELIST, 0, (LPARAM)imgList.m_hImageList );
but it this did not work either.
2nd attempt is very much like the first, except that this time I changed the create call to:
imgList.Create( 16, 15, ILC_COLOR24 | ILC_MASK, 8, 1 );
in hope that maybe the loading code does not like 32bpp images... but again, no cigar (LoadBitmap was adjusted to load a 24bpp version of course). 3rd attempt was to simply reload the default images (4bit) so again I changed the create call to:
imgList.Create( 16, 15, ILC_COLOR4 | ILC_MASK, 8, 1 );
but you have guessed it... noting. And with nothing I actually mean, that the QuackAccess-Toolbar does reserve the space for the 5 buttons (as per the XAML ribbon config) but icons/images do not appear. The QAT-buttons are white but react to interaction. Trying to load the hot and disabled lists using the provided WTL-API also does nothing at all.
The only approach that worked somehow was to manually load every bitmap directly and linking it to its command with:
CBitmap bmp;
bmp.LoadBitmap( IDB_ICON1_32BPP );
m_CmdBar.AddBitmap( bmp.m_hBitmap, ID_TEST_BTN );
works as long as the XAML config correctly provides an entry in the QAT section for ID_TEST_BTN. AddIcon also works but introduces an artifact (a black vertical
1px-bar, as if a right-frame was drawn for every icon. I guess it's the 16x16 versus 16x15 pixel problem).
I might be inclined to give up and go with the AddBitmap-workaround, but I'd like the disabled and hot-version to work too, and there is no AddBitmap for that as it looks. Also, I guess there is no way to force an image to any of the QAT buttons via the XAML file???

Dynamically re-bind html.ValidationMessageFor html helper?

Some background information, I am using ASP.NET with the MVC framework and html helpers.
I currently have a dynamic table where each row has a series of input boxes. Each of these input boxes has a validation message. This works completely fine for the first row. However, when other rows are dynamically added (with the IDs' being changed along with other attributes to match the row number) the validation message no longer works.
Both the row and validation message span are being replicated properly.
In JQuery, this is usually just a problem with the binding, so for each row I would simply re-bind the IDs'. However I am not really to sure how to approach them in ASP.NET.
Any assistance would be appreciated.
Thanks
Alright, I have finally figured this out.
In MVC, in order to handle the validation, it import a JQuery file known as jquery.validate.unobtrusive.js.
However, similar to JQuery, this only occurs at the very beginning when the page is loaded. So, when you add a new dynamic element, you need to remove the bindings and the re-bind them again.
Basically, in your function for adding a new element, put the following lines of code AFTER you have added the new element:
$("#form").removeData("validator");
$("#form").removeData("unobtrusiveValidation");
$.validator.unobtrusive.parse("#form");
For example:
function addInfoDynamic()
{
document.getElementById("#myDiv").innerHTML += "New Content";
$("#form").removeData("validator");
$("#form").removeData("unobtrusiveValidation");
$.validator.unobtrusive.parse("#form");
}

Multi-column Headers With Kendo Grid

I don't know what this is called, and I've messed around a lot with the headerTemplate but can't figure out how to produce this look. I need the second row of column names to 'act normally' in terms of sorting and filtering, but everything I try breaks that. I have no idea if headerTemplate is even the right way to do this? Is there a name for this kind of grouping? My research is turning up a whole lot of nothing, so I suspect I'm using the wrong keywords. What is this layout called?
Note: for security reasons I can't post a code dump (super nervous about the image too). If a specific thing is needed, please let me know and I'll try to anonymize it. But, mostly I'm just looking for suggestions to try other than playing with the headerTemplate.
This is now natively supported by the Kendo grid. Here's an example.
You won't be able to achieve multirow Group headers via Kendo grid on MVC, although there were discussion to add the feature in the current version(2014Q2) of Kendo. See below link for more reference:
Pivot Grid StackOverflow Reference
However, you can achieve the multirow header option via jquery on databound event of the grid. But it is a workaround rather than a perfect soultion.
Please see the js function for databound event to add multirow header:
function onDataBound(arg) {
var myElem = document.getElementById('trParentHeader'); //Check if Parent Header Group exist
if (myElem == null){ // if parent Header doesnot exist then add the Parent Header
$("#grid").find("th.k-header").parent().before("<tr id='trParentHeader'> <th colspan='2' class='k-header'><strong>Products + Unit Price</strong></th> <th scope='col' class='k-header'><strong>Single Units in Stock</strong></th></tr>");
}
}
For more understanding and a working example please see below Sample:
MultiRow-Column Header Sample
Please let me know if you if you have any queries.