I am new in ag-grid, I am using ag-grid in the angular5+ app.
I have implemented a custom column level filter by implementing IHeaderAngularComp interface. it's working fine in desktop/laptop. but it's not working in touch devices like iPad/mobile etc.
it seems to the header is not detecting touch event.
In the custom header, I implemented an input text box. it's working fine in desktop but when I use touch device iPad/mobile, the input box gets disable.
ag-Grid version: X.X.X
"ag-grid": "15.0.0",
"ag-grid-angular": "15.0.0"
Angular version: 5.1.2
//custom-header.component.html
<div>
<a class="btn btn-sm text-truncate py-0" [ngStyle]="{'width':'98%'}" (click)="sortBy($event)">
<i class="fa" [ngClass]="{'fa-sort-desc': currentOrder=='desc', 'fa-sort-asc': currentOrder=='asc'}"
[hidden]="!currentOrder"></i>
<span>{{params.displayName}}</span>
</a>
<div class="input-group input-group-sm pl-2" [ngStyle]="{'width':'90%'}" *ngIf="params.bISActiveForFilter">
<input type="text" class="form-control form-control-sm align-self-center filterTxtBox py-0" name="search"
(keyup.enter)="onEnterPress($event)" [(ngModel)]="searchText">
<span class="input-group-btn filterTxtClsBtn" [hidden]="!searchText">
<button type="button" class="btn btn-outline-secondary btn-sm py-0" (click)="clearColFilter($event)"><i
class="fa fa-times"></i></button>
</span>
</div>
And from the parent component, I'm calling custom-header component as below
columnDef.headerComponentFramework = CustomHeaderComponent;
Related
How can I input a link in the button when I press the button?
<div class="buttons">
<span class="sold-out-tag position-top-right">Best Seller</span>
<button class="btn custom-btn position-bottom-right"> Add to cart</button>
</div>
Also you can trigger a link by JavaScript.
<button
onclick="window.location(this.getAttribute('data-link'))"
data-link="/hello">go to hello</button>
One way could be to use an anchor tag instead of the button and make it look like a button.
HTML:
<div class="buttons">
<a class="btn custom-btn position-bottom-right"> Add to cart</a>
</div>
CSS:
.custom-btn {
border: medium dashed green;
}
Alternatively, you could do:
<button class="btn custom-btn position-bottom-right" onclick="location.href='yourlink.com';"> Add to Cart </button>
Try this:
<a href='http://my-link.com'>
<button class="GFG">
Click Here
</button>
</a>
You can use the anchor tag and provide a Bootstrap class for the button, like,
<a class="btn btn-success" href="link"> Add to Cart</a>
If the label "Add to cart" matches the expectations, we'd be talking about a form. A form that causes an element to be added typically uses the POST method:
<form class="buttons" method="post" action="/path/to/add/to/cart/script">
<input type="hidden" name="product" value="123">
<span class="sold-out-tag position-top-right">Best Seller</span>
<button class="btn custom-btn position-bottom-right"> Add to cart</button>
</form>
Alternatively, there's GET as well:
<form class="buttons" method="get" action="/path/to/add/to/cart/script?product=123">
<span class="sold-out-tag position-top-right">Best Seller</span>
<button class="btn custom-btn position-bottom-right"> Add to cart</button>
</form>
Since GET doesn't carry additional payload, you'll get the same effect with a regular anchor:
Add to cart
You don't want search engine spiders to populate carts, so you typically leave GET for data fetching.
I'm trying to make an Edit Modal using Angular. the td fields get a value from this table and send it to a modal using the (click) event
<tbody>
<tr *ngFor="let mascota of mascotas" class="text-center ">
<td>{{mascota.name}}</td>
<td>{{mascota.birthDate}}</td>
<td>{{mascota.species.name}}</td>
<td>
<button class="btn btn-info mx-2">Detalles</button>
<button class="btn btn-warning mx-2" (click)="openSM(contenido,mascota)">Editar</button>
<button class="btn btn-danger mx-2">Remover</button>
</td>
</tr>
</tbody>
This is the function that I made in the component, used a const in order to get the values and send it to the modal
openSM(contenido, mascota) {
const modalRef = this.modal.open(contenido,{size:'lg',centered:true});
modalRef["mascota"] = mascota;
console.log(modalRef);
}
And this is the modal where I'm tying to get the value
<ng-template #contenido let-modal>
<div class="modal-header">
<h4 class="modal-title">Editar datos de mascota</h4>
<button class="close" aria-label="close" type="button" (click)="modal.close()">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form class="form-horizontal form-material" id="editform" autocomplete="off">
<div class="form-group m-t-10">
<div class="col-sm-10">
<label>Nombre de Mascota:</label>
<input class="form-control" type="text" placeholder="Nombre" value="mascota.name" />
</div>
</div>
</form>
</div>
</ng-template>
But when I click on the Edit button it didn't recognize the value
And when I used {{}} the const get an 'undefined' value
Error from Inspect Element
Contenido Data
Is there any way to get that value and put it into the input tag? I want to do the same with the others td fields, but first this needs to work well
Console log of the inputs in the constructor
Html code:
<div class="col-md-4" *ngFor="let card of allCards">
<p class="card-text">Card Color: {{card.color}}</p>
<button type="button" class="btn btn-sm btn-primary product-btn" (click)="addCard()">Add Card</button>"
Here I also want to bind the value "card.color" into another variable (maybe using ngModel) so that I can use it inside my typescript file in angular 8.
I tried the below but not working:
<p class="card-text" [(ngModel)]="cardColor">Card Color: {{card.color}}</p>
You could send the contents to the button click event's handler.
Template (*.html)
<div class="col-md-4" *ngFor="let card of allCards">
<p class="card-text">Card Color: {{card.color}}</p>
<button
type="button"
class="btn btn-sm btn-primary product-btn"
(click)="addCard(card.color)"
>
Add Card
</button>
Controller (*.ts)
addCard(color: any) {
// use `color` here
}
I want to change the text font for my options in a select box. The problem is that I also want to display icons before some options. If I change the font-style, the font-awesome icons won't be displayed and I don't think it is possible to style the options themselves, only the whole select box.
Here is some of my code:
<div class="form-group">
{{ Form::label('qualifications', 'Qualifications') }}<br>
<select size="5" class="fa form-control" id="selectedqualification">
<!-- displays an fa-warning icon after every qualification that's expiring -->
#foreach ($employee_qualifications as $key => $qualification)
#if($expiringQualifications->contains($qualification))
<option value="{{$key}}">{{$qualification}} </option>
#else
<option value="{{$key}}">{{$qualification}}</option>
#endif
#endforeach
</select>
<button
type="button"
class="btn btn-default pull-right"
data-toggle="modal"
data-target="#qualificationModal"
data-qualifications="{{ $qualifications }}"
data-qualification_names="{{ $qualification_names }}">
Add
</button>
<button type="button" id="removequali" class="btn btn-danger pull-right">Remove</button>
<br>
<br>
</div>
I am developing a web application built off of Bootstrap 3.2.0. Everything is working just fine except that all my input arrays are not able to be edited within Firefox 33.1 (Safari 8.0 and Chrome 38.0.2125.122 work fine).
My settings page is looks like this:
<!-- Tab panes -->
<form method="post" class="form-horizontal" role="form">
...
<div class="tab-content">
<div role="tabpanel" class="tab-pane" id="social">
<button type="button" class="social-add btn btn-success"><span class="glyphicon glyphicon-plus"></span> Add Social Icon</button>
<br/><br/>
<!-- Social Icons -->
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Social Icons</h3>
</div>
<div class="social-div panel-body">
// Loop ...
<div class="social-divs form-group">
<label class="col-sm-1"><span class="glyphicon glyphicon-move pull-right"></span></label>
<div class="col-sm-11">
<div class="col-sm-3">
<select name="social-type[]" class="form-control">
// Loop ...
<option value="...">...</option>
// End Loop ...
</select>
</div>
<div class="col-sm-6">
<input name="social-link[]" class="form-control" type="text" value="...">
</div>
<div class="col-sm-3">
<button type="button" class="social-remove btn btn-danger"><span class="glyphicon glyphicon-minus"></span> Remove</button>
</div>
</div>
</div>
// End Loop ...
</div>
</div>
</div>
...
</form>
As you can see I am using the HTML input array method to get all social icons since the user dynamically creates them and can reorder them. This all works perfect in Safari and Chrome as mentioned before, but the select box and textfield are not able to be edited in Firefox.
The weird thing is that if I just had:
<input name="social-link[]" class="form-control" type="text" value="...">
outside of a Bootstrap panel and tab system then the textfield is editable. So there must be some compatibility issues with Firefox and Bootstrap Panels or Tabs.
Thanks for your help in advance :)
I was able to determine that it was the way I was calling jQuery sortable on a div container. Firefox does not like when you call disableSelection() on all sortable elements like this:
$("#sort").sortable().disableSelection();
So instead just use:
$("#sort").sortable();
A much better thread can be found here.