Forums Retired Products and Controls
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Amol
1147
Select All checkbox in the header of UltraGrid
posted

Hi,
  I am having Ultragrid html markup like following in which i am having two template columns.
on each template column header there is checkbox to enable SELECT ALL option.
 I am calling a javascipt function shown below on onclick event of header checkboxes.
the select all option is not working as in the if condition it is not finding frm.elements[i].name.lastIndexOf("CheckBox2") for all 4 function

please suggest some solution so that the Select all function on both column will work.

Thanks.

 


 
function Delete()
    {
        var frm = document.forms[0];
        var flag=false;
        for (i=0;i<frm.elements.length;i++)
        {
            //alert("Delete _ _ _ "+frm.elements[i].name);
           if(frm.elements[i].type == "checkbox"  && frm.elements[i].name.lastIndexOf("CheckBox2")!= -1)
           {
             //alert("Sucess___"+frm.elements[i].name);
             if(frm.elements[i].checked)
              {
                 flag = true;
              }
           }
        }
        if (flag==false)
        {
           alert('Please select at least one item to delete!');
           return false;
        }
       
        return confirm('Are you sure to delete selected Roles?');
    }


 function SelectAll(flag)
    {
       alert(error);
        var frm = document.forms[0];
        for (i=0;i<frm.elements.length;i++)
        {
          //  alert("DeleteSelectAll _ _ _ "+frm.elements[i].name);
           if (frm.elements[i].type == "checkbox" && frm.elements[i].name.lastIndexOf("CheckBox2")!= -1)
           {
               frm.elements[i].checked = flag; // document.getElementById(id).checked;ChkEnable              
           }
        }
    } 
 
  function EnableDisable()
    {
        var frm = document.forms[0];
        var flag=false;
        for (i=0;i<frm.elements.length;i++)
        {
          if(frm.elements[i].type == "checkbox" && frm.elements[i].name.lastIndexOf("CheckBox1")!= -1)
           {
             if(frm.elements[i].checked)
              {
                 flag = true;
              }
           }
        }
        if (flag==false)
        {
           alert('Please select at least one item to Enable/Disable!');
           return false;
        }
       return confirm('Are you sure to Enable/Disable?');
    }


 function SelectAllEnableDisable(flag)
    {
      alert(error);
        var frm = document.forms[0];
        for (i=0;i<frm.elements.length;i++)
        {           
           if (frm.elements[i].type == "checkbox" && frm.elements[i].name.lastIndexOf("CheckBox1")!= -1)
           {
                alert('found one record, name is..'+frm.elements[i].name);
                frm.elements[i].checked = flag; // document.getElementById(id).checked;
           }
        }
    }

 


   


<igtbl:UltraWebGrid ID="InfraGrid_Products" runat="server" Browser="Xml" EnableAppStyling="True"  OnInitializeRow="InitializeRow"
                         OnInitializeDataSource="Load_Through_Ajax"  StyleSetName="Office2007Black" Width="100%">
                        <Bands>
                            <igtbl:UltraGridBand>
                             <Columns>
                                 <igtbl:UltraGridColumn BaseColumnName="UserId" Key="UserId" ServerOnly="True">
                                     <Header Caption="UserId">
                                     </Header>
                                 </igtbl:UltraGridColumn>
                                 <igtbl:UltraGridColumn BaseColumnName="LoginId" Key="LoginId" ServerOnly="True">
                                     <Header Caption="LoginId">
                                         <RowLayoutColumnInfo OriginX="1" />
                                     </Header>
                                     <Footer>
                                         <RowLayoutColumnInfo OriginX="1" />
                                     </Footer>
                                 </igtbl:UltraGridColumn>
    .
    .
    .

 <igtbl:TemplatedColumn AllowUpdate="Yes" Key="ChkED" SortIndicator="Disabled" Type="CheckBox">
                                     <HeaderTemplate>
                                             <input type="checkbox" runat="server" id="ChkEnable" onclick="BLOCKED SCRIPTSelectAllEnableDisable(this.checked);"  />
                                               <asp:LinkButton ID="Lnk_EnableDisable" runat="server" CausesValidation="false" OnClick="EnableDisableRecords"
                                                 onclientclick="BLOCKED SCRIPTreturn EnableDisable();" Text="Enable/Disable" ToolTip="Enable/Disable"></asp:LinkButton>
                                     </HeaderTemplate>
                                     <CellTemplate>
                                    
                                          <input type="checkbox" id="CheckBox1" runat="server" name="CheckBox1"   />
                                     </CellTemplate>
                                     <Header Caption="Delete">
                                         <RowLayoutColumnInfo OriginX="8" />
                                     </Header>
                                     <Footer>
                                         <RowLayoutColumnInfo OriginX="8" />
                                     </Footer>
                                 </igtbl:TemplatedColumn>
                           
                               
                                   <igtbl:TemplatedColumn AllowUpdate="Yes" Key="Chk" SortIndicator="Disabled" Type="CheckBox">
                                     <HeaderTemplate>
                                             <input type="checkbox" runat="server" id="cbSelectAll" onclick="BLOCKED SCRIPTSelectAll(this.checked);"  />
                                               <asp:LinkButton ID="Lnk_del" runat="server" CausesValidation="false" OnClick="DeleteSelectedRecords"
                                                 onclientclick="BLOCKED SCRIPTreturn Delete();" Text="Delete" ToolTip="Click to Delete"></asp:LinkButton>
                                     </HeaderTemplate>
                                      <CellTemplate>
                                              <input type="checkbox" id="CheckBox2" runat="server" name="CheckBox2"  />
                                     </CellTemplate>
                                     <Header Caption="Delete">
                                         <RowLayoutColumnInfo OriginX="9" />
                                     </Header>
                                     <Footer>
                                         <RowLayoutColumnInfo OriginX="9" />
                                     </Footer>
                                 </igtbl:TemplatedColumn>
                                
                    </Columns>
                           
                           
                                <RowStyle Wrap="True" />
                                <AddNewRow View="NotSet" Visible="NotSet">
                                </AddNewRow>
                            </igtbl:UltraGridBand>
                        </Bands>
                        <DisplayLayout AllowColSizingDefault="Free" AllowColumnMovingDefault="OnServer"
                             AllowRowNumberingDefault="Continuous" AllowSortingDefault="OnClient" ColWidthDefault="" GridLinesDefault="NotSet" GroupByColumnsHiddenDefault="No"
                            HeaderClickActionDefault="SortSingle" IndentationDefault="20" LoadOnDemand="Xml"
                            Name="ctl06xInfraGridxProducts" RowHeightDefault="20px" RowSizingDefault="Free"
                            SelectTypeCellDefault="Single" SelectTypeColDefault="Single" SelectTypeRowDefault="Extended"
                            Version="3.00" ViewType="OutlookGroupBy" NoDataMessage="No Products Added" NullTextDefault="Not Set" AutoGenerateColumns="False" AllowUpdateDefault="RowTemplateOnly">
                            <FrameStyle Width="100%">
                            </FrameStyle>
 
                            <RowStyleDefault Font-Names="Verdana" Font-Size="8pt" Wrap="True">
                            </RowStyleDefault>
                            <ActivationObject BorderColor="" BorderWidth="">
                            </ActivationObject>
                            <FixedCellStyleDefault Wrap="True">
                            </FixedCellStyleDefault>
                            <FilterOptionsDefault AllowRowFiltering="OnClient" FilterUIType="FilterRow">
                            </FilterOptionsDefault>
                            <Pager AllowPaging="True" PageSize="12"></Pager>
                        </DisplayLayout>
                  </igtbl:UltraWebGrid>

  • 15
    posted

    I have a question. I am using the select all. I have a dataset for my data. When I first load all products I can check them.  then I have a search that searches all products. In the selecting search I can search the products and pull a category of products from the items rendered. Now when i check all it still selects the old products and not the products that is viewable.

  • 10
    posted

    Add <ClientSideEvents ColumnHeaderClickHandler="UltraWebGrid1_ColumnHeaderClickHandler" /> to the </DisplayLayout> section of the grid.

    give a keyid for the column

    <igtbl:UltraGridColumn HeaderText="Check" Width="50px" AllowUpdate="Yes" Type="CheckBox" Key="chk1" SortIndicator="Disabled"
                                >
                                <CellStyle HorizontalAlign="Center">
                                </CellStyle>
                                <Footer>
                                </Footer>
                                <Header  Caption="Check">
                                </Header>
                            </igtbl:UltraGridColumn>

    then hook up the same with javascript

    function UltraWebGrid1_ColumnHeaderClickHandler(gridName, columnId, button) {

                //Add code to handle your event here.

                var myCol = igtbl_getColumnById(columnId);
              

                if (myCol.Key == "chk1") {

                    var myGrid = igtbl_getGridById(gridName);

                    for (i = 0; i < myGrid.Rows.length; i++) {
                       
                        if (myGrid.Rows.getRow(i).getCellFromKey("chk1").getValue() == "1") {
                            myGrid.Rows.getRow(i).getCellFromKey("chk1").setValue(0);
                        }
                        else {
                            myGrid.Rows.getRow(i).getCellFromKey("chk1").setValue(1);
                        }
                    }

                   
                }

        }

     

     

  • 28464
    posted

    Hello,

    Maybe this forum thread where a customer had a similar scenario will help (a complete working solution with source code is provided there as well)

    http://forums.infragistics.com/forums/p/1540/31541.aspx#31541