I am using jquery datatables in my MVC ASP.Net application and get an alert warning while the application is running. The alert is "Warning: Scroller requires DataTables 1.10.0 or greater". I have verified that my version of DataTables is 1.10.10 and the DataTables work fairly well except for a few issues.
My issues with DataTables is when pages using it initially load, the number of rows that are supposed to be displayed do not match how many are shown. All rows are shown on a page load. Once I interact with the table, everything is fixed.
I am loading the javascript and css in my BundleConfig.cs file.
One of my views is as follows:
#model IEnumerable<Q5.ViewModels.ProjectVM>
#{
ViewBag.Title = "Projects";
}
<h2>Projects/Deals</h2>
<p>
#Html.ActionLink("Create New", "Create")
</p>
<table class="table table-striped table-hover display" id="projects" cellspacing="0">
<thead>
<tr>
<th>
#Html.DisplayNameFor(model => model.Name)
</th>
<th>
#Html.DisplayName("Last Updated")
</th>
<th>
#Html.DisplayName("Sales Person")
</th>
</tr>
</thead>
<tbody>
#foreach (var item in Model)
{
<tr>
<td>
#Html.ActionLink(item.Name, "ProjectProfile", new { id = item.Id })
</td>
<td>
#Html.DisplayFor(modelItem => item.LastUpdated)
</td>
<td>
#Html.DisplayFor(modelItem => item.AssignedToUserName)
</td>
</tr>
}
</tbody>
</table>
<script>
$(document).ready(function () {
$('#projects').DataTable();
})
</script>
You could have the table refreshed after load:
$('#example').dataTable( {
"initComplete": function(settings, json) {
alert( 'DataTables has loaded.' );
$('#example').dataTable().ajax.reload( null, false );
}
} );
This may not be 100% syntax, just typed off the cuff. I seem to remember having to do this for a project, but the details escape me. I never could figure out why it happened so I slapped this band aid on it.
Related
I'm fairly new to meteor and I'm trying to iterate over a cursor using #each to populate a table. Here's my code:
<template name="choral">
<div class="container" style="padding-top: 25px">
<div class="table-responsive">
<form id="orderForm">
<table class="table table-borderless table-dark">
<thead class="thead-light">
<tr>
<th>Title:</th>
<th>See the Music:</th>
<th>Hear the Music:</th>
<th>Format:</th>
<th>Price (per copy):</th>
<th>Quantity:</th>
</tr>
</thead>
<tbody>
{{#each piece in pieces}}
<tr>
<td id="name">{{piece.name}}</td>
<td id="pdf">PDF</td>
<td id="audio">AUDIO</td>
<td id="format">FORMAT</td>
<td id="price">{{piece.score}}</td>
<td id="qty"><input type ="number" name ="quantity" min="5"></td>
</tr>
{{/each}}
</tbody>
<tfoot>
<tr>
<td colspan="5"></td>
<td><button class="button" type ="submit">Add to Cart</button></td>
</tr>
</tfoot>
</table>
</form>
</div>
</div>
my js.
Template.choral.helpers({
pieces: function(){
return choralm.find({});
}
});
I'm outputting a blank row between the #each tag. I publish the collection server side and subscribe. I'm just not sure where to look. Any ideas?
My publishment and subscription:
Meteor.publish('choralList', function() {
return choralm.find();
});
Template.choral.onCreated( function(){
Meteor.subscribe('choralList');
});
As far as I can see you are subscribing to your data but you are not "telling" your template, that the subscription is finished and it should redraw.
Therefore your template immediately renders while the subscription is ongoing and thus uses the yet empty collection data.
In order to inform your template that data has been updated you can use it's internal Tracker and store the information in a reactive data-source (for my example I use ReactiveDict instead of ReactiveVar).
import { ReactiveDict } from 'meteor/reactive-dict';
Template.choral.onCreated( function (){
// inside onCreated, this refers to the
// current template instance
const instance = this;
// let's attach a ReactiveDict to the instance
instance.state = new ReactiveDict();
// use the internal Tracker
instance.autorun(() => {
// subscribe and store a flag, once ready
const choralListSub = Meteor.subscribe('choralList');
if (choralListSub.ready()) {
instance.state.set('subscriptionComplete', true);
}
});
});
Next you add a helper, that returns the reactive value for 'subscriptionComplete':
Template.choral.helpers({
pieces(){
return choralm.find({});
},
subscriptionComplete() {
// we use 'state', our ReactiveDict,
// which we added as prop in onCreated
return Template.instance().state.get('subscriptionComplete');
}
});
And finally we let our template draw the data, once our subscription is complete. Until the subscription is complete (note the {{else}} block), we display a message about the loading status:
<template name="choral">
<div class="container" style="padding-top: 25px">
{{#if subscriptionComplete}}
<div class="table-responsive">
<form id="orderForm">
<table class="table table-borderless table-dark">
<thead class="thead-light">
<tr>
<th>Title:</th>
<th>See the Music:</th>
<th>Hear the Music:</th>
<th>Format:</th>
<th>Price (per copy):</th>
<th>Quantity:</th>
</tr>
</thead>
<tbody>
{{#each piece in pieces}}
<tr>
<td id="name">{{piece.name}}</td>
<td id="pdf">PDF</td>
<td id="audio">AUDIO</td>
<td id="format">FORMAT</td>
<td id="price">{{piece.score}}</td>
<td id="qty"><input type ="number" name ="quantity" min="5"></td>
</tr>
{{/each}}
</tbody>
<tfoot>
<tr>
<td colspan="5"></td>
<td><button class="button" type ="submit">Add to Cart</button></td>
</tr>
</tfoot>
</table>
</form>
</div>
{{else}}
<div>Loading template...</div>
{{/if}}
</div>
</template>
Related resources
TemplateInstance.autorun
http://blazejs.org/api/templates.html#Blaze-TemplateInstance-autorun
https://docs.meteor.com/api/tracker.html
Reactive stores
https://guide.meteor.com/data-loading.html#stores
Subscription readyness
https://guide.meteor.com/data-loading.html#readiness
Helpers
http://blazejs.org/guide/spacebars.html#Built-in-Block-Helpers
I have the following code:
#model IEnumerable<SampleMvcApp.Models.Exercise>
#foreach (var item in Model.GroupBy(m => m.DayName).Distinct())
{
<table class="table">
<h2>#Html.Display(item.Select(x => x.DayName).ToString())</h2>
<thead>
<tr>
<th>
ExerciseName
</th>
<th>
ExerciseTime
</th>
<th>
ExerciseRepetition
</th>
<th>
MomentOfTheDay
</th>
<th>
Routine
</th>
<th>
Week
</th>
</tr>
</thead>
#foreach (var test2 in item)
{
<tbody>
<tr>
<td>
#Html.DisplayFor(modelItem => test2.ExerciseName)
</td>
<td>
#Html.DisplayFor(modelItem => test2.ExerciseTime)
</td>
<td>
#Html.DisplayFor(modelItem => test2.ExerciseRepetition)
</td>
<td>
#Html.DisplayFor(modelItem => test2.MomentOfTheDay)
</td>
<td>
#Html.DisplayFor(modelItem => test2.Routine.RoutineID)
</td>
<td>
#Html.DisplayFor(modelItem => test2.ExerciseWeek)
</td>
<td>
<a asp-action="Edit" asp-route-id="#test2.ExerciseID">Edit</a> |
<a asp-action="Details" asp-route-id="#test2.ExerciseID">Details</a> |
<a asp-action="Delete" asp-route-id="#test2.ExerciseID">Delete</a>
</td>
</tr>
</tbody>
}
</table>
}
Everything works fine but
<h2>#Html.Display(item.Select(x => x.DayName).ToString())</h2>
I'm just trying to show the Day Name above the table as it is grouped by days, however the Display code won't show anything. I've tried using DisplayFor but apparently it doesn't accept expressions. Or maybe I am doing it wrong.
Html.Display is not intended for this purpose, which is why it doesn't work. What you need is Html.DisplayFor. However, the error you're getting with that is because the parameter must be an expression that evaluates to an member on the model. Using something like Select is not possible because the expression cannot be parsed to a particular member.
Now, given your use of Select here, it's not entirely clear what kind of display you're expecting to see. It's going to be an enumerable, so you'd need to make some decision about how each item in that enumerable should be handled. Simply, you could do something like:
<h2>
#foreach (var item in items)
{
#Html.DisplayFor(x => x.DayName)
}
</h2>
However, since this is a heading, it's likely you're only expecting a single day name, so you might rather just do something like:
#{ var item = item.First(); }
<h2>#Html.DisplayFor(x => item.DayName)</h2>
Yet, it's not entirely clear if DisplayFor is even necessary here. If DayName is just a string like Monday, then DisplayFor is entirely superfluous; it will merely just output the string. Therefore, you could just do:
<h2>#items.Select(x => x.DayName).First()</h2>
Imported data not displays in repeated table. It's only shows demo data. below is my template.
#{
<table class="table table-striped table-bordered">
<tbody>
#foreach (var Content in AsDynamic(Data["Default"]).OrderBy(m => m.wcName))
{
<tr>
<td width="30%">#Content.wcName </td>
<td>#Html.Raw(#Content.wcPosition)
#if (DotNetNuke.Common.Globals.IsEditMode())
{
#Content.Toolbar
}
</td>
</tr>
}
</tbody>
</table>
}
Your template only shows items assigned to this page/module, not "all data" - for that you would have to replace Data["Default"] with App.Data["your-content-type-name"].
You probably want to read more about this here: http://2sxc.org/en/blog/post/12-differences-when-templating-data-instead-of-content
I'm trying to develop a Razor view page like following , that consist with inline editing, but saving using single submit button.
So I did up to this level in my Viewpage
#model IEnumerable<sample.Models.Sample>
<table class="table">
<tr>
<th>
#Html.DisplayNameFor(model => model.Name)
</th>
<th>
#Html.DisplayNameFor(model => model.Value)
</th>
<th></th>
</tr>
#foreach (var item in Model) {
<tr>
<td>
#Html.DisplayFor(modelItem => item.Name)
</td>
<td>
#Html.DisplayFor(modelItem => item.Value)
</td>
<td>
#Html.ActionLink("Edit", "Edit", new { id=item.Id })
</td>
</tr>
}
</table>
How can I continue from here, I'm not planning to use any 3rd party library such as jQuery Datatable,
You don't have to use jQuery datatable but why cannot you use basic jQuery. On edit set a dirty attribute for the inline text control and on submit you can make an ajax call using jQuery and pass the data in JSON format to your post method in your controller.
i'm using Razor with MVC3 in my project. I use membership to handle user registration and i want to diplay all my users into a table .
here's my Action:
public ActionResult ListProfile()
{
//ProfileInfoCollection profiles = ProfileManager.GetAllProfiles(ProfileAuthenticationOption.All);
//return View(profiles);
var users = Membership.GetAllUsers();
return View(users);
}
My View :
#inherits System.Web.Mvc.ViewPage<MembershipUserCollection>
#{
ViewBag.Title = "Documents";
}
<h2>Liste des documents</h2>
<table style="width: 100%;">
<tr>
<th>Nom
</th>
</tr>
#foreach (MembershipUser item in Model)
{
<tr>
<td>
<h4>
#item.UserName
</h4>
</td>
</tr>
}
</table>
But i get an error : CS0115: 'ASP._Page_Views_AccountProfile_listProfile_cshtml.Execute()': no suitable method found to override
Have to change the basetype to System.Web.Mvc.WebViewPageinstead of System.Web.Mvc.ViewPage because razor configuration is under ~/Views/Web.config
Here is the view :
#inherits System.Web.Mvc.WebViewPage<MembershipUserCollection>
#{
ViewBag.Title = "Documents";
}
<h2>Liste des documents</h2>
<table style="width: 100%;">
<tr>
<th>Nom
</th>
</tr>
#foreach (MembershipUser item in Model)
{
<tr>
<td>
<h4>
#item.UserName
</h4>
</td>
</tr>
}
</table>