This project is read-only.

Disabling MVC controls

Jul 9, 2012 at 11:50 PM

Hi, how easy is it to disable controls?  In particular the Grid and the DateTime control?

I tried setting the disabled attribute in the div that contains the grid and it disabled all the buttons etc, but I could still click on them and get them to work.

Also with the date time control I did a $('#EffectiveDate').attr('disabled','disabled') but this did nothing.  The textbox and calendar icon all still worked as if it wasn't disabled.



Jul 10, 2012 at 9:02 AM

It is quite easy ...if it is clear to you what disabling means according to the Html standard:

  1. ONLY input fields can be disabled, so you cant disable a whole geid by putting a disabled attribute in its root node. In particular also links cannot be disabled. As usual Internet Explorer is an exception and disable also links
  2. Disabled input fields have not a gray appearence as default...but you have to provide the appearence you like through adequate CSS. As usual Internet explore is an exception and do apply gray appearence.

Thus if you want to disable a whole grid you have:

  1. Disable all buttons and input fileds it contains. This is easy, say the root node containing the grid is 'myGrid' then $('#myGrid input').attr('disabled', 'disabled') do the job
  2. In order to give a gray appearence when you disable the whole grid  to the whole grid you can apply a class to the root node, say gridDisabled, then you write CSS rules of the type .gridDisabled * {...your style   !important}. Note the use of !important to override other rules

 PAY ATTENTION whe you re-enable the gride, you bight re-enable also input fileds or buttons that were already disbled before wyou disabled the if thi is possible you have to store this fileds in a jQUery object and disable them again after you enable the grid.

For the datetime you have to disable all parts (day month year, etc) it is composed of. The easiest way to do this is by giving to use the htmlAttributes of the control to provide a class say MyDateTime...then $('.MyDateTime').attr('disabled', 'disabled'). YOU CANNOT USE THE ID and write  $('#EffectiveDate').attr('disabled','disabled') because that is just the Mvc name that CANNOT be assigned to the parts of the DateTime...since it is composed of several parts and the id must be unique