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

G

Guest

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?
 
G

Guest

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.
 
F

Flinky Wisty Pomm

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;
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>
 
G

Guest

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_WorkPackage,
ctl00_maincontent_ProjectListGridView_ctl02_WorkPackage

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.
 
F

Flinky Wisty Pomm

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.getElementsByTagName(tagName);
var i = a.length;
while(i-->0)
{
if(re.test(a.id))
{
__elementRefs__[id] = a;
return a;
}
}
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");
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,769
Messages
2,569,579
Members
45,053
Latest member
BrodieSola

Latest Threads

Top