I add Tooltips to a ASP.NET calendar control by code:
string newToolTip = string.Format(#"<div class='tooltip'><div class='toolHead'>{0}</div><div class='toolDate'>{1}-{2}</div></div>",sEvent.Title, sEvent.FromDate, sEvent.ToDate);
e.Cell.ToolTip = newToolTip;
e.Cell.Attributes.Add("OnClick", string.Format("javascript:__doPostBack('Karl Ender','{0}')", sEvent.Title));
Where "e" is a DayRenderEventArgs :
Calendar.DayRender += new DayRenderEventHandler(SpecialDayRender);
At the first Load of the page everything works fine, resulting in the following (correct) html-code:
<td title="" class="calendarcell" align="center" onclick="javascript:__doPostBack('Karl Ender','Hallo Welt')" style="color:White;background-color:Silver;width:14%;">7<div class="tooltip"><div class="toolHead">Hallo Welt</div><div class="toolDate">11/7/2012-5/9/2013</div></div></td>
When I change the month (or do another partial Postback) in the Calendar Control suddenly the Html-Code gets dizzy:
<td title="<div class='tooltip'><div class='toolHead'>Hallo Welt</div><div class='toolDate'>11/7/2012-5/9/2013</div></div>" class="calendarcell" align="center" onclick="javascript:__doPostBack('Karl Ender','Hallo Welt')" style="color:White;background-color:Silver;width:14%;">7</td>
So, the Tooltip gets rendered as a "Title"-Attribute of that Cell
Any clue?
(The calendar is within an updatePanel)
When debugging the code, the Title-Attribute of a cell is never filled with that strange content
Related
I have a Vue 3 invoicing app using composition api.
In the invoice table I have a filterable dropdown for product selection.
Here is the part of the table code,
<tr v-for="(item, index) in items">
<td data-label="No" class="text-center">{{ index + 1 }}</td>
<td data-label="Item">
<Dropdown
v-model="item.product"
:options="products"
:disabled="item.disabled"
option-label="product_name"
:filter="true"
#change="onProductChange(index, $event)"
/>
</td>
<td data-label="Quantity">
<InputNumber
v-model="item.quantity"
class="input-text-right"
mode="decimal"
:min-fraction-digits="2"
:max-fraction-digits="2"
/>
</td>
</tr>
I have to make this invoice table completely keyboard accessible without the need to use a mouse
Everything works fine until a select a product in the dropdown. Once I select a product, the focus should go to quantity input automatically. Now it goes back to the very first focusable element on the page, which is the nav menu.
I tried emit to trigger tab press programatically and #blur to focus the next item. Nothing seems to be working.
I'm using PrimeVue components. Checked the docs. Nothing helpful there as well.
Could anyone help me please? Thank you!
add a ref to the quantity input, then in your onProductChange method you can focus that input
<InputNumber
ref="qtyInput"
v-model="item.quantity"
class="input-text-right"
mode="decimal"
:min-fraction-digits="2"
:max-fraction-digits="2"
/>
this.$refs.qtyInput will be an array of all inputs with that matching ref created by the v-for but since you already pass in the index you can use that to select the correct one and focus it.
onProductChange(index, event) {
this.$refs.qtyInput[index].focus();
}
I have an aspx page with button group and label. I want to display selected button value in the paragraph tag.
Here is my controller code
$scope.GetID = function (uGuid) {
$scope.uid=uGuid;
alert($scope.uid);
}
And my aspx code is
<tr data-ng-repeat="outlet in Outlets">
<td><button data-ng-click="GetID(outlet.uGuid);">{{outlet.PartnerName}}
</button>
</td>
<p>{{uid}}</p>
The problem is that value display in the paragraph tag correctly. but it automaticaly ignored.Value Just display and reloaded.
Change controller.js
$scope.Outlets = JSON.parse(Outlets);
$scope.GetID = function (uGuid) {
$scope.Outlets = JSON.parse(Outlets);
$scope.uid = uGuid;
debugger;
alert($scope.uid);
}
The problem is that the $scope.Outlets is getting reloaded. so include
$scope.Outlets = JSON.parse(Outlets);
inside button click.
I'm creating ASP.NET applications with MVC 4 Technology, and I want to allow the end-user to enter line items onto an invoice. I want the user to have the ability to add as many line items as they wish to the invoice, and then when they are finished to be able to click the Save button on the form which would then write the invoice and all line item data to the database. Can somebody help guide me how to handle this?
This is the way I decided to do it after several other ideas failed me. It may sounds strange, but please bear with me. I used the MVC Index View as a basis.
Before the user even sees the Invoice, I add a new Invoice to the database so that I have an Invoice ID. I then display the Invoice Index View. But instead of the table showing #foreach (var item in Model) I changed it to #foreach (var item in Model.LineItems). Its blank now, but after I add some LineItsms I will be displaying a list of LineItems - which is exactly what an invoice is.
But we want to be able to add on our Invoice Index View as well. So at the top of the Index View, in the part where you can code, create a new LineItem and save its LineItem.invoiceID as the Model.ID. Then before you display the table of LineItems add a partial View - Create LineItem.
Now you have a list of Invoice Lines on a page where you can add new ones.
Here's some code from the Index View of LineItem:
#model MyAppName.Models.Invoice
#{
ViewBag.Title = "Index";
MyAppName.Models.LineItem line = new LineItem();
line.invoiceID = Model.ID;
}
<h2>Invoice</h2>
#Html.Partial("Create", line)
<table>
<tr>
<th>
#Html.DisplayName("Amount")
</th>
<th>
#Html.DisplayName("Description")
</th>
<th></th>
</tr>
#foreach (var item in Model.LineItems)
{
<tr>
<td>
#Html.DisplayFor(modelItem => item.Amount)
</td>
#Html.DisplayFor(modelItem => item.Description
</td>
<td>
#Html.ActionLink("Delete", "DeleteConfirmed", new { id = item.invoiceID })
</td>
</tr>
}
<tr>
<th>Total</th>
<th>R #Model.LineItems.Sum(amt => amt.Amount)</th>
<th></th>
<th></th>
</tr>
</table>
And here is what it looks like (except that mine was not an Invoice):
You want something like this. But it will be much more complex for your case. Use jquery to simplify your work.
$('#add_item').click(function() {
$('#invoice_listing tbody')
.append(
"<tr><td>" + $('#item').val() + "</td>" +
"<td>" + $('#amount').val() + "</td></tr>"
)
});
On every line item being added, the [Add Item] button will fire an event to do a ajax post of the line item data to the MVC controller. The controller will then do business logic and store the line item data into the database. Once the transaction is successful, the controller should return a "success" flag to the client browser. Use JSON for that will help. Your javascript should recognize the "success" flag, and add the item to the item listing.
Then finally, user will pressed on [Save] button, which complete the whole invoice data entry. You should then marked the invoice as successfully entered.
Try not to let user keep on adding the line item without being saved. They will be angry when saving failed after adding lines of item.
Have a popup where your users can search for the line items and add them. When selected capture the ItemId and use it to build a row, probably a tr or a div. So then you will have a tr or div for each line item that contains the Id of the line item and then one or two textboxes. Say a textbox for the quantity and another for the price. Then either do an ajax post where you iterate all the divs and put that info as a json data and post it to your controller method. Or format each div where your binding can collect them and be submitted when you do a postback - via your submit button. That should get you starting.
i have this form i need to build, but a user can have it laid out in different ways.
the layout of the form is kept in a xml file and will contain things like
<div class="holder">
<div>name</div>
<div>[Name]</div>
<div>Surname</div>
<div>[Surname]</div>
<div>Contact Numer</div>
<div>[ContactNumber]</div>
<div>Email</div>
<div>[Email]</div>
<div>[Submit]</div>
</div>
What i need to do is replace those [name]etc.. tags with asp.net controls and be able to read the content of those controls. i have hit a brick wall on this, can anybody help me please.
To create a new control at runtime, from code-behind:
Text Box
TextBox textBox = new TextBox
{
ID = "dynamicTextBox",
Text = "This is a new textbox"
};
[Container].Controls.Add(textBox);
You can do the sae for any other control.
I inherited some web shop project (ASP.NET 3.5, Webforms, Visual Studio 2008 PRO).
On one page I have MaintainScrollPositionOnPostback set to true.
When shopping cart (user control loaded in master page) is empty, then asp.net is not generating Javascript code required for scroll position. When I add some items to the cart, then everything works fine.
Can you give me any advice how to find part of the code which is responsible for this issue?
I don't have an access to the 3rd party profilers.
Are you utilizing UpdatePanels in that specific page?
If Yes, following article may give you some direction:
http://basgun.wordpress.com/2008/06/09/maintain-scroll-position-updatepanel-postback/
If No, this one may assist:
Javascript: Maintaining Page Scroll Position
Here is the code from that article:
// function saves scroll position
function fScroll(val)
{
var hidScroll = document.getElementById('hidScroll');
hidScroll.value = val.scrollTop;
}
// function moves scroll position to saved value
function fScrollMove(what)
{
var hidScroll = document.getElementById('hidScroll');
document.getElementById(what).scrollTop = hidScroll.value;
}
</script>
</head>
<body onload="fScrollMove('div_scroll');" onunload="document.forms(0).submit()";>
<form>
<input type="text" id="hidScroll" name="a">< /br>
<div id="div_scroll" onscroll="fScroll(this);"
style="overflow:auto;height:100px;width:100px;">
.. VERY LONG TEXT GOES HERE
</div>
</form>
</body>
</html>
Hope one of these links help!