I have a grid as follows
<asp:GridView ID="gvFgOrder" runat="server" AutoGenerateColumns="false">
<EmptyDataTemplate>
<thead>
<tr>
<th>Order ID</th>
<th>Total Price</th>
</tr>
<tr>
<td colspan="2" style="text-align: center">No records found</td>
</tr>
</thead>
</EmptyDataTemplate>
<Columns>
<asp:BoundField HeaderText="Order ID" DataField="OrderID" />
<asp:BoundField HeaderText="Total Price" DataField="TotalPrice" />
</Columns>
</asp:GridView>
When the data source is not null the data is sown in <table><tbody> as expected
Whenever the data source is null the empty template is rendered. But the problem is an empty row is added in <tbody> tag as
<table>
<thead>
<tr>
<td>Order ID</td>
<td>Total Price</td>
</tr>
<tr>
<td colspan="2">No records found</td>
</tr>
</thead>
<tbody>
<tr><td></td><tr>
</tbody>
</table>
How can eliminate this table row from tbody. I have attached a click listener to <tbody> <tr>
So unwanted care is required in javascript.
How can I get around this?
Is this the proper way of using a <EmptyDataTemplate>?
My Aim is to show as follows when datasource is empty
I would suggest you to use a div inside the emptydatatemplate instead of thead and tr tags.
That is because you are adding that into a thead. Hence regular tbody is also being generated albeit empty.
Just specify the row:
<EmptyDataTemplate>
<tr>
<td colspan="2" style="text-align: center">No records found</td>
</tr>
</EmptyDataTemplate>
You could also use EmptyDataText
<GridView ... EmptyDataText="[ No details available... ]" >
Finally I have found the solution
Adding the line
<EmptyDataRowStyle CssClass="hide" />
Saved my day. This causes the extra tbody tr to be hidden when data source is null.
Related
I have a list in a table that is alphabetically ordered like so.
<tbody>
<tr>
<th><strong>A</strong></th>
</tr>
<tr>
<td class="hide-me">Ants</td>
</tr>
<tr>
<td class="hide-me">Animals</td>
</tr>
<tr>
<td class="hide-me">Apples</td>
</tr>
<tr>
<th><strong>B</strong></th>
</tr>
<tr>
<td>Bars</td>
</tr>
<tr>
<td class="hide-me">Bats</td>
</tr>
<tr>
<td class="hide-me">Bananas</td>
</tr>
<tr>
<th><strong>C</strong></th>
</tr>
<tr>
<td>Cans</td>
</tr>
<tr>
<td>Cars</td>
</tr>
<tr>
<td>Cats</td>
</tr>
</tbody>
I use the $('table tr:has(td.hide-me)').hide() method to hide any of the elements that I don't want shown. However I also want to be able to hide the table headers if the table rows that contain normal table cells are hidden.
In the case above I would like to hide <tr><th><strong>A</strong></th></tr> because it has all of the following table rows hidden but not the the <tr><th><strong>B</strong></th></tr> because not all of the table rows are hidden.
I am relatively new to Jquery and am not sure how best implement conditional statements for a situation like this.
The first thing I did was put a class on the tr to indicate that that row contained a header. This makes it much easier to tell which rows are headers, rather than having to interrogate if they contain a th.
The second thing I did was change your hide expression for the .hide-me to find the hide me first, then find their parent trs, and hide them. This way the selector doesn't have to find the tr and check if each one has a hide me.
Then finally the logic finds all the headers, and shows them, so if any were previously hidden, they would be visible. It then filters the headers and only returns the ones that do not have any following trs that are not hidden. Havin the headers that do not have any visible following trs, it then hides them.
$('.hide-me').closest('tr').hide();
$('.header').show().filter(function(){
return $(this).nextUntil('.header').filter(':not(:hidden)').length < 1;
}).hide();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
<tr class="header">
<th><strong>A</strong></th>
</tr>
<tr>
<td class="hide-me">Ants</td>
</tr>
<tr>
<td class="hide-me">Animals</td>
</tr>
<tr>
<td class="hide-me">Apples</td>
</tr>
<tr class="header">
<th><strong>B</strong></th>
</tr>
<tr>
<td>Bars</td>
</tr>
<tr>
<td class="hide-me">Bats</td>
</tr>
<tr>
<td class="hide-me">Bananas</td>
</tr>
<tr class="header">
<th><strong>C</strong></th>
</tr>
<tr>
<td>Cans</td>
</tr>
<tr>
<td>Cars</td>
</tr>
<tr>
<td>Cats</td>
</tr>
</tbody>
</table>
I am using sorttable to sort my columns in table.
Now I have a table as follows:
<table class="sortable draggable">
<thead>
<tr>
<th class="col-salesOrderId">Order Number</th>
<th class="col-orderDate">Date of Order</th>
<th class="col-party">Party</th>
<th class="col-edit">Edit</th>
<th class="col-delete">Delete</th>
</tr>
</thead>
<tbody>
{#orders}
<tr>
<td class="col-salesOrderId">{.salesOrderId}</td>
<td class="col-orderDate">{#formatDate date=orderDate format="DD-MM-YYYY" /}</td>
<td class="col-party">{.party.partyName}</td>
<td class="col-edit">
<button class="btn btn-info btn-edit">
</button>
</td>
<td class="col-delete">
<button class="btn btn-danger btn-delete">
</button>
</td>
</tr>
<tr class="row-details">
<td>{.salesOrderId}</td>
<td colspan="4">
<table class="sortable draggable">
<thead>
<tr>
<th class="col-itemName">Item Name</th>
<th class="col-quantity">Quantity</th>
<th class="col-rate">Rate</th>
<th class="col-amount">Amount</th>
</tr>
</thead>
<tbody>
{#items}
<tr>
<td>{.item.itemName}</td>
<td>{.quantity}</td>
<td>{.rate}</td>
<td>{#math key="{.quantity}" method="multiply" operand="{.rate}"/}</td>
</tr>
{/items}
</tbody>
</table>
</td>
</tr>
{/orders}
</tbody>
</table>
Have you noted in the above mentioned table I have row details for each row?
Now when I click on a column header to sort it, I get the row details first and then I get all the main rows.
Here is how my table looks before sorting:
Here is how my table looks after sorting:
Is there any solution to this problem still using sorttable?
Update:
Here is sample jsFiddle
Row details are now sorted correctly as shown in the above jsFiddle. But now the problem is :
When you click on City column everything looks fine. Now if we again click on City Column, the row details are displayed before the actual rows which is wrong.
Please look at the images below for more information on problem:
After Clicking on City Column: (Which looks perfect)
After Clicking on City Column Again: (Expected for a developer but unexpected for a user)
I'am guessing but maybe the problem is the empty td beside the row details. I added first name as value and set css style display:none. Now the row details will be sorted also correctly.
Updated answer:
try to just nest the table inside the td like the below example.
Try this:
<table class="sortable">
<thead>
<tr>
<th>First Name</th>
<th>LastName</th>
</tr>
</thead>
<tbody>
<tr>
<td>Vishal</td>
<td> Sherathiya
<table>
<thead>
<tr>
<th>Degree</th>
<th>Percentage</th>
</tr>
</thead>
<tbody>
<tr>
<td>B.E.</td>
<td>67</td>
</tr>
</tbody>
</table>
<td>
</tr>
<tr>
<td>Nikunj</td>
<td>Ramani
<table>
<thead>
<tr>
<th>Degree</th>
<th>Percentage</th>
</tr>
</thead>
<tbody>
<tr>
<td>B.E.</td>
<td>80</td>
</tr>
<tr>
<td>M.E.</td>
<td>54</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>Raj</td>
<td>Gosai</td>
</tr>
</tbody>
</table>
I have created a table and now i need to hide specific columns in the table by css applied to the column(not by inline).
HTML:
<table id='table1'>
<colgroup>
<col>
<col>
</colgroup>
<tr>
<th>ISBN</th>
<th>Title</th>
<th>Price</th>
</tr>
<tr>
<td>3476896</td>
<td>My first HTML</td>
<td>$53</td>
</tr>
<tr>
<td>5869207</td>
<td>My first CSS</td>
<td>$49</td>
</tr>
</table>
I have tried giving background-color and color to colgroup by $($('#table1').find('col:eq(1)')).css('color',red')
This code works. But when i tried the same code for display : none or overflow:hidden,it doesn't works. The display:none property hiding the column but not the contents of the tds in it. Could anyone please suggest a best way to hide the column, its contents by css.
I need to hide the columns dynamically using css and also in the case the table has more than 100 rows and 25 columns.
Thanks in advance.
$(document).ready(function(){
$('td:nth-child(2),th:nth-child(2)').hide();
});
This hides the 2nd column.
I have come up with solution for this by adding classes to the td and getting it.
HTML:
<table id='table1'>
<colgroup>
<col>
<col>
</colgroup>
<tr>
<th class='col1'>ISBN</th>
<th class='col2'>Title</th>
<th class='col3'>Price</th>
</tr>
<tr>
<td class='col1'>3476896</td>
<td class='col2'>My first HTML</td>
<td class='col3'>$53</td>
</tr>
<tr>
<td class='col1'>5869207</td>
<td class='col2'>My first CSS</td>
<td class='col3'>$49</td>
</tr>
</table>
Way:
$('.col1').css('visibility','hidden');
Please post if you have alternates. Hope it will be useful.
Using jQuery Mobile - and the new ui-responsive class for a table - the table is supposed to collapse into a single column if the viewport becomes too narrow.
However - when I drag the browser to make the viewport smaller, it takes the first column heading, and adds it to the table footer:
Viewport wide enough:
Narrow Viewport:
My HTML markup is:
<table data-role="table" class="ui-responsive">
<thead>
<tr class="ui-bar-b">
<th>Column Header 1</th>
<th>Column Header 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<select></select>
</td>
<td>
<select></select>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2" style="text-align:center;">
<button data-icon="plus">Add</button>
</td>
</tr>
</tfoot>
</table>
I've added a demo to jsFiddle here: http://jsfiddle.net/mtait/44k3E/2/
Is this just a bug in the Mobile CSS - or is it known, and is there a work around?
Thank you,
Mark
It is not adding extra header. This is the way in which it works. It will put the heading above each column values when its width reduces.
For better understanding refer to the updated fiddle link. DEMO
<table data-role="table" class="ui-responsive">
<thead>
<tr class="ui-bar-b">
<th>Column Header 1</th>
<th>Column Header 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<select></select>
</td>
<td>
<select></select>
</td>
</tr>
<tr>
<td>
<select></select>
</td>
<td>
<select></select>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>
<button data-icon="plus">Add</button>
</td>
<td>
<button data-icon="plus">Add</button>
</td>
</tr>
</tfoot>
</table>
I'm working on application develop using ASP.NET C#, I wanted to implement row collapse/expand when click on "--" and "+" image onTelerik RadGrid, the purpose is to show latest version of data, and then hide older version of identical data rows, older version of data rows is show only upon click on the "+" image.
The output of the Grid will be like the image below:
Here my data source query from DB and bind directly to the Grid, my objective is to hide the row highlighted in yellow and append "+" or "--" image on the latest data row.
The idea is using JavaScript/jQuery to hide DBRow > 1, which DBRow column will be hide in the Grid, and DBRow will act as an indicator for JavaScript to select the Element to hide it.
<telerik:RadGrid runat="server" ID="gvID" ShowHeader="true" Width="1000px" >
<mastertableview autogeneratecolumns="false" showheaderswhennorecords="true">
<Columns>
<telerik:GridBoundColumn DataField="DBName" HeaderText="Name">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="DBVersion" HeaderText="Version">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="DBRow" HeaderText="DBRow" ReadOnly="true">
<HeaderStyle CssClass="hiddenColumn" />
<ItemStyle CssClass="hiddenColumn" />
</telerik:GridBoundColumn>
<telerik:GridEditCommandColumn UniqueName="EditColumn" ButtonType="ImageButton" />
</Columns>
</mastertableview>
My question is how can I append the "+" and "--" into the correct row, and hide the row which DBRow > 1?
If you have better approach do share with me.
Thank you
Updated
Below is the generated HTML:
<div id="gvID" class="RadGrid RadGrid_Default" style="width: 1000px;">
<table class="rgMasterTable" border="0" id="gvID_ctl00" style="width: 100%;
table-layout: auto; empty-cells: show;">
<thead>
<tr>
<th scope="col" class="rgHeader" style="white-space: nowrap;">
Name
</th>
<th scope="col" class="rgHeader">
Version
</th>
<th scope="col" class="hiddenColumn rgHeader">
DBRow
</th>
</tr>
</thead>
<tbody>
<tr class="rgRow" id="gvID_ctl00__0">
<td>
A
</td>
<td>
Ver.0
</td>
<td class="hiddenColumn">
1
</td>
</tr>
<tr class="rgAltRow" id="gvID_ctl00__1">
<td>
B
</td>
<td>
Ver.1
</td>
<td class="hiddenColumn">
1
</td>
</tr>
<tr class="rgRow" id="gvID_ctl00__2">
<td>
B
</td>
<td>
Ver.0
</td>
<td class="hiddenColumn">
2
</td>
</tr>
<tr class="rgRow" id="gvID_ctl00__3">
<td>
C
</td>
<td>
Ver.1
</td>
<td class="hiddenColumn">
1
</td>
</tr>
<tr class="rgRow" id="gvID_ctl00__4">
<td>
C
</td>
<td>
Ver.0
</td>
<td class="hiddenColumn">
2
</td>
</tr>
</tbody>
</table>
<input id="gvID_ClientState" name="gvID_ClientState" type="hidden" />
</div>