How can I sort/filter a table using asp.net? I'm not sure exactly how to go about it, do I have to use jquery. Researching but i'm not seeing exactly how to handle this.
<table>
<tr>
<th class="col-lg-3 tablehead">Expense Account</th>
<th class="col-lg-3 tablehead">Description</th>
<th class="col-lg-3 tablehead">Requisition Number</th>
<th class="col-lg-3 tablehead">Item Number</th>
</tr>
#for (int i = 0; i < Model.Count; i++)
{
<tr>
<td>#Html.CheckBoxFor(m => m[i].postTrnx)</td>
#* <td class="label">#Html.DisplayFor(m => m[i].requisitionNumber) </td>*#
#*<td class="label">#Html.DisplayFor(m => m[i].transactionDate)</td>*#
</tr>
foreach (var item in Model[i].items)
{
#Html.HiddenFor(m => item.description)
#Html.HiddenFor(m => item.expense_account)
#Html.HiddenFor(m => item.itemNumber)
<tr>
<td class="col-lg-3 tabledata">#item.expense_account.account_desc</td>
<td class="col-lg-3 tabledata">#item.description</td>
<td class="label">#Html.DisplayFor(m => m[i].requisitionNumber) </td>
<td class="col-lg-3 tabledata">#item.itemNumber</td>
<td class="col-sm-1 tabledata">#item.quantity</td>
<td class="col-sm-1 tabledata">#item.selecteduomtext </td>
<td class="col-sm-1 tabledata">#item.price</td>
<td class="col-sm-1 tabledata">#item.extended_cost</td>
<td class="label">#Html.DisplayFor(m => m[i].transactionDate)</td>
<td>#Html.ActionLink("Edit", "Edit", new { id = #item.lineNum, name = Model[i].docNumber })</td>
</tr>
}
}
</table>
To let the user sort a html table you can use a JQuery plugin. Since I only used datatables so far I'll give you an example with that. Please see the official website for installation instructions. The usage is very easy, all you need to do is call
<script>$('table').DataTable();</script>
At the end of your html file.
Make sure to include DataTable plugin as described in the documentation.
Since you want the user to be able to sort the table by clicking on a column you could use DataTables.net as others have suggested or you could do it yourself with the following general steps:
Add client side javascript click events to each column header element that you want to sort that will call the appropriate controller action.
Add server side controller action event to handle sorting the data on the server.
In the click event do an ajax partial page callback to call the server side action event.
In the controller action event Sort the data as needed.
In the client side ajax response update/load the new table element.
Track the current sort order of each column.
It is probably easier to use DataTables.net since doing it yourself might require much more research.
Some links to help:
partial view with jquery ajax
sorting searching ajax
updating data in table
jquery ajax
jquery load
Related
I have a bit of a dilemma. I have a table of 3 columns. Column 1 is a button to make that row active. The 2nd column is the name of the person. And the 3rd column is a button to view the person's details.
Using Selenium C#, I can search for a specific person in the table and click the button to View, using the code below:
currentDriver.FindElement(By.XPath("(.//*[normalize-space(text()) and normalize-space(.)='Name of person'])")).Click();
How do I select the button before the name of the person?
EDIT: Added HTML -
<table class="table table-hover>
<thead>...</thead>
<tbody id="listCompany">
<tr>
<td>
<span id="a5" class="badge btnActivateCompany clsActiveCompany15" ><i class="fas fa-times"></i></span>
</td>
<td>Test Director</td>
<td>
<button.>...</button>
</td>
</tr>
</tbody>
The class btnActivateCompany is used several times depending on how many rows exist. And the id changes depending on the rows as well. So I have to search to find the correct record and then select the span before it.
I tried the following to select the object:
currentDriver.FindElement(By.XPath("(.//*[normalize-space(text()) and normalize-space(.)='Test Director'])[1]/preceding::span[1]")).Click();
I get the feeling you've modified the HTML as you've posted. I guess you stripped out some data and typed other content in. You say you want the button before the person, but in your code the button is after the person?
Either way, both are achievable. I made a few quick additions to help visibility. If i'm wrong please correct me as it influences xpaths.
Quick change log: I ran your html through a beautifier, added text to all the columns for visibility, added "border=1" to the table, remove the . from button, added the </table> and duplicated the row so i can check unique objects are found.
This is the result: (useful if anyone else wants to chip in an identifier)
<html>
<body>
<table class="table table-hover" border=1>
<thead>...</thead>
<tbody id="listCompany">
<tr>
<td>
<span id="a5" class="badge btnActivateCompany clsActiveCompany15" >
<i class="fas fa-times"> Column 1</i>
</span>
</td>
<td>Test Director</td>
<td>
<button> Button in col 3
</button>
</td>
</tr>
<tr>
<td>
<span id="a5" class="badge btnActivateCompany clsActiveCompany15" >
<i class="fas fa-times"> Column 1</i>
</span>
</td>
<td>Second Row!</td>
<td>
<button> Button in col 3
</button>
</td>
</tr>
</tbody>
</table>
</body>
</html>
That renders like this:
Based on fact you say you can get the text in the middle column...
If you want the button in column 3, you can try xpath:
//td[text()='Test Director']/parent::*/td/button
If you want the span in column 1, you can try:
//td[text()='Test Director']/parent::*/td/span[contains(#class,'btnActivateCompany')]
In both of these instances this selects a unique hit in the source.
However, please note, this is dependent on the html provided. If there are other elements/attributes in the table the xpath might need more work. I'm happy to help more but you'll need to share more content.
Hi I have a question is that possible to have function to display my table after the button was pressed, because now it's always on? I've tried with some IF functions but they weren't working.
My code:
#using (Html.BeginForm("Search", "Home", FormMethod.Post))
{
<br />
<span style="font-weight: bold">Tytuł filmu:</span> #Html.TextBox("VideoName")
<input type="submit" value="Szukaj" class="btn-primary" />
<br />
<br />
<table cellpadding="0" cellspacing="0">
<tr>
<th>
#Html.DisplayNameFor(model => model.ImageUrl)
</th>
<th>
#Html.DisplayNameFor(model => model.VideoName)
</th>
</tr>
#foreach (var item in Model)
{
<tr>
<td>
#Html.DisplayFor(modelItem => item.ImageUrl)
</td>
<td>
#Html.DisplayFor(modelItem => item.VideoName)
</td>
</tr>
}
</table>
}
If you put your markup inside a conditional block as follows:
#if (true)
{
#* PUT MARKUP HERE *#
}
Then the markup will only appear when the if condition is true.
Alternatively, you can use client-side code to simply hide the markup. I don't know which is best, because you haven't provided any details about what you are doing.
Instead of saying THE button, perhaps you should've talked about what kind of button you have and what is it supposed to do. If it works server side, use my first suggestion. If it needs to work client side, use my second suggestion.
You can do that in number of ways,
Javascript:
document.getElementById('mytable').style.display = 'block';
Give your table an ID and set its display to none; initially, then using javascript on the button click switch the table display to block;
function buttonClick(){
document.getElementById('myTable').style.display = 'block';
}
<table id='myTable' style='display:none;'>...</table>
<input type="submit" value="Szukaj" class="btn-primary" onclick='buttonClick()' />
Notes:
- It can be much easier if you are using jquery
- You can use event listener for the button click
Server side code:
On your action method set a TempData or ViewBag variable and then in the html check if this value exist, if true show the table
I am sure there are many other ways to do that but most of them will be around both ideas I listed.
You can have a button that toggles the visibility of the table, call the below function on the button onclick event to show or hide the table.
function toggleTable() {
var lTable = document.getElementById("YourTableId");
lTable.style.display = (lTable.style.display == "table") ? "none" : "table";
}
You have several good answers but it depends on exactly what you are trying to accomplish. I've used a variety of what has been provided. You mention showing table on button click. Do you also need to hide table if said button is clicked again? If so, client side jQuery and .toggle() could help.
$(document).ready(function(){
$("button").click(function(){
$("#myTable").toggle();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<button>Toggle</button>
<table id="myTable" style="border: 1px solid black; display: none">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</table>
There is a mvc application, in which I am trying to modify in pre-compiled CSHTML page(Index.cshtml)
#using System.Web.Mvc.Html
#model Services.Admin.ViewModels.IndexViewModel
#{
Layout = "~/Views/Admin/_Layout.cshtml";
ViewBag.Title = Resources.AdminResources.Index_Title;
}
<div class="container">
<div class="masonry">
<div class="item col-lg-4 col-md-4 col-sm-4">
<h3>Event Clinics</h3>
<table class="table table-striped table-bordered table-hover">
<tbody>
<tr>
<td class="max-width">
#Html.ActionLink("Premier Instructors", "Index", "PremierInstructor")
</td>
<td></td>
</tr>
<tr>
<td class="max-width">
#Html.ActionLink("Reports", "Index", "Reports")
</td>
<td></td>
</tr>
<tr>
<td class="max-width">
#Html.ActionLink("Users", "Index", "Users")
</td>
<td></td>
</tr>
</tbody>
</table>
</div>
</div>
Here is also respective Index.generated.cs, in which all code is written with help of "WriteLiteral".
When I am trying to add/modify in .cshtml form, it's impact not showing on UI.
I have also find out on various sites and found that these cshtml is already compiled using "RazorGenerator" tools.
Now My problem is this, when I am going to make any changes in this type of cshtml file, it is not reflected on screen.
In case of RazorGenerator based pre-compiled .cshtml forms as there is need to modify it's html then follow below steps.
Right Click on .chstml file (ex. index.cshtml).
Click on "Properties".
Under "Advanced" section remove "RazorGenerator" from "Custom Tool" option.
DO CHANGES IN CSHTML FILE.
Again follow above 1,2 steps.
Under "Advanced" section add "RazorGenerator" in "Custom Tool" option.
Save form and run it.
Now you will be seeing all the changes in UI.
How do I make the HTML table display 10 records only and whenever it goes beyond 10 it will display a link for pages below? e.g. "1, 2, 3.." And limits up to 7 links like how YouTube displays it (See image below)? I'm using ASP.Net MVC with Bootstrap by the way.
<table id="userTbl" onclick="getTblRec('userTbl,'userBody','0')" class="table-scroll table-striped bootgrid-table">
<thead>
<tr>
<th class="hidden">
#Html.DisplayNameFor(model => model.USR_ID)
</th>
<th class="hidden">
#Html.DisplayNameFor(model => model.USR_FNAME)
</th>
</tr>
</thead>
<tbody id="userBody">
#foreach (var item in Model)
{
<tr>
<td id="userId" class="hidden">
#Html.DisplayFor(modelItem => item.USR_ID)
</td>
<td>
#Html.DisplayFor(modelItem => item.USR_FNAME)
</td>
<td>
</tr>
}
</tbody>
</table>
YouTube sample pic:
There are two ways of implementing pagination, Server and Client side. Firstly server implementation, Load only the set of items that are to be shown for the page from the server along with the page options. Pagination at the client side, load the entire set of items and provide pagination with the support of table and/or other controls. Both the options have pros and cons. These links should get you started on the topic,link1 , link2.
Since you are using ASP.NET MVC, there is an build in helper named WebGrid for scenarios like paging. This is super easy to use and provides almost all the functionality that you may need.
You can also take a look at this beginner level walk through.
WebGrid in asp.net mvc (By Sheo Narayan).
Make a partial view for paging and call that partial view if records you have more than 10. i.e. in this link Paging
Or you can install this nuget also, and your wish style would be able to design this is link for nuget Nuget Packege
i am developing an asp.net c# application using the twitter bootstrap framework.
i am trying not to add change or add any CSS so wanted to know the following
i have a asp.net gridview, which eventually renders as table. i wanted to know what is the css class to be applied for tables?
ASP.NET
C#
Twitter Bootstrap
<table cellspacing="0" rules="all" border="1" id="VideoList" style="border- collapse:collapse;">
<tr>
<th scope="col"> </th><th scope="col"> </th>
</tr><tr>
<td>Senior Care</td><td>
</td>
</tr><tr>
<td>Cardiac Catheterization Lab</td><td>
</td>
</tr>
</table>
any ideas will be much appreciated.
Well the minimum styling can be added just with the "table" class. That is:
MyGrid.CssClass = "table";
Optionally, you can include additional table formatting such as
MyGrid.CssClass = "table table-striped table-bordered";
To see some more noticeable styling