i am trying to use a drop down in table but when i try to open i can't see the list and also on keydown list values are changing - angular10

my html code is:
<p-dropdown id="ddlMappingProducts" [appendTo]="'body'"
[style]="{'min-width': '100px','color':'white', 'border-bottom':'2px solid white', 'background-color':'white'}"[options]="booleanOptions"
optionLabel="label">
</p-dropdown>
booleanOptions = [
{ label: "true", value: "true" },
{ label: "false", value: "false" }
]
by default
on key down
how can i solve this... can anyone please help

Related

How to fix wrong sorting in bootstrap-vue table

I'm making use of bootstrap-vue. Within the table component, I want my users to be able to sort values.
I set all the options for that but for some reason, the sorting isn't going as I espected.
I've checked the docs about sorting and set things up. My problem is, is that the following numbers (when sorted descending) are sorted like this:
856.780
832.912
827.873.000
Obviously, the last one is greater than the first two, but for some reason this doesn't work.
Now, the sorting does go right when I loose the punctuation, but that makes an ugly table for numbers.
Again, following the docs (see above) I'm making use of the sort-compare-options prop:
sortOptions: {
ignorePunctuation: true,
numeric: true
}
EDIT
My fields looke like this:
fields: [
{ key: 'name', sortable: true, tdClass: 'table-cell-align' },
{ key: 'revenue', sortable: true },
{ key: 'costs', sortable: true },
{ key: 'result', sortable: true },
{ key: 'margin', sortable: true },
{ key: 'fte', sortable: true },
{ key: 'personell_costs_/_revenue', sortable: true},
{ key: 'other_costs_/_revenue', sortable: true},
{ key: 'revenue_/_fte', sortable: true},
{ key: 'details', sortable: false }
]
[
{
"name": "Medical Tattoo Innovations",
"revenue": "34.254",
"costs": "38.010",
"result": "-4.414",
"fte": "0",
"margin": "0",
"personell_costs_\/_revenue": "0",
"other_costs_\/_revenue": "1",
"revenue_\/_fte": "171.270",
"details": "0"
}
]
But this doesn't do the trick for me.
Any thoughts on this?
827.873.000 is a string in your items data, not a Number (and since it has more than one decimal, the browser String.localCompare(...) method (used internally by b-table) does not see that as a valid number, so sorts it as a String.
You can either convert it to a number beforehand (but loose the extra decimal values), or set up a custom sort compare routine for those field columns.
https://bootstrap-vue.js.org/docs/components/table#sort-compare-routine
Your custom sort compare routine (which compares two rows), would need to deal with splitting the string into numerical parts and sort by those values.

radio with custom input in alpacajs with jsonschema?

I'm trying to create a field with several radio input options and an optional fill in the blank. The following schema doesn't seem to work in displaying output:
{
"oneOf": [
{
"enum": [
"Option 1",
"Option 2",
"Option 3"
]
}, {
"type":"string"
}
]
}
What should I be doing? Thanks!
Clarification: I'd like to output:
( ) option 1
( ) option 2
( ) option 3
(X) custom [__fill in the blank here__]
I'm sorry it was my mistake I accidently overrided that fiddle. Thank you for your clarification. If you want to have that layout in your page you must use two different components, a radio group buttons and a simple text field that automatically will be appended after the radio group (but you could do better using jquery and append it in a different place in the postRender function of Alpaca. So your schema must be like this :
"schema": {
"type": "object",
"properties": {
"oneOf": {
"required": true,
"enum": ['a', 'b', 'c', 'd']
},
"customResponse": {
"type": "string"
}
}
}
I added more options for the fields like disabling default sorting, disabling the input text for custom response because it must be enabled only when the user choose the 4th option.
Here's a more complete fiddle.
your schema properties should be enclosed into a properties object and if the "oneOf" refers to the group of radio buttons it should be an object not an array.
"properties": {
"oneOf": {
"required": true,
"enum": ["option1", "option2", "option3"]
}, ////
Here's a complete fiddle, hope it helps.
Tell me if you want something else.

How to format Data Table exported to pdf?

Please help me to add CSS to the export PDF using Data Table. The exported PDF is not formatted as the HTML table.I need to make td align right in exported pdf.Also how can I merge columns?
Thank you
Here is my code:
$('#reporTable').DataTable({
"paging" : false,
"ordering": false,
"info" : false,
"searching" : false,
dom: 'T<"clear">lfrtip',
tableTools: {
"sSwfPath": "/javascripts/js/dataTables/tools/swf/copy_csv_xls_pdf.swf",
"aButtons": [
{
"sExtends": "pdf",
"sTitle": $filename,
"sPdfOrientation": "landscape",
"sPdfMessage": $out_name+":" + msg
},
],
}
});
Use exportOptions of data table.
For details, please visit data table formatting
Follow this links for Customisation of the datatable buttons
https://datatables.net/extensions/buttons/examples/initialisation/className.html
https://datatables.net/extensions/buttons/examples/print/customisation.html

Smart Client : List Grid?

While setting data into List grid. Some extra space is coming after last record.
isc.CustomListGrid.create({
dataSource: "DeviceDiscoveryDataSource",
ID:"deviceDiscoveryListGrid",
autoDraw: false,
//showAllRecords: true,
paddingAsLayoutMargin:false,
autoFitMaxRecords:2000,
showFilterEditor:true,
filterOnKeypress:true,
filterLocalData: true,
alternateRecordStyles:true,
autoFetchData:true,
showRecordComponents: true,
showRecordComponentsByCell: true,
cellHeight:35,
emptyCellValue:"-",
canSort:false,
canGroupBy:false,
canPickFields:true,
bodyProperties: { canSelectText:true },
fields: [{
name: "deviceName",
type: "text",
title: "Device Name",
align: "center",
width:200
}]
});
Where I am wrong I am not getting. Please Help me.
Try to set virtualScrolling property to false in the ListGrid. When rendering components in each row, SmartClient does not exactly know how much space it will need, hence the blank space after the last record.
More about this: http://www.smartclient.com/docs/10.0/a/b/c/go.html#attr..ListGrid.virtualScrolling

incorrect edge direction in infoviz's Force Directed Graph

I am trying to show force graph like "graphnode6.0-----> graphnode0.0 -------> graphnode15.0 " but when i contruct json object i always get "graphnode6.0------> graphnode0.0 <---------graphnode15.0"
My JSON object is
var json = [
{
"adjacencies": [
{
"nodeTo": "graphnode15.0",
"data": {"$type":"arrow",
"$direction":"['graphnode0.0','graphnode15.0']"}
}
],
"data": {
'$color': "#83548B",
'$type': "circle"
},
"id": "graphnode0.0",
"name": "graphnode0.0"
},
{
"adjacencies": [
{
"nodeTo": "graphnode0.0",
"data": {"$type":"arrow",
"$direction":"['graphnode6.0','graphnode0.0']"}
}],
"data": {
"$color": "#83548B",
"$type": "circle"
},
"id": "graphnode6.0",
"name": "graphnode6.0"
}
];
Am i making any mistake in this JSON structure ?
Thanks
Sumit
I had a similar problem but thanks to your quick demo, I think I've managed to fix both our issues :)
Use double quote inside your direction block.
"$direction":["graphnode1", "nodeZ"]
When I tried with single quotes
"$direction":['graphnode1', 'nodeZ']
the arrows would render in one direction only.
Hope it works for you!
You are using a string for the $direction property.
"$direction":"['graphnode6.0','graphnode0.0']"
It should be an array. Like this:
"$direction":["graphnode6.0","graphnode0.0"]
See this example code.