I am using the Bootstrap Group By V2 extension for an asp.net core razor application. Using the hidden property, I am hiding some of the table columns:
<td hidden="#Model.IsHidden">
#Html.DisplayFor(modelItem => item.something)
</td>
It's working as expected until I start using the Group By extension:
<table id="table" class="table table-hover" data-group-by="true" data-group-by-field="#Model.GroupByColumnName">
<thead></thead>
</table>
The grouping is working as expected but now all columns are being displayed even if their property is set to hidden. Any suggestions?
Try to use the CSS display property to hidden or show the cell content. Code like this:
#{
var showOrhidden = Model.IsHidden ? "none" : "block";
}
<td style="display:#showOrhidden">
#Html.DisplayFor(modelItem => item.something)
</td>
Besides, if using display:none, the cell will disappear, it might change the table structure, so, you could add a <div> tag in the td cell:
#{
var showOrhidden = Model.IsHidden ? "none" : "block";
}
<td>
<div style="display:#showOrhidden">
#Html.DisplayFor(modelItem => item.something)
</div>
</td>
Related
I need to create view that contains table with pagination, sorting and search. I'm getting my data from backend api and then I'm passing it to the view.
My action method looks like this:
public async Task<IActionResult> Home(int page = 1)
{
var list = await _service.Get<List<Model.Rezervacija>>(page);
ViewBag.Page = page;
return View(list);
}
And I have this view:
#using eBiblioteka.Model
#model List<Rezervacija>
#{
ViewBag.Title = "Home";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<div id="view-all">
#await Html.PartialAsync("_ViewAll", Model, null)
</div>
<a asp-action="Home" asp-route-page="#(ViewBag.Page - 1)">Previous</a>
<a asp-action="Home" asp-route-page="#(ViewBag.Page + 1)">Next</a>
And what view looks like:
And that all works. Don't pay attention for displaying pages number like this and changing with previous and next, I just wanted to simplify my question. So when i click next page, data changes and table also update very fast and that isn't problem.
But i see in tab that page is reloaded:
.
So is there any solution in asp .net core to do this without seeing that page reload. I need to call my action again to change this param "page" and then fetch new data from api without see that ugly page reload.
Thank you for all solutions.
So you want to create view that contains table with pagination, sorting and search without reloading.so you should use jquery for this.update your code like below:-
#using eBiblioteka.Model
#model IEnumerable<Rezervacija>
<div>
<table class="table table-striped border" id="myTable">
<thead>
<tr class="table-info">
<th>
#Html.DisplayNameFor(c => c.Name)
</th>
<th>
#Html.DisplayNameFor(c => c.SpecialTagId)
</th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
#foreach (var item in Model)
{
<tr>
<td> #item.Name </td>
<td> #item.SpecialTag.Name </td>
<td>
<partial name="_ButtonPartia3" model="#item.Id" /> //you can use partial view for delete or add data.
</td>
</tr>
}
</tbody>
</table>
</div>
<br /> <br />
#section scripts{
<script src="https://cdn.datatables.net/1.11.2/js/jquery.dataTables.min.js"></script>
<script type="text/javascript">
$(document).ready( function () {
$('#myTable').DataTable();
});
</script>
}
And Add this below link in your _Layout.cshtml:-
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.2/css/jquery.dataTables.min.css">
And your output will be like this:-
So when you will go from one page to another page, it will not reload because you used jquery. and it's already sorted and you can also search as needed.
You can use some excellent front-end frameworks. I now recommend you use layui, this is a Chinese community, of course you can also choose other ones. When this layui is paging, the URL is like the following format.
https://www.layui.com/demo/table/user/?page=2&limit=10
In this way, the .net core api can be called to perform partial refresh without reloading the entire page.
I have a Vue3 component which make an ajax request to server which sends array with articles back. Then I need to render the html table according the filled model via v-for and then init DataTable via DataTable() call on this rendered table. But it seems the problem is that DataTable() call runs before html table is rendered so the table is empty.
The ajax code looks like:
getArticles()
{
axios.get( apiRoutes.ARTICLES_URL )
.then((response) => {
let data = response.data.articles;
// Fill the model
this.articles = data;
// Init DataTable
$('#dataTable').DataTable({ ... });
//setTimeout(this.setDataTable, 3000); // This works but want to avoid it.
})
},
The template code
<template>
<div class="table-responsive">
<table :id="id" class="table table-bordered nowrap" width="100%;">
<thead>
<tr>
<th>id</th>
<th>Title</th>
<th>Created</th>
<th>Visible</th>
<th>User</th>
<th></th>
</tr>
</thead>
<tbody>
<tr v-for="article in articles" :key="article.id">
<td>{{article.id}}</td>
<td>{{article.title}}</td>
<td data-order='{{article.created_at}}'>{{getCreatedAt(article.created_at)}}</td>
<td>{{article.visible}}</td>
<td>{{article.user.name}}</td>
<td>
{{article.visible === 1 ? 'hide' : 'show'}}
delete
</td>
</tr>
</tbody>
</table>
</div>
The question is how to properly wait for the render is done? Thanks for any help.
So if I understand it I need to use $nextTick() which will wait while the DOM render is done.
I am working on jhipster 5.7.2 project with angular 7 and I am using angular datatables and it's responsive extension is working fine when I have static data, but when I use *ngFor directive in tag it doesn't collapse the column on resizing, just hides the column header but the column is still there.
After I resize to small window size and size back to normal the orientation of the first table row gets distorted and doesn't get fixed until I reload the page.
P.S - Struggled a lot on finding a fix, and tried giving width=100% to the table but the issue still persists.
user-management-component.html
<div>
<table datatable [dtOptions]="dtOptions" class="row-border hover" width="100%">
<thead>
<tr class="tr-bg">
<th>ID</th>
<th>Login</th>
<!-- <th>Last name</th> -->
</tr>
</thead>
<tbody>
<tr *ngFor="let user of users; trackBy: trackIdentity">
<td><span>{{user.id}}</span></td>
<td><span>{{user.login}}</span></td>
<!-- <td><span>Bar</span></td> -->
</tr>
</tbody>
</table>
</div>
Here is the ngOnInit() function where dtOptions are declared.
user-management-component.ts
ngOnInit() {
this.dtOptions = {
responsive: true
};
this.accountService.identity().then(account => {
this.currentAccount = account;
this.loadAll();
this.registerChangeInUsers();
});
}
Full size page table
Table After resizing the window
Thanks in advance for the help!
I have a half answer to your question, the code below adjusts the table, im using it to readjust my tables on sidemenu open/close. Its a half answer because I dont know when should you call it. I hope It helps
datatableElement.dtInstance.then((dtInstance: DataTables.Api) => {
dtInstance.columns.adjust().draw();
})
Objetive: I'm trying to construct a view where the records from a table (machines) can be updated in a grid, and that each atribute of each record has the option to be chosen from a dropdownlist.
This is my Get method:
public async Task<IActionResult> Test()
{
return View(await _context.Machines.Include(t => t.MachineTypes).Include(p => p.Suppliers).Include(s=>s.Stores).AsNoTracking().ToListAsync());
}
And this is the definition for the dropdown list:
private void PopulateMachineTypeDropDownListStore(object selectedStore = null)
{
var typequery = from k in _context.Stores
orderby k.StoreName
select k;
ViewBag.StoreID = new SelectList(typequery.AsNoTracking(), "StoreID", "StoreName", selectedStore);
}
Now, to the View:
Model:
#model IEnumerable<Application.Models.Machine>
Since I need all the registers. Then the table.
Header:
<table class="table">
<thead>
<tr>
<th>
#Html.DisplayNameFor(model => model.MchName)
</th>
<th>
#Html.DisplayNameFor(model => model.StoreID)
</th>
</tr>
</thead>
Body:
<tbody>
#foreach (var item in Model)
{
<tr>
<td>
#Html.DisplayFor(modelItem => item.MchName)
</td>
<td>
<div class="form-group">
<label asp-for="StoreID" class="col-md-2 control-label"></label>
<div class="col-md-10">
<select asp-for="StoreID" class="form-control" asp-items="ViewBag.StoreID">
<option value="">-- Seleccione Tienda --
</option>
</select>
<span asp-validation-for="StoreID" class="text-danger"></span>
</div>
</div>
</td>
</tr>
}
</tbody>
</table>
}
Question: I've read that is not best to use a div inside a td but it may work, altough there may be better options. Which would be the best practice?
Question: Well, this is a Test but I'm getting this error:
"'IEnumerable' does not contain a definition for 'StoreID' and no extension method 'StoreID' accepting a first argument of type 'IEnumerable' could be found (are you missing a using directive or an assembly reference?)"
I can't track the error. For me it looks fine and I don't know why it can't read the StoreID. I wonder if it's for the "asp-for" inside the div. I don't know.
Any help is appreciated.
Thanks
I am working in ASP.Net MVC4 with Dojo. I have a strange problem when I am adding new rows to html table. I need to have a table which supports adding and removing rows and textboxes inside should have dojo style. I referred the post http://blog.stevensanderson.com/2010/01/28/editing-a-variable-length-list-aspnet-mvc-2-style/ ad tried to create the same thing. Let me explain my code. Below is my view
#section scripts {
<script type="text/javascript">
require(["dojo/parser", "dijit/form/TextBox", "dijit/form/Button"]);
</script>
}
<table id="servicesTable">
<tr>
<th>
<label id="lblSelectService">
Select</label>
</th>
<th>
<label id="lblServiceName">
Name</label>
</th>
<th>
<label id="lblTitle">
AE Title</label>
</th>
</tr>
#for (int i = 0; i < Model.Services.Count; i++)
{
#Html.Partial("_ServiceRow", Model.Services[i])
}
</table>
My partial view for rendering each row is like below
#model WebUI.Models.RemDevServiceViewModel
<tr>
<td>
#Html.CheckBoxFor(x => x.IsMarked,
new { id = #String.Format("Service[{0}]IsMarked", #Model.ID) })
</td>
<td>
<input style="width: 100px; id="Service[#Model.ID]Name"
name="Service[#Model.ID].Name" type="text"
data-dojo-type="dijit/form/TextBox" value="#Model.Name"/>
</td>
<td>
<input style="width: 100px;" id="Service[#Model.ID]Title"
data-dojo-type="dijit/form/TextBox"
name="Service[#Model.ID].Title" type="text"
value="#Model.Title" />
</td>
</tr>
I have an add button which will add new row to the table. The problem that I am facing is, new row does not get the dojo style and they are rendered as normal textboxes. Initially loaded rows are rendered as dojo style text boxes, but the newly added are not like that. My jquery function to add new rows is like below
function addNewService() {
$.ajax({
url: rootPath + "MyController/AddNewService",
type: "get",
cache: false,
success: function (html) {
$("#servicesTable tbody").append(html);
},
error: function (ts) {
alert("Error while adding services");
}
});
}
Can any one tell me how to solve this? Please note that I am aware about the existence of Dojo grid. I want to take the advantage of model binding and hence following this style
Try running the parser over the added nodes. Are you seriously loading jquery on the page as well? Anyway, with the code you've got, it's kind of tricky to select the just added nodes, but if you put the following inside the success method it might work.
var newNodes = $(html).appendTo("#servicesTable tbody");
require(["dojo/parser"], function(parser){
newNodes.forEach(function(node){
parser.parse(node);
});
});
If you parse over nodes that were already parsed, the parser will throw an error. Also, if you need to support older browsers you'll want to replace the forEach with a standard for loop.
Thanks a lot David for your reply. Your code did not work exactly, but I got the idea and below code is working for me. Please dont feel that I am answering my own question. I want to format the code properly and hence using this view. Once again thanks a lot
success: function (html) {
var newNodes = $(html).appendTo("#servicesTable tbody");
require(["dojo/_base/array", "dojo/parser"], function (array, parser) {
array.forEach(newNodes, function (node, i) {
parser.parse(node);
});
});