We're using the Html.DropDownList and other controls in various MVC3 user data entry forms.
When a user is editing a records data values and they haven't specified values for a DropDownList then the optionLabel text of 'Select One' is displayed in the input field.
We'd like to make it more obvious to the end-user when they're viewing a screen of data that 'Select One' isn't a data value by showing it in a different font colour (blue ?) and in italics.
Has anyone any ideas how to simply achieve this ?
If the DropDownList is required... just mark that field as requiered using the somehow standard red "(*)". If the user submit the form, the client side validation will display the message telling the user that this field is required.
The level of customization of the <select> HTML element is pretty limited. IIRC you could change the color but I am not sure that you can show it in italics:
#Html.DropDownListFor(
x => x.Foo,
Model.Foos,
"-- select a foo --",
new { #class = "foo" }
)
and then in your CSS file define the .foo rule:
.foo option:first-child {
color: red;
}
If you want more customizations of the look and feel of the standard <select> element you might take a look at some of the available jQuery plugins.
Related
I have so many kendo MVC UI textboxes and numerictextbox maximum character property in easy way ,
what are all the ways present to solve this
CODE:
there are so many text and numeric boxes like this
#Html.Kendo().TextBoxFor(model => model.CompanyTypeName).HtmlAttributes(new { style = "width:50px", #maxlength = "5" }).Name("CompanyTypeName")
You could look into using Editor Templates. Then you can make a single change to, for example, your String.cshtml file and all your EditorFor lines for string properties will utilize the same code.
Your code example above would change to:
#Html.Kendo().EditorFor(model => model.CompanyTypeName)
Then, you can add a String.cshtml file to your Shared/EditorTemplates folder that looks something like:
#model object
#Html.Kendo().TextBoxFor(model => model).HtmlAttributes(new { style = "width:50px", #maxlength = "5" })
I'm trying to figure out if this is possible in Oracle APEX interactive grids. I'm wanting to insert a string of text like "Y" into a cell simply by clicking the cell. I'm trying to avoid using a checkbox.
Blockquote
Please follow the below steps to achieve the desired result
Paste the below JavaScript code in Function and Global Variable Decleration:
function fSwitch(ptext) {
if(ptext == 'Y') {
return ("");
}
else {
return 'Y'
}
}
Make the Interactive Grid Editable
Change Column Type of the column that you want to insert a string to "Text Field".
Paste the below code in the Advanced -> Custom Attributes of the column that you want to insert a string
onclick="javascript:this.value=fSwitch(this.value)"; onkeypress="return false;"
How this works:
On focus of the column cell,
If the cell is empty 'Y' will be entered,
If the cell contains 'Y' then the cell value becomes NULL;
There's a built-in "Switch" type for interactive grids which can be used to create yes/no columns. Would that work?
For an example, go to the App Gallery and install the Sample Interactive Grids app. Run it and navigate to Editing > Other Column Types, then look at the "On Leave" column.
I'm trying to set the background color of column headers in an Interactive Grid form. There are a couple of things that I've tried:
Assigned a static id to a column and made an inline css selector that targets that id - the outcome is that data cells only inherit those attributes while editing; header remains unaffected
Assigned a class to a column and made an inline css selector that targets that class - the outcome is that all data rows inherit those attributes; header still remains unaffected
I tried using the JavaScript Code option under Advanced that can use the configuration object and modify column behavior and appearance without much success. I managed to change column header text but nothing else. I suspect there is some member of that configuration object that affects header background color but I can't seem to find it.
So the question is:
How to customize Interactive Grid column header (namely, set its background color) using configuration object?
I suppose this might be considered a separate question, but if that turns out to be impossible, what would be the best alternative?
Re an alternative, if the change is static you can do it using page-level CSS. Each heading has a data-idx attribute whose value is a number unique within the grid. So if your IG region has the static ID "myRegion" then you can add CSS like the following to target a specific header:
#myRegion_ig th[data-idx="2"] {
background-color: #dff;
}
Or to make all IG headers on the page the same:
.a-GV-header {
background-color: #dff;
}
The first approach is problematic. It makes the change based on the position, not the particular column. If, for example, the first two columns in your grid are "First Name" & "Last Name", in that order. "First Name" would be data-idx = 1; "Last Name" would be data-idx = 2. If you assign the color blue to data-idx = 1 and green to data-idx = 2, then "First Name" will blue and "Last Name" will be green. However, if you swap then position of the two columns so that the order in your IG is "Last Name", "First Name", then "Last Name" will now be blue and "First Name" will be green.
The second approach works if you want to change the color of all the headers to only one color.
The excellent dropdown jQuery UI Multiselect widget that supports styling via jQuery UI Themeroller still doesn't have support for including images within the drop down rows.
I didn't see any answers to this problem within Stackoverflow yet it seems to be asked regularly in various areas of the internet, so I am giving the answer to this question below..
(ALSO See my FIDDLE Example to see this in action,)
The following is based on an initial idea by 'pdlove' for introducing the use of images within this excellent UI Multiselect for jQuery.
Adding Image support for line items in check box text area is achieved by setting out the selector option rows html like this:
<option value="somevalue" image="yourimage.jpg" class="multSelktrImg">
normal visible text
</option>
I would also add a class control to your style sheet css file to set the image size being rendered in the option line items of the drop down, along with a couple of position settings for the image, label and span text.
In this example I use the class name 'multSelktrImg', so within the css file it would look something like this:
.multSelktrImg span{position: relative;top: 10px;vertical-align: middle;
display: inline-flex;}
.multSelktrImg input {vertical-align: -2px;}
.multSelktrImg img {position: relative;height: 30px;margin: 2px 6px;top: -10px;}
Now for the change in the src/jquery.multiselect.js file
Search for the following matching code around line 130 (depending on what version id of the script you are using):
// build items
el.find('option').each(function( i ){
var $this = $(this),
parent = this.parentNode,
title = this.innerHTML,
description = this.title,
....
ADD the following line above "title = this.innerHTML,":
image = this.getAttribute("image");
so that it looks like this:
// build items
el.find('option').each(function( i ){
var $this = $(this),
parent = this.parentNode,
image = this.getAttribute("image");
title = this.innerHTML,
description = this.title,
Now Search for the following matching code around line 180:
// add the title and close everything off
html += ' /><span>' + title + '</span></label></li>';
....
Replace the code line with the following to allow for rendering of your images:
// add the title and close everything off
html += ' /><span>';
if (image != null) {
html += '<img src="'+image+'" class="multSelktrImg">';
}
html += title + '</span></label></li>';
save the new version of the script src/jquery.multiselect.js file and now the images will appear in the multiselect drop down. Use the 'multSelktrImg' class value to control the size of the image displayed by altering the pixel size for the class in your css file.
In the FIDDLE version, I have altered the minimized version of the jQuery script, and created an initialisation of the Select object.
Is it possible to render a Grid with one row selected as default (set the right page number and highlight the row)?
For highlighting, try using the "OnRowDataBound" event
.ClientEvents(events => events.OnRowDataBound("onRowDataBound"))
with something like
function onRowDataBound(e) {
var myId = $('#MyId').val();
if (e.dataItem.Id == myId)
e.row.className = 't-state-selected';
}
I'm still trying to figure out how to set the correct initial page number. This bloke might be on to something.
Use the Grid RowAction method, eg:
.RowAction(row => row.Selected = row.DataItem.CustomerCode.Equals(ViewBag.ID))
It is perhaps possible if you iterate in the grid source, locate the row which has to be selected in it, than use a formula to detect on which page will be displayed, and finally change the page index on initial load and select it.