Disab;e selection of dropdownlist items (in a GridView)

Is there an example of using client side script to disable selection of some
items in a drop down that I could follow.

It would seem tricky as there are multiple drop downs in the GridView. I
would need to remember the last selected value for each drop down within the
grid. If the selected value is not permitted then reset to the remembered
value.

And then when a valid item is selected the remebered value for that drop
down would need to be updated.

Are there any links or examples that I could utilise?

If you want to use that level of trickery, then you don't really want to be
using things liske the DataGrid control. You should be using HTML controlls
and doing all the ADO.net data stuff manually. That way you will have more
control over the way that your HTML renders and you can write more apropriate
javascript.

What exactly are you trying to acheive maybe there is a better way
altogether, for example using the validation controls.

"Nick Zdunic" wrote:
[color=blue]
> Is there an example of using client side script to disable selection of some
> items in a drop down that I could follow.
>
> It would seem tricky as there are multiple drop downs in the GridView. I
> would need to remember the last selected value for each drop down within the
> grid. If the selected value is not permitted then reset to the remembered
> value.
>
> And then when a valid item is selected the remebered value for that drop
> down would need to be updated.
>
> Are there any links or examples that I could utilise?
>[/color]

Off the top of my head....

<code>
var curValues =[];
function init()
{
var theGridView = document.getElementById("GridViewClientSideId");
arrDropDowns = theGridView.getElementsByTagName("select");
for( var i=0; i< arrDropDowns.length; i++)
{
var dropdown = arrDropDowns[i];
curValues[dropdown.ID] = dropdown.selectedIndex;
dropdown.onchange = checkPermittedValue;
}
}

function checkPermittedValue()
{
var val = this.options[this.selectedIndex].value;
if( isPermittedValue(val) )
{
curValues[this.Id] = this.selectedIndex;
return true;
}
this.selectedIndex = curValues[this.Id];
return false;
}
</code>

Run init from the document.onload function and it'll get the current
selected indexes into the current values hashtable and assign an event
handler to the onchange event of each drop down. If your
isPermittedValue function returns true, the remembered value is
updated, otherwise the dropdown reverts to its original selected index.

<disclaimer text="Bob is on his first cup of coffee, code not
guaranteed to work; for entertainment purposes only" />

The copy/paste HTML below seems to work, at least... don't know what
this will do to autopostback, so beware.

<code>
<html>
<head>
<script>
function init()
{
document.getElementById("fred").onchange = CheckPermittedValue;
}

function CheckPermittedValue()
{
if(this.selectedIndex == 0)
return true;
else
this.selectedIndex = 0;
return false
}
</script>
</head>
<body onload="init()">
<select id="fred">
<option>barry</option>
<option>harry</option>
</select>
</body>
</html>
</code>

This looks like a good sample - thanks. I have some questions

The grid view is converted to a table and in my example has the id -
ctl00_maincontent_ProjectListGridView

The number of drop downs varies dependent on the number of rows in the
table. Example of Ids include:

ctl00_maincontent_ProjectListGridView_ctl02_WorkPa ckage,
ctl00_maincontent_ProjectListGridView_ctl02_WorkPa ckage

How can this code refer to this table? On Page Load will I be able to get
this ID?

From this I the code does seem to be able to get the IDs some the rest looks
Ok.

"Flinky Wisty Pomm" wrote:
[color=blue]
> Off the top of my head....
>
> <code>
> var curValues =[];
> function init()
> {
> var theGridView = document.getElementById("GridViewClientSideId");
> arrDropDowns = theGridView.getElementsByTagName("select");
> for( var i=0; i< arrDropDowns.length; i++)
> {
> var dropdown = arrDropDowns[i];
> curValues[dropdown.ID] = dropdown.selectedIndex;
> dropdown.onchange = checkPermittedValue;
> }
> }
>
> function checkPermittedValue()
> {
> var val = this.options[this.selectedIndex].value;
> if( isPermittedValue(val) )
> {
> curValues[this.Id] = this.selectedIndex;
> return true;
> }
> this.selectedIndex = curValues[this.Id];
> return false;
> }
> </code>
>
> Run init from the document.onload function and it'll get the current
> selected indexes into the current values hashtable and assign an event
> handler to the onchange event of each drop down. If your
> isPermittedValue function returns true, the remembered value is
> updated, otherwise the dropdown reverts to its original selected index.
>
> <disclaimer text="Bob is on his first cup of coffee, code not
> guaranteed to work; for entertainment purposes only" />
>
> The copy/paste HTML below seems to work, at least... don't know what
> this will do to autopostback, so beware.
>
> <code>
> <html>
> <head>
> <script>
> function init()
> {
> document.getElementById("fred").onchange = CheckPermittedValue;
> }
>
> function CheckPermittedValue()
> {
> if(this.selectedIndex == 0)
> return true;
> else
> this.selectedIndex = 0;
> return false
> }
> </script>
> </head>
> <body onload="init()">
> <select id="fred">
> <option>barry</option>
> <option>harry</option>
> </select>
> </body>
> </html>
> </code>
>
>[/color]

You can write the clientId of the GridView to the page during the page
load. As an old skool zealot, I keep all my JScript in a separate file,
so I use a helper function that looks like this:

Note, this will only work in browsers which support the HTML DOM - IE
5+, FireFox or Opera will all work happily. If you want this to work in
older browsers, you're on your own.

Also note, this is a fairly MacGuyver-esque kludge and it's probably
not hard to break it with unusual situations, but it's worked so far :)
I keep meaning to write a handler so I can generate JS files on the
fly, but deadlines have prevented me so far.
<code>
var __elementRefs__ = [];
function getSingleElement(id, tagName, refresh)
{
if(undefined === __elementRefs__[id] || refresh)
{
var re = eval("/"+id+"$/");
var a =
null==tagName?document.body.childNodes:document.ge tElementsByTagName(tagName);
var i = a.length;
while(i-->0)
{
if(re.test(a[i].id))
{
__elementRefs__[id] = a[i];
return a[i];
}
}
return __elementRefs__[id] = null;
}
else
return __elementRefs__[id];
}
</code>

Pass it an id and a tagname and it will return the first match in your
page. It caches previously selected elements to avoid repeating the
whole eval/regex match. The tagname is optional, but speeds the process
up.

So in your case, do:
var gridView = getSingleElement("ProjectListGridView", "table");

Disab;e selection of dropdownlist items (in a GridView)

re: Disab;e selection of dropdownlist items (in a GridView)

re: Disab;e selection of dropdownlist items (in a GridView)

re: Disab;e selection of dropdownlist items (in a GridView)

re: Disab;e selection of dropdownlist items (in a GridView)

/bytes/development

/bytes/it

/bytes/about