This is a migrated thread and some comments may be shown as answers.

RadGrid with check box

6 Answers 102 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Saranya
Top achievements
Rank 2
Saranya asked on 07 Nov 2008, 09:02 AM
Hi,
I have a radgrid with select all check box in the grid and check boxes that allow us to select individual rows. When I insert filter (set Allowfilteringbycolumn property to true) for the grid, when i am checking the select all check box, no rows in the grid get selected. Also  I am getting a script error while i uncheck the select all check box. Please Help.

Regards,
Saranya

6 Answers, 1 is accepted

Sort by
0
Shinu
Top achievements
Rank 2
answered on 07 Nov 2008, 09:27 AM
Hi Saranya,

I tried this on my end and Multi row selection is working as expected. I am not sure with way you are selecting the Grid rows. I used GridClientSelectColumn to select the Grid rows.
Here is my aspx.

ASPX:
<telerik:RadGrid ID="RadGrid1" runat="server"   AllowFilteringByColumn="True" AllowMultiRowSelection="True" DataSourceID="SqlDataSource1" PageSize="5"   AllowSorting="True"  > 
<MasterTableView DataSourceID="SqlDataSource1"  > 
 
  <Columns> 
    <telerik:GridBoundColumn HeaderText="ProductName" DataField="ProductName" UniqueName="ProductName" ></telerik:GridBoundColumn> 
    <telerik:GridBoundColumn HeaderText="ProductID" DataField="ProductID" UniqueName="ProductID" ></telerik:GridBoundColumn> 
    <telerik:GridClientSelectColumn ></telerik:GridClientSelectColumn> 
   </Columns> 
  </MasterTableView> 
  <ClientSettings > 
   <Selecting  AllowRowSelect="True" /> 
  </ClientSettings> 
</telerik:RadGrid> 



Thanks
Shinu.
0
Daniel
Telerik team
answered on 07 Nov 2008, 09:48 AM
Hello Saranya,

Please test the attached demo and let us know how to reproduce the issue.

Kind regards,
Daniel
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.
0
Saranya
Top achievements
Rank 2
answered on 07 Nov 2008, 11:40 AM

 

Hi

This is my code. I am using GridTemplateColumn. I have defined the Javascript functions. This works fine. But if I insert AllowFilteringByColumn = "True" for the grid, the problem arises. That is on checking the select all checkbox no rows get selected. On unchecking, script error comes.

<
radG:RadGrid ID="dgUsers" Width="100%" runat="server" AllowSorting="true" AllowPaging="true"

 

 

EnableAJAX="true" GridLines="none" OnColumnCreated="dgUsers_ColumnCreated"

 

 

OnItemDataBound="dgUsers_ItemDataBound" OnNeedDataSource="dgUsers_NeedDataSource" OnPageIndexChanged="dgUsers_PageIndexChanged">

 

 

<MasterTableView AllowFilteringByColumn="False">

 

 

<Columns>

 

 

<radG:GridTemplateColumn UniqueName="CheckBoxTemplateColumn" AllowFiltering="False">

 

 

<HeaderStyle Width="30px"></HeaderStyle>

 

 

<HeaderTemplate>

 

 

<asp:CheckBox ID="chkAllItems" runat="server" onclick="CheckAllDataGridCheckBoxes()" />

 

 

</HeaderTemplate>

 

 

<ItemTemplate>

 

 

<asp:CheckBox ID="chkItemChecked" runat="server" onclick="UnCheckDataGridheader()"></asp:CheckBox>

 

 

</ItemTemplate>

 

 

</radG:GridTemplateColumn>

 

 

</Columns>

 

 

<ExpandCollapseColumn Visible="False">

 

 

<HeaderStyle Width="19px" />

 

 

</ExpandCollapseColumn>

 

 

<RowIndicatorColumn Visible="False">

 

 

<HeaderStyle Width="20px" />

 

 

</RowIndicatorColumn>

 

 

<PagerStyle Mode="NumericPages" />

 

 

</MasterTableView>

 

 

<ExportSettings ExportOnlyData="True" FileName="File_User" IgnorePaging="True"

 

 

OpenInNewWindow="True" />

 

 

</radG:RadGrid>

Thanks
Saranya

 

0
Daniel
Telerik team
answered on 07 Nov 2008, 11:59 AM
Hello Saranya,

Could you please share your javascript code with us?

Kind regards,
Daniel
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.
0
Saranya
Top achievements
Rank 2
answered on 08 Nov 2008, 04:00 AM
Hi

This is my JavaScript code.

 

<script language="javascript" type="text/javascript">

 

 

var pagecount = 0;

 

 

 

function checkselect()

 

{

pagecount=0;

 

return;

 

}

 

 

function closewindow()

 

{

window.close();

}

 

 

function UnCheckDataGridheader()

 

{

 

var grid = document.getElementById('dgUsers_ctl01');

 

 

var inputelement = grid.rows[0].cells[0].getElementsByTagName('input');

 

inputelement[0].checked=

false;

 

}

 

 

function CheckAllDataGridCheckBoxes()

 

{

 

var grid = document.getElementById('dgUsers_ctl01');

 

 

var len = grid.rows.length;

 

 

var inputelement= grid.rows[0].cells[0].getElementsByTagName('input');

 

 

 

if(len=="2")

 

{

 

var gridHeadercheck = document.getElementById('dgUsers_ctl01_ctl04_chkItemChecked');

 

 

if(gridHeadercheck!=null)

 

{

 

var inputelements = grid.rows[1].cells[0].getElementsByTagName('input');

 

 

if(inputelement[0].getAttribute('checked'))

 

{

inputelements[0].checked=

true;

 

}

 

else

 

{

inputelements[0].checked=

false;

 

}

 

return true;

 

}

 

else

 

{

 

return false;

 

}

}

 

 

if(len=="12")

 

{

len=

"11";

 

pagecount=pagecount+1;

}

 

 

if(pagecount >0 && len<11)

 

{

len=len-1;

}

 

 

if(inputelement[0].getAttribute('checked'))

 

{

 

for(i = 1; i < (len); i++)

 

{

 

try

 

{

 

var inputelements = grid.rows[i].cells[0].getElementsByTagName('input');

 

inputelements[0].checked=

true;

 

}

 

catch(e)

 

{

 

return;

 

}

}

}

 

else

 

{

 

for(i = 1; i < (len); i++)

 

{

 

var inputelements = grid.rows[i].cells[0].getElementsByTagName('input');

 

inputelements[0].checked=

false;

 

}

}

 

}

 

</script>

 



Regards,
Saranya
0
Daniel
Telerik team
answered on 11 Nov 2008, 10:38 AM
Hello Saranya,

Please check the modifications I introduced:

Javascript:
<script language="javascript" type="text/javascript"
    var pagecount = 0; 
    function checkselect() 
    { 
        pagecount = 0; 
        return
    } 
 
    function closewindow() 
    { 
        window.close(); 
    } 
 
    function CheckAllDataGridCheckBoxes(headerBox) 
    { 
        var grid = document.getElementById('dgUsers_ctl01'); 
        var headerBox = document.getElementById(headerBox); 
        var cboxes; 
        for (var row = 0; row < grid.rows.length; row++) 
        { 
            cboxes = grid.rows[row].cells[0].getElementsByTagName('input'); 
            if (cboxes.length > 0) 
                cboxes[0].checked = headerBox.checked; 
        } 
    } 
</script> 

template column - aspx
<rad:GridTemplateColumn UniqueName="CheckBoxTemplateColumn" AllowFiltering="False"
    <HeaderStyle Width="30px"></HeaderStyle> 
    <HeaderTemplate> 
        <asp:CheckBox ID="chkAllItems" runat="server" /> 
    </HeaderTemplate> 
    <ItemTemplate> 
        <asp:CheckBox ID="chkItemChecked" runat="server" /> 
    </ItemTemplate> 
</rad:GridTemplateColumn> 

code-behind C#
protected void dgUsers_ItemCreated(object sender, GridItemEventArgs e) 
    GridHeaderItem item = e.Item as GridHeaderItem; 
    if (item != null
    { 
        CheckBox checkBox = item.FindControl("chkAllItems"as CheckBox; 
        checkBox.Attributes["onclick"] = "CheckAllDataGridCheckBoxes('" + checkBox.ClientID + "')"
    } 

I hope this helps.

Regards,
Daniel
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.
Tags
Grid
Asked by
Saranya
Top achievements
Rank 2
Answers by
Shinu
Top achievements
Rank 2
Daniel
Telerik team
Saranya
Top achievements
Rank 2
Share this question
or