I'm trying to use a custom filter on one of my columns and to do the filtering programmatically. I have managed to call the custom filter but the filterVal prints as null. Code below:
Calling the filter:
yadcf.exFilterColumn(theTable, [[4, "Value To Filter On"]]);
The filter itself - I'm just returning true for now to test the actual calling of the filter:
function numberFilter(filterVal, columnVal, rowValues, stateVal) {
console.log(filterVal)
return true;
}
The console.log line prints out null instead of "Value to Filter On".
Am I missing something or is customFunc even supported with exFilterColumn?
It wasn't working because you tried to filter with value that is not present in the filter values, in addition notice that you have used html elements in the column which resulted in html elements in the filter itself,
Here is the modified code for filter
$("#value-filter").on('input', function () {
console.log(this.value);
yadcf.exFilterColumn(theTable, [[0, 50]]);
})
and updated column data
<tr>
<td>
500
</td>
</tr>
<tr>
<td>
200
</td>
</tr>
<tr>
<td>
50
</td>
</tr>
Related
I have a dynamic table rendering where columns and rows of the table are rendered dynamically.
So here I have two sibling <td> elements in each row:
<td :key="`td3-${index}`" :id="`show_${key}`" v-show="`show_${key}`">
<input type="text" :v-model="key" :name="key" :value="entry[key]" />
</td>
<td :key="`td4-${index}`">
Edit
</td>
In the onclick event of the link in the second <td> I have to show and hide the first <td> element. Since it's dynamic I will have multiple rows. So I declared a dynamic boolean in my data to show and hide the specific <td> based on the click of another <td> in the same row.
v-show="`show_${key}`" - this is show property with dynamic key
show_firstname: false,
show_lastname: false,
show_email: false,
show_orgname: false
I created separate boolean elements for every <td> in each row.
But whenever I change the value of v-show property with the on click of second <td> element it's not making any difference. So I could not show or hide the <td>. Maybe v-show takes "`show_${key}`" as a string value not replacing true or false correctly. Can someone help me how can I achieve this?
Why don't you try organising the show_ in an object instead of a flat list of properties?
https://codesandbox.io/embed/vue-template-csncc?fontsize=14&hidenavigation=1&theme=dark
I am using angularJS to display my result set into a table, that is filterable with totals etc. I was wondering if it would be possible to display a value based on another value if it is = to something. here is an example:
<tr ng-repeat="c in data">
<td>{{c.type}}</td> //expects either 'fixed' or 'hourly'
<td>{{c.fixed_rate}}</td>
<td>{{c.hourly_rate}}</td>
</tr>
Therfore are you able to only display the fixed value if type is fixed, and hourly if the type is hourly without using any JQuery to hide elements?
My mind is kind of stumped on this as I am just a few months in with angular.
Data is pulled from a database* so if there is an SQL option I am all for it.
You could do something like this:
<tr ng-repeat="c in data | filter: filterHourlyOrFixed">
<td>{{c.type}}</td>
<td ng-if="c.type == 'fixed'">{{c.fixed_rate}}</td>
<td ng-if="c.type == 'hourly'">{{c.hourly_rate}}</td>
</tr>
If you want to filter by only those two values, add this function to your controller:
$scope.filterHourlyOrFixed = function (item) {
return item.type === 'fixed' || item.type === 'hourly';
};
If you do not want to filter by the value, remove | filter: filterHourlyOrFixed from the ng-repeat.
Also, when you have some time, do a little reading through the docs for ngIf, ngShow, ngHide, and ngFilter. You'll probably be using these repeated. Also, pay attention to the differences in how ng-if, ng-show, and ng-hide manipulate the DOM to achieve similiar results.
The differences are subtle, but important.
Use ng-if to remove or recreate parts of the DOM based on an expression. for example:
<tr ng-repeat="c in data">
<td>{{c.type}}</td> //expects either 'fixed' or 'hourly'
<td ng-if="c.type=='fixed'">{{c.fixed_rate}}</td>
<td ng-if="c.type=='hourly'">{{c.hourly_rate}}</td>
</tr>
You could also use a filter, if you are rendering identical DOM but want to exclude certain elements.
You could try something like this:
<tr ng-repeat="c in data">
<td ng-if="c.type =='fixed'">Fixed</td>
<td ng-if="c.type =='hourly'">Hourly</td>
<td ng-if="c.type =='fixed'">{{c.fixed_rate}}</td>
<td ng-if="c.type =='hourly'">{{c.hourly_rate}}</td>
</tr>
Hope this helps!
http://embed.plnkr.co/Wes1Uf1OCCmKYa5wTP5s/preview
I have a a ViewData with 8 rows. The ForEach loop works fine, but I need to extract the very first row before the foreach.
I need to extract only the first row to inject the default video in the iframe.
<iframe name="myFrame" width="800" height="500" src="#item.ID?wmode=transparent" allowfullscreen="True"></iframe>
Here is the foreach that works 100%
#foreach (var item in (List<VideoModel>)ViewData["Videos"])
{
<tr class="sep">
<td>#item.DisplayNumber</td>
<td>
#Html.ActionLink("Play Video", "IframeRedirect", "Home", new { ContentID = item.ID }, new { target = "someFrame", #class = "cbutton" })
</td>
<td>#item.Time #item.Hd</td>
<td><b>#item.Title</b><br />#item.Description</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td><b>Author:</b> #item.Author <br />Subscribe to youtube channel</td>
</tr>
}
you can get the first row like following:
var firstRow = ((List<VideoModel>)ViewData["Videos"]).First();
If your model is a IEnumerable
You can get the first like following:
var first = Model.First();
Is it possible to call a method on an object in an "each" loop in Thymeleaf? I'm trying to create a dynamic table where both rows and columns can be dynamic. A Table have a list of Rows and a list of Columns. Column have a method getValue that for a given Row can get the value. But I'm not able to call this getValue(Row row) from Thymeleaf.
I have this Thymeleaf code:
<table>
<tr th:each="row : ${table.rows}">
<td th:each="column : ${table.columns}">
<span th:text="${column.value(row)}"/>
</td>
</tr>
</table>
This causes an exception:
Exception evaluating SpringEL expression: "column.value(row)"
Is it even possible to do this in Thymeleaf, e.g. pass variables to methods on other variables?
I found the problem, since I'm passing in something to this method it's not a getter method so I have to provide the full method name: getValue not just value:
<table>
<tr th:each="row : ${table.rows}">
<td th:each="column : ${table.columns}">
<span th:text="${column.getValue(row)}"/>
</td>
</tr>
</table>
So I need to get all the values from a bunch of rows using Telerik Test Studio.
I basically recorded a test to go to a certain page on a web app, and I have a row called Session ID with a few randomly generated rows below it and I want to get the values from those rows, to use with code or whatever.
How would I go about doing it?
Here is a picture of what I mean:
This can be achieved in a coded step.
Let's say you have a few rows in a html table and you want to get their values. You need to collect all rows in a collection and then just take the value of each member of the collection.
Here is an example:
HTML:
<table id="table">
<tr>
<td>1</td>
</tr>
<tr>
<td>2</td>
</tr>
<tr>
<td>3</td>
</tr>
<tr>
<td>4</td>
</tr>
<tr>
<td>5</td>
</tr>
<tr>
<td>6</td>
</tr>
</table>
The code of the coded step in C#:
HtmlTable myTable = ActiveBrowser.Find.ById<HtmlTable>("table"); //Locate the table
IList<HtmlTableRow> myList = myTable.Find.AllByTagName<HtmlTableRow>("tr");//Collect all rows.
foreach (HtmlTableRow rows in myList)
{
Log.WriteLine(rows.InnerText.ToString());
}
Here is a video demonstration.
Hope I could help.
You can find the ID or any other attribute in the HTML structure of the application (e.g. in Chrome/IE by pressing F12).
Here is a sample code against Telerik ASP gridview page. Here I am retrieving the first row and then only the first column:
HtmlTable myTable = ActiveBrowser.Find.ById<HtmlTable>("ctl00_ContentPlaceHolder1_RadGrid1_ctl00");
IList<HtmlTableRow> myList = myTable.Find.AllByTagName<HtmlTableRow>("tr");
//First row
Log.WriteLine(myList[11].InnerText.ToString());
//First column
for (int i = 11; i < myList.Count; i++)
{
Log.WriteLine(myList[i].Cells[1].InnerText.ToString());
}
I also recorded another video for a demonstration.