I am using customize Ag-grid ,inside that using input field type number on keypress , I am calling a function but it is not calling in my keypress
On keypress I am calling a following function:
field: "TotalQty", headerName: "TOTAL KIT QTY",
editable: true,
filter: 'agNumberColumnFilter',
cellRenderer: params => {
return '<input (keypress)="onCellValueChanged($event)" type="number" onpaste="return false" autocomplete="off">';
},
I want when I enter a number in ag-grid my function get called.
You need a cellEditor, not a cellRenderer
Related
I have a aurelia slickgrid table with start date and end date and it is fine. Backend api response is in odata format. Now i want to make a new column called Status and status is calculated as :
<td class="col-xs-4 col-md-2">
<div>
<div if.bind="doesLicenseActivate(lic)">
Activates on ${lic.DateStart}
</div>
<div if.bind="didLicenseEnd(lic)">
Ended on ${lic.DateEnd}
</div>
<div if.bind="isLicenseCurrentlyActive(lic)">
Current License
</div>
<div if.bind="lic.IsCanceled">
Cancelled on ${lic.DateEnd}
</div>
</div>
Basically, those fucntions above such as doesLicenseActivate are bunch of Moment.js function doing some date caclulations. My column looks like:
/* Define grid Options and Columns */
private defineMembershipGrid() {
return this.columnDefinitionsMembershipHistory = [
{ id: "DateStart", name: "Start Date", field: "DateStart", formatter: Formatters.dateEuro, sortable: true, filterable: true, minWidth: 100, },
{ id: "DateEnd", name: "End Date", field: "DateEnd", formatter: Formatters.dateEuro, sortable: true, filterable: true, minWidth: 100, },
{ id: "Duration", name: "Duration", field: "Duration", formatter: this.DurationFormatter, sortable: true, filterable: true, minWidth: 100, },
// make a status column here
];
}
This is how it looks like:
And this is what i want to do, basically make a new Status column and it uses the values from first two columns (start and end date)
Just use a Custom Formatter, see Custom Formatter - Wiki it has the dataContext which is the item object of the entire row. You can use MomentJS to do your calculation and display "10 months" or "Current License" (I guess that last one would be a calculation and a switch/case). You can do anything you want in a Custom Formatter and it will be recalculated every time the grid re-render, if you change value of another cell it will also be recalculated. You might have problem to filter and sort though and in that case you might want to not show a filter and remove the sort.
Using Tablulator (great product!), I am trying to keep the cursor from resetting to the first editable cell in the table after editing a cell. The replaceData function is updating the data element, and while the scroll position does not change, the cursor is reset. I'm not sure how to do this correctly. The documentation, while great, is silent about cursor position beyond the next(), etc methods, which I cannot quite get to work.
In my vue.js table definition component, I have a watch like this:
watch: {
tableData: {
handler: function (newData) {
this.tabulator.replaceData(newData);
},
deep: true,
}
},
and a cellEdited method inside mounted like this:
mounted() {
let self = this;
//todo Possibly validate that cater tips is less than total tips since cater tips is a portion of total tips
self.tabulator = new Tabulator(self.$refs.myTable, {
height: 380, // set height of table (in CSS or here)
placeholder: 'Click "Load Store Tips" to edit data',
data: self.tableData, //link data to table
reactiveData: true, //enable data reactivity
downloadConfig: {columnCalcs: false},
addRowPos:"bottom",
history:true,
layout: "fitDataFill",
initialSort:[
{column:"storeID", dir:"asc"},
],
//Define Table Columns
columns: [
{title: "Store ID", field: "storeID", sorter:"number"},
{title: "Store Tips", field: "inStore_tips", align: "right", formatter: "money", editor: "number", bottomCalc: "sum"},
{title: "Cater Tips", field: "cater_tips", align: "right", formatter: "money", editor: "number", bottomCalc: "sum"},
{title: "Client ID", field: "clientID"},
],
////////////////////////////////////////////////////////////////////////////
// When a cell is edited, write the data out to the server to ensure it is
// always in a saved state.
////////////////////////////////////////////////////////////////////////////
cellEdited: function (e, cell) {
//self.colPos = cell.getColumn(); //trying to save the cursor pos, but generating error
//self.rowPos = cell.getRow(); // generating error
self.PostTipsEventMethod();
}
});
Here is what I have tried:
Tried capturing the row and column position, and then setting that after the replaceData table render, and after the cellEdited method
Tried using the next() method to move the cursor to the next cell inside the cellEdited method, before and after the replaceData function.
Can someone guide me a bit further on this? I've searched through the tabulator element in the debugger trying to find the row and column numbers of the cell I'm editing, but so far, no joy. I guess I don't understand the lifecycle of the table rendering well enough.
Thank you!
I am creating dynamic UI/form using ngx-formly/bootstrap(not using material). I want to display datepicker control so I have displyed custom bsdatepicker control using ngx-bootstrap/datepicker. Now I want to do validations on this datepicker e.g IfI have from and to date then From date should not be less than current date or To Date should not be grater than from date. Any help will be appriciated.
//datepicker.html
<pre><input type="text"
id="dob-id"
class="form-control calendar"
placement="bottom"
bsDatepicker
[formlyAttributes]="field"
#dobDate="bsDatepicker"
[bsConfig]="bsConfig"
placeholder="YYYY-MM-DD"
[class.is-invalid]="showError" class="" style="width: 350px;">
took separate component for this and registered in app.modeul
//in scheema
{
key: 'date1',
type: 'bsdatepicker',
templateOptions: {
label :'From Date',
required: true,
},
},
{
key: 'date2',
type: 'bsdatepicker',
templateOptions: {
label :'To Date',
required: true,
},
},
The validation is handled by Formly so all you need is to just define validation along with its messages you may check our examples in the docs:
https://formly.dev/examples/validation/built-in-validations
https://formly.dev/examples/validation/custom-validation
https://formly.dev/examples/validation/validation-message
ngx-bootstrap is a wrong tag here, I think
I am rendering two texts based on a condition and be able to pass methods to the click event based on the condition. The default text is ADD TO COLLECTION because initially hasPaid property is false. Once payment has been made, I want to set that property to true
The function addToCollection first opens a modal, on the modal, the handlePayment function is implemented. I have been able to conditionally render the div to show either ADD TO COLLECTION or DOWNLOAD using v-on="". I also return hasPaid property from the handlePayment function.
<div class="float-right peexo-faded-text card-inner-text" :face="face" v-on="!hasPaid ? {click: addToCollection} : {click: handleDownload(face)}">
{{!hasPaid ? 'ADD TO COLLECTION': 'DOWNLOAD' }}
</div>
data: function () {
return {
hasPaid: false,
}
},
addToCollection(){
this.showcollectionModal = true;
},
handlePayment(){
this.showcollectionModal = false;
let accept = true;
this.showpaymentsuccessmodal = true;
//this.hasPaid = true;
return {
hasPaid: accept
}
},
I want to be able to set hasPaid property on the handlePayment function for the render function to pick it, so that the handleDownload function can then work.
The last section of this bit is going to be problematic:
v-on="!hasPaid ? {click: addToCollection} : {click: handleDownload(face)}"
When hasPaid is true it will invoke the method handleDownload immediately. That is, it will be called during render, not when the <div> is clicked.
You could fix it by 'wrapping' it in a function:
{click: () => handleDownload(face)}
I've used an arrow function in my example but you could use a normal function if you prefer.
Personally I wouldn't try to do this using the object form of v-on.
My first instinct is that you should consider just having two <div> elements and use v-if to decide which one is showing.
If you did want to use a single <div> I would put the click logic in a method. So:
<div class="..." :face="face" #click="onDivClick(face)">
Note that despite the apparent syntactic similarity to the way you defined your click listener this won't invoke the method immediately.
Then in the methods for the component:
methods: {
onDivClick (face) {
if (this.hasPaid) {
this.handleDownload(face)
} else {
this.addToCollection()
}
}
}
i have a grid panel with a column that if you click you downalod a file associate to this row.
In extjs 2 i just define a new renderer that is a function who return only return the String format of an url like this:
function DownaloadFile(value, metadata, record, rowIndex, colIndex, store)
if (record.data.id){
return String.format('<b><img src="<c:url value="/icons/icon_download.gif"/>"/></b>',record.data.id);
}
This syntax is not rigth in ExtJS4.2 because String.format is now Ext.String.format but when i made this change nothig happens.
I try to use the new actioncolumn in the column definition in this way:
{
xtype:'actioncolumn',
text: "download",
width:80,
items: [{
sortable: false,
align:'center',
iconCls: 'download_icon',
hrefTarget: '_blank',
handler: function(grid, rowIndex, colIndex) {
var rec = reportPanel.getStore().getAt(rowIndex);
return Ext.String.format('<b></b>',rec.id);
}
}]
}
but something is wrong because javascript debugger doesn't made any type of error.
Thanks in advance.
The handler property of actioncolumn (witch renders an icon, or a series of icons in a grid cell, and offers a scoped click handler for each icon) is documented as:
A function called when the icon is clicked.
Consider using the templatecolumn (witch renders a value by processing a Model's data using a configured XTemplate) instead and passing it a tpl property.