I am using Bootstrap-Table Cn
I have a table. I want to pre-check certain rows. However when I add class="selected" to my or table row, upon loading the table in, Bootstrap-Table removes the class selected and unchecks it. How can I preserve the initial checkbox selected, before the table loads?
Update: I am not creating checkbox inputs. I am using BootStrap Tables CN to generate the checkboxes for me.
Here is the code.
<table id="storeTable" class="table table-bordered table-hover" style="width:100%" data-toggle="table" data-search="true" data-toolbar="#toolbar" data-pagination="true" data-side-pagination="client" data-show-pagination-switch="true" data-page-list="[10, 25, 50, ALL]" data-click-to-select="true" data-filter>
<thead>
<tr>
<th data-sortable="true" data-checkbox="true">
</th>
<th data-field="cg" data-sortable="true">
#Html.DisplayNameFor(model => model.dealeradminstore[0].cg)
</th>
<th data-field="sn" data-sortable="true">
#Html.DisplayNameFor(model => model.dealeradminstore[0].serial_number)
</th>
<th data-field="name" data-sortable="true">
#Html.DisplayNameFor(model => model.dealeradminstore[0].Name)
</th>
<th data-sortable="true">
WebReports
</th>
</tr>
</thead>
<tbody>
#foreach (var item in Model.dealeradminstore)
{
<tr id="#test.NullRefExcl(item.serial_number.ToString())" checked>
<td></td>
<td>
#test.NullRefExcl(item.cg.ToString())
</td>
<td>
#test.NullRefExcl(item.serial_number.ToString())
</td>
<td>
#test.NullRefExcl(item.Name)
</td>
<td>
#{string reportsCheck = "";
if (test.NullRefExcl(item.base_xtags).Contains("RPT"))
{
reportsCheck = "Yes";
}
if (!test.NullRefExcl(item.base_xtags).Contains("RPT"))
{
reportsCheck = "No";
}
}
#test.NullRefExcl(reportsCheck)
</td>
</tr>
}
</tbody>
</table>
To create a dynamically generated checkbox with it's value already set to checked:
#Html.CheckBoxFor(m => m.SomeBooleanProperty, new { #checked = "checked" });
Source: Proper usage of .net MVC Html.CheckBoxFor
Finally with a point in the right direction from Richard0096 I was able to figure it out. Here is the solution that uses the Bootstrap Tables Extensions CN.
var checkSum = 0;
function checkedFormatter(value, row, index) {
var snList = [];
snList = document.getElementById("inputsn").value.split("|");
snList.forEach(function (element) {
var checkSN = ((row.sn).toString()).trim();
if (checkSN == element) {
checkSum = 1;
}
})
if (checkSum == 1) {
checkSum = 0;
return {
checked: true
}
}
return value;
}
Related
I have a simple index page. When I load the page with only 500 records, the search box shows up straight away. But with 12k records, it take some time. Is there a way I can show a LOADING message, and after the search box is loaded, the LOADING message disappear.
This is the Index.cshtml
#model IEnumerable<BSMV2.Models.StoAppnOrgView>
<h2>LIST OF STONES</h2>
<table id="applicationTable" class="table table-striped table-bordered">
<thead>
<tr>
<th>
#Html.DisplayNameFor(model => model.Stone)
</th>
<th>
#Html.DisplayNameFor(model => model.Applicant)
</th>
<th>
#Html.DisplayNameFor(model => model.Org)
</th>
<th></th>
</tr>
</thead>
<tbody>
#foreach (var item in Model)
{
<tr>
<td>
#Html.DisplayFor(modelItem => item.Stone)
</td>
<td>
#Html.DisplayFor(modelItem => item.Applicant)
</td>
<td>
{#Html.DisplayFor(modelItem => item.Org)
</td>
<td>
#Html.ActionLink("Details", "Details", new { Id = item.Id })
</td>
</tr>
}
</tbody>
#section Scripts{
<script type="text/javascript">
$(document).ready(function () {
$('#applicationTable').DataTable();
});
</script>}
Here is the controller
public async Task<ActionResult> Index()
{
return View(await db.StoAppnOrgViewObj.ToListAsync());
}
Here is the Search box.
You should not be loading all 12k data on the UI. Instead use server side paging which will give the user similar experience but performance wise will be faster. The system will not be slower. The data will grow over the time and you will have to shift to server side logic anyways in the future.
You can also use the progress indicator that comes with datatable. All you have to do the followings:
$('#example').DataTable( {
"processing": true,
"serverSide": true,
"ajax": "../server_side/scripts/test.php"
} );
For the server side logic, you can follow the codes from here.
I have a for loop in my view about a table. I am able to display the results. but when i click any of the links . i get a null point exception. i found that it is because that the loop is finished
#model List<MyMainModel>
#using System.Collections;
#using System.Web;
#{
ViewData["Title"] = "Display";
}
<h1>Display</h1>
<table border="1" cellpadding="20" style="table-layout:fixed">
<tr>
<th>
UserName
</th>
<th>
PAssword
</th>
<th>
Email
</th>
<th colspan="2">
Options
</th>
</tr>
#{ for (int i = 0; i < Model.Count; i++)
{
<tr>
<td>
#Model.ElementAt(i).USERNAME
</td>
<td>
#Model.ElementAt(i).PASSWORD
</td>
<td>
#Model.ElementAt(i).EMAIL
</td>
<td >
Remove
</td>
<td>
Edit
</td>
</tr>
}
}
</table>
When i click Remove i want to pass ID of the corresponding Element back to RemoveRow Action how do i do that
#Url.Action("RemoveRow", "MyMain", new { id = i })
I have done a table of history transactions. In my transaction db I have a column named QuantityChange. Where values can be negative or positive.
I would like to set the row color to red, if its a minus value and green if positive (or zero).
What is the best solution to this?
<table class="table">
<thead>
<tr>
<th>
Date
</th>
<th>
Storage
</th>
<th>
Product
</th>
<th>
Quantity change
</th>
</tr>
</thead>
<tbody>
#foreach (var item in Model)
{
<tr class="#item.QuantityChange">
<td>
#Html.DisplayFor(modelItem => item.Date)
</td>
<td>
#Html.DisplayFor(modelItem => item.Stock.Storage.Name)
</td>
<td>
#Html.DisplayFor(modelItem => item.Stock.Product.Name)
</td>
<td>
#if (item.QuantityChange > 0)
{
#Html.DisplayFor(modelItem => item.QuantityChange, new {
style = "color:#00ff00" })
}
else
{
#Html.DisplayFor(modelItem => item.QuantityChange, new {
style = "color:#ff0000" })
}
</td>
</tr>
}
</tbody>
</table>
This might be a solution for you.
#foreach (var item in Model)
{
<tr style="color:#(item.QuantityChange >= 0 ? "#00ff00" : "#ff0000")">
<!-- insert other columns here -->
<td> <!-- this has been modified -->
#Html.DisplayFor(modelItem => item.QuantityChange)
</td>
</tr>
}
Try this
#{
String color;
}
And in your table add the styling to each element as required.
#foreach (var item in Model)
{
<tr>
#{
switch((item.QuantityChange)
{
case >0:
color:"#00ff00";
break;
default:
color:"color:#ff0000";
break;
}
<td style="color:#color">
#Html.DisplayFor(modelItem => item.QuantityChange)
</td>
I have a site made using MVC. It has a table built using DataTables. However, there are too many columns and it looks really messy and squished together. So I decided to decrease the number of columns by utilizing the DataTables Child rows (show extra/detailed information) feature.
Here's what my code looks like now:
#using MyWebSite
#model IEnumerable<TableModel>
<!--DATATABLE-->
#section scripts{
<script type="text/javascript">
$(document).ready(function () {
//create table
var table = $('#example').DataTable({
//child row code -- show and hide extra row details
//this is the default code from the data tables site. need to change. I'm not using ajax -- objects.txt -- i'm using a model
"ajax": "../ajax/data/objects.txt",
"columns": [
{
"className": 'details-control',
"orderable": false,
"data": null,
"defaultContent": ''
},
{ "data": "name" },
{ "data": "position" },
{ "data": "office" },
{ "data": "salary" }
],
"order": [[1, 'asc']],
dom: 'Bfrtip',
select: true,
//Get Site Selected Data button
buttons: [
{
text: 'Get selected site info',
action: function (e) {
e.preventDefault();
var data1 = $.map(table.rows(['.selected']).data(), function (item) {
return item[1]
});
var postData = { hosts: data1 }
// Submit form data via Ajax
$.ajax({
type: "POST",
url: '/Site/PrepWebsiteSelections',
data: postData,
dataType: "text",
success: function (response) {
alert(response);
},
error: function (xhr) {
alert("Error " + xhr);
}
});
}
}]
});
// Add event listener for opening and closing details
$('#example tbody').on('click', 'td.details-control', function () {
var tr = $(this).closest('tr');
var row = table.row( tr );
if ( row.child.isShown() ) {
// This row is already open - close it
row.child.hide();
tr.removeClass('shown');
}
else {
// Open this row
row.child( format(row.data()) ).show();
tr.addClass('shown');
}
});
});
</script>
<script type="text/javascript">
$(function () {
var status = $.connection.webSiteHub;
status.client.updateSiteStatus = function (site, message) {
var table = $('#example').DataTable();
var indexes = table.rows().eq(0).filter(function (rowIdx) {
return table.cell(rowIdx, 1).data() === host ? true : false;
});
table.rows(indexes).every(function (rowIdx, tableLoop, rowLoop) {
var d = this.data();
d[8] = message;
//table.fnUpdate(message, this, undefined, false);
$('#example').dataTable().fnUpdate(d,table.row(this).index(),undefined,false);
});
};
$.connection.hub.start()
});
</script>
<form name="frm-example" id="frm-example">
<table class="display" id="example">
<thead>
<tr>
<th>
#Html.DisplayNameFor(model => model.Apple)
</th>
<th>
#Html.DisplayNameFor(model => model.Orange)
</th>
<th>
#Html.DisplayNameFor(model => model.Banana)
</th>
<th>
#Html.DisplayNameFor(model => model.Avocado)
</th>
<th>
#Html.DisplayNameFor(model => model.Peach)
</th>
<th>
#Html.DisplayNameFor(model => model.Strawberry)
</th>
<th>
#Html.DisplayNameFor(model => model.Plum)
</th>
<th>
#Html.DisplayNameFor(model => model.Grape)
</th>
<th>
#Html.DisplayNameFor(model => model.Tomato)
</th>
</tr>
</thead>
<tbody>
#{
var models = Model.ToList();
for (var i = 0; i < models.Count; i++)
{
<tr>
<td>
#Html.CheckBoxFor(modelItem => models[i].Apple)
</td>
<td>
#Html.DisplayFor(modelItem => models[i].Orange)
</td>
<td>
#Html.DisplayFor(modelItem => models[i].Banana)
</td>
<td>
#Html.DisplayFor(modelItem => models[i].Avocado)
</td>
<td>
#Html.DisplayFor(modelItem => models[i].Peach)
</td>
<td>
#Html.DisplayFor(modelItem => models[i].Strawberry)
</td>
<td>
#Html.DisplayFor(modelItem => models[i].Plum)
</td>
<td>
#Html.DisplayFor(modelItem => models[i].Grape)
</td>
<td>
#Html.DisplayFor(modelItem => models[i].Tomato)
</td>
</tr>
}
}
</tbody>
</table>
</form>
As you can see, I have copy and pasted the jquery code from the DataTables site without really changing anything. I hit a wall because I wasn't sure how to take my current table with Razor code and alter it to accommodate the hidden child rows. I wanted to maintain the setup I have. Mostly to avoid having a lot of different coding styles and languages all jumbled up.
This is my first ever project using MVC, so I'm sorry if this question seems a bit trivial.
Well it's something quite simple to do actually, you just need to build up a simple table and what I do is to use responsive extension that basically does what Child rows (show extra / detailed information) but with less code:
#model IEnumerable<TableModel> <!--Our model-->
<!--We build our table-->
<table class="table table-condensed table-hover table-striped dt-responsive table-bordered">
<thead>
<tr>
<th>
#Html.DisplayNameFor(model => model.Field1)
</th>
<th>
#Html.DisplayNameFor(model => model.Field2)
</th>
<th>
#Html.DisplayNameFor(model => model.Field3)
</th>
<th>
#Html.DisplayNameFor(model => model.Field4)
</th>
<th>
#Html.DisplayNameFor(model => model.Field5)
</th>
<th>
#Html.DisplayNameFor(model => model.Field6)
</th>
<th>
#Html.DisplayNameFor(model => model.Field7)
</th>
</tr>
</thead>
<tbody>
#foreach (var item in Model)
{
<tr>
<td>
#Html.DisplayFor(model => item.Field1)
</td>
<td>
#Html.DisplayFor(model => item.Field2)
</td>
<td>
#Html.DisplayFor(model => item.Field3)
</td>
<td>
#Html.DisplayFor(model => item.Field4)
</td>
<td>
#Html.DisplayFor(model => item.Field5)
</td>
<td>
#Html.DisplayFor(model => item.Field6)
</td>
<td>
#Html.DisplayFor(model => item.Field7)
</td>
</tr>
}
</tbody>
#section Scripts {
//Of course you will need to include your scripts of datatable and the styles
<script>
$('.table').DataTable({ responsive: true });
</script>
}
I am using ASP>NET MVC and pulling information from the database and displaying it on a view page. It is working fine but is there any way I can add Index numbers at the start?
For example, at present the display is as follows:
Name Age Gender
Annie 24 Female
Aaron 17 Male
I am looking to make it:
Index Name Age Gender
1 Annie 24 Female
2 Aaron 17 Male
I could have pulled the IDs from the database but they are not necessarily going to be in proper incremental values. I tried and increment via a ViewBag but it doesn't work. Was expected considering the increment was occurring outside the list.. My code as follows at the controller and view.
//Controller
public ActionResult Index()
{
int count = 1;
ViewBag.Count = count++;
return View(db.Person.ToList());
}
//View
<table class="table">
<tr>
<th>
Index
</th>
<th>
#Html.DisplayNameFor(model => model.Name)
</th>
<th>
#Html.DisplayNameFor(model => model.Age)
</th>
<th>
#Html.DisplayNameFor(model => model.Gender)
</th>
</tr>
#foreach (var item in Model) {
<tr>
<td>
#ViewBag.Count
</td>
<td>
#Html.DisplayFor(modelItem => item.Name)
</td>
<td>
#Html.DisplayFor(modelItem => item.Age)
</td>
<td>
#Html.DisplayFor(modelItem => item.Gender)
</td>
</tr>
}
</table>
Declare the counter in the view (no need for the ViewBag property) and increment it inside the loop
#{ int counter = 1; }
<table class="table">
<tr>
<th>Index</th>
<th>#Html.DisplayNameFor(model => model.Name)</th>
....
</tr>
#foreach (var item in Model) {
<tr>
<td>#counter</td>
<td>#Html.DisplayFor(modelItem => item.Name)</td>
....
</tr>
counter++;
}
</table>
Use "for loop" in razor, something like:
#for(var i = 10; i < 21; i++)
{<p>Line #i</p>}