How to multiply two fields that are in my view.
View
#Html.DisplayFor(modelItem => item.Ship_Quantity)
#Html.DisplayFor(modelItem => item.Deal_Amt_1)
<p>Output Total Here</p>
I want to multiply these two fields to get a total amount
and show it, in the view. How to do it? Can I do it directly in the view or
do I have to modify the model? I am using .edmx models created, so I do not
want to modify them directly.
Try this, It will Work
#Html.Raw(Model.Ship_Quantity * Model.Deal_Amt_1)
var shipquantity = item.Ship_Quantity;
var dealamt1 = item.Deal_Amt_1;
var TotalAmountLine2 = shipquantity * dealamt1;
output: #TotalAmountLine2
Related
Hey so I have little drag and drop game written in React konva. My draggable piece looks like this (simplified for convenience
return this.props.areas.map((area) =>
<Image draggable=true
{...area.imageProps}
onDragStart={() => {...}}
onDragEnd={() => {...}}
onDragMove={() => {...}}/> )
I would like the piece that is currently being dragged to be the one on the highest layer (highest zIndex).
Problem is React-Konva does not support zIndexing, and seems to want you to enforce the zIndexing based on order in the render method.
My solution was to updated the reactState with a currentDragIndex
...<Image
onDragStart = {this.setState({currentDragIndex: area.index})}
/>
Then I try to reorder in the render method. However this causes the drag event to be interrupted.
Anyone have a good solution to this?
You chould just use moveToTop() method
onDragStart={(el) => {el.target.moveToTop();}}
If you have an array of some items, the simplest solution is to change that array, by moving the dragging node to the end of the array. In your render function you just need to draw items from the array.
handleDragStart = e => {
const id = e.target.name();
const items = this.state.items.slice();
const item = items.find(i => i.id === id);
const index = items.indexOf(item);
// remove from the list:
items.splice(index, 1);
// add to the top
items.push(item);
this.setState({
items
});
};
Demo: https://codesandbox.io/s/11j51wwm3
I'm using PageList.MVC to show the paging and I wondering how can I show
Showing items 99 through 99 of 9999
I have used this below code but its showing with-in the control:
#Html.PagedListPager((IPagedList)ViewBag.OnePageOfData, page => Url.Action("Index", new { page = page }), PagedListRenderOptions.MinimalWithItemCountText)
What I'm looking is to just show the label that says:
Showing items 99 through 99 of 9999
There's nothing that will print just that for you. You'll have to construct the text yourself using the data on your IPagedList instance:
#{ var pagedList = (IPagedList)ViewBag.OnePageOfData; }
<p>
Showing items
#((pagedList.PageNumber - 1) * pagedList.PageSize + 1)
through
#(pagedList.PageNumber * pagedList.PageSize)
of
#pagedList.TotalItemCount
</p>
I'm using the angularjs ui-grid and I have a "total" row that I want to pin to the top of the grid no matter what is the current sorting.
How can I accomplish that?
I think this is what you are looking for : Row Pinning
Essentially add another hidden column, something like this:
{
field: 'pinned',
visible: false,
sort: {direction: uiGridConstants.ASC, priority: 0}, //use uiGridConstants.DESC for pinning to the bottom
suppressRemoveSort: true,
sortDirectionCycle: [uiGridConstants.ASC] //use uiGridConstants.DESC for pinning to the bottom
}
Row entities which have pinned = true rise to the top, even when other sorting are applied.
DISCLAIMER: I know it's not exactly answers the question, but this is how I solved it for now until I'll have a better solution:
Create an other grid above the main grid :
<div style="height:30px" ui-grid="totalGridOptions"></div>
<div ui-grid="gridOptions" class="grid"></div>
with definitions:
$scope.totalGridOptions = {showHeader:false,enableHorizontalScrollbar:false};
and then bind the columns of the main grid to the total grid (for width and other adjustments):
$scope.$watch('gridOptions', function (newVal) {
$scope.totalGridOptions.columnDefs = newVal.columnDefs;
}, true);
I think you should use something like this
$scope.gridOptions.data.unshift({label:value});
unshift adds it to the top
Edit 2 / Actual Solution: The way I finally settled this issue was by using custom header cell templates. I essentially create a second header row by adding a div at the bottom of what was previously my header. Here's a simple version:
<div class="super-special-header>
<div class="header-display-name">{{col.displayName}}</div>
<div class="totals-row">{{grid.appScope.totals[col.field]}}</div>
</div>
I store my totals on the controller's $scope and can access them in that div with grid.appScope.totals[whateverThisColumnIs]. This way I can still update them dynamically, but they don't get mixed into a sort function like my previous 'solution' was aiming for.
Edit 1 / Dead-end 'solution': Just ran into a problem with my solution, if your table is long (you have to scroll to get to bottom rows), the totals row will scroll out of view. Going to leave this 'solution' here so no one else makes the same mistake!
I had this same issue but with a twist. Since I was going to need to change the default sorting algorithms for many of the columns anyway, I set my algorithm up to skip the first element in the sort. You can use the sortingAlgorithm property on any columndef that would be part of a sortable column. This is really only a solution if you have only a few sortable columns though. It becomes unmaintainable for huge tables.
I couldn't find any built-in feature for ui-grid to keep a specific row at the top of the grid when sorting is applied. But this could be done using sortingAlgorithm parameter in the columnDefs( please refer to http://ui-grid.info/docs/#!/tutorial/Tutorial:%20102%20Sorting).
I have written an algorithm which keeps the row('total' is the particular cell value in the row) at the top of the grid without applying a sorting.
var sortingAlgorithm = function (a, b, rowA, rowB, direction) {
if (direction == 'total') {
if (a == 'total') {
return 0;
}
return (a < b) ? -1 : 1;
} else {
if (a == 'total') {
return 0;
}
if (b == 'total') {
return 1;
}
}
}
I have a question for my foreach loop on a table design in my mvc view.
I want my loop to output max 2 cells for each table row and if and it has data to loop out more than 2 cells it adds a new row and continues to loop out the data on the cells on that row etc..
Anyone have a solution for this?
Iterate over the collection in increments of two. Check to make sure that the i+1th item is available before outputting it, outputting an empty cell instead if it isn't.
<table>
<thead>
<tr><th>Column 1</th><th>Column 2</th></tr>
</thead>
<tbody>
#for (int i = 0; i < Model.Count(); i = i + 2)
{
<tr>
<td>#Model[i]</td> // or #Model.ElementAt(i)
<td>#(i+1 < Model.Count() ? Model[i+1] : "")</td> // similar
</tr>
}
</tbody>
</table>
You shouldn't use tables for this.
Instead, put your content in <div>s with float: left or display: inline-block, and make the parent element just wide enough to hold two children.
You want to look at using the modulus operator (%).
Something like
if i%2 = 0 { new line }
I have a table of many rows in a JQuery UI accordion.
I dynamically append the table this way:
var resJson = JSON.parse(connector.process(JSON.stringify(reqJson)));
for ( var i in resJson.entryArrayM) {
// test if entry has already been displayed
if ($("#resultTr_" + resJson.entryArrayM[i].id) == null)
continue;
$("#resultTable > tbody:last").append(listEntry.buildEntryRow(resJson.entryArrayM[i]));
}
Firstly I check if a row of the same tr id already exists. If not, I would append to the last row of the table.
It works. But the problem is: every time a row is appended, the accordion would scroll to the first row of the table. Since the table is remarkably long, it makes users inconvenient to scroll down again and again to watch newly-added rows. So how to avoid this?
First of all, just do one append rather than appending every time through the loop:
var resJson = JSON.parse(connector.process(JSON.stringify(reqJson)));
var seen = { };
var rows = [ ];
var trId = null;
for(var i in resJson.entryArrayM) {
// test if entry has already been displayed
var trId = 'resultTr_' + resJson.entryArrayM[i].id;
if($('#' + trId).length != 0
|| seen[trId])
continue;
rows.push(listEntry.buildEntryRow(resJson.entryArrayM[i]));
seen[trId] = true;
}
$("#resultTable > tbody:last").append(rows.join(''));
Also note that I corrected your existence test, $(x) returns an empty object when x doesn't match anything, not null. Not only is this a lot more efficient but you'll only have one scroll position change to deal with.
Solving your scrolling issue is fairly simple: find out what element is scrolling, store its scrollTop before your append, and reset its scrollTop after the append:
var $el = $('#whatever-is-scrolling');
var scrollTop = $el[0].scrollTop;
$("#resultTable > tbody:last").append(rows.join('')); // As above.
$el[0].scrollTop = scrollTop;
There might be a slight visible flicker but hopefully that will be lost in the noise of altering the table.
You could also try setting the table-layout CSS property of the <table> to fixed. That will keep the table from trying to resize its width or the width of its columns and that might stop the scrolling behavior that you're seeing. The downside is that you'll have to handle the column sizing yourself. But, you could try setting table-layout:fixed immediately before your append operation to minimize the hassle.