I have a checkbox to which I am displaying a tooltip when you mouse hover it.
However the toolip is displayed on the fore ground when mouse is scrolled.
How can we hide when the component goes background.
<td class="text-right">
<input type="checkbox" id="temp" formControlName="temp"
name="tempfld"
tooltip="This is tooltip" />
</td>
use ng2-tooltip-directive, as ng2-tooltip is depricated
npm i ng2-tooltip-directive
Options can be set in the directive tag, so they have the highest priority.
<td class="text-right">
<input type="checkbox" id="temp" formControlName="temp"
name="tempfld"
placement="top" show-delay="500"
tooltip="This is tooltip" />
</td>
You may pass as an object:
<td class="text-right">
<input type="checkbox" id="temp" formControlName="temp"
name="tempfld"
tooltip="This is tooltip"
[options]="myOptions" />
</td>
myOptions = {
'placement': 'left',
'show-delay': 500
}
Related
This is the third question on this topic. Hopefully I’ve improved the question as I struggle with wrapping up this project. First, let’s look at the page with the Dropdown list of Alert_Identifiers—the key value that gets data from the mysql database for the project. AlertPick.cshtml:
#model IEnumerable<edxl_cap_v1_2.Models.ContentViewModels.Alert>
#using edxl_cap_v1_2.Models.ContentViewModels
#{
ViewData["Title"] = "PickAlert";
}
<head>
<meta name="viewport" content="width=device-width" />
<link rel="stylesheet" href="~/css/capv1_2_refimp.css" />
<title>#ViewBag.Title</title>
</head>
<h4>Alert</h4>
<div>
#ViewBag.Message
</div>
<style>
tr:nth-child(even) {
background-color: lightBlue;
}
tr:nth-child(odd) {
background-color: white;
}
</style>
<table class="smallText">
#foreach (var item in Model)
{
<tr>
<td>
</td>
<td>
<div id="elementInput">
<span class="smallText">
#Html.DisplayNameFor(model => model.Alert_Identifier) value
<input type="text" name="elementValue" value="#Html.DisplayFor(modelItem => item.Alert_Identifier)" size="60" />
</span>
</div>
</td>
<td>
<text> </text>
</td>
<td>
<form asp-area="" asp-controller="alerts" asp-action="_DetailsAlert" method="post" asp-route-id="#item.AlertIndex">
<input type="hidden"
name="Identifier"
value="#Html.DisplayFor(modelItem => item.Alert_Identifier)">
<input type="submit"
value="Check Alert">
</form>
</td>
<td>
<text> </text>
</td>
</tr>
<tr>
<td>
</td>
<td>
<div id="elementInput">
<span class="smallText">
#Html.DisplayNameFor(model => model.Alert_Identifier) value
<input type="text" name="elementValue" value="#Html.DisplayFor(modelItem => item.Alert_Identifier)" size="60" />
</span>
</div>
</td>
<td>
<text> </text>
</td>
<td>
<form asp-area="" asp-controller="infos" asp-action="_DetailsInfo" method="post" asp-route-id="#item.AlertIndex">
<input type="hidden"
name="Identifier"
value="#Html.DisplayFor(modelItem => item.Alert_Identifier)">
<input type="submit"
value="Check Info">
</form>
</td>
<td>
<text> </text>
</td>
</tr>
<tr>
<td>
</td>
<td>
<div id="elementInput">
<span class="smallText">
#Html.DisplayNameFor(model => model.Alert_Identifier) value
<input type="text" name="elementValue" value="#Html.DisplayFor(modelItem => item.Alert_Identifier)" size="60" />
</span>
</div>
</td>
<td>
<text> </text>
</td>
<td>
<form asp-area="" asp-controller="areas" asp-action="_DetailsArea" method="post" asp-route-id="#item.AlertIndex">
<input type="hidden"
name="Identifier"
value="#Html.DisplayFor(modelItem => item.Alert_Identifier)">
<input type="submit"
value="Check Area">
</form>
</td>
<td>
<text> </text>
</td>
</tr>
<tr>
<td>
</td>
<td>
<div id="elementInput">
<span class="smallText">
#Html.DisplayNameFor(model => model.Alert_Identifier) value
<input type="text" name="elementValue" value="#Html.DisplayFor(modelItem => item.Alert_Identifier)" size="60" />
</span>
</div>
</td>
<td>
<text> </text>
</td>
<td>
<form asp-area="" asp-controller="resources" asp-action="_DetailsResource" method="post" asp-route-id="#item.AlertIndex">
<input type="hidden"
name="Identifier"
value="#Html.DisplayFor(modelItem => item.Alert_Identifier)">
<input type="submit"
value="Check Resource">
</form>
</td>
<td>
<text> </text>
</td>
</tr>
<tr>
<td>
</td>
<td>
<div id="elementInput">
<span class="smallText">
#Html.DisplayNameFor(model => model.Alert_Identifier) value
<input type="text" name="elementValue" value="#Html.DisplayFor(modelItem => item.Alert_Identifier)" size="60" />
</span>
</div>
</td>
<td>
<text> </text>
</td>
<td>
<form asp-area="" asp-controller="EdxlCapMessageViewModels" asp-action="_Assemble" method="post" asp-route-id="#item.AlertIndex">
<input type="hidden"
name="Identifier"
value="#Html.DisplayFor(modelItem => item.Alert_Identifier)">
<input type="submit"
value="Add All">
</form>
</td>
<td>
<text> </text>
</td>
</tr>
}
</table>
Once the Alert_Identifier that corresponds to one record in the database is selected and the submit button is clicked, the browser opens this page
The first four rows work correctly when the “Check XXX” submit button is clicked. They show the individual data category “_DetailsXXX.cshtml” page one at a time. Here is the screen of the page showing the _DetailsAlert.cshtml page.
This is set up so that these pages can be reviewed individually and the composite page, once working, will also work in the “Review” page and the “Approve” page. In the case of the “Assemble” page here, the four individual pages are intended to appear composited together when the “Add All” submit button is clicked, but currently these pages appear without data values for the data items.
I am also going to ping a couple of more experienced people who have helped me previously to take a look at this, I am also studying a wholly different injection mechanism for injecting data into the program where needed which I will consider using in the follow-on specfications.
Lastly, I am rexbroo at GitHub.com where you can find nearly identical Visual Studio programs in the repos: edxl_cap_v1_2-VS4Win (for Windows) and edxl_cap_v1_2-VS4Mac (for Mac) and edxl_cap_v1_2,sql-mysql-VisualStudio where the most current dump of the database is 20180928.
<input type="text" name="elementValue" value="#Html.DisplayFor(modelItem => item.Alert_Identifier)" size="60" />
You don't need to use the #Html.DisplayFor helper here. Just use:
<input type="text" name="elementValue" value="#item.Alert_Identifier" size="60" />
None of your input values should be using the Html.DisplayFor. That is inserting a tag into the value when all you really want is the value of the property.
Also, I question the reason for using multiple forms on a page. Could you use a single form and post to a single action? Do you need to post at all? Could the action be refactored into a get and let you use a <a> tag instead?
I am trying to execute some sample code in Angular2.
I have a button called ADD. While clicking on the ADD button one new table row will be added with a set of controls like textbox, select etc.
Once I filled these details, then, if I again click on the ADD button a new row will be added but previously filled details will be cleared(empty).
What I want is that whenever I click on the ADD button a new row should be added but the previously populated values should not be cleared.
Here is my sample code:
1. component.html
<table td-data-table [class.md-selectable]="selectable">
<tr td-data-table-row *ngFor="let account of voucher.accountList;let i = index;trackBy:i;">
<td td-data-table-cell>
<md2-select [(ngModel)]="account.account" (change)="selectedAccount($event)" placeholder="Select account" name="account">
<md2-option *ngFor=" let account of accounts" [value]="account.account" >{{account.name}}</md2-option>
</md2-select>
</td>
<td td-data-table-cell>
<md-input flex placeholder="description" type="text" maxlength="50" name="description" #description="ngModel"
[(ngModel)]="account.description" >
</md-input>
</td>
<td td-data-table-cell>
<md-input flex placeholder="debit" type="text" maxlength="50" name="debit" #debit="ngModel"
[(ngModel)]="account.debit" >
</md-input>
</td>
<td td-data-table-cell>
<md-input #creditElement flex placeholder="credit" type="text" maxlength="50" name="credit" #credit="ngModel"
[(ngModel)]="account.credit" >
</md-input>
</td>
<td td-data-table-cell>
<md2-select [(ngModel)]="account.tax" (change)="selectedTax($event)" placeholder="Select tax" name="tax">
<md2-option *ngFor="let tax of taxList" [value]="tax.value" >{{tax.display}}</md2-option>
</md2-select>
</td>
<td td-data-table-cell>
<button md-mini-fab color="primary" (click)="removerow(account)">
<md-icon color="#6b9bea">close</md-icon>
</button>
</td>
<td td-data-table-cell>
<button md-mini-fab color="primary" (click)="addrow()" *ngIf="i==(voucher.accountList.length-1)">
<md-icon >add</md-icon>
</button>
</td>
</tr>
</table>
Component.ts
//sample model
voucher={
referenceNo:"",
date:"",
narration:"",
accountList:this.transaction,
notes:""
};
transaction=[{
id:null,account:null,description:"",debit:"",credit:"",tax:""
}]
addrow(){
this.voucher.accountList.push({id:"",account:"",description:"",debit:"",credit:"",tax:""});
}
removerow(row){
this.voucher.accountList.forEach(x=>
{
if(x==row){
var index= this.voucher.accountList.indexOf(row)
this.voucher.accountList.splice(index,1);
}
});
}
When creating multiple ngModel controls inside ngFor loop make sure to give each control unique name:
like
<table td-data-table [class.md-selectable]="selectable">
<tr td-data-table-row *ngFor="let account of voucher.accountList;let i = index;trackBy:i;">
<td td-data-table-cell>
<md2-select [(ngModel)]="account.account" (change)="selectedAccount($event)" placeholder="Select account" name="account-{{i}}">
<md2-option *ngFor=" let account of accounts" [value]="account.account" >{{account.name}}</md2-option>
</md2-select>
</td>
<td td-data-table-cell>
<md-input flex placeholder="description" type="text" maxlength="50" name="description-{{i}}" #description="ngModel"
[(ngModel)]="account.description" >
</md-input>
</td>
<td td-data-table-cell>
<md-input flex placeholder="debit" type="text" maxlength="50" name="debit-{{i}}" #debit="ngModel"
[(ngModel)]="account.debit" >
</md-input>
</td>
<td td-data-table-cell>
<md-input #creditElement flex placeholder="credit" type="text" maxlength="50" name="credit-{{i}}" #credit="ngModel"
[(ngModel)]="account.credit" >
</md-input>
</td>
<td td-data-table-cell>
<md2-select [(ngModel)]="account.tax" (change)="selectedTax($event)" placeholder="Select tax" name="tax-{{i}}">
<md2-option *ngFor="let tax of taxList" [value]="tax.value" >{{tax.display}}</md2-option>
</md2-select>
</td>
<td td-data-table-cell>
<button md-mini-fab color="primary" (click)="removerow(account)">
<md-icon color="#6b9bea">close</md-icon>
</button>
</td>
<td td-data-table-cell>
<button md-mini-fab color="primary" (click)="addrow()" *ngIf="i==(voucher.accountList.length-1)">
<md-icon >add</md-icon>
</button>
</td>
</tr>
</table>
I am new to MVC and would like some help.
I have a view (below) which displays the products, next to each other. Till here everything is fine.
#foreach (var item in Model)
{
<a href="#Url.Action("showProductDetails", "Shared", new { ProductID = item.ProductID }, null)">
<div class='OutsideDiv' >
<table class='DivBorder'>
<tr >
<td class='title'>
#item.ProductName
</td>
</tr>
<tr >
<td class='imageBox'>
<img alt='' src="#item.ImageURL" />
</td>
</tr>
<tr>
<td class='title'>
#Html.Action("showAverageRating", "Rating" , new { ProductID = item.ProductID } ) *************
</td>
</tr>
<tr>
<td class='desc'>
#item.Description
</td>
</tr>
<tr>
<td class='price'>
€ #item.Price
</td>
</tr>
</table>
</div>
<script type='text/javascript'> $('.DivBorder').mouseover(function () { $(this).css('border-color', '#0953cb'); $(this).css('background-color', '#eaeaea'); }); $('.DivBorder').mouseout(function () { $(this).css('border-color', '#bdbdbd'); $(this).css('background-color', '#f6f6f6'); });</script>
</a>
}
In the line marked with '****' above I am calling another view (showAverageRating) which for now is just displaying 5 rating stars with the first 3 starts selected.
<input class="star " name="adv1" type="radio" />
<input class="star " name="adv1" type="radio" />
<input checked="checked" class="star " name="adv1" type="radio" />
<input class="star " name="adv1" type="radio" />
<input class="star " name="adv1" type="radio" />
The problem is that on the second item, when the rating stars view (above partial view) is called again, the stars are displayed next to the stars of the first product, picture below.
I think I have to use something else rather than Html.Action?
EDIT : showAverageRating Code
public ActionResult showAverageRating(int ProductID)
{
decimal averageRating = new RatingsService.RatingsClient().getAverageRating(ProductID);
ViewData["averageRating"] = averageRating;
return PartialView();
}
The problem was that the name of the stars where identical, so I included the productID with their name, like below.
showAverageRating partial view
#{decimal averageRating = ViewBag.averageRating;}
#{int productID = ViewBag.productID;}
<div id="averageRating" >
<input class="star" name="star+#productID" type="radio" />
<input class="star " name="star+#productID" type="radio" />
<input checked="checked" class="star " name="star+#productID" type="radio" />
<input class="star " name="star+#productID" type="radio" />
<input class="star " name="star+#productID" type="radio" />
</div>
I have this grid which has an edit button. How do I add code to the input button so that the value of the Id is sent to the Controller?
#using (Ajax.BeginForm("EditLineItem", "OrderSummary", new AjaxOptions() { InsertionMode = InsertionMode.Replace, UpdateTargetId = "content" })) {
<div id="summaryGrid">
<table >
<tr>
<th>Report Type</th>
<th>Borrower Name</th>
<th>Property Address</th>
<th>Est Comp Date</th>
<th>Report Price</th>
<th>Exp Fee</th>
<th>Disc.</th>
<th>Total Price</th>
</tr>
#{
foreach (var item in Model) {
<tr>
<td >#item.ReportName</td>
<td >#item.BorrowerName</td>
<td >#item.Address</td>
<td >#item.EstimatedCompletionDate</td>
<td >#item.ReportPrice</td>
<td >#item.ExpediteFee</td>
<td >#item.Discount</td>
<td >#item.TotalPrice</td>
<td >#item.Id</td>
<td ><input type="submit" value="Edit" /></td>
</tr>
}
}
</table>
</div>
}
just put a name on your input button.
<input type="submit" name="id" value="edit" />
Then on your action, you should be able to get the value for id.
If you want more complexity then you are going to have to rethink the way you are doing it. Most likely by writing your own JQuery methods.
$('input.edit').on('click', function (evt) {
evt.preventDefault();
var values = $(this).data();
$.post($(this).attr('href'), values, function (result) { /*do something*/ });
});
Html :
<a href="/edit/1" class="edit" type="submit" data-id="1" data-method="edit" />
That's a start, but you could probably tweak it to fit your needs. At that point, you don't need to wrap the whole table with the Ajax.BeginForm.
To add to Khalid's answer: I tested with this form:
<form method="get">
<input type="submit" name="Id1" value="Edit" id="id1" />
<input type="submit" name="Id2" value="Edit" id="id2" />
<input type="submit" name="Id3" value="Edit" id="id3" />
</form>
The post looks like this when clicking on the third button:
http://localhost:34605/HtmlPage.html?Id3=Edit
In other words, the browser passes the name of whichever button is clicked.
This is an example of getting the Id in the controller:
if (Request.QueryString.HasKeys()) {
string key = Request.QueryString.GetKey(0);
int id;
int.TryParse(key.Substring(2, 1), out id);
Response.Write("You selected id: " + id);
}
I have since found an even easier way of doing this:
Use the <button> element instead of <input>
With <button> you can do this:
<button type="submit" value="#item.Id" name="id">Edit</button>
and then in the controller, all you need is this:
public ActionResult EditLineItem(int id)
{ //Do something with id}
Note that this does not work with IE6.
I use asp.net-mvc, entity framework. My view is like below:
<td class="center">
<span id="spanitem_#item.UrunId">#item.Fiyat</span>
<input type="text" id="textfiyat_#item.UrunId" value="" class="displaynone textwidth90"/>
</td>
<td class="center">
<span id="spanitem_#item.UrunId">#item.Adet</span>
<input type="text" id="textadet_#item.UrunId" value="" class="displaynone textwidth90"/>
</td>
<td class="center">
<span id="spanitem_#item.UrunId">
#item.Fiyat)*#item.Adet
</span>
</td>
Fiyat field is decimal, Adet field is int. I want to show their multiplying. But i can not.
How can I achieve this. Thanks...
Have you tried #(item.Fiyat * item.Adet)
You can try it-
#(item.Fiyat * item.Adet)