textbox in gridview needs rich text editing; superscript, greaterthanequalto etc - asp.net

I've got an ASP.NET page with VB.NET backend. It has a gridview, and users need to be able to edit the values in it.
It's dollar amount ranges that they are entering, and they need to be able to add superscript numbers at the end on occasion. The standard asp.net textbox does not support these features, nor is there a way for users to enter the greater than or equal to symbols.
I'm looking for a straight forward solution, we had been using the FCKEditor, but this was incredibly clunky, and I was trying to find something more like the inline editing of ckEditor for the duration.
The newer version of CKEditor seems to be built for textarea, and not asp:textbox, which is what the gridview uses for the edit template field. Anyone know any quick solutions for getting this functionality into a gridview edit mode textbox?
Additionally - I would settle for a back end conversion, where the user could enter "=<" and I could change it the appropriate symbol before storing it in the db... however, using
HTTPUtility.HTMLEncode(strValue.Replace("=<", "≤"))
just gives me "≤$500,000.00" which is worse...

here's what I did to solve this: I had the users enter "<=" or whatever for the ranges, and add a "^" prior to any superscript. Then I replaced the 2 characters with the Unicode values, and did an Decode on the string. For the superscript, I replaced the carrot with the "sup" tag, and added the closing tag at the end of the string. it's a bit of a hack, but the users can enter what they need, and the values get stored properly, and displayed correctly afterwords.

Related

I need to display a pop up table on clicking a button in vb.net. How do i do this without the gridviews just on plain button click?

I need a table to pop up or flash on the users screen when a button is clicked
It is a reference table, users can go back and check the codes while filling a form. This is to be done vb.net. Please help me i need the simplest solution possible
in my opinion:
1) If you don't insist on formatting and you would like to only display table data, you can simply write the data into string, which you will display in a MsgBox dialog. You'll probably will have to take care about partial string lenghts in columns (trim, or complete with spaces to a specific length) and then it will look OK. Bellow is an example of such data (only a test dialog) without any trimming/completeng:
2) For a serious table, you'd have to either use datagrdiveiw (or such) in a separate form, or draw your table using GDI, which would be a rather complicated and eccentric method.

Searchable TextBox?

I'd like to have two textboxes, one that is large and read-only, with content from the server, and another that is one line and that searches the first text box. The word the user puts in TextBox2 would be highlighted/bolded/whatever in TextBox1.
Example:
TextBox1:
This is an example of the possible contents of my read-only text box. It would go on for a bunch of lines...
TextBox2:
box
Is there any way I could do this? I've thought about using the AutoComplete TextBox from the AjaxControlToolkit and setting the Service Path to wherever I'm getting the contents of TextBox1. But that's not doing exactly what I want, because I'd like to interrupt the suggestions and use them to search TextBox1. Any ideas? I'm pretty new to asp.net and just fishing around for somewhere to get started on this one.
I would recommend a JQuery plugin like this. I don't think it will work with a textbox, but you could try. Do you have to use a textbox for the first one? Could you use a DIV instead, if it doesn't work?
An example of usage:
$('target').highlight('box');

Auto Complete Extender for multiline textbox - Facebook style

I have in my application a larger textbox and offer user the possibility to enter text on several rows like this:
first piece of text
second piece of text
and so on...
Each row is a distinct piece of data that has a significance. The thing is I would like to use ajax auto complete extender functionality after the user types a certain character on a row, such as #, and filter the records in the database according to the first letter the user typed after #, moment when the auto complete suggestion list would appear. For example, third piece of text #Action1, means that after the user typed A he would be prompted with a list of values to choose from.
There are several items of concern for me: first, it is possible to use autocomplete extender only for part of the text in the textbox, and second does it work like this for multiple rows (i.e. one time - in each line behaviour)? Regarding its position, I guess I have no other choice than at the bottom of the textbox it refers to, despite I would have liked it to appear below the # symbol.
Thank you very much.
Update: I found something similar to what I am looking for here: Twitter-style autocomplete in textarea, but the author only explained briefly his solution. Any help much appreciated, thx!
Each row is a distinct piece of data that has a significance.
Why are you using a textarea then, and not multiple <input> fields?
Sounds to me like your error in UI design lies right there already, so the rest of my answer is rather theoretical; I probably won’t go into more details as the sensible fix for your problem is the one above.
first, it is possible to use autocomplete extender only for part of the text in the textbox,
Why shouldn’t it be? Cursor position in a textarea for example is readable (although it requires some working around cross-browser issues).
and second does it work like this for multiple rows (i.e. one time - in each line behaviour)?
So long as the line breaks are “hard” ones (made by the user themselves, using enter/return), splitting the actual textarea content by "\n" to have each row as a single value is no problem.
Regarding its position, I guess I have no other choice than at the bottom of the textbox it refers to, despite I would have liked it to appear below the # symbol.
You could try to roughly measure the #’s position, by line and col number it is on, and match that to the character width and line height, when using a monospace font. For other fonts, some more “magic” might be required to measure the actual width of the previous text before the # character.
I have created a Meteor package for this, which allows both free text and multiple autocomplete sources. Meteor's data model allows for fast multi-rule searching with custom rendered lists. If you're not using Meteor for your web app, (I believe) you unfortunately won't find anything this awesome for autocompletion.
https://github.com/mizzao/meteor-autocomplete
See the link for pictures of how it works. Fork, pull, and improve!

Flex DataGrid sequencial inserting

I come from the Delphi school. I was really used and pleased with Delphi grids with the plus features of InfoPower. Not just me, my users loves all features that include grids. Some motives for that are:
With grids they have the ability to insert detail information using only the keyboard. Input, Tab, Input, Tab, Input Tab (automatically insert new row), input, tab, etc.
They were able to simply click in a row and edit it´s data.
They could navigate between records using only arrow keys.
In my flex apps I´ve being working arround this quite often, sometimes using a popup to insert data, sometimes using repeater instead of grid. But now I really really need some intuitive, fast way for my users to insert this data.
I am trying to use DataGrid (or AdvancedDataGrid) with inline editors and I am living a real hell to do that. For the last 3 days I am struggling, tweaking and workarrounding in order to try to mimic the features that I had with Delphi.
Main problems are:
DateField simply don´t work as an inline editor. It gets focus but never looses, only with pressing ESC, wich makes me loose the inputed data.
AdvancedAutoComplete: I have a component descendant from AdvancedAutoComplete with a custom browser. The custom browser is a popup, when I try to PopupManager.remove flex raises an exception of a null pointer inside it´s focus managing engines.
I couldn´t get to insert a new line focused in it´s first column when TABing in the last column of last row.
Having all these problems and not getting substantial material to solve them makes me think the (now obvious) fact that it is just not the way grids are intended to work in flex. My question is: what are the patterns used in flex applications to make sequencial, intuitive, fast, keyboard only insertions in a detail?
To answer your question bluntly, there are no specific established patterns to make editing or inserting data in the DataGrid fast and easy. Not being able to Tab between fields is one of the things I really wish Adobe had added to the DataGrid by default.
In order to get the functionality you want, you'll have to do some custom coding and extend/override the DataGrid's default functionality. Switch On The Code has an example up on tabbing between fields, but you would have to build upon their sample a bit further to include features like adding a new row when pressing tab in the last field of the last row in the DataGrid.
You may also want to consider Flexicious. Based on the Flexicious Ultimate demo, it looks like they have the functionality you're looking for (and then some!).

ASP.NET Hide Length of Password During Entry

I have to hide the length of the password being entered during login of my asp.net web application. I know the asp.net textbox server control has the textmode of password but I can't even show the that. Any suggestions on how to hide the user input?
<input type="password" name="password" style="color:White;"/>
seems close to your requirement but some browsers highlight input fields with yellow when you are in them. Setting the font size to 1px is another trick you could try.
But easiest might be to instead use z-index to put an image or colored DIV on top of the password field. Maybe an animated gif with a line of * characters that grows and shrinks randomly would be best - would totally confuse onlookers! :-)
How the user even knows the field is selected is another issue you'll have, maybe some extra javascript to detect and tell them that.
If you must (which I agree with #Ando that you shouldn't due to UI issues), I would use javascript (onkeydown) to copy each character to a hidden input field, and remove the key entered in the box.
This would allow you to retrieve the password on postback, while keeping the input field empty for the user.
Of course, if the user presses arrow keys, delete or backspace, you would have to decide how to handle that.
Hiding the length of the input seems like a really really bad UI idea from the users perspective, and you should argue that the specification should be changed.
While, I also agree with everyone else that is a bad idea I understand that some times you have to do things you disagree with.
I would have suggested what Mikael did but he already did it. :)
To recap:
I would use javascript (onkeydown) to
copy each character to a hidden input
field, and remove the key entered in
the box.
This would allow you to retrieve the
password on postback, while keeping
the input field empty for the user.
Of course, if the user presses arrow
keys, delete or backspace, you would
have to decide how to handle that.
You've said:
My issue with using Javascript and
storing in a hidden field is the user
viewing the source of the page and
seeing it.
I'm pretty sure that viewing the source should only show you what was originally downloaded not what the user has entered. However, there are tools (i.e. firefox addons) that can do this. You could store the value in a javascript varible and only put the password in the hidden field when it is posted or use some sore of ajax request to authenticate. However, With the right addons someone could find this as well.
If the issue is someone looking over the shoulder of the person logging in then these concerns (i.e. viewing source) won't matter unless the person who is logging in decides to view the source and show the person in which case it would just be easier for him to tell the other person his password.
Agreeing that its not the best idea...
1) When you start typing, on each key press, restrict a specific character from being entred as part of a password (eg pipe) then when the user types, add a ramdom number of pipes (eg between 0 and 4 pipes) then just remove these server-side?
2) Add these to a hidden field...if the user does a View_Source, they will only see the original value of the field, ie will be empty...just remember to clear the value if you need to depending on how its rendered (asp.net webform hidden field control) etc
3) Have 2 password boxes that need 2 passwords (just as bad an idea)
I confirmed the requirement with a security officer and apparently I miss read the requirement. However, I have seen Windows based applicatiosn perform this. The cursor moves on each key stroke but no star, asterik or bar is used. Thanks to everyone for theie suggestions and comments.

Resources