I have a table that is being populated by way of a repeater and I have added the relevant dataTable .css and .js to enable the plugin. This works fine and as expected. The issue I am having is how can I now enable a few 'filter buttons' which when clicked apply a string based filter to the table data. I can simulate what I want by using the actual Search Bar that you can enable, but I would prefer to have some anchor tags that serve as clickable buttons/filters to trigger this.
Example Table
ID : Type
----------
1 : Car
2 : Car
3 : Bike
4 : Bike
5 : Car
The javascript at the bottom of the page looks like this:
var table = $('#example').DataTable();
var filteredData = table
.columns( [0, 1] )
.data()
.flatten()
.filter( function ( value, index ) {
return value = 'Bike' ? true : false;
} );
I suspect there is an issue with how I am defining my search criteria, and in the example above this is attempting to set a filter on anything within columns 0 or 1 that contain the string 'Bike'.
Any help would be greatly appreciated.
Try this:
var table = $('#example').DataTable();
table.columns( [0, 1] )
.search('Bike')
.draw();
Reference: https://datatables.net/reference/api/column().search()
Related
I have datagridview in a Windows form that shows content of table of database,
one column of table type is boolean, so in datagridview shows true/false,
but i want to customize it to show Icon or image like Accepted, or Rejected icons. Those Icons I have them in my Project Resources
This is my code
var cars = (from u in db.Cars
..........
select new
{
.....
.....
Approved = u.Treated == true ? Resources.approved : Resources.Cancel // Here Not working
}).ToList();
if (cars != null)
{
dgvCars.DataSource = null;
dgvCars.DataSource = cars;
}
In Approved cell I want to show one of those icons, depending true or false. I did as you see in my code
Approved = u.Treated == true ? Resources.approved : Resources.Cancel
but not working. Maybe I have to code somthing in my Fomatingcell events but I have no idea how to do that. Please help!
DataGridViewImageColumn is able to display images.
By default DataGridView automatically generates columns based on value type. DataGridViewImageColumn will be generated by default if value is array of bytes (byte[]).
In your case the type is different. You can solve in two ways
First:
Convert images to byte arrays.
Second:
Create image column manually and bind it to the image property.
// Execute it once when initializing datagridview
var approvedColumn = new DataGridViewImageColumn
{
Name = "dgvCars_Approved",
HeaderText = "Approved",
DataPropertyName = "Approved", // This will bound column to the property of the object
};
dgvCars.Columns.Add(approvedColumn);
// DataGridView will automatically pick up correct image
var cars = (
from u in db.Cars
..........
select new
{
.....
.....
Approved = u.Treated == true ? Resources.approved : Resources.Cancel
}).ToList();
// Check for null is redundant, because ToList() never returns null
// Because cars is a new instance
// set .DataSource to null before actual value is redundant as well
dgvCars.DataSource = cars;
Second approach will mess up a little bid with autogenerated columns, but I would suggest to create all required columns manually via designer or manually with code.
Predefined columns will provide more control over view behaviour and flexibility.
I'm new for asp.net and now using control asp:Repeater.
I want to implement follow table by Repeater:
index Name Delete
1 DDD X
2 EEE X
3 FFF X
Now the index is auto generate by set <%# (Container.ItemIndex+1) %> in asp.net page.
My question is below:
when I click 'X' to remove TableRow by JS method. How to make the column index value refresh? But sadly, the column idx become below:
index Name Delete
1 DDD X
3 FFF X
Thanks in advance.
when I click 'X' to remove TableRow by register Js method
If it's JS , then you're out of C# code.
so your question should also be tagged as JS/jQuery.
regarding :
How to make the column index value refresh ?
My solution using jQuery is :
$("#t tr td:nth-child(1)").on('click',function (i,n){
$(this).closest('tr').remove();
$("#t tr td:nth-child(1)").each(function (i,n){$(this).text(i+1)})
})
http://jsbin.com/hutefo/3/edit
Since you're removing it via a javascript. just hook into that and add a piece of code that reseeds your indices
// sample reseeding code
$('button').on('click', function() {
$(this).closest('tr').remove();
$('table').find('tbody').find('tr').each(function(i) {
// update the value of the index column
$(this).find('td').first().text(i + 1);
});
});
DEMO: http://jsfiddle.net/7fbnn95a/
I'm currently trying to retrieve a column from a DataTable that contains columns with object inside some certains columns.
Let see :
(this.CohortGrid.DataSource as DataTable).DefaultView.RowFilter = string.Format("CohortFormation.Name LIKE '*{0}*'", ddlFormation.SelectedItem.Text);
I got these columns inside my DataTable :
[0] : Id
[1] : Name
[2] : Status
[3] : CohortFormation
[4] : RoomCol
[5] : InstructorCol
[6] : EmployeeCol
The column CohortFormation is an object that contains a Id and a Name.
So, I'm trying to retrieve the Name of CohortFormation like this CohortFormation.Name LIKE
but it return me :
Unable to find column
In the Grid View TemplateField I can do <%# Eval("CohortFormation.Name") %> and it works pretty well. But in the code behind how can I do this?
I just found a solution and it's working pretty well !
I loop through the DataTable and remove the rows that is not equals to the value that is selected in the DropDownList -> ddlFormation.
There is the code :
CohortCollection cohortCol = (CohortCollection)Session["cohortCol"];
foreach(Cohort cohort in cohortCol.ToList())
{
if(cohort.Status.Id != int.Parse(ddlFormation.SelectedItem.Value))
{
cohortCol.Remove(cohort);
}
}
this.CohortGrid.DataSource = cohortCol;
this.CohortGrid.DataBind();
So, the trick is to loop on the list and not the DataTable and if it's not equals we remove the object. Finally, we bind the data.
It works perfectly !
I realize this is an easy question, but despite searching I can't find anything specific towards my problem.
I have a gridview populated with 9 or so columns. I want to both change the column names and edit the number of visible columns. So instead of
| x | y | z |
2 6 7
I'd like
|new x|new z|
2 7
I realize that I can manually edit the column names and set them to visible or not, but is there a way to do something like: if (column = y) then (display column) and (column name = new y)?
Much appreciated.
You can handle the GridView.RowDataBound event to modify the columns when they are bound and apply any changes you want at that point.
you could do something like this inside the page load event, or grid load:
foreach(BoundField b in grid.Columns)
{
if(b.HeaderText == 'y')
{
b.HeaderText = "new y";
} else {
b.Visible = false;
}
}
On the control appears a feature saying 'Drag a column header to gorup by that column'. Can i do that programmatically. Are there any properties or do I need to embed SQL statements?
Thanks,
Sun
You need to add the column to the SortedColumns collection in the band:
private void SwitchGroupByFor(string key) //key stands for the ultragridcolumn key
{
var band = grid.DisplayLayout.Bands[0];
var sortedColumns = band.SortedColumns;
sortedColumns.Add(key, false, true); //last flag indicates is a group by column
}
hth
Take a look here :
http://forums.infragistics.com/forums/p/2418/15231.aspx#15231
and here :
http://forums.infragistics.com/forums/t/5928.aspx
These lines are the one that do the magic :
grid1.DisplayLayout.ViewType = ViewType.OutlookGroupBy;
grid1.Rows.Band.Columns[0].IsGroupByColumn = true;
grid1.Rows.Band.Expandable = Expandable.Yes;
Just thought I'd also note that if you want to clear the group by here is how:
myGrid.Rows.Band.SortedColumns.Clear()