How to handle long numbers when exporting to excel from datatables.net - datatables

Our company folks have been struggling for many days now to handle long numbers being exported as exponent values into excel.
we came across a few solutions but didn't work for us.
any help would be much appreciated. Thanks

After much expoloring we found a lead. the article about excelHtml5 Customisation on datatables.net website gave us an idea.
we added following code under exportOptions section of the datatables.net definition:
customize: function (xlsx) {
var sheet = xlsx.xl.worksheets['sheet1.xml'];
$('row:gt(1) c[r^="B"]', sheet).each(function () {
$(this).removeAttr('s');
$(this).attr('t', 'inlineStr');
$(this).find('v').replaceWith('<is><t>' + $(this).text() + '</t></is>');
});
}
the trick is to replace the xml tags/attributes for numbers with tags for text.
row:gt(1) is used to start from second row
c[r^="B"] is used to target the column. in this case it is 'B'
Enjoy!

Related

Expo Calendar - Using the recurrenceRule for createEventAsync()

I'm struggling with some of the formatting for parameters inside the recurrenceRule when trying to create a new event with Expo Calendar. I can't seem to find any robust recurrence examples in the docs or anywhere else for that matter. One specific thing I'm struggling is daysOfTheWeek, where I'm trying to pass multiple days but I'm not even sure if you can.
Does anyone have a good working example of the recurrenceRule in action?
After struggling with this myself I found that if you look up types in your Calendar.d.ts file it should give you the required structure of the recurrenceRule.
export declare type RecurrenceRule = {
frequency: string
interval?: number // #default 1
endDate?: string | Date
occurrence?: number
daysOfTheWeek?: DaysOfTheWeek[]
daysOfTheMonth?: number[]
monthsOfTheYear?: MonthOfTheYear[]
weeksOfTheYear?: number[]
daysOfTheYear?: number[]
setPositions?: number[]
};
So if your use case is like mine and you just want the event to occur only once something like this will work: recurrenceRule: {frequency: 'DAILY', occurrence: 1} I think. Expo-documentation says recurrence rule can be set to null, but this throws an error. Hope this helps!

How to make ag-Grid table responsive such that headers and rows are transposed?

See the "Collapse Rows" animated example:
That's similar to what I want to achieve.
I'd like my table to be responsive using the approach of reorganizing itself such that it shows each original row transposed (but also transpose the headers and duplicate them so that they label each row).
ag-Grid seems like a phenomenal library that has countless features, so I was surprised that the docs seem not to specify how to accomplish my goal.
Unfortunately this feature is not available out of the box.
This is actually a feature request which can be found here:
https://www.ag-grid.com/ag-grid-pipeline/
AG-3142 Allow the grid to change columns for rows (transpose rows), so the grid show each row as one column, and each column as a row
To achieve this, you would have to write a function yourself to transpose the rows into one column.
You can then leverage Grid API methods to update the column and row data accordingly.
I've created a simple plunker which does this based on a button click:
function onBtnClick() {
let newColumnDefs = [{ field: 'transposed_rows' }];
let newRowData = [];
gridOptions.api.forEachNode((node) => {
let nodeDataValues = Object.values(node.data);
nodeDataValues.forEach((val) => newRowData.push({ transposed_rows: val }));
});
gridOptions.api.setColumnDefs(newColumnDefs);
gridOptions.api.setRowData(newRowData);
}

How to format Date received from Element-UI

I'm making use of the datepicker from Element Ui where the user can select a range in dates. When the user fills in the datepicker, this is what I get back: ['2018-01', '2019-02'] . So just an array with two String elements. NOT a Date() object.
When dynamically outputting this to the user, I would like to show it as: January 2018 - February 2019
I got it somewhat working in my project but the code just really sucks and also doesn't work properly either. Checkout this gif of my current project and somewhat desired result. I was wondering if someone knows a good and easy way of achieving my desired result without too much hassle. I cannot use methods like toLocaleDateString() because it isn't a Date() object. I've got my code working in a Codesandbox. If any if you guys knows a solution feel free to edit the listed Codesandbox, I would highly highly appreciate it!
In the Codesandbox I got a computed property formateDate. The basic idea of the computed property is to cut the elements of the array I get back from the datepicker before and after the - effectively giving me the first & second month and first & second year. That data I store in these variables:
let monthOne;
let monthTwo;
let yearOne;
let yearTwo;
Since I get the months back as '01' and '02' for example, I created an array of objects to transform the '01' and '02' to January and February with a for loop. I then store the result in a new variable with:
displayDate = monthOne + ' ' + yearOne + ' - ' + monthTwo + ' ' + yearTwo;
Lastly, I tried to store that result into the timeperiodDisplayString at the correct index in the experience array of objects. Anyway, I'm probably overcomplicating this way to hard so I would REALLY appreciate any help with this.
Maybe you could map over the result from the datepicker component to create an array of Date objects. So you can use toLocaleDateString()
Something like this should work:
['2018-01', '2019-02'].map((date) => {
const split = date.split('-');
return new Date(split[0], +split[1] - 1);
});
You can use parse() function from javascript.
var d = Date.parse("2019-01");
console.log(new Date(d));

simplecart js setting column widths

I've used this site for assistance many times but never had to ask a question so finally joined...anyway, trying to set up simplecart checkout and having some trouble formatting cart output. I have my cart set to table and by default the simpleCart_items class displays the table and it's cells only as wide as they need be to fit the data. I can change this by specifying all cells(columns) as a percentage of the whole table. Unfortunately with 7 columns each only gets about 14% and this is way to much for a 1 or 2 digit quantity and not near big enough for all the characters in the item name without wrapping. What I want is a way to define a different width for each column. I have not found a way to do this even with colgroup but maybe just not doing it right. Any and all help would be appreciated!
Okay, so this may or may not help. This line is located in the simpleCart.js file. I changed it to something simple.
cartColumns : [
{ view: function(item, column){
return"<img src='"+item.get('image')+"' width='250px' height='250px'><br /><center><h3 ><span>"+item.get('name')+"</span></h3><p><a href='javascript:;' class='simpleCart_decrement'><button>-</button></a> "+item.get('quantity')+" <a href='javascript:;' class='simpleCart_increment'><button>+</button></a></p><p>$"+item.get('price')+"</p><p><a href='javascript:;' class='simpleCart_remove remove_icon'><img src='images/icon_x.png' /></a></p></center>";
},
}
],
You can change it to your own html
cartColumns : [
{ view: function(item, column){
return" YOUR HTML HERE ";
},
}
],
It MUST all be in ONE (1) LINE or else it may not work.
here are some values that are used
image = item.get('image')
name = item.get('name')
quantity = item.get('quantity')
price = item.get('price')
you can look at all the values here
http://simplecartjs.org/documentation/displaying_cart_data
but the point is that you can make a cart and display it how you want; with you own html and css. I hope this helped.

can there be a tooltip with data from the database

I need to know can there be a tooltip populated with data from database to be displayed in the tooltip.
something like the tooltip should contain
name stauts
abc active
xyz active
pqr active
name and status are retrived from db
I need this tooltip onmouseover, am using CJSON decoded to render the content
i did go google but hardly did find that i would throughly understand and implement.
can anyone out there has any ideas for what am looking.
There is a extension named yii-bootstrap, which described clearly here.
For using tooltip easily in this extension, just look here.
I use cluetip for this. Its not related to Yii but will give you some idea :
JS
function renderInfoTips(opts){
var elements=$('#'+opts.form).get(0).elements;
for(i=0; i<opts.tips.length;i++){
$(elements[opts.tips[i].field]).parent().prepend(opts.tips[i].tip);
}
var clue_opts={arrows:true,splitTitle: '|',closePosition: 'title',sticky:true,dropShadow:false,mouseOutClose:true,
onShow:function(ct, ci){
if(!$.browser.webkit) $(ct).css('top',$(ct).position().top- 30+'px');
}
}
$('#'+opts.form).find(".infotip").cluetip(clue_opts);
}
PHP
function setInfoTipsJavascript($form_id,infotips){
if (count($this->infotips) <1 ) return '';
//get all tip names
$names_csv=join(',',array_keys(infotips));
//get tips details from db
$query="select name, description from infotips where FIND_IN_SET(name ,'$names_csv')";
//run the query, in Yii you have to use InfoTipsModel , I have skipped that portion
//$infotipS , lets say this is query object
$tips=array();
while($tip=$infotipS->Assoc()){
$this->infotips[$tip['name']]['tip']="<a href='javascript:void(0)' class='infotip' title='|{$tip['description']}'> </a>";
$tips[]=$this->infotips[$tip['name']];
}
$tips=json_encode($tips);
$script="\nrenderInfoTips({\"form\":'{$form_id}', \"tips\":{$tips}});\n\n";
echo $script;
}
I am sharing this hoping this will give u some idea. Its obvious you have to : create infotips table, a model for that, and create a widget etc to fetch infotips related to your form fields . As someone suggested, if you are using Bootstrap, you have better way to do that.