RadGrid with check box

[Saranya]

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

[Shinu]

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.

[Daniel]

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.

[Saranya]

 

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

 

[Daniel]

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.

[Saranya]

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

[Daniel]

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.