Using Checkbox in grid to set selected value in radCombobox

[Andy Green]

Hi

I have a radGrid with a template column:

<telerik:GridTemplateColumn UniqueName="colPrimaryProcedure" HeaderText="" ItemStyle-HorizontalAlign="Center"><HeaderStyle  HorizontalAlign="Center"  />
                                                                       <ItemTemplate>
                                                                           <asp:checkbox ID="chkPrimary" runat="server"  />
                                                                       </ItemTemplate>
                                                                   </telerik:GridTemplateColumn>

The values in this grid also appear later down the page in a combo box. What I'm trying to do is if a checkbox is selected the same value in the combo box is also selected.

I can do this Server side, but how do I achieve this on the client. I can't find the selected value corresponding to the ticked item in the grid.

Only 1 tickbox in the grid can be true at any one time. (this is working OK)

Andy

[Shinu]

Hi Andy Green,

Please try the following JavaScript which works fine at my end.

ASPX:

...
<asp:CheckBoxList ID="chklstEmployee" runat="server">

    <asp:ListItem Text="4" onclick="SelectItem(this);"></asp:ListItem>

</asp:CheckBoxList>
...

JavaScript:

function SelectItem(item) {
    var row = item.parentNode.parentNode;
    var rowIndex = row.rowIndex;
    var grid = $find("<%=radgrdOrders.ClientID %>");
    var tableView = grid.get_masterTableView();
    var items = tableView.get_dataItems()[rowIndex].findControl("radcboEmployee");
    items.findItemByText(item.value).select();
}

Thanks,
Shinu.

[Andy Green]

Thank Shinu.

Not sure I explained myself properly.

I have a checkbox in a template in a radgrid. (not a checkbox list) and outside of the grid in a separate part of the page I have the radcombobox. 

Its when a tick is placed in the grid's checkbox, I want to set the value in the combobox.

I'll disect the techniques you have demonstrated to see what I can figure out.

Andy

[Shinu]

Hi Andy Green,

Please try the following code snippet which works fine at my end.

ASPX:

        <telerik:RadGrid ID="radgrdOrders" runat="server" DataSourceID="SqlDataSource1" AutoGenerateColumns="False" CellSpacing="-1" GridLines="Both" OnItemCreated="radgrdOrders_ItemCreated">
....
  <ItemTemplate>
       <asp:CheckBox ID="ChkEmployeeID" runat="server" Text="4" onclick="SelectItem(this);" />
  </ItemTemplate>
....
</telerik:RadGrid>
<telerik:RadComboBox ID="radcboEmployee" runat="server" DataSourceID="SqlDataSource1"
            EmptyMessage="select" DataTextField="EmployeeID">
</telerik:RadComboBox>
<asp:HiddenField ID="HiddenFiel1" runat="server" />

C#:

protected void radgrdOrders_ItemCreated(object sender, GridItemEventArgs e)
{
    if (e.Item is GridDataItem)
    {
        GridDataItem item = (GridDataItem)e.Item;
        CheckBox chk= (CheckBox)item.FindControl("ChkEmployeeID");
        //storing the client id of the checkbox to the hidden field
        HiddenFiel1.Value = chk.ClientID.ToString();
    }
}

JavaScript:

<script type="text/javascript">
    function SelectItem(item) {
        var hidden = document.getElementById("HiddenFiel1");
        var comboBox = $find("<%=radcboEmployee.ClientID %>");
        var checkBox = document.getElementById(hidden.value); // accessing checkbox
        var item = checkBox.parentElement.innerText;//checkbox text
        comboBox.findItemByText(item).select();
        items.findItemByText(item.value).select();
    }
</script>

Thanks,
Shinu.

[Andy Green]

Thanks again Shinu but the problem I'm having now it the ItemCreated is generating an ID for each checkbox, not a single ID which the JS is expecting.

Unless I'm missing something. I'll perhaps try clientIDMode = static to see if I can pick it up that way.

I can always do this server side with AJAX. Just thought doing it client side would be more elegant.

Andy

[Shinu]

Hi Andy Green,

The ClientID generated for the checkboxes in each rows are different because the ClientIDMode for the controls are AutoID. You can try setting the property to Static, which will work fine in this scenario.

ASPX:

...
<telerik:GridTemplateColumn UniqueName="colPrimaryProcedure" HeaderText="" ItemStyle-HorizontalAlign="Center">

    <HeaderStyle HorizontalAlign="Center" />

    <ItemTemplate>

        <asp:CheckBox ID="ChkEmployeeID" runat="server" ClientIDMode="Static" Text="4" onclick="SelectItem();" />

    </ItemTemplate>

</telerik:GridTemplateColumn>
...

JavaScript:

<script type="text/javascript">
    function SelectItem() {
        var comboBox = $find("<%=radcboEmployee.ClientID %>");
        var checkBox = document.getElementById("ChkEmployeeID"); // accessing the template column checkbox
        var checkboxText = checkBox.parentElement.innerText; //checkbox text
        comboBox.findItemByText(checkboxText).select(); // selecting combobox
    }
</script>

Thanks,
Shinu.

[Andy Green]

Sorry Shinu but this still isn't working, the line var checkBox = document.getElementById("ChkEmployeeID"); returns null and the function fails.

This is the markup :

<span class="diags">
<input name="rpbOutcomes$i1$rgProcedures$ctl00$ctl05$chkPrimary" id="chkPrimary" onclick="setDiags(this);" type="checkbox">
</span>

<span class="diags">
<input name="rpbOutcomes$i1$rgProcedures$ctl00$ctl07$chkPrimary" id="chkPrimary" onclick="setDiags(this);" type="checkbox">
</span>

There will be as many of the above depending on the rows in the Radgrid.

This is my JS function:

function setDiags(theCheckbox) {
   var comboBox = $find("<%=ddlDiagnosticCodeFUWL.ClientID%>");
   var checkBox = document.getElementById("ChkEmployeeID");
   var checkboxText = checkBox.parentElement.innerText;
   comboBox.findItemByText(checkboxText).select();
 }



Andy

[Shinu]

Hi Andy Green,

Unfortunately I couldn't replicate the issue at my end. Please have a look into the sample code snippet which works fine at my end. Please provide your full code if it doesn't help.

ASPX:

<telerik:RadGrid ID="radgrdOrders" runat="server" DataSourceID="SqlDataSource1" AutoGenerateColumns="False" CellSpacing="-1" GridLines="Both" >
    <MasterTableView>
        <Columns>
            <telerik:GridBoundColumn DataField="OrderID" UniqueName="OrderID" HeaderText="OrderID">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="CustomerID" UniqueName="CustomerID" HeaderText="CustomerID">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="EmployeeID" UniqueName="EmployeeID" HeaderText="EmployeeID">
            </telerik:GridBoundColumn>
            <telerik:GridTemplateColumn UniqueName="colPrimaryProcedure" HeaderText="" ItemStyle-HorizontalAlign="Center">
                <HeaderStyle HorizontalAlign="Center" />
                <ItemTemplate>
                    <asp:CheckBox ID="ChkEmployeeID" runat="server" ClientIDMode="Static" Text="4" onclick="SelectItem();" />
                </ItemTemplate>
            </telerik:GridTemplateColumn>
        </Columns>
    </MasterTableView>
</telerik:RadGrid>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:ConnectionString %>"
    SelectCommand="SELECT top 5 [OrderID], [CustomerID],[EmployeeID] FROM [Orders]">
</asp:SqlDataSource>
<telerik:RadComboBox ID="radcboEmployee" runat="server" DataSourceID="SqlDataSource1"
    EmptyMessage="select" DataTextField="EmployeeID">
</telerik:RadComboBox>

JavaScript:

<script type="text/javascript">
    function SelectItem() {
        var comboBox = $find("<%=radcboEmployee.ClientID %>");
        var checkBox = document.getElementById("ChkEmployeeID");
        var checkboxText = checkBox.parentElement.innerText;
        comboBox.findItemByText(checkboxText).select();
    }
</script>

Thanks,
Shinu.

[Andy Green]

Hi Shinu

I think I know where this is going wrong. In the row with the checkbox I have a GridBoundColumn, it this value I want to set the Dropdown list with, You are assigning a text=4 to the checkbox, I'm not able to do this.

From you e example I want to set the dropdown to say the EmplyeeID not the value of the checkbox.

Andy

[Andy Green]

Actually the DatakeyNames and the ID of the dropdown list are the same.

Andy

[Andy Green]

I'm getting the following error 'Unable to get property 'select' of undefined or null reference on this line - comboBox.findItemByText(checkboxText).select();

But combo box is Object b.Radcombobox.

Andy

[Shinu]

Hi Andy Green,

This error will come if you are trying to select an item from the RadComboBox which is not present in the list. I guess you are binding the checkbox with same DataSource ,used to bind the GridBoundColumn of RadGrid. Please have a look into the sample code snippet which works fine at my end.

ASPX:

<telerik:RadGrid ID="radgrdOrders" runat="server" DataSourceID="SqlDataSource1" AutoGenerateColumns="False"
    CellSpacing="-1" GridLines="Both" OnItemCreated="radgrdOrders_ItemCreated">
    <MasterTableView>
        <Columns>
            <telerik:GridBoundColumn DataField="OrderID" UniqueName="OrderID" HeaderText="OrderID">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="CustomerID" UniqueName="CustomerID" HeaderText="CustomerID">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="EmployeeID" UniqueName="EmployeeID" HeaderText="EmployeeID">
            </telerik:GridBoundColumn>
            <telerik:GridTemplateColumn UniqueName="EmployeeID" HeaderText="EmployeeID" ItemStyle-HorizontalAlign="Center">
                <HeaderStyle HorizontalAlign="Center" />
                <ItemTemplate>
                    <asp:CheckBox ID="ChkEmployeeID" runat="server" Text='<%# Eval("EmployeeID") %>' />
                </ItemTemplate>
            </telerik:GridTemplateColumn>
        </Columns>
    </MasterTableView>
</telerik:RadGrid>
<telerik:RadComboBox ID="radcboEmployee" runat="server" DataSourceID="SqlDataSource1"
    EmptyMessage="select" DataTextField="EmployeeID">
</telerik:RadComboBox>

C#:

protected void radgrdOrders_ItemCreated(object sender, GridItemEventArgs e)
{
    if (e.Item is GridDataItem)
    {
        GridDataItem item = (GridDataItem)e.Item;
        CheckBox checkBox = (CheckBox)item.FindControl("ChkEmployeeID");
        checkBox.Attributes.Add("onclick", "SelectItem('" + checkBox.ClientID.ToString() + "')");
    }
}

JavaScript:

<script type="text/javascript">
    function SelectItem(CheckBoxId) {
        var comboBox = $find("<%=radcboEmployee.ClientID %>");
        var checkBox = document.getElementById(CheckBoxId);
        var item = checkBox.parentElement.innerText;
        comboBox.findItemByText(item).select();
    }
</script>

Please provide your full code if it doesn't help.
Thanks,
Shinu.

[Andy Green]

Thanks again Shinu, I was using the same datasource. I can't use the solution provided as I can't have text against the checkbox, this data is in a separate gridboundcolumn, and the layout is established, these changes are to existing code.

It doesn't look like I can do what I want client side, so I'll park it there and do a postback.

Andy.

[Andy Green]

I have found why it failed on that line. You were right it couldn't find a matching row in the combo box. The reason was there was a space following the value. 

It worked when I changed the line to : var checkboxText = checkBox.parentElement.innerText.trim(); The space was added somewhere its wasn't in the data.

Andy