In my Angular App, I have a requirement to display total number of rows on current page in pagination section. But currently Devextreme grid row count returns total row count irrespective of page.
Below is my code :-
<dxo-paging [pageSize]="5"> </dxo-paging>
<dxo-pager
[visible]="true"
[allowedPageSizes]="allowedPageSizes"
[displayMode]="displayMode"
[showPageSizeSelector]="showPageSizeSelector"
[showInfo]="true"
infoText="Displaying {0} - {2} of {1} "
[showNavigationButtons]="showNavButtons"
>
</dxo-pager>
Below screenshot :-
Now i have only 5 rows in the grid but it shows 11 which is the total row count which i have received from database. Please advise.
If i understand correctly, you want to show 1-5 on the first page, 6-10 on the second page and so on. You can achieve that by binding a function to the [infoText] property and customize the text output. This is not found in the official documentation but it works.
HTML:
<dxo-paging [pageSize]="5"> </dxo-paging>
<dxo-pager
[visible]="true"
[allowedPageSizes]="allowedPageSizes"
[displayMode]="displayMode"
[showPageSizeSelector]="showPageSizeSelector"
[showInfo]="true"
[infoText]="infoText"
[showNavigationButtons]="showNavButtons">
</dxo-pager>
JS/TS:
infoText(currentPageNumber, totalPageCount, totalRowCount) {
const myPageSize = 5; // use global variable instead and bind it to dxo-paging
const from = +currentPageNumber * myPageSize - (myPageSize - 1);
const to = +currentPageNumber * myPageSize;
return `Displaying ${from}-${to}`;
}
Related
I am get stucked ,I installed Quasar version 2.0.0 but it does not has a property to get the filtered or sorted rows.In previous versions of q-table it had a computedRows property but in the latest version it didn't
I am trying to add new features to the q-table like highlight focused row and enable keyboard features to allow in-line editing etc... so I need to know the row data(model) and its corresponding html row.
Quasar ver:2.0.0
Vuejs 3
Typescript
I found a temporary solution:
here is my q-table :
<template v-slot:body="props">
<q-tr
class="row-data"
:props="props"
:rowID="props.row.id"
>
<q-td
#click="onTdClick($event, props.row,
props.rowIndex, index)"
v-for="(col, index) in props.cols"
:key="col.name"
:props="props"
:column="col.name"
>
<slot :name="'column-' + col.name" :props="props" :row="props.row">
{{ col.value }}
</slot>
<slot
:name="'column-edit-' + col.name"
:props="props"
:row="props.row"
>
</slot>
</q-td>
</q-tr>
</template>
//Then I get the filtered rows by getting the displayed tr elements(each tr element has rowID attribute) :
getHtmlRows(): HTMLTableRowElement[] {
let htmlTable = this.getHtmlTable();
let htmlRows: HTMLTableRowElement[] = Array.from(
htmlTable.querySelectorAll("tr.row-data")
);
return htmlRows;
},
//If I want to get the row data corresponding to html row (tr) I used :
getRowData(id: number): any {
let table = this.$refs.qtableRef as QTable;
let rowData = table.rows?.find((rw) => rw.id == id);
return rowData;
},
getRowDataByHtmlRow(htmlRow: HTMLTableRowElement): any {
let rowID = htmlRow.getAttribute("rowID");
return this.getRowData(Number(rowID));
},
There's an undocumented way of accessing the computedRows and computedRowsNumber properties that I only found after extensive Google searching...
Give your table a ref: <q-table ref="table" />
Access these properties via the ref:
this.$refs.table.computedRows
this.$refs.table.computedRowsNumber
This was added in v2.0.0-beta.9 (March 8, 2021)
Explanation
computedRows -- gives you the displayed rows on current page
Example: if there are 30 results in total, but only 10 are shown in the current page, this will only return those 10 rows -- want them all? see filteredSortedRows
filteredSortedRows -- gives you ALL the displayed rows across all pages
Example: if there are 50 rows in total, but 30 rows match the filtered text and show up, and 10 rows are shown per page, this will return ALL those filtered 30 rows. If there's no filtered text, then this will return all those original 50 rows
computedRowsNumber -- gives you the length for the total displayed rows across all pages
same as filteredSortedRows.length
When server-side data fetching is enabled the properties above may behave differently. I had to check the source code to discover that, but haven't tested this in practice.
Source | Where I found it
I'm using Splunk version 7.0.1 and I'm trying to highlight my table cell colors based off of two other fields. Splunk has a sample to do this in Javascript that uses hardcoded values, but I need the values based off of a different field. I have the script working, but it randomly highlights some cells in the wrong color. I can't seem to figure out why.
The "Average Response Time" should be:
Red if the value is greater than or equal to the Threshold
Amber if the value is greater than or equal to the Objective but less than the Threshold
Green if the value is less than the Objective
My Table:
Transaction Count "Average Response Time" Objective Threshold
A/P - Close Module - FM1 1 7.52 2.00 6.00 **<-Colored Red and correctly**
...
A/P - Diagnosis- Run Search - FM1 2 4.01 100.00 100.00 **<- Colored Amber incorrectly**
Here is the dashboard source of the table:
<table id="response_time_highlight">
<title>NOTE: An Objective and/or Threshold of 100 indicates that an Objective and/or Threshold have not been identified for this particular transaction type.</title>
<search>
<query>index=arm sourcetype="arm:transaction" region="$region$" sitename="$sitename$" transaction_status IN ( $transaction_status$ ) username IN ( $username$ ) workstation_name IN ( $workstation_name$ ) transaction_name IN ( $transaction_name$ )
| stats count avg(response_time) AS response_time BY transaction_name objective threshold
| eval threshold=round(threshold,2)
| eval objective=round(objective,2)
| eval response_time=round(response_time,2)
| fields transaction_name count response_time objective threshold
| rename response_time AS "Average Response Time" transaction_name AS "Transaction Type" objective as Objective threshold as Threshold count as "Transaction Count"
| sort +transaction_name</query>
<earliest>$search_time.earliest$</earliest>
<latest>$search_time.latest$</latest>
<sampleRatio>1</sampleRatio>
</search>
<option name="count">20</option>
<option name="dataOverlayMode">none</option>
<option name="drilldown">none</option>
<option name="percentagesRow">false</option>
<option name="refresh.display">progressbar</option>
<option name="rowNumbers">true</option>
<option name="totalsRow">false</option>
<option name="wrap">true</option>
</table>
Here is the Javascript code (modified version of the dashboard examples one):
require([
'underscore',
'jquery',
'splunkjs/mvc',
'splunkjs/mvc/tableview',
'splunkjs/mvc/simplexml/ready!'
], function (_, $, mvc, TableView) {
var objective_value;
var threshold_value;
// Row Coloring Example with custom, client-side range interpretation
var CustomRangeRenderer = TableView.BaseCellRenderer.extend({
canRender: function (cell) {
// Enable this custom cell renderer for response_time field
return _(['Average Response Time', 'Objective', 'Threshold']).contains(cell.field);
},
render: function ($td, cell) {
// Add a class to the cell based on the returned value
var value = parseFloat(cell.value);
if (cell.field === 'Objective') {
objective_value = value;
}
if (cell.field === 'Threshold') {
threshold_value = value;
}
// Apply interpretation for number of historical searches
if (cell.field === 'Average Response Time') {
if (value >= threshold_value) {
$td.addClass('range-cell').addClass('range-severe');
}
else if (value >= objective_value) {
$td.addClass('range-cell').addClass('range-elevated');
}
else if (value < objective_value) {
$td.addClass('range-cell').addClass('range-low');
}
}
// Update the cell content
$td.text(value.toFixed(2)).addClass('numeric');
}
});
mvc.Components.get('response_time_highlight').getVisualization(function (tableView) {
// Add custom cell renderer, the table will re-render automatically.
tableView.addCellRenderer(new CustomRangeRenderer());
});
});
EDIT: Added a console.log to the javascript showing the output of each field. Noticed that the first row showing as undefined, and pushing the correct numbers down to the next row. Here is the output:
0 undefined undefined
8.64 100 100
7.52 2 6
0 2 6
7.52 2 6
1.11 10 25
2.28 2 6
2.92 2 6
I am angular js beginner, I have a two nested ng-repeat with custom filter, now I am trying to get the record count of Orders shown. It is working fine but after applying product filter it is not working as expected. For example: If order doesn't have any product to display after filtering then I don't want it to be added with my total record count shown.
My html code:
<ul ng-repeat="order in Orders | filter:orderName as recordCount">
Order Id: <b>{{order.orderName}}</b>
<li ng-repeat="product in order.products | filter:productName as prodCount">
<b>Name</b> : {{product.name}}, <b>Price</b>: {{product.price}}
</li>
<li ng-if="prodCount < 1">No Product found</li>
<br/>
</ul>
For better understanding I don't want the count of Order which shows as "No Product found", needed count of Order with products.
I don't know how to proceed in order to achieve my expectation. Help needed thanks in advance.
Record count = (Number Orders shown - Number Orders with No product)
Find my fiddle "fiddle".
You could watch for change, then call the filter productName on each product to calculate the total count, something like this:
First change ng-repeat to store the results of the filtered list into a variable:
<ul ng-repeat="order in ($parent.filteredOrders = (Orders | filter:orderName))">
Then watch for changes, loop through the filtered list and call productName to check if it applies
$scope.$watch(function() {
$scope.totalCount = 0;
if ($scope.filteredOrders) {
$scope.filteredOrders.forEach(function(order) {
var l = order.products.length;
for (var i = 0; i < l; i++) {
if ($scope.productName(order.products[i])) {
$scope.totalCount++;
break;
}
}
});
}
});
And then display the total:
{{totalCount}}
Edit: fiddle
i am trying to display element only when the selling price is bigger than 0
this is my code
.basket-sidebar-right-body-basket-why-not-try
.item-grid-item(dynamic-position, data-rv-each-item='model:suggested', data-rv-on-click='view.attemptToAddItemToCart')
.item-title(data-rv-text='item.WebTitle | startCase')
.item-image(focusable)
img(focusable,data-rv-src='item.ImageUrl', onerror='this.src = "http://placehold.it/237x140";')
.why-not-try-text= strings.whyNotTry
.why-not-try-price
span.currency-symbol £
span.price(data-rv-text='item.SellingPrice | asCurrency')
i am trying to display the why not try price only when item.sellingPrice is bigger than 0
anyone know how i can do that
?
So I have dynamically created form with Jquery and after sending this form. I want to retrive it in correct order which I got myself confused in doing.
The problem is when you add multiple spells to a champion let's say 3 and delete middle one it will description and 'change' won't show up here is the code responsible for retriving variables from those arrays:
foreach($_POST['champion'] as $champion){
if(empty($_POST['GeneralChangeDescription'][$ChampionNumber])){
$NumberOfStats[$ChampionNumber+1] =0;}
if(!empty($_POST['GeneralChangeDescription'][$ChampionNumber])){
foreach($_POST['GeneralChangeDescription'][$ChampionNumber] as $indexGeneral=>$GeneralChangeDescription){
$GeneralChangeDescriptions[$ChampionNumber+1][$indexGeneral+1] = $GeneralChangeDescription;
$GeneralChange[$ChampionNumber+1][$indexGeneral+1]=$_POST['GeneralChange'][$ChampionNumber][$indexGeneral];
$NumberOfStats[$ChampionNumber+1] = count($_POST['GeneralChangeDescription'][$ChampionNumber]);
}
}
if(!empty($_POST['change'][$ChampionNumber])){
foreach($_POST['change'][$ChampionNumber] as $indexSpell=>$change){
$SpellIcon[$ChampionNumber+1][$indexSpell+1] = $change;
$SpellTitle[$ChampionNumber+1][$indexSpell+1] = $_POST['championSpell'][$ChampionNumber][$indexSpell];
$NumberOfSpellsChampion[$ChampionNumber+1] =count($_POST['change'][$ChampionNumber]);
foreach($_POST['SpellDescription'][$ChampionNumber][$indexSpell] as $indexChange=>$SpellDescription){
echo $ChampionNumber;
$ChampionNumberSpellNumber[$ChampionNumber+1][$indexSpell+1] =count($_POST['SpellDescription'][$ChampionNumber][$indexSpell]);
$SpellChange[$ChampionNumber+1][$indexSpell+1][$indexChange+1]=$_POST['SpellChange'][$ChampionNumber][$indexSpell][$indexChange];
$SpellDescriptions[$ChampionNumber+1][$indexSpell+1][$indexChange+1]=$SpellDescription;
}
}
}
$ChampionNumber++;
$championArray[$ChampionNumber] = $champion;
}
Here is JSfiddle with dynamic form http://jsfiddle.net/e2fk9793/
Here is an explanation how those arrays work http://imgur.com/DUsBgGz
The third foreach array is the one that is not working (Notice: Undefined offset: 2)