Using Checkbox in grid to set selected value in radCombobox

14 posts, 0 answers
  1. Andy Green
    Andy Green avatar
    342 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
  2. Shinu
    Shinu avatar
    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Andy Green
    Andy Green avatar
    342 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



  5. Shinu
    Shinu avatar
    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.
  6. Andy Green
    Andy Green avatar
    342 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
  7. Shinu
    Shinu avatar
    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.
  8. Andy Green
    Andy Green avatar
    342 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









  9. Shinu
    Shinu avatar
    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.
  10. Andy Green
    Andy Green avatar
    342 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

  11. Andy Green
    Andy Green avatar
    342 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
  12. Andy Green
    Andy Green avatar
    342 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


  13. Shinu
    Shinu avatar
    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.
  14. Andy Green
    Andy Green avatar
    342 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.
  15. Andy Green
    Andy Green avatar
    342 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

Back to Top
UI for ASP.NET Ajax is Ready for VS 2017