Avatar billede anders_cp Nybegynder
10. juni 2008 - 14:11 Der er 11 kommentarer og
1 løsning

Flere checkboxe

Hej
Inspireret af
http://www.devx.com/tips/Tip/20238
har jeg forsøgt at kunne vælge samtlige checkboxe ved tryk på den øverste checkbox. Desværre virker min kode ikke:

.aspx
-------
                            <asp:DataGrid ID="DataGridXeroxOrders" runat="server" CssClass="DataGrid" BorderWidth="1px"
                                AutoGenerateColumns="False">
                                <SelectedItemStyle VerticalAlign="Top"></SelectedItemStyle>
                                <AlternatingItemStyle VerticalAlign="Top"></AlternatingItemStyle>
                                <ItemStyle VerticalAlign="Top"></ItemStyle>
                                <HeaderStyle CssClass="DataGridHeader"></HeaderStyle>
                                <Columns>
                                    <asp:TemplateColumn>
                                        <ItemStyle HorizontalAlign="Center" Width="5px"></ItemStyle>
                                        <HeaderTemplate>
                                            <input id="chkAllItems" type="checkbox" onclick="CheckAllDataGridCheckBoxes('_ctl0', document.forms[0].chkAllItems.checked)" />
                                        </HeaderTemplate>
                                    </asp:TemplateColumn>
                                    <asp:BoundColumn DataField="XeroxOrderNumber" HeaderText="Xerox ordrenr."></asp:BoundColumn>
                                    <asp:BoundColumn DataField="SerialNumber" HeaderText="Serienummer"></asp:BoundColumn>
                                    <asp:BoundColumn DataField="ProductName" HeaderText="Produkt"></asp:BoundColumn>
                                    <asp:BoundColumn DataField="Location" HeaderText="Lokation"></asp:BoundColumn>
                                    <asp:BoundColumn HeaderText="Ydelser"></asp:BoundColumn>
                                </Columns>
                            </asp:DataGrid>

og javascriptet:
function CheckAllDataGridCheckBoxes(aspCheckBoxID, checkVal) {
    regEx = new RegExp(':' + aspCheckBoxID + '$')  //generated control name starts with a colon

    for(i = 0; i < document.forms[0].elements.length; i++) {
        element = document.forms[0].elements[i]
        if (element.type == 'checkbox') {
            if (regEx.test(element.name)) {
                element.checked = checkVal
            }
        }
    }
}

Kan nogle hjælpe mig?
Avatar billede jernespand Nybegynder
10. juni 2008 - 15:35 #1
Jeg tror dette er det du søger:
    "Selecting multiple checkboxes in a DataGrid control"
    http://www.codeproject.com/KB/webforms/datagridCheckboxes.aspx
Avatar billede anders_cp Nybegynder
12. juni 2008 - 21:15 #2
hmm. Han forklarer ikke særligt godt og jeg ville nu helst have mit javascript til at virke, så samtlige checkboxe vil kunne virke..
Avatar billede mikalj Nybegynder
13. juni 2008 - 10:04 #3
Har selv ofte brugt noget i stil med følgende med stor succes.

<input id="chkAllItems" type="checkbox" onclick="checkAll(!this.checked, 'checkboxgroup1')" />


function getElementsByClass(searchClass,node,tag)
{
  var classElements = new Array();
  if ( node == null )
    node = document;
  if ( tag == null )
    tag = '*';
  var els = node.getElementsByTagName(tag);
  var elsLen = els.length;
  var p = "(^|\\s)"+searchClass+"(\\s|$)";
  var pattern = new RegExp(p);
  for (i = 0, j = 0; i < elsLen; i++)
  {
    var ele = els[i];
    if ( pattern.test(ele.className) )
    {
      classElements[j] = els[i];
      j++;
    }
  }
  return classElements;
}

function checkAll(checkvalue, searchclass)
{
  var checkboxes = getElementsByClass(searchclass);
  for(var i = 0; i < checkboxes.length; i++)
  {
    checkboxes.checked = checkvalue;
  }
}

Jeg kan ikke tage æren for getElementsByClass, det er en javascript funktion jeg selv har fundet på nettet.
Men den grundliggende ide er at bruge class attributen til at gruppere de checkboxes som skal ændres.

Der er dog en ting du skal være opmærksom på
bruger du <input> tags eller HtmlInputCheckBox.NET objekt virker overstående kode fint
men hvis du bruger CheckBox .NET objekt putter den input tagget ind i et span tag, og giver span tagget den cssclass du angiver. dvs. at GetElementsByClass vil returnerer et array af spans og ikke et array af inputs. Det gør ikke teknikken ubrugelig, men der skal bare tages højde for det.
Avatar billede anders_cp Nybegynder
13. juni 2008 - 10:32 #4
Virker stadig ikke :-(
Jeg har kopieret dine javascript-funktioner og min aspx-fil ser således ud som oprindeligt beskrevet med :

<Columns>
    <asp:TemplateColumn>
    <ItemStyle HorizontalAlign="Center" Width="5px"></ItemStyle>
    <HeaderTemplate>
    <input id="chkAllItems" type="checkbox" onclick="checkAll(!this.checked, 'checkboxgroup1'" />
    </HeaderTemplate>
    </asp:TemplateColumn>
    <asp:BoundColumn DataField="XeroxOrderNumber" HeaderText="Xerox ordrenr."></asp:BoundColumn>
    <asp:BoundColumn DataField="SerialNumber" HeaderText="Serienummer"></asp:BoundColumn>
    <asp:BoundColumn DataField="ProductName" HeaderText="Produkt"></asp:BoundColumn>
    <asp:BoundColumn DataField="Location" HeaderText="Lokation"></asp:BoundColumn>
    <asp:BoundColumn HeaderText="Ydelser"></asp:BoundColumn>
</Columns>

Hvad gør jeg galt?
Avatar billede mikalj Nybegynder
13. juni 2008 - 15:49 #5
nu var det mere ment som noget du selv kunne tilpasse, ikke bare copy/paste :)

du mangler en parentes-slut i din onclick event, "checkAll(!this.checked, 'checkboxgroup1')"
desuden kan jeg slet ikke se nogle andre checkboxe i dit datagrid, kune en række BoundColumns.

Pricippet bag den metode som jeg kom med er at alle dine checkboxe skal have den samme class attribute, <input type='checkbox' class='checkboxgroup1'>, derfor skal du også være i stand til at sætte denne på dine checkboxes.
Så kan du nemlig søge efter alle elementer med en angiven klasse (i mit eksempel 'checkboxgroup1') og krydse dem af.
Avatar billede anders_cp Nybegynder
23. juni 2008 - 19:54 #6
Undskyld den sene svartid, men jeg har stadig ikke fundet ud af det. Måske har det noget at gøre med at hjemmesiden opr. er asp .net 1.1 og lagt over på en 2.0. Ihvertfald bruger jeg (her) DataGrid og ikke DataView (ved ikke om det har noget at sige, ville bare nævne det[Har prøvet at lave DataGrid om til DataView, men det blev noget rod.]).

Jeg er ikke helt med på hvilken class jeg skal sætte ind i din funktion. Hvor finder jeg navnet?

Du skriver at du ikke kan se andre checkboxe i mit datagrid. Datagridet bliver bindet fra et dataview i cs-filen:
DataView dataView = xeroxOrders.GetXeroxOrders(orderID).Tables[0].DefaultView;
            DataGridXeroxOrders.DataSource = dataView;
            DataGridXeroxOrders.DataBind();
            dataView = null;

så der fremkommer x-antal checkboxe til hver række, ligesom her:
http://images.google.dk/imgres?imgurl=http://nishantpant.files.wordpress.com/2006/12/checkbox.jpg&imgrefurl=http://nishantpant.wordpress.com/2006/11/02/check-all-checkbox-column-in-datagrid-through-javascript/&h=246&w=226&sz=19&hl=da&start=15&um=1&tbnid=ByKOhoIEaqRgBM:&tbnh=110&tbnw=101&prev=/images%3Fq%3Dcheckbox%26um%3D1%26hl%3Dda%26client%3Dfirefox-a%26rls%3Dorg.mozilla:da:official%26sa%3DG
Avatar billede anders_cp Nybegynder
23. juni 2008 - 19:57 #7
inputid'et for checkboksene kommer til at hedde:
ctl00_ContentPlaceHolder1_DataGridXeroxOrders_ctl02_ctl00
ctl00_ContentPlaceHolder1_DataGridXeroxOrders_ctl03_ctl00
............................................._ctl04_ctl00
osv.
Avatar billede mikalj Nybegynder
23. juni 2008 - 22:48 #8
Ok, kan give et eksempel med et gridview, har ikke rigtig nogen erfaring med hverken datagrids eller dataviews. Jeg har ikke testet om dette virker 100%, men det er den teknik jeg selv har brugt.

<script type="text/javascript">
function getElementsByClass(searchClass,node,tag)
{
  var classElements = new Array();
  if ( node == null )
    node = document;
  if ( tag == null )
    tag = '*';
  var els = node.getElementsByTagName(tag);
  var elsLen = els.length;
  var p = "(^|\\s)"+searchClass+"(\\s|$)";
  var pattern = new RegExp(p);
  for (i = 0, j = 0; i < elsLen; i++)
  {
    var ele = els[i];
    if ( pattern.test(ele.className) )
    {
      classElements[j] = els[i];
      j++;
    }
  }
  return classElements;
}

function checkAll(checkvalue, searchclass)
{
  var checkboxes = getElementsByClass(searchclass);
  for(var i = 0; i < checkboxes.length; i++)
  {
    checkboxes.firstChild.checked = checkvalue;
  }
}
</script>
   
   
<asp:GridView ID="GridView1" runat="server">
  <Columns>
    <asp:TemplateField>
      <HeaderTemplate>
        <asp:CheckBox ID="CheckBox1" runat="server" onclick="checkAll(this.checked, 'produktlistchk')" />
      </HeaderTemplate>
      <ItemTemplate>
        <asp:CheckBox ID="CheckBox2" runat="server" CssClass="produktlistchk" />
      </ItemTemplate>
    </asp:TemplateField>
       
    <asp:TemplateField HeaderText="Xerox ordrenr.">
      <ItemTemplate>
        <asp:Label ID="Label1" runat="server" Text='<%# Eval("XeroxOrderNumber") %>'></asp:Label>
      </ItemTemplate>
    </asp:TemplateField>
       
    <asp:BoundField DataField="SerialNumber" HeaderText="Serienummer" />
    <asp:BoundField DataField="ProductName" HeaderText="Produkt" />
    <asp:BoundField DataField="Location" HeaderText="Lokation" />
    <asp:BoundField DataField="SerialNumber" HeaderText="Serienummer" />
  </Columns>
</asp:GridView>


Jeg går ud fra at du har styr på basal HTML, ved hvad class attributen kan bruges til osv.
Det er som sådan er "problemet" i asp.net er at de indbyggede controls får genereret deres id af serveren. så en control du kalder CheckBox1 kommer til at hedde ctl00_ContentPlaceHolderCenter_GridView1_ctl02_CheckBox1 i brugerens browser.
Og det er normal et elements id man bruger til at få fat i det med javascript.
Men du er jo sådan set heller ikke interesseret i at kun få fat i et enkelt element, men en hel række af checkboxes. I stedet kan du give alle de checkboxes du vil have mulighed for at afkrydse den samme cssclass.

Så kan du nemt med javascript finde alle elementer på siden med en bestemt css klasse, og via den vej krydse dem af. Hvad du bruger som din css klasse er sådan set fuldstændig ligegyldigt, det skal bare være ens for alle de relevante checkboxe, og kun for dem. I din "master checkbox" tilføjer du en onclick attribut som kalder en javascript funktion der sætte alle checkboxe med den relevante css klasse til det du ønsker.

I det her tilfælde er det
    checkAll(checkvalue, searchclass)
som bliver til
    onclick="checkAll(this.checked, 'produktlistchk')"

this refererer til checkboxen selv, så this.checked er dens egen afkrydsningsstatus, 'produktlistchk' er den css klasse som den skal finde alle elementer med og afkrydse.
Og som du kan se har jeg givet checkboxen i gridviewet netop dette som CssClass.

Håber ikke jeg har vrøvlet alt for meget her, og du kan bruge det til noget.
Avatar billede anders_cp Nybegynder
25. juni 2008 - 00:40 #9
ok, jeg må bide i det sure æble og lave den om til asp.net2.0 (det er nemmere sagt end gjort!).

Så vil jeg vende tilbage....

Nej din forklaring er IKKE vrøvlet. Jeg har forstået hvad du skriver, nu skal jeg bare have det implementeret ;)
Avatar billede mikalj Nybegynder
25. juni 2008 - 08:03 #10
Jeg ved ikke om det er nødvendigt at skifte til 2.0, jeg kunne FORESTILLE mig at du bare kan tilføje en itemtemplate til dit datagrid

    <asp:TemplateColumn>
    <ItemStyle HorizontalAlign="Center" Width="5px"></ItemStyle>
    <HeaderTemplate>
    <input id="chkAllItems" type="checkbox" onclick="checkAll(this.checked, 'produktlistchk'" />
    </HeaderTemplate>
    <ItemTemplate>
        <asp:CheckBox ID="CheckBox2" runat="server" CssClass="produktlistchk" />
    </ItemTemplate>
    </asp:TemplateColumn>

Og igen, husk der er forskel på om du bruger <input type='checkbox' /> eller <asp:CheckBox />, da <asp:CheckBox CssClass="xyz" /> i virkeligheden bliver til <span class="xyz"><input type='checkbox' /></span>
Dvs. at javascript funktionen getElementsByClass('xyz') returnerer et array af <span> elementer, og ikke et array af <input> elementer, ergo "firstChild" delen af checkboxes.firstChild.checked = checkvalue;
Avatar billede anders_cp Nybegynder
30. juni 2008 - 10:29 #11
Så er jeg tilbage..

Er begyndt at fatte lidt, men har stadig problemer.
Det er noget kode jeg redigerer i, så derfor må jeg gennemskue hvad der er lavet. Jeg kan nu se at <ItemTemplate> er defineret i cs-filen:

// Create an control.
CheckBox checkBoxReceived = new CheckBox();
// Set the properties of the control.
checkBoxReceived.ToolTip = xeroxOrderNumber;
checkBoxReceived.Style.Add("height", "8px");
// Add the control to the Controls collection of the
// cell representing the first column in the DataGrid.
e.Item.Cells[0].Controls.Add(checkBoxReceived);

Jeg har derfor tilføjet CssClass, som du skriver om og et ID.:
checkBoxReceived.CssClass = "produktlistchk";
checkBoxReceived.ID = "CheckBox2";


Jeg kan se at jeg har fået tildelt en class=produktlistchk til hver checkbox og det er jo meget fint.

Dit javascript er uændret, som du har skrevet det og gridviewet ser således ud:
<asp:DataGrid ID="DataGridXeroxOrders" runat="server" CssClass="DataGrid" BorderWidth="1px"
                                AutoGenerateColumns="False">
                                <SelectedItemStyle VerticalAlign="Top"></SelectedItemStyle>
                                <AlternatingItemStyle VerticalAlign="Top"></AlternatingItemStyle>
                                <ItemStyle VerticalAlign="Top"></ItemStyle>
                                <HeaderStyle CssClass="DataGridHeader"></HeaderStyle>
                                <Columns>
                                    <asp:TemplateColumn>
                                        <ItemStyle HorizontalAlign="Center" Width="5px"></ItemStyle>
                                        <HeaderTemplate>
                                            <input id="chkAllItems" type="checkbox" onclick="checkAll(this.checked, 'produktlistchk')" />
                                        </HeaderTemplate>
                                    </asp:TemplateColumn>
                                    <asp:BoundColumn DataField="XeroxOrderNumber" HeaderText="Xerox ordrenr."></asp:BoundColumn>
                                    <asp:BoundColumn DataField="SerialNumber" HeaderText="Serienummer"></asp:BoundColumn>
                                    <asp:BoundColumn DataField="ProductName" HeaderText="Produkt"></asp:BoundColumn>
                                    <asp:BoundColumn DataField="Location" HeaderText="Lokation"></asp:BoundColumn>
                                    <asp:BoundColumn HeaderText="Ydelser"></asp:BoundColumn>
                                </Columns>
                            </asp:DataGrid>



Desværre virker det stadig ikke, håber du fortsat vil hjælpe mig. Er trods alt - via din hjælp - kommet lidt videre i læringsprocessen.
Avatar billede anders_cp Nybegynder
08. juli 2008 - 14:57 #12
Hej
Denne løsning er nok ikke helt efter bogen, men det er det som jeg har fået til at virke.

function CheckAllDataGridCheckBoxes(checkVal) {

var rowcount = ctl00_ContentPlaceHolder1_DataGridXeroxOrders.rows.length;

var i = 2;
var getElementByIDstring = "";
while (i <= rowcount)
{
    if (i < 10)
      getElementByIDstring = "ctl00_ContentPlaceHolder1_DataGridXeroxOrders_ctl0";
    else
        getElementByIDstring = "ctl00_ContentPlaceHolder1_DataGridXeroxOrders_ctl";
    getElementByIDstring = getElementByIDstring + i + "_ctl00";
    document.getElementById(getElementByIDstring).checked = checkVal;
      i++;
}

}

Jeg tæller antallet af rækker i datagriddet (rowCount). Udfra RowCount laver jeg en string hvor jeg sætter hver række til checked eller ikke-checked.


Funktionen kaldes med checked false eller true:
CheckAllDataGridCheckBoxes(document.forms[0].chkAllItems.checked)


<asp:DataGrid ID="DataGridXeroxOrders" runat="server" CssClass="DataGrid" BorderWidth="1px"
AutoGenerateColumns="False">
    <SelectedItemStyle VerticalAlign="Top"></SelectedItemStyle>
        <AlternatingItemStyle VerticalAlign="Top"></AlternatingItemStyle>
        <ItemStyle VerticalAlign="Top"></ItemStyle>
          <HeaderStyle CssClass="DataGridHeader"></HeaderStyle>
              <Columns>
                    <asp:TemplateColumn>
                          <ItemStyle HorizontalAlign="Center" Width="5px"></ItemStyle>
                          <HeaderTemplate>
                              <input id="chkAllItems" type="checkbox" onclick="CheckAllDataGridCheckBoxes(document.forms[0].chkAllItems.checked)" />
                            </HeaderTemplate>
                      </asp:TemplateColumn>
                        <asp:BoundColumn DataField="XeroxOrderNumber" HeaderText="Xerox ordrenr."></asp:BoundColumn>
                        <asp:BoundColumn DataField="SerialNumber" HeaderText="Serienummer"></asp:BoundColumn>
                        <asp:BoundColumn DataField="ProductName" HeaderText="Produkt"></asp:BoundColumn>
                        <asp:BoundColumn DataField="Location" HeaderText="Lokation"></asp:BoundColumn>
                        <asp:BoundColumn HeaderText="Ydelser"></asp:BoundColumn>
                  </Columns>
</asp:DataGrid>

Du har gjort en stor indsats for at hjælpe mig, og det vil jeg takke dig for :-)
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
IT-kurser om Microsoft 365, sikkerhed, personlig vækst, udvikling, digital markedsføring, grafisk design, SAP og forretningsanalyse.

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester