I want to represent boolean values in the form of icons for a column field in data table primeng. Following is a piece of code:
<p-dataTable [value]="ARRAY_METADATA" rowHover="true">
<p-column field="id" header="Field ID" [sortable]="true"></p-column>
<p-column field="booleanField" header="Boolean Field" [sortable]="true"></p-column>
</datatable>
How am I supposed to show maybe a "Tick" for true values and "cross" for false values for the booleanField?
<span class="badge">BOOLEAN VAUE</span>
I guess the above code works well in case of pure HTML. But again how am I suppose to put the conditional statement to output two different icons for different boolean values?
Any quick thoughts??
I tried using ngIf but it still does not display the way I need. It simply displays the content of ng-template:
<p-column field="someStringField" header="Some String Field">
<div *ngIf="someStringField; else elseBlock">
<button type="button" pButton icon="fa-check"></button>
</div>
<ng-template #elseBlock pTemplate="body" >
<button type="button" pButton icon="fa-times"></button>
</ng-template>
</p-column>
I believe you have to put any content you want to be visible in the column to be in the ng-template
<ng-template let-col="rowData" pTemplate="body">
<button *ngIf="col.someValue" type="button" pButton icon="fa-check"></button>
<button *ngIf="!col.someValue" type="button" pButton icon="fa-times"></button>
</ng-template>
Related
I have a Kendo-Grid with pagination and kendo-grid-checkbox-column,
and I want to be able to check the checkboxes according to the backend data.
Though it seems its impossible to use [kendoGridSelectionCheckbox] combined with [checked].
`
<kendo-grid #factoring
[data]="factoringSites"
[pageSize]="factoringSitesPageSize"
[skip]="skipFactoring"
[pageable]="true"
(pageChange)="pageChange($event, 'factoring')"
[height]="300"
[selectable]="{enabled: true, checkboxOnly: true }"
kendoGridSelectBy="id"
[(selectedKeys)]="myFactoringSitesSelection"
(selectedKeysChange)="onSelectedKeysChange($event, 'factoring')"
disabled="!factoringChecked">
<kendo-grid-checkbox-column [width]="40">
<ng-template kendoGridHeaderTemplate let-dataItem>
<input type="checkbox" kendoCheckBox id="selectAllFactoringCheckboxId" kendoGridSelectAllCheckbox
[state]="selectAllFactoringState"
(selectAllChange)="onSelectAllChange($event, 'factoring')"
[disabled]="selectAllReverseFactoringState == 'checked'">
<label class="k-checkbox-label" for="selectAllFactoringCheckboxId"></label>
</ng-template>
<ng-template kendoGridCellTemplate let-dataItem let-factoringidx="rowIndex">
<input type="checkbox"
kendoCheckBox
[kendoGridSelectionCheckbox]="factoringidx"
[checked]="true"
(change)="selectionChangeHandler($event, dataItem,'factoring')"
/>
</ng-template>
</kendo-grid-checkbox-column>
Selecting checkboxes without [kendoGridSelectionCheckbox] selects the same placed row in the next page, even though the index of the row is completely different..
So how can I use the combination of both, or just not selecting the the row of the next page
Example - https://stackblitz.com/edit/angular-rssxbc
I'd like to figure out how to hide the index/result on an empty search query.
In my blade I have the code (slightly modified from the official documentation):
<ais-instant-search index-name="myIndex" :search-client="searchClient">
<ais-search-box placeholder="Search here"></ais-search-box>
<ais-state-results>
<template slot-scope="{ state: { query } }">
<ais-hits v-if="query.length > 0">
<div slot="item" slot-scope="{ item }">
<h2>#{{ item.Title}}</h2>
<p>#{{ item.Text}}</p>
</div>
</ais-hits>
</template>
</ais-state-results>
</ais-instant-search>
If I enter a search query this works fine, but on empty query this displays the following unwanted notification on my page (instead of the before unwanted index):
Use this component to have a different layout based on a certain state.
Fill in the slot, and get access to the following things on the slot-scope:
results: [
"_rawResults",
"hits",
"nbHits",
[..]
How can I hide this notification?
Ah, I just found a solution I think.
This notification text is displayed if there's no DOM element inside <ais-hits>. And in case of no query there isn't, since "v-if" removes that. So If instead of "v-if" I use "v-show" it works as I need it, since the DOM element still exists, but isn't displayed (display:hidden).
<ais-instant-search index-name="myIndex" :search-client="searchClient">
<ais-search-box placeholder="Search here"></ais-search-box>
<ais-state-results>
<template slot-scope="{ state: { query } }">
<ais-hits v-show="query.length > 0">
<div slot="item" slot-scope="{ item }">
<h2>#{{ item.Title}}</h2>
<p>#{{ item.Text}}</p>
</div>
</ais-hits>
</template>
</ais-state-results>
There ought to be a better way of doing this, but I can't find it.
There are a number of elements with the same selector on the page. Only the value property differs. Controls are created dynamically, so I can't pin them down any more precisely.
I am searching for an element with a specific value, using Cypress . HTML looks like this:
<input type="button" value="Save" data-cy-component="button-button" class="btn form-control btn-info">
When I find it I want to click it & jump out of the loop.
This is what I have:
const buttonButton = '[data-cy-component=button-button]';
cy.get(buttonButton).each(($el, index, $list) => {
cy.log(`index: ` + index);
if (index === 5) {
cy.wrap($el)
.should('have.value', 'Save')
// Click Save button.
.click();
}
});
This method works, but seems vulnerable. If my Save button is no longer the 5th (or 6th) element, the test will fail. Is there a way I can test it with an IF rather than a SHOULD?
I might not understand what you are doing, please correct me in comments if I have this wrong. What I believe you are trying to do is find a element by it's value. I wrote this and it worked. Please correct me If what you are trying to do is different..
<input type="button" value="Save" data-cy-component="button-button" class="btn form-control btn-info">
cy.get('[value="Save"]').should('exist');
cy.get('[value="Save"]').click();
cy.get('input[value="Save"]').should('exist');
cy.get('input[value="Save"]').click();
This also worked
cy.get('[data-cy-component=button-button][value=Save]').should('exist');
cy.get('[data-cy-component=button-button][value=Save]').click();
Per your comment below you said there were 2 on the screen
I created this HTML to test it. Notice one is hidden. I WOULD NEED TO KNOW WHAT IS MAKING YOURS HIDDEN or not visible. Also are they in different divs that perhaps have unique ids?
<input type="button" value="Save" data-cy-component="button-button" class="btn form-control btn-info">
<input style="visibility:hidden" type="button" value="Save" data-cy-component="button-button" class="btn form-control btn-info">
cy.get('[value="Save"][style!="visibility:hidden"]').should('length', 1);
cy.get('[value="Save"][style!="visibility:hidden"]').click();
I am building an Angular application. In my KendoUI Grid, EmployeeID and Total hours are numbering, not sure how to set the filter for them.
ReportDate which is stored in the format mm/dd/yyyy (03/16/2018), I am using filter="date" format="{0:d}" as given in an example on Telerik website, but with this filter, the date displays as 3/16/2018 instead of 03/16/2018 and filter doesn't get applied. Please guide how to correct format.
<kendo-grid
[data]="gridData"
[pageSize]="state.take"
[skip]="state.skip"
[sort]="state.sort"
[filter]="state.filter"
[sortable]="true"
[pageable]="true"
[filterable]="true"
(dataStateChange)="dataStateChange($event)"
[kendoGridBinding]="employees"
[height]="600" [group]="group" [pageable]="true" [pageSize]="10">
<ng-template kendoGridToolbarTemplate>
<button type="button" kendoGridExcelCommand>
<span class="k-icon k-i-file-excel"></span>Export to Excel</button>
</ng-template>
<kendo-grid-column field="EmployeeID" title="Employee ID" [width]="150"></kendo-grid-column>
<kendo-grid-column field="ReportDate" title="Report Date" width="240" filter="date" format="{0:d}" ></kendo-grid-column>
<kendo-grid-column field="BeginTime" title="Begin Time"></kendo-grid-column>
<kendo-grid-column field="EndTime" title="End Time"></kendo-grid-column>
<kendo-grid-column field="TotalHours" title="Total Hours"></kendo-grid-column>
<kendo-grid-column field="Approvedby" title="Approved by"></kendo-grid-column>
<kendo-grid-column field="Timestamp" title="Time stamp"></kendo-grid-column>
<kendo-grid-excel fileName="Report.xlsx" [fetchData]="allData"></kendo-grid-excel>
</kendo-grid>
I don't really get your question since it's solution may be just changing the format, so you wanted to it to be 03/16/2018. Then
why dont you just change the format to filter="date" format="{0:dd/MM/yyyy}
as long as your ReportDate field is stored as date in the datasource it should work.
Example : taken from kendo example, i'm just slightly changing the format here
I have implemented a Kendo DropDownlist as below:
<kendo-dropdownlist v-if="PaymentTypeList != null"
name='PayType'
class="form-control"
v-model="vModel.PayType"
:data-text-field="'Text'"
:data-value-field="'Id'"
:auto-bind="true"
:data-source="PaymentTypeList">
</kendo-dropdownlist>
I have to render only one div below according the value selected on the dropdown list.
<div v-if="vModel.PayType == PaymentTypes.Cash">
<div class="row">
<div class="col-sm-3">
<div class="form-group">
<label>Pay Code
<span class="text-red">*</span>
</label>
<input type="text" class="form-control" id="PayCode" name="PayCode" autocomplete="off" v-model="vModel.PayCode">
</div>
</div>
</div>
</div>
<div v-else>
<kendo-dropdownlist v-model="dropdownlistValue"
:data-source="dataSourceArray"
:data-text-field="'text'"
:data-value-field="'value'">
</kendo-dropdownlist>
</div>
But the first div is never shown whatever is the condition either false or true.
When i try with the v-show it works.
How should i make this code able to work on v-if.
The plunker implementation is here on the link
https://plnkr.co/edit/Xbhm67KjnpovOWNBy2O2?p=preview
Edited: According to vue js
v-if is also lazy: if the condition is false on initial render, it will not do anything - the conditional block won’t be rendered until the condition becomes true for the first time.
But in my case when the initial condition is true the first div is rendered, and after that the first division is never rendered whatever will be the condition either true or false.
I suggest you solve this issue by using v-show. v-if is "better" suited for (not) rendering the DOM at all opposed to v-show that is just manipulating display of DOM (hidden/shown).
Forked your Plunker to this one: https://plnkr.co/edit/PjOhBbuTO6czxvQQ10da?p=preview (had to introduce "empty" select value).
Hope it helps...