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>
Related
I am using partially VueJS in Laravel.
In blade:
#foreach ($mileagelogv2 as $mileage)
<tr>
<td>#if(isset(json_decode($mileage->data)->driver_name) && !empty(json_decode($mileage->data)->driver_name))
{{json_decode($mileage->data)->driver_name}}
#else
--
#endif
</td>
<td>#if(isset(json_decode($mileage->data)->date) && !empty(json_decode($mileage->data)->date))
{{json_decode($mileage->data)->date}}
#else
--
#endif
</td>
<td>{{\Carbon\carbon::parse($mileage->created_at)->format('d/m/Y H:i:s')}}</td>
<td>{{$mileage->createdBy->name}}</td>
<td>
<a class="
list__item__actions__btn
list__item__actions__btn--edit
"
#click="updateMileageLogV2({{$mileage->id}}, $event)"
>
Complete
</a>
</td>
</tr>
#endforeach
Rendered Output:
<table class="mileagelogv2_panel">
<thead>
<tr>
<th>Driver Name</th>
<th>Date</th>
<th>Created At</th>
<th>Created By</th>
<th>Action</th>
</tr>
</thead>
<tbody class="mileagelogv2_panel">
<tr>
<td> Testing 2 u
</td>
<td> 10/08/2019
</td>
<td>10/08/2019 07:45:49</td>
<td>Gufran Hasan</td>
<td>
<a class="
list__item__actions__btn
list__item__actions__btn--edit
">
Complete
</a>
</td>
</tr>
<tr>
<td> Testing 2
</td>
<td> 10/08/2019
</td>
<td>10/08/2019 07:45:08</td>
<td>Gufran Hasan</td>
<td>
<a class="
list__item__actions__btn
list__item__actions__btn--edit
">
Complete
</a>
</td>
</tr>
<tr>
<td> Testing
</td>
<td> 10/08/2019
</td>
<td>10/08/2019 07:25:28</td>
<td>Gufran Hasan</td>
<td>
<a class="
list__item__actions__btn
list__item__actions__btn--edit
">
Complete
</a>
</td>
</tr>
</tbody>
</table>
In js file:
updateMileageLogV2: function updateMileageLogV2(id, event){
let item_id = id;
var $this = this;
$this.remove();
}
My question is:
When I click on Complete button then the corresponding row should delete.
But unfortunately it is not working.
Finally, I have found solution.
I write this line in VueJs method:
event.path[2].remove();
In VueJs Method:
updateMileageLogV2: function updateMileageLogV2(id, event){
let item_id = id;
event.path[2].remove();// remove current tr row on click.
}
Explanation:
See in screenshot, event.path has array of DOM list.
At 0 index a tag
At 1 index td tag
AT 2 index tr tag
I have a table which have some fields like Service , amount , tax , action , I just want that if I tick on checkbox in that row , I want the table service data like Subscription charges should be added in an input and when I tick on another rows checkbox this table data also should add in that input with a comma like subscription charges, registration fees , also when I untick that row checkbox , that table data like subscription charges, registration fees also should be removed in input
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table cellspacing="0" rules="all" border="1" id="table1" style="border-collapse:collapse;">
<tbody>
<tr>
<th scope="col">Service </th>
<th scope="col">Amount</th>
<th scope="col">tax</th>
<th scope="col">Action</th>
</tr>
<tr>
<td>
<span>Subscription Charges</span>
</td>
<td>
<span>500.00</span>
</td>
<td>
<span>90.00</span>
</td>
<td>
<input type="checkbox" data-toggle="checkbox" class="tot_amount" value="590.00" />
</td>
</tr>
<tr>
<td>
<span>registration fees</span>
</td>
<td>
<span>200.00</span>
</td>
<td>
<span>80.00</span>
</td>
<td>
<input type="checkbox" data-toggle="checkbox" class="tot_amount" value="590.00" />
</td>
</tr>
</tbody>
</table>
<table cellspacing="0" rules="all" border="1" id="table2" style="border-collapse:collapse;">
<tbody>
<tr>
<th scope="col">Service </th>
<th scope="col">Amount</th>
<th scope="col">tax</th>
<th scope="col">Action</th>
</tr>
</tbody>
</table>
<input type="text" name="services">
One way of doing it using jQuery is to first make sure we notice if a checkbox is changed, then go to the parent row, and find the first TD which should contain what you're out after. After all that, get the "target" element (ie. the input box at the bottom) and set it's value.
$("input[type=checkbox]").on("change", function() {
var value = $(this).parent().parent().find("td:first-child").text();
var target = $("input[name=services]");
target.val(value);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table cellspacing="0" rules="all" border="1" id="table1" style="border-collapse:collapse;">
<tbody>
<tr>
<th scope="col">Service </th>
<th scope="col">Amount</th>
<th scope="col">tax</th>
<th scope="col">Action</th>
</tr>
<tr>
<td>
<span>Subscription Charges</span>
</td>
<td>
<span>500.00</span>
</td>
<td>
<span>90.00</span>
</td>
<td>
<input type="checkbox" data-toggle="checkbox" class="tot_amount" value="590.00" />
</td>
</tr>
<tr>
<td>
<span>registration fees</span>
</td>
<td>
<span>200.00</span>
</td>
<td>
<span>80.00</span>
</td>
<td>
<input type="checkbox" data-toggle="checkbox" class="tot_amount" value="590.00" />
</td>
</tr>
</tbody>
</table>
<table cellspacing="0" rules="all" border="1" id="table2" style="border-collapse:collapse;">
<tbody>
<tr>
<th scope="col">Service </th>
<th scope="col">Amount</th>
<th scope="col">tax</th>
<th scope="col">Action</th>
</tr>
</tbody>
</table>
<input type="text" name="services">
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.
I have a table in which rows are added dynamically using jQuery (latest row on top using prepend). If it is an errorLine, text in the first column will be “x”. If it is a successLine the text in the first column will be numerals like 1,2,3…
If the latest row is an errorLine, I need to apply background color (using class “firstErrorLine”) and replace the text “x” with an image. At the same time I need to remove image from all other lines and replace image with text “x”. I tried multiple jQuery approaches but didn’t work. Following is one of the failed approaches.
//$("#tblVisualAidResult tbody tr td:first img").hide().parents("tr td:first").html('x');
Any thoughts how we can achieve this?
Demo – jsFiddle
jQuery Code
$(document).ready(function ()
{
function styleFirstErrorLine(isFailureExist)
{
$("#tblVisualAidResult tbody tr").removeClass('firstErrorLine');
//$("#tblVisualAidResult tbody tr td:first img").hide().parents("tr td:first").html('x');
if(isFailureExist)
{
$("#tblVisualAidResult tbody tr:first").addClass('firstErrorLine');
var firstCell = $("#tblVisualAidResult tbody tr:first td:first");
$(firstCell).html('<img width="50" height="50" class="errorImage" src="../images/Error2_BMP.JPG"/>');
}
}
styleFirstErrorLine(true);
});
HTML
<table id="tblVisualAidResult" class="resultLog" border="0" cellpadding="0" cellspacing="0"
style="width: 100%; display: table; background-color: rgb(229, 219, 226);">
<thead>
<tr>
<td class="Heading3" style="width: 20%;">
Serial No
</td>
<td class="Heading3" style="width: 30%;">
Container ID
</td>
<td class="Heading3">
Status
</td>
</tr>
</thead>
<tbody>
<tr class="Normal">
<td style="padding-left: 5px">
x</td>
<td>
TEST4
</td>
<td>
Case Label does not Exist
</td>
</tr>
<tr class="Normal">
<td style="padding-left: 5px">
2
</td>
<td>
182145011
</td>
<td>
Received 2 of 2 of work lot S318214501
</td>
</tr>
<tr class="Normal">
<td style="padding-left: 5px">
<img width="50" height="50" class="errorImage" src="../images/Error2_BMP.JPG"></td>
<td>
test3
</td>
<td>
Case Label does not Exist
</td>
</tr>
<tr class="Normal">
<td style="padding-left: 5px">
<img width="50" height="50" class="errorImage" src="../images/Error2_BMP.JPG"></td>
<td>
test2
</td>
<td>
Case Label does not Exist
</td>
</tr>
<tr class="Normal">
<td style="padding-left: 5px">
1
</td>
<td>
182145029
</td>
<td>
Received 1 of 2 of work lot S318214501
</td>
</tr>
<tr class="Normal">
<td style="padding-left: 5px">
<img width="50" height="50" class="errorImage" src="../images/Error2_BMP.JPG"></td>
<td>
test1
</td>
<td>
Case Label does not Exist
</td>
</tr>
</tbody>
</table>
If I understand correctly what you are trying to achieve, you should use td:first-child instead of td:first.
jsFiddle demo
i have found this
Resizable Gridview columns using javascript
and happy to implement this http://www.ita.es/jquery/jquery.grid.columnsizing.htm but it is working on any table(
<table >
<tbody>
<tr class="first">
<td width="100">
</td>
<td width="200">
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr></tbody></table>
) but creating problem on gridview render html table(
<table >
<tbody><tr>
<th ></th><th></th>
</tr><tr>
<td ></td><td>
</td><td>
</tr>
</tbody></table>
)
If you mean how to have that plugin work only on certain tables instead of all tables, change this line:
$("table").columnSizing()
To this instead:
$(".columnresize").columnSizing()
Then to any table you want it applied to, add class columnresize like this:
<table class="columnresize">
...
</table>