Ui grid eliminates multiple spaces in string - angular-ui-grid

I have used angular ui-grid in my application and my page contains simple text box and validate button. usually we add some strings in the text box and clicks on validate button and those will get validated with some external service and display data in ui-grid
My logic is working like a champ but I see there is something which causes some confusion to users. lets say if I add something like "Event 87654" in my text box and click on validate button, it gets validated successfully from my service and display just as "Event 87654" in data grid. so thing is why ui grid eliminates multiple intermediate spaces in the given string automatically?? is it possible to avoid this elimination?? can anyone suggest me in the regard.

here is the solution.
UI grid eliminates multiple spaces and keep only one because white spaces are trimmed out by ui-grid-cell-contents css
So just we need to have override css like below.
.ui-grid-cell-contents {
white-space: pre !important; /*nowrap by default*/
}

Related

Embedding other widgets in a GTK+ text entry

I would like to embed another widget in one end of a GTK+ 3 text entry box, a bit like many browsers do with search or protocol security "chips":
I know I can set an icon on a text entry with
entry = Gtk.Entry()
entry.set_icon_from_icon_name(Gtk.EntryIconPosition.PRIMARY, icon_name)
Even if I pass my own GdkPixbuf to set_icon_from_pixbuf this still limits me to icon sizes, when I want some arbitrary size (at least horizontally) depending on the "chip" content.
I also tried to "shunt" the text over with set_margin_left, but this moved the left edge of the whole entry box over, rather than the text within the box.
What would be an effective way to embed some other GTK+ widget (hopefully of any complexity, so I can make the chip more interactive) within a text entry?
GtkEntry is not a container, so it cannot have child widgets.
The appropriate way to implement what you see in the screenshot is to use a separate container and style it appropriately.
Have you considered putting the entry inside a frame, and restyling stuff to make it look like it was inside an entry? Then you could use standard containers to put whatever widgets next to the text entry spaces that you wanted.
The downside is that clicking your "icon" doesn't focus the entry automatically, but it makes that action totally configurable.

In MVC, how can I tell if page is printing

I'm writing an MVC application. The result page shows a table with 10 columns. However, when the user hits the print button in the browser or hits Ctrl-P, I want two of the columns to disappear (they're just hyperlinks). Is there an easy way to know this is happening so I can hide or remove the display of those columns.
The best way is to use CSS for this. You can specify some styles that only apply when someone is printing using #media print.
One thing I tend to do is add the following style to my style sheet
#media print {
.dont-print {
display: none !important;
}
}
Then, anything you don't want to show up when the user prints the page, you give a class "dont-print".
Use a CSS file that defines classes that are applied during print.
Media Types are your friend here: http://www.w3schools.com/css/css_mediatypes.asp

Dynamically change certain text in textarea with drop-down selection

I have a text area that has names within the default value. For example the textarea reads..
(dynamic registrant name) just registered to become
a donor in (dynamic from pull-down above)
honor. This text is editable
So in the same form I have an input that asks the user for their name and a select box where they can choose among a selections of names. I am trying to change the names within the text area based on the values they enter in the input and drop-down fields above the text area. Can someone help with this? I am completely stuck. I have read through some of the forums here and it looks like a lot of the solutions are to use ajax. I have zero experience in ajax and would like to find a solution that does not use that...is it possible? Or could someone help with a solution?
I don't think textarea is what you want exactly. What if the user takes off the (dynamic from pull-down above) part? How would you know where to put the text at? Even if you somehow could, I suggest you make regular text input elements for contents that the user can change and put the other dynamically changing text as uneditable html text elements (or however you want to format them).

different colors on radio buttons when they are active in Jquery mobile

I have three radio buttons which have the same theme in jquery. If I select one of them, the color of the button will change to the color specified in my .ui-btn-active class in the css. My radio buttons are named Can meet, not sure and Decline. I want my Decline radio button to have a different color than the two others when it is selected (the color red).
I'm using Jquery mobile and have customized the css for which colors I want to have on the different themes and I have changed the .ui-btn-active to .ui-btn-active-a and .ui-btn-active-b and made them with different values. I have tried to switch between the two ui-btn-active classes without no luck, and I have tried the addClass(..) and removeClass(..) without luck. I made a method in my jquery-mobile.js which look like this:
$.mobile.changeAction = function( activeBtn){
$.mobile.activeBtnClass = activeBtn;
}
where my activeBtn parameter will be a string to choose which activeBtnClass I want to have. I think the problem is that I have problems refreshing the activeBtnClass after overriding it, I have tried some refreshing methodes without no luck.
As long as the radio buttons have different colors when active I will be very thankful.
Following styles should do the trick:
.ui-radio:nth-child(1) .ui-icon-radio-on.ui-icon{
background-color:green;
}
.ui-radio:nth-child(2) .ui-icon-radio-on.ui-icon{
background-color:grey;
}
.ui-radio:nth-child(3) .ui-icon-radio-on.ui-icon{
background-color:red;
}​
Sample jsfiddle.
To style Horizontally stacked select options:
.ui-radio:nth-child(1) .ui-radio-on span.ui-btn-inner{
background-color:green;
}
.ui-radio:nth-child(2) .ui-radio-on span.ui-btn-inner{
background-color:grey;
}
.ui-radio:nth-child(3) .ui-radio-on span.ui-btn-inner{
background-color:red;
}​
Sample jsfiddle.
Why not just create custom themes for all of the states that you might want? You can have multiple custom themes, and only use them when you'd like. I have 7 themes in my CSS, and this way you can always incorporate them later if you'd like without having to do so much custom coding.
You can just apply the theme with the data-theme="f" (or other letter swatch) element attribute.
Here's jQuery ThemeRoller 1.1.1 http://jquerymobile.com/themeroller/index.php. If you're just making small changes to the theme, such as an active state, just copy the theme, and make the changes and save as a new swatch. You can go from A-Z :)

read-only Textbox

The form window(chat window) that i am creating for a lan messenger is similar to the one in google talk with two textboxes. What i need to do is to transfer characters typed in the lower textbox(textbox2) to the upper textbox(textbox1 which is read-only) when i click the submit button without showing that textbox1 is read-only because the characters are appearing in grey.please help with code if possible.
Use a label for this instead of a textbox. If the only thing it is doing is display the characters and not a direct edit, you won't lose any functionality and the text would not be greyed out...
If you're going to use a Texbox, set it to Locked. That shouldn't gray the characters out. Otherwise in KeyDown/KeyUp events, set the e.Handled property to true (which will tell the box that you want to handle the input yourself and don't want the message to filter down).
That oughta do it for you.

Resources