Telerik Forums / UI for ASP.NET AJAX Forum / ComboBox /

Using Checkbox in grid to set selected value in radCombobox

Telerik UI for ASP.NET AJAX
Resources Buy Try

14 posts, 0 answers

Andy Green

378 posts

Member since:
Aug 2008

Posted 06 May 2014 Link to this post

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

17764 posts

Member since:
Mar 2007

Posted 06 May 2014 in reply to Andy Green Link to this post

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

378 posts

Member since:
Aug 2008

Posted 06 May 2014 in reply to Shinu Link to this post

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

17764 posts

Member since:
Mar 2007

Posted 06 May 2014 in reply to Andy Green Link to this post

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

378 posts

Member since:
Aug 2008

Posted 07 May 2014 in reply to Shinu Link to this post

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

17764 posts

Member since:
Mar 2007

Posted 08 May 2014 in reply to Andy Green Link to this post

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

378 posts

Member since:
Aug 2008

Posted 12 May 2014 in reply to Shinu Link to this post

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

17764 posts

Member since:
Mar 2007

Posted 12 May 2014 in reply to Andy Green Link to this post

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

378 posts

Member since:
Aug 2008

Posted 13 May 2014 in reply to Shinu Link to this post

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

378 posts

Member since:
Aug 2008

Posted 13 May 2014 in reply to Andy Green Link to this post

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

Andy
Andy Green

378 posts

Member since:
Aug 2008

Posted 13 May 2014 in reply to Shinu Link to this post

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

17764 posts

Member since:
Mar 2007

Posted 14 May 2014 in reply to Andy Green Link to this post

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

378 posts

Member since:
Aug 2008

Posted 14 May 2014 in reply to Shinu Link to this post

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

378 posts

Member since:
Aug 2008

Posted 14 May 2014 in reply to Andy Green Link to this post

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