#if (ViewData["post"] != null)
{
foreach (var item in ViewData["post"] as IEnumerable<Employee.Models.ApplyJob>)
{
<tr>
<td>#item.PerferenceNo</td>
<td>#item.JobName</td>
<td>#item.Location</td>
<td>Action</td>
</tr>
}
}
how to use row span on PerferenceNo and JobName using MVC4>
You need to compare the previous values with the current values, but there is no need to use rowspan (which would unnecessarily complicate it). You can just generate an empty <td> element when the cell matches the previous value.
#{
var data = ViewData["post"] as IEnumerable<Employee.Models.ApplyJob>;
int perferenceNo = 0;
string jobName = "";
}
#foreach (var item in data)
<tr>
#if (item.PerferenceNo == perferenceNo)
{
<td></td>
}
else
{
perferenceNo = item.PerferenceNo;
<td>#item.PerferenceNo</td>
}
... // ditto for JobName
<td>#item.Location</td>
</tr>
}
And I strongly recommend you pass a model to the view, rather than casting it from ViewData
If you do want to use the rowspan attribute, then you code will need to be
#foreach (var item in items)
{
int perferenceNoCount = data.Count(x => x.PerferenceNo == item.PerferenceNo);
int jobNameCount = data.Count(x => x.JobName == item.JobName);
<tr>
#if (item.PerferenceNo != perferenceNo)
{
perferenceNo = item.PerferenceNo;
<td rowspan="#(perferenceNoCount)">#item.ID</td>
}
#if (item.JobName != jobName)
{
jobName = item.JobName;
<td rowspan="#(jobNameCount)">#item.Name</td>
}
<td>#item.Location</td>
</tr>
}
But you really should be using view model in that case with properties for the rowspan values and run your queries in the controller.
Related
I am trying to multiply two different data fetched from the database and have the result displayed on a table. I am having issues multiplying data from two different rows and displaying the result on same table.
// code to filter and render table
renderTable() {
var totalCount = 0;
var shownCount = 0;
var lowerBound = 0;
var upperBound = 0;
var filtered = [];
filtered = this.state.data.map( (row, i,) => {
if(row.department.toLowerCase().indexOf(this.state.departmentFilter) > -1){
return (
<tr key={"employeeData"+i}>
<td>{i+1}</td>
<td>{row.name}</td>
<td>{row.numberofPresentAttendances}</td>
<td>{row.department}</td>
<td>{row.wages}</td>
<td>{row.totalWages}</td>
<td>
</td>
</tr>
);
} else {
return undefined;
}
});
<table className="employee-table">
<tbody>
<tr>
<th>No</th>
<th>Name</th>
<th>Attendance in the last 7days</th>
<th>Department</th>
<th>Wage/hr</th>
<th>Total Wages</th>
<th></th>
</tr>
{ filtered }
</tbody>
</table>
// mongoose models
var employeeSchema = mongoose.Schema({
name: String,
department: String,
wages:Number,
attendances: Object
},{timestamps:true});
var Employee = mongoose.model('Employee', employeeSchema);
I would like to multiply the Wages/hr and numberofPresentAttendances in the frontend
I am not sure if I understand your question completely but if you want to show the result of (numberofPresentAttendances * wages) then you can do something like this:
filtered = this.state.data.map( (row, i,) => {
if(row.department.toLowerCase().indexOf(this.state.departmentFilter) === -1){
return null;
}
return (
<tr key={"employeeData"+i}>
<td>{i + 1}</td>
<td>{row.name}</td>
<td>{row.numberofPresentAttendances}</td>
<td>{row.department}</td>
<td>{row.wages}</td>
<td>{row.numberofPresentAttendances * row.wages}</td>
</tr>
);
});
Although I am not sure why you are using variable numberofPresentAttendances instead of attendances as mentioned in your mongoose schema.
I am trying to display details of a SharePoint document library using knockout.js.I want the name of the item or the URL to be clickable.Is it possible? I am trying below code but it is not formatting to URL link <a hrefr=# data-bind="attr: {href: Designation}, text:Designation"></a>
Below is the source code
<table id="tblEmployeeList" border="1">
<thead>
<tr>
<th>Name</th>
<th>Designation</th>
<th>Department</th>
<th>Location</th>
</tr>
</thead>
<!-- Iterating through every list item using foreach of KO -->
<tbody data-bind="foreach: Employees">
<tr>
<td data-bind="text: Name"></td>
**<td </td>**
<td data-bind="text: Department"></td>
<td data-bind="text: Location"></td>
</tr>
</tbody>
</table>
Javascript
ExecuteOrDelayUntilScriptLoaded(MainFunction, "sp.js");
var completeEmployeeList = null;
// Class used for saving the field values.
function EmployeeList(name, designation, department, location) {
var self = this;
self.Name = name;
self.Designation = designation;
self.Department = department;
self.Location = location;
}
// View Model - JavaScript that defines the data and behavior of your UI
function EmployeeListViewModel() {
var self = this;
// observableArray equivalent of a regular array,
self.Employees = ko.observableArray([]);
self.AddEmployees = function (name, designation, department, location) {
self.Employees.push(new EmployeeList(name, designation, department, location));
}
}
function MainFunction() {
completeEmployeeList = new EmployeeListViewModel();
// Retrieve the SharePoint list items
retrieveListItems();
// Activates knockout.js
ko.applyBindings(completeEmployeeList);
}
function retrieveListItems() {
var clientContext = new SP.ClientContext.get_current();
var oList = clientContext.get_web().get_lists().getByTitle('Documents');
var camlQuery = new SP.CamlQuery();
camlQuery.set_viewXml("<View><RowLimit>10</RowLimit></View>");
this.collListItem = oList.getItems(camlQuery);
clientContext.load(collListItem);
clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed));
}
function onQuerySucceeded(sender, args) {
var listItemInfo = '';
var listItemEnumerator = collListItem.getEnumerator();
while (listItemEnumerator.moveNext()) {
var currentItem = listItemEnumerator.get_current();
completeEmployeeList.AddEmployees(currentItem.get_item("Title"), currentItem.get_item("FileRef"), currentItem.get_item("Editor"),currentItem.get_item("File_x0020_Size"), currentItem.get_item("Modified"));
}
}
function onQueryFailed(sender, args) {
alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
}
This seems to work as I'd expect. If you aren't seeing a clickable link maybe there's something in your css changing the styling?
Here's a repro snippet, but I removed code related to your api calls:
var completeEmployeeList = null;
// Class used for saving the field values.
function EmployeeList(name, designation, department, location) {
var self = this;
self.Name = name;
self.Designation = designation;
self.Department = department;
self.Location = location;
}
// View Model - JavaScript that defines the data and behavior of your UI
function EmployeeListViewModel() {
var self = this;
// observableArray equivalent of a regular array,
self.Employees = ko.observableArray([]);
self.AddEmployees = function(name, designation, department, location) {
self.Employees.push(new EmployeeList(name, designation, department, location));
}
}
function MainFunction() {
completeEmployeeList = new EmployeeListViewModel();
// Retrieve the SharePoint list items
//retrieveListItems();
//test value
completeEmployeeList.AddEmployees('Test Name', 'Test Dept', 'Test Designation', 'Test Location');
// Activates knockout.js
ko.applyBindings(completeEmployeeList);
}
MainFunction()
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tblEmployeeList" border="1">
<thead>
<tr>
<th>Name</th>
<th>Designation</th>
<th>Department</th>
<th>Location</th>
</tr>
</thead>
<!-- Iterating through every list item using foreach of KO -->
<tbody data-bind="foreach: Employees">
<tr>
<td data-bind="text: Name">
<span data-bind="text: Name"></span>
</td>
<td>
</td>
<td data-bind="text: Department"></td>
<td data-bind="text: Location"></td>
</tr>
</tbody>
</table>
I created test Spring Boot + AngularJS app to test checkboxes:
html:
... <thead>
<tr>
<th><input type="checkbox" ng-model="isAllSelected"
ng-click="selectAll()"></th>
<th>Lp.</th>
<th>ID</th>
<th>Name</th>
<th>Parent Id</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="test in tests">
<td><input type="checkbox" ng-model="test.checked"
ng-change="optionSelected()" /></td>
<td>{{$index+1}}.</td>
<td>{{test.id}}</td>
<td>{{test.name}}</td>
<td>{{test.parentId}}...
test_controller.js:
(function(angular) {
var AppTestController = function($scope, Test) {
var vm = this;
vm.tests = [];
vm.loadAll = loadAll;
loadAll();
function loadAll() {
Test.query(function(result) {
vm.tests = result;
});
}
vm.selectAll = function() {
var toggleStatus = vm.isAllSelected;
angular.forEach(vm.tests, function(itm) {
itm.checked = toggleStatus;
});
}
vm.optionSelected = function() {
vm.isAllSelected = vm.tests
.every(function(itm) {
return itm.checked;
})
}
};
AppTestController.$inject = [ '$scope', 'Test' ];
angular.module("myApp.test_controller").controller(
"AppTestController", AppTestController);
}(angular));
This works for me as spring Boot app, but when I do the same in JHipster it doesn't work.
How can I get it to work in JHipster?
This is what I currently used and it works!:
.html
<thead>
<tr jh-sort="vm.predicate" ascending="vm.reverse" callback="vm.transition()">
<!--th jh-sort-by="id"><span data-translate="global.field.id">ID</span> <span class="glyphicon glyphicon-sort"></span></th-->
<th><input type="checkbox" icheck ng-change="vm.selectAll()" ng-model="vm.checkAll[vm.page]"></th>
<th jh-sort-by="id"><span data-translate="global.field.id">ID</span></th>
---
</tr>
</thead>
<tbody>
<tr ng-repeat="school in vm.schools track by school.id">
<td><input type="checkbox" icheck ng-model="vm.checkboxes[school.id]" ng-change="vm.select(school)"/></td>
<td>{{($index + 1) + (vm.page - 1) * vm.itemsPerPage}}</td>
...
</tr>
</tbody>
.js
vm.checkAll = [];
var map = {};
vm.checkboxes = [];
vm.selectedItems = [];
vm.selectAll = selectAll;
vm.select = select;
function selectAll () {
var value = vm.checkAll[vm.page];
angular.forEach(vm.schools, function(item) {
if (angular.isDefined(item.id)) {
if(vm.checkboxes[item.id] != value) {
vm.checkboxes[item.id] = value;
vm.select(item);
}
}
});
};
function select (item) {
var value = vm.checkboxes[item.id];
if(value) {
vm.selectedItems.push(item);
if(map[vm.page] == null) map[vm.page] = 1;
else map[vm.page] = map[vm.page] + 1;
if(map[vm.page] == vm.schools.length) {
vm.checkAll[vm.page] = true;
}
} else {
vm.selectedItems.splice(item, 1);
if(map[vm.page] == null) map[vm.page] = 0;
else map[vm.page] = map[vm.page] - 1;
if(map[vm.page] < vm.schools.length) {
vm.checkAll[vm.page] = false;
}
}
};
My cart is working fine in localhost but when i have hosted in cloud hosting it is not working well problem is that when i click add to cart button it will add one product with one quantity but when i add another product in the cart again it will override the previous one and show only one product in cart when i have added on last.. i don't know whats wrong with the sessions it will override the session again i guess. And another problem is that my my update cart button's functionalities and delete button functionalities in cart is not working it throw exception
Object reference not set to an instance of an object.
I have a controller name shoppingCartController here is the code
namespace Medi.Areas.User.Controllers
{
public class ShoppingCartController : Controller
{
ArrayList arr = new ArrayList();
int id;
BLL.IRepository<tbl_Product> de = new BLL.IRepository<tbl_Product>();
public ActionResult Index()
{
return View();
}
private int isExisting(int id)
{
List<Items> cart = (List<Items>)Session["cart"];
for (int i = 0; i < cart.Count; i++)
if (cart[i].Pr.ProductID == id)
return i;
return -1;
}
public ActionResult Delete(int id)
{
int index = isExisting(id);
List<Items> cart = (List<Items>)Session["cart"];
cart.RemoveAt(index);
Session["cart"] = cart;
return PartialView("_pvCart");
}
public ActionResult OrderNow(string q)
{
if (Session["cart"] == null)
{
List<Items> cart = new List<Items>();
cart.Add(new Items(de.GetById(Convert.ToInt32(q)), 1));
Session["cart"] = cart;
// ViewBag.quantity = new MultiSelectList(cart,"Quantity","Quantity");
// cart[1]
}
else
{
id = Convert.ToInt32(q);
List<Items> cart = (List<Items>)Session["cart"];
int index = isExisting(id);
if (index == -1)
cart.Add(new Items(de.GetById(id), 1));
else
cart[index].Quantity++;
Session["cart"] = cart;
// ViewBag.quantity = new MultiSelectList(cart, "Quantity", "Quantity");
}
return View("Cart");
}
[HttpPost]
public ActionResult UpdateCart(int[] ProductID,int [] quantity )
{
int[] x = new int[4];
int[] y = new int[4];
List<Items> cart = (List<Items>)Session["cart"];
for (int i = 0; i < cart.Count; i++)
{
x[i] = ProductID[i];
y[i] = quantity[i];
updcart(x[i],y[i]);
}
Session["cart"] = cart;
return PartialView("_pvCart");
}
public void updcart(int id,int quantity) {
List<Items> cart = (List<Items>)Session["cart"];
int index = isExisting(id);
if (index == -1)
cart.Add(new Items(de.GetById(id), 1));
else
cart[index].Quantity = quantity;
Session["cart"] = cart;
}
}
}
and here is the view name Cart.cshtml
#{
ViewBag.Title = "Cart";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<script src="~/Scripts/jquery-2.1.4.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>
#using (Ajax.BeginForm("UpdateCart", "ShoppingCart", new AjaxOptions() { HttpMethod = "POST", UpdateTargetId = "MyData", InsertionMode = InsertionMode.Replace }))
{
#Html.AntiForgeryToken()
<br />
<br />
<div id="MyData">
#{Html.RenderPartial("_pvCart");}
and here is the partial view code
#using Medi.Models;
<script src="~/Scripts/metro.min.js"></script>
<table class="table hovered" cellpadding=" 2" cellspacing="2" border="1px">
<tr class="info">
<th></th>
<th>Name</th>
<th>Price</th>
<th>Quantity</th>
<th>Sub Total</th>
</tr>
#{
decimal s = 0;
}
#foreach (Items item in (List<Items>)Session["cart"])
{
<input id="ProductID" name="ProductID" type="hidden" value="#item.Pr.ProductID" />
s = s + (Convert.ToInt32(item.Pr.Price) * item.Quantity);
<tr>
<th>#Ajax.ActionLink("Delete", "Delete", new { id = item.Pr.ProductID }, new AjaxOptions() { HttpMethod = "POST", UpdateTargetId = "MyData", InsertionMode = InsertionMode.Replace }, new { #class = "mif-cross" })</th>
<td>#item.Pr.ProductName</td>
<td>#item.Pr.Price</td>
<td>
<input name="quantity" id="quantity" type="text" style="width:25px;" value="#item.Quantity" />
</td>
<td>#(item.Pr.Price * item.Quantity)</td>
</tr>
}
</table><br />
<hr />
<table cellpadding="1px" cellspacing="1px" style="float:right;">
<tr align="center" colspan="5" style="background-color:gray;">
<td><h3 style="padding:1px;">Total</h3></td>
<td> <h3 style="padding:1px;">Rs #s</h3></td>
</tr>
</table>
here is the model class
using BOL;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace Medi.Models
{
public class Items
{
tbl_Product pr = new tbl_Product();
public tbl_Product Pr
{
get { return pr; }
set { pr = value; }
}
int quantity;
public int Quantity { get; set; }
public Items()
{
}
public Items(tbl_Product product, int quantity)
{
this.Pr = product;
this.Quantity = quantity;
}
}
}
i have also write this code in web.config
<httpCookies httpOnlyCookies="true" requireSSL="true"/>
<sessionState mode="InProc"/>
I am using Infragistics UltraWebGrid in my application when I use custom paging I am not able to retrieve the specified number of records per page
The code I have written is
string[] cusLabel;
in the grid initialise
grid.DisplayLayout.Pager.AllowCustomPaging = true;
grid.DisplayLayout.Pager.AllowPaging = true;
grid.DisplayLayout.Pager.StyleMode = PagerStyleMode.CustomLabels;
grdSysManager.DisplayLayout.Pager.PageSize = 3;
getCustomLabel();
grdSysManager.DisplayLayout.Pager.CustomLabels = cusLabel;
private void getCustomLabel()
{
DataTable dt = (DataTable)grdSysManager.DataSource;
DataSet ds = new DataSet();
ds = dt.DataSet;
//ds = (DataSet)grdSysManager.DataSource;
int NoOfRows = ds.Tables[0].Rows.Count;
int PageSize = grdSysManager.DisplayLayout.Pager.PageSize;
if (NoOfRows % PageSize == 0)
{
totalNoOfPagings = NoOfRows / PageSize;
}
else
{
totalNoOfPagings = (NoOfRows / PageSize) + 1;
}
cusLabel = new string[totalNoOfPagings + 2];
cusLabel[0] = "First";
for (int i = 1; i <= totalNoOfPagings; i++)
{
cusLabel[i] = i.ToString();
}
cusLabel[totalNoOfPagings + 1] = "Last";
}
Above is the code I written but it is displaying all the records from the table instead of
3 records per page. Am I missing anything?
Thanks
<table cellspacing='0' cellpadding='0' width='100%'>
<tr>
<td width='12%' align='left'>
[currentpageindex]/[pagecount]
</td>
<td width='76%'>
<b>[page:1:First] [prev]</b>
[default]
<b>[next] [page:[pagecount]:Last]</b>
</td>
<td width='12%' align='right' title='Enter page number and press Enter'>
Go to:
<input id='xtxtGotoPage' size='5'
style='font-family:verdana;font-size:8pt;padding:0 0 0 0'
type='text' onKeyPress='return gotoPage()' autocomplete='off' />
</td>
</tr>
</table>
This pattern can be assigned in grid designer, directly in grid markup or even at runtime to Pager.Pattern property. The only thing left is to implement gotoPage() JavaScript function (markup, Line 17) that would go to the page number that user enters. And here it is:
function gotoPage() {
if (event.keyCode == 13) {
var otxtGotoPage = event.srcElement;
var iPageNo = otxtGotoPage.value
if (!isNaN(iPageNo)) {
var oGrid = igtbl_getGridById('xuwgMyGrid');
if (iPageNo < 1 || iPageNo > oGrid.PageCount) {
alert('Please enter page number between 1 and ' +
oGrid.PageCount)
} else {
oGrid.goToPage(iPageNo)
}
} else {
alert('Please enter correct numeric page number');
}
otxtGotoPage.focus();
otxtGotoPage.value = '';
return false;
}
}
I believe that PageSize is the number of custom labels, when you're using custom paging. In order to give the grid only three rows per page, you have to give it only three rows in the grid's DataBinding event.
Custom paging with this grid isn't just about the custom appearance of the pager - it's about you taking control of most of the paging process yourself. The grid will display your custom labels, and it will make them all into hyperlinks except for the one indicated as the current page. When you click one of the links, the PageIndexChanged will be raised, and it will tell you the index of the link that was clicked. What you do with that index is up to you.