How to check multiple checkboxes in a asp:DataList without refreshing screen

[Jerry W]

I have a page that has a datalist that has an item template that has a checkbox. I have a select all and unselect all button that when clicked refreshes the screen and either checks or unchecks all the checkboxes. How can I just update the checkboxes without refreshing the entire page?

Thank you

[Frinavale]

In JavaScript, call the getElementsByTagName to retrieve all of the inputs in the element that contains the check boxes.

Loop through the elements retrieved and check/uncheck any "checkbox" type of elements.

I don't remember if a DataList has a containing element...so I'll say, if you put the DataList within a Panel you can call the getElementsByTagName on the panel-div.

For example (the following is not tested):

function checkAllCheckBoxes(){
  var checkAllCheckbox = document.getElementById('<%=checkAllCheckbox.ClientID%>');
  var container = document.getElmentById('<%=containerPanel.ClientID%>');
  var inputsInContainer = container.getElementsByTagName('input');
 
  for (i = 0; i < inputsInContainer .length; i++) {
    if (inputsInContainer[i].type == "checkbox") {
      inputsInContainer[i].checked = checkAllCheckbox.checked;
    }
  }
}

[Jerry W]

Frinavale,

Thank you for your reply. Here is what I have working

 <script type="text/javascript">
      function checkAllCheckBoxes() {
        var container = document.getElementById('<%=pnlCheck.ClientID%>');
        var inputsInContainer = container.getElementsByTagName('input');
 
        for (i = 0; i < inputsInContainer.length; i++) {
          if (inputsInContainer[i].type == "checkbox") {
            inputsInContainer[i].checked = false;
          }
        }
      }
    </script>
 

My issue is that I want to check and uncheck these checkboxes without the entire page refreshing. Should I be using a script manager and an ajax update panel to make that happen? Right now I just have a asp:panel and a asp:datalist both runat="server".

Thank you again for your help.

[Frinavale]

JavaScript is executed within the browser...it runs "client-side".
There are no server requests made.

If you are experiencing full page refreshes using the code you posted, then you have something set to autopostback that shouldn't be set.

If you want to do the selecting/unselecting in server code, then place the DataList within an UpdatePanel. Anything in the UpdatePanel will cause asynchronous post-backs to occur. When the request comes back from the server, only the elements within the UpdatePanel will be updated.



-Frinny

[Jerry W]

Frinavale,

I want to do the checking and unchecking on the client's browser.
There are other controls within my page that have autopostback set to true but not the control with the checkboxes. I have a datalist and two image buttons that all have runat="server". I have since created two input buttons so they are local. If i'm doing this on the client do I need to do any ajax or should my javascript just change the checkboxes? If I wrap my datalist in an update panel everything works fine but when I remove the updatepanel I see it reloading the page.

Thanks agian for your help.

[Frinavale]

So you need to generate the JavaScript in your server side code and then register it with your ScriptManager.

-Frinny