I am generating a material data table dynamically with data as well as displayedColumns coming from backend.
.html:
<mat-form-field appearance="standard">
<mat-label>Filter</mat-label>
<input matInput (keyup)="applyFilter($event)" placeholder="Ex. Mia" #input>
</mat-form-field>
<div class="mat-elevation-z8">
<table mat-table [dataSource]="dataSource" matSort>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
<ng-container *ngFor="let column of displayedColumns">
<ng-container [matColumnDef]="column">
<th mat-header-cell *matHeaderCellDef > {{ column }} </th>
<td mat-cell *matCellDef="let row">{{row[column]}}</td>
</ng-container>
</ng-container>
</table>
<mat-paginator [pageSizeOptions]="[10, 5, 25, 100]" aria-label="Select page of users"></mat-paginator>
</div>
If it was not a dynamic table, I can add an input field in html for column filters and write code in .ts to use filterPredicate property to customize the logic for column specific filtering.
.ts code excerpts:
....
this.dataSource.filterPredicate = this.createFilter();
...
...
createFilter(): (data: any, filter: string) => boolean {
let filterFunction = function(data, filter): boolean {
let searchTerms = JSON.parse(filter);
let descr:string = data.description??"";
return (data.view_name.toLowerCase().indexOf(searchTerms.view_name) !== -1)
&& (descr.toString().toLowerCase().indexOf(searchTerms.description) !== -1);
However, the table being dynamic I have 2 questions:
if I add column filter in html, how do I identify for which column user entered text inside .ts?
Even if I identify the column name and say I got it into a variable, how do I write the filtering logic that is equivalent to above since I can't refer to searchTerms.view_name directly?
I m trying to add a dynamical input along with dropdown for that i m using vue-serach-select let me show my code then issue in detail
<template>
<button #click="addRow1"></button>
<table class="table table-striped">
<thead>
<tr style="font-size: 12px; text-align: center;">
<th class="span2" >Product Name</th>
<th class="span2" >Unit</th>
</tr>
</thead>
<tbody id="product_table_body">
<tr v-for="(row, index) in rows">
<td><model-list-select :list="productname"
option-value="product_name"
option-text="product_name"
v-model="row.selectproduct"
placeholder="Search Product Name"
#searchchange="searchprd3">
</model-list-select>
</td>
<td>
<input class="form-control-sm" type="text" v-model="row.new1" disabled="disabled" style="width: 100px;">
</td>
</tr>
</tbody>
</table>
</template>
<script>
export default {
data () {
return {
productname3:[],
rows:[],
}
},
methods:{
addRow1(){
this.rows.push({})
},
searchprd3(search,index){
},
}
}
</script>
now if i click on button one more row is added with dropdown now my problem is that how i can differentiate productname according to dynamic create row i had tried like :list="productname{index},:list="productname.index but none of them worked and last thing i want to pass index parameter in searchprd3 function so i tried like this searchprd3(search,index) in function I m getting index but it throw error for search and if only pass index then also throw error however it work none of parameter is passed from select like this #searchchange="searchprd3" but in function i m not getting index value or is there anyother way to achieve this thing
updated
<tr v-for="(row, index) in rows">
<td><model-list-select :list="row.productname"
option-value="product_name"
option-text="product_name"
v-model="row.selectproduct"
placeholder="Search Product Name"
#searchchange="searchprd3">
</model-list-select>
</td>
</tr>
<script>
searchprd3(searchText,index){
var _this=this
this.$http.get('/api/companyproducts?filter[where][product_name][ilike]=%'+searchText+'%').then(function (response) {
_this.rows.push({productname:response.data})
}).catch(function (error) {
console.log("error.response");
});
},
</script>
i want select option list seprate for every row but my code throw error like "Cannot read property 'map' of undefined"
that is why row push not working for dynamic row is I m missing Something
update2
found my mistake
addRow1(){
this.rows.push({
productnamex:[],
unit:'',
qty:'',
amt:'',
cgst:'',
sgst:'',
igst:''})
},
problem is that i haven't initialize my dropdown at rows click now another problem is that why my drop not get populated
try like this
<template>
<model-list-select :list="row.productnamex"
option-value="product_name"
option-text="product_name"
v-model="row.selectproduct"
placeholder="Search Product Name"
#searchchange="searchprd3($event,index,row)" >
</model-list-select>
</template>
<script>
addRow1(){
console.log(this.rows)
this.rows.push({ productnamex:[],unit:'', qty:'',amt:'', cgst:'', sgst:'', igst:''})
},
searchprd3(searchText,index,row){
console.log(index)
var _this=this
console.log(row)
this.$http.get('/api/companyproducts?filter[where][product_name][ilike]=%'+searchText+'%').then(function (response) {
console.log(response.data)
row.productnamex=response.data
}).catch(function (error) {
console.log("error.response");
});
},
</script>
hope this will help you as well as other enjoy :D
you should be able to do:
:list="productname+index"
You need to manually pass the index into the callback together with the searchtext in order for your searchprd3 method to receive both values.
This is where the inline $event variable in your event listener comes into the action. The $event variable contains the value that is supposedly passed to your callback by the event.
So if you want to pass additional data into the callback aside from the data that is passed by the event, you can manually call the callback function and pass the $event together with the data that you want to pass which in this case, the index variable.
Your event listener should look like this:
#searchchange="searchprd3($event, index)"
I have a dynamic table with some input field and button in each row. I want to pass each row individual value when i click the button. Can anyone help me how to do it?
HTML:
<tr v-for="(item, index) in items">
//other Data
<td><input v-model="item1"></td>
<td><input v-model="item2"></td></td>
<td><button #click="doSomething()">send</button></td>
</tr>
javascript:
methods: {
doSomething() {
//values from each input field
}
}
Just pass index as a parameter to the function.
<button #click="doSomething(index)">send</button>
then in the method
doSomething(index) {
//values from each input field
}
Not able to find the element with input tag. Need to find the element in the input tag. eclipse could catch the element till nobr and not further.
input id="ServiceFromDate" class="inactvDtTmTxt" name="$PHCClaimSearch$pServiceFromDate" data-ctl="["DatePicker"]" data-formatting="yes" value="05/02/2017" data-value="5/2/2017" style="padding-right:17px;width:11.719em;" validationtype="date" data-change="[["refresh", ["thisSection","", "", "&=", "", ",",":event","","HCClaimSearch"]]]" data-display-value="05/02/2017" type="text"/>
//table[contains(#role,'presentation')][contains(#id,'pyActionArea')]//table[1]//table[contains(#role,'presentation')][contains(#section_index,'1')]//tbody//tr[2]//td[1]//following::nobr[1]//following::span[#id='$PHCClaimSearch$pServiceFromDateSpan']/input
driver.findElement(By.xpath("//input[#id='ServiceFromDate']")).sendKeys("04242015")
<table id="" role="presentation" section_index="1" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<tr>
<td class="dataLabelWrite" style="height:24px;width:143px;">
<td class="dataValueWrite" style="height:24px;width:190px;">
<nobr>
<ins id="pega-calendar" style="display: none;" data-calendar="{"img":"webwb/pzspacercal_12860256145.gif!!.gif","locale":[["0","1","2","3","4","5","6","7","8","9","10","11","12","13","14","15","16","17","18","19","20","21","22","23","24","25","26","27","28","29","30","31","32","33","34","35","36","37","38","39","40","41","42","43","44","45","46","47","48","49","50","51","52","53","54","55","56","57","58","59"],0,"M/d/yyyy","M/d/yyyy h:mm a","Today",["January","February","March","April","May","June","July","August","September","October","November","December"],["Sun","Mon","Tue","Wed","Thu","Fri","Sat"],["AM","PM"],"Apply","Close"]}"/>
<script> var positionDatePickerIcn = function(control){ /* BUG-47098 - Following block filters out IE8(both quirks and standards modes) and IE9 (standards mode) */ var addMarginFlag = true; if(document.documentMode && navigator.userAgent.indexOf("Trident/4") > -1){ //IE8: skip for both standards and quirks mode addMarginFlag = false; } else if(document.documentMode && document.documentMode >= 9 && navigator.userAgent.indexOf("Trident/5") > -1){ //IE9: skip for standards mode addMarginFlag = false; } if (addMarginFlag) { var icnEle = control.lastChild; if(icnEle.tagName.toLowerCase() == 'img'){ icnEle.style.marginTop = '0px'; } } }; </script>
<span id="$PHCClaimSearch$pServiceFromDateSpan" role="group" aria-label="Service From Date : " data-calendar="{"d":[0,0],"l":0}" style="display:inline-block; width:inherit;" onmouseover="pega.c.DatePicker.dtTmHvr(event);">
<input id="ServiceFromDate" class="inactvDtTmTxt" name="$PHCClaimSearch$pServiceFromDate" data-ctl="["DatePicker"]" data-formatting="yes" value="05/02/2017" data-value="5/2/2017" style="padding-right:17px;width:11.719em;" validationtype="date" data-change="[["refresh", ["thisSection","", "", "&=", "", ",",":event","","HCClaimSearch"]]]" data-display-value="05/02/2017" type="text"/>
<img class="inactvIcon" src="webwb/pzspacer_11792674401.gif!!.gif" data-ctl="["DatePicker"]" style="cursor:pointer;"/>
</span>
</nobr>
</td>
<td class="dataLabelWrite" style="height:24px;width:125px;">
<td class="dataValueWrite" style="height:24px;width:190px;">
<td class="dataLabelWrite" style="height:24px;width:101px;">
</tr>
</tbody>
</table>
The problem is with the HTML, at least as you've pasted here.
there are a number of places inside that tag that have double-quoted text inside of double-quoted text. e.g. the input element has the following attribute:
data-ctl="["DatePicker"]"
Other attributes I found with this problem: data-calendar, data-change
Once I corrected all of the places that this is a problem with outer single quotes, I was able to find the input using your Xpath from the Chrome developer tools
data-ctl='["DatePicker"]'
As you mentioned, you could catch the element till <nobr> tag and not further that is because the <ins> tag is having style="display: none;", so will use JavascriptExecutor to change the attribute and then send the text as follows :
((JavascriptExecutor)driver).executeScript("document.getElementById('pega-calendar').style.display='block';");
driver.findElement(By.xpath("//input[#id='ServiceFromDate']")).sendKeys("04242015");
I am using jquery kendo grid in my project where i used row template to show three column in one row. Below is the code:
<table id="grid" style="width:100%">
<thead style="display:none">
<tr>
<th>
Details
</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="3"></td>
</tr>
<tr>
<td>
</td>
</tr>
</tbody>
</table>
<script id="rowTemplate" type="text/x-kendo-tmpl">
<div>
<span class="name" style="font-size:medium">#: FirstValue #</span>
<span class="name" style="font-size:medium">#: SecondValue #</span>
</div>
<tr>
<td style="width:30%">
#: GetName #
<span class="name" style="font-size:14px; color:green">#: Designation #</span>
<span class="name" style="font-family:Arial; font-size:small">#: Company #</span>
</td>
</tr>
</script>
in the above code i am just passing my model data it's working fine but when i added one div which have value firstName and LastName so it is also repeating with this data but i want to to show separately.How do i show it separately so that it should not repeat with grid.
there is one problem in your html template.
Please replace '#' with 'Javascript:void(0)'.
Error:- #: GetName #
Fix:- #: GetName #
Hope that's work for you.
http://jsfiddle.net/parthiv89/t0w3ht6m/1/
if you like then don't forget to like.
I got solution by own, Firstly i changed code in my schema like this:
schema: {
parse: function (data) {
var items = [];
for (var i = 0; i < data.data.length; i++) {
if (data.data[i].CorrectValue != null && data.data[i].SearchValue != null) {
$("#spnSR")[i].innerHTML = "<b>"+"Get results for this text: "+"</b>"+data.data[i].CorrectValue;
$("#spnSV")[i].innerHTML = "<b>" + "Searched for this text: " +"</b>" + data.data[i].SearchValue;
}
}
var product = {
data: data.data,
total: data.total
};
items.push(product);
return (items[0].data);
},
}
Then in html i used two span to show this value which is there in for loop.
and it's working fine for me.
Thanks everyone.