I have a table with filters, defined as such:
<p-columnFilter ... >
<ng-template pTemplate="filter" let-value let-filterCallback="filterCallback">
<ng-container [ngSwitch]="matchMode">
<filter-one *ngSwitchCase="contains"></filter-one>
<filter-two *ngSwitchCase="startsWith"></filter-two>
</ng-container>
</ng-template>
</p-columnFilter>
By switching between different matching modes I wish to change the way the filter is displayed.
My problem is that primeng column filter does not expose it's match mode (there is no event) so I cannot react to match mode changes.
I had the same problem, you need to save the column filter as a template variable (the #colFilter below) and then you can access it in your template.
The match mode is not directly on the ColumnFilter but it is stored inside the table, which is referenced by the ColumnFilter, as you can see here, to access it in the template we retrieve our filter inside the filters of the table colFilter.dt.filters[field] (and cast it to any to avoid errors, because it could be also an array of filters, but we assume it's not), then we can access its matchMode.
<p-columnFilter ... [field]="field" #colFilter>
<ng-template pTemplate="filter" let-value let-filterCallback="filterCallback">
<ng-container [ngSwitch]="$any(colFilter.dt.filters[field]).matchMode">
<filter-one *ngSwitchCase="contains"></filter-one>
<filter-two *ngSwitchCase="startsWith"></filter-two>
</ng-container>
</ng-template>
</p-columnFilter>
Related
How do I check the table checkbox?
I tried clicking.
ie.Document.getElementsByClassName("x-grid3-hd-checker").Checked = True
<div class="x-grid3-hd-inner x-grid3-hd-checker x-grid3-hd-checker-on" unselectable="on" style="">
<a class="x-grid3-hd-btn" href="#"></a>
<div class="x-grid3-hd-checker"> </div>
<img class="x-grid3-sort-icon" src="/javascript/extjs/resources/images/default/s.gif">
</div>
I can't see a checkbox in the HTML code. But you use getElementsByClassName() in a wrong way for your case. getElementsByClassName() generates a node collection. If you need a specific node, you must get it by it's index in the node collection. First element has index 0.
Please note that the div tag with the CSS class class="x-grid3-hd-inner x-grid3-hd-checker x-grid3-hd-checker-on " is also included in the Node Collection, because a part of the class identifier is identical to "x-grid3-hd-checker ". [Edit: I'm not realy sure if the part must maybe stand at the begin of the identifier]
If you want to check this:
<div class="x-grid3-hd-checker"> </div>
Your code needs the second index of the node collection:
ie.Document.getElementsByClassName("x-grid3-hd-checker")(1).Checked = True
But if there are more tags with the class name "x-grid3-hd-checker" the above line don't work. I can't say anymore until you don't post more HTML and VBA code. The best would be a link to the site.
I am trying to select the value from a dropdown box using vba, the code block for the dropdown box is as follows
<input type="text" id="form_autocomplete_input-1542902425322" list="form_autocomplete_suggestions-1542902425322" placeholder="Search keyword or select filter" role="combobox" aria-expanded="false" autocomplete="off" autocorrect="off" autocapitalize="off" aria-autocomplete="list" aria-owns="form_autocomplete_suggestions-1542902425322 form_autocomplete_selection-1542902425322">
If the value of form_autocomplete_suggestions-1542902425322 was static I would use .Document.getElementById("form_autocomplete_suggestions-1542902425322").Value = "Role: Student" however this seems to be a randomly generated numerical value.
I have had a look and it seems I cannot simply add a wildcard in such as .Document.getElementById("form_autocomplete_suggestions-*").Value = "Role: Student"
And as its randomly generated and such a long number it cannot loop through an array of values. so I am unsure on how to solve this issue.
You can use css attribute equals value selector syntax with the ^ operator to say starts with a certain substring. You could also use * instead, which means contains.
[id^='form_autocomplete_input-']
VBA:
ie.document.querySelector("[id^='form_autocomplete_input-']")
You might also use:
[placeholder='Search keyword or select filter']
Which would be:
ie.document.querySelector("[placeholder='Search keyword or select filter']")
As you indicate this needs to be selected you may need:
ie.document.querySelector("[id^='form_autocomplete_input-']").Selected = True
Reference:
CSS attribute selectors
I need to create select field without float label but I want to have placeholder and default value.
I read docs https://material.angular.io/components/form-field/overview#floating-label and tried to do it by myself.
<mat-form-field [floatLabel]="never">
<mat-select placeholder="All categories" [formControl]="catForm" multiple> //First opportunity for use placeholder
<mat-option *ngFor="let category of categories" [value]="category.name">
{{ category.name }}
</mat-option>
</mat-select>
<!-- <mat-placeholder>All categories</mat-placeholder> -->//Second opportunity for use placeholder
</mat-form-field>
And anyway I get float label. That am I doing wrong?
The correct way is that:
<mat-form-field floatLabel="never">
Square brackets for variables.
Sergei R has the correct usage for basic inputs (input type=text) but for the dropdown (select), it simply doesn't work. Even the Angular Material docs (https://material.angular.io/components/form-field/overview#floating-label) have sample code that (when augmented for this specific scenario, floatLabel="never"), indicate that it doesn't work: https://angular-vij8al.stackblitz.io
I added the fourth example of how to get the placeholder effect without the label (but you lose the ability to use more complex text).
You can remove float label even on mat-select by putting the following into your global styles.scss:
.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label,
.mat-form-field-can-float .mat-input-server:focus + .mat-form-field-label-wrapper .mat-form-field-label{
display: none !important;
}
If you want to apply this to only one mat-select, you can just specify it further in the above code.
I had given up when I saw the previous answers that said it simply can't be done, until I saw this answer for a different question about floatLabel: https://stackoverflow.com/a/66531080/14100714
Just Use this in scss:-
::ng-deep .mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label,
.mat-form-field-can-float .mat-input-server:focus + .mat-form-field-label-wrapper .mat-form-field-label{
display: none !important;
}
I'm using Jinja2 Template to change dynamically a result table for my Motor Racing webapp. It's not perfect, but I'm making my way with patience.
I have a template that is rendered by the URL 'webapp.com/driver/' that's supposed to show the results of a Race where the driver was present inside a table. To make it clear:
The user selects a Driver and goes to webapp.com/driver/someDriver
The someDriver page has a dropdown list with ALL Races the someDriver has been through
User selects someRace from dropdown list
Table is fed by someRace's results
The python flask route I wrote for it:
#app.route('/driver/<driverid>')
def driver(driverid):
driver = db.Drivers.find_one({'_id': ObjectId(driverid)})
races = db.Races.find({'finalresult.driver':driver['unique_name']}).sort([('timestamp', -1)])
racesList = []
for race in races:
raceItem = {
'filename':race['filename'],
'date':datetime.datetime.fromtimestamp(float(race['timestamp'])).strftime('%d-%m-%Y'),
'finalresult':race['finalresult'],
'id':str(race['_id'])}
racesList.append(raceItem)
return render_template('user.html', driver=driver, racesList=racesList)
Now I'm trying to make a dynamic template that changes the Result table everytime the user change the selection.
<div class="row">
<form name="racesForm">
<label for="selRace">Escolha uma corrida!</label>
<select class="form-control" id="selRace">
{% for race in racesList %}
<option value="{{race.filename}}">
{{race.filename}}
</option>
{% endfor %}
</select>
</form>
<hr>
</div>
<div class="row">
<table>
<thead>
<th>Position</th>
<th>Driver</th>
</thead>
<tbody>
<tr>
{% position, drivername in race.finalresult %}
<th>{{position}}</th>
<td>{{drivername}}</td>
{% endfor %}
</tr>
</tbody>
</table>
</div>
But now I'm receiving a error:
Encountered unknown tag 'position'.
And that's it..I'm not sure of how to make this dropdown list change the table dynamically. Any insights 'd be aprecciated.
UPDATE//Giving more info:
Driver is a very simples dict/json that has two keys ['name'] and ['_id']
racesList is an array of many "raceItem"s.
Each "raceItem" has a key anmed 'finalresult' that has data of the positions each driver has finished.
this array is filled with many objects it may seem like the example below:
'finalresult': [
{'position': 1,
'drivername': 'John Doe'},
'position': 2,
'drivername': 'Foo Bazz', etc
}]
As I told before, I want this data to be displayed in a table, depending on what RACE has been selected from the "raceList" dropdown list.
As a solution, I'm thinking of creating a new routing...but I wanted this routing to be displayed in the same page. I don't want the user to be directed to a new window.
First of all, you are getting Encountered unknown tag 'position' as you are using a different data structure. As you mentioned finalresult is a list of dicts. So you need to iterate through it when populating your table.
{% for driver_stat in race.finalresult %}
<td>{{driver_stat.position}}</td>
<td>{{driver_stat.drivername}}</td>
{% endfor %}
But with your approach, this table will not be updated dynamically as you select different race from your dropdown. Instead I suggest to use jquery. So you don't have to nevigate to another page to display the driver stats. I found several useful SO question that have been already answered on this. Follow them.
Ref:
Populate table based in select
Populate HTML table based on second dropdown selection
I want to export data in excel using following code
<kendo-excelexport [data]="excelData" [group]="groups" [filterable]="true" fileName="exceldata.xlsx" #excelexport>
<kendo-excelexport-column title="title">
<ng-template kendoExcelExportCellTemplate let-dataItem>
{{dataItem.isTrue == 1 ? "title" }}
</ng-template>
<ng-template kendoExcelExportGroupFooterTemplate let-group="group" let-aggregates>
<span> Total</span>
</ng-template>
<ng-template kendoExcelExportFooterTemplate let-column="column">
<span>Grand Total</span>
</ng-template>
</kendo-excelexport-column>
</kendo-excelexport>
Please help me to resolve this issue.
Thanks in advance
Excel export does not use column template for formatting value or customizing data, please refer following link for further clarification https://www.telerik.com/kendo-angular-ui/components/grid/export/excel-export/#toc-known-limitations
You can customize the exported workbook by accessing the generated options, and modifying them as necessary:
DOCS AND EXAMPLE
You can customize both the appearance and value of each cell based on some custom logic.