locked
Loop through Repeater Control for Checkbox RRS feed

  • Question

  • User-436309264 posted

    Hello everyone,

    I  have a repeater control which data shows something like this

    Year     Rate1   Rate2     Rate3  Status                      ChkboxRate1        ChkboxRate2        ChkboxRate3

    2009    1           2           3

    2009    2            3          4           Approved

    2009    5           6            7          Approved

    2009   6            7           8          Approved

    2010   1           2           3

    2010   2            3          4           Approved

    2010    5           6            7          Approved

    2010   6            7           8          Approved

    2011   1           2           3

    2011   2            3          4           Approved

    2011   5           6            7          Approved

    2011   6            7           8          Approved

     ChkboxRate1 , ChkboxRate2 ,  ChkboxRate3 are checkboxes to select Rate1, Rate2, Rate3. These checkboxes are shown for all the years.  I need to show the following validation 

    1)  Example:  If the user  checks the checkbox for  Rate1 =2(only Approved)   for year 2009 , then rest of the checkbox for Rate1 for year 2009 should become disabled.

    2) If the user unchecks that checkbox for Rate1=2 , all of the checkbox for Rate1 year 2009 should become enabled

    3) A user can only select one rate Rate1 for year 2009. If Rate1 is selected for year 2009, user cannot select another rate1  for year 2009

    4) For other years (2010,2011) same logic applies  in (1),(2),(3) and also applies to ChkboxRate2 ,  ChkboxRate3

    How do I achieve this using Javascript in Item Data bound event of the repeater control. Following is the code I have so far.

    protected void repeaterAppraisalHistory_ItemDataBound(object sender, RepeaterItemEventArgs e)
    {

    if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
    {
    {


    Label lblWHAsIsRate1 = (Label)e.Item.FindControl("lblWHAsIsRate1");
    Label lblWHAsIsRate2 = (Label)e.Item.FindControl("lblWHAsIsRate2");
    Label lblWHAsIsRate3 = (Label)e.Item.FindControl("lblWHAsIsRate3");


    Label lblFiscalYear = (Label)e.Item.FindControl("lblFiscalYear");


    CheckBox chkGU = (CheckBox)e.Item.FindControl("chkGU");
    CheckBox chkWH = (CheckBox)e.Item.FindControl("chkWH");
    CheckBox chkPK = (CheckBox)e.Item.FindControl("chkPK");

    }
    }
    }

    Thanks

    Kapil 

    Monday, February 8, 2016 3:59 PM

Answers

  • User632428103 posted

    hello kapils573

    happy to read that's my sample has to help you :)

    Nice ..

    could you validate the post ?

    thanks guy

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, February 15, 2016 4:17 PM

All replies

  • User632428103 posted

    Hello,

    not enough time to realize all your description but here is it a little sample i'm just made while the my lunch :

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script src="../../../Scripts/jquery-2.0.3.js"></script>
        <script type="text/javascript">
    
            var initFirstTDValue = '';
            var otherTDValue = '';
     
            function check(checkBox)
            {
                browse(checkBox, $(checkBox).parents().closest('tr').find('td:first').text());
            }
    
            function browse(checkBox, firstCellValue)
            {
                //browse over rate 1 check box
                $("[id *=chkRate1]").each(function (e) 
                {
                    // get the name
                    var name = $(this).prop('id');
                    var chkChecked = $('#' + name).prop('checked');
    
                    // check box is check
                    if (checkBox.checked)
                    {
                        // get the first cell value
                        otherTDValue = $(this).parents().closest('tr').find('td:first').text();
                    
                        // compare first td between each rows
                        if (firstCellValue == otherTDValue) 
                            if (!chkChecked) // it's checkbox is not check disabled it
                                $("#" + name).prop('disabled', true);
                    }
                    else
                        $("#" + name).prop('disabled', false);
                });
            }
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
        <asp:Repeater ID="Repeater1" runat="server" >
            <HeaderTemplate>
                <table border="1">
                    <tr>
                    <td>YEAR</td>
                    <td>RATE 1</td>
                    <td>Status</td>
                    <td>check box rate 1</td>
                </tr>
        </HeaderTemplate>
        <ItemTemplate>
            <tr>
                <td>
                    <asp:Label ID="lblYear" runat="server" Text='<%# Eval("year") %>' />
                </td>
                <td>
                    <asp:Label ID="lblRate1" runat="server" Text='<%# Eval("Rate1") %>' />
                </td>
                <td>
                    <asp:Label ID="lblStatus" runat="server" Text='<%# Eval("status") %>' />
                </td>
                 <td>
                    <asp:CheckBox ID="chkRate1" runat="server" onclick="check(this);" />
                </td>
            </tr>
        </ItemTemplate>
            <FooterTemplate>
                </table>
            </FooterTemplate>
            </asp:Repeater>
        </form>
    </body>
    </html>

    code behind : 

     protected void Page_Load(object sender, EventArgs e)
            {
                //
                if (!IsPostBack)
                {
                    //
                    DataTable dt = CreateDataTable();
    
                    Repeater1.DataSource = dt;
                    Repeater1.DataBind();
                }
            }
            private DataTable CreateDataTable()
            {
                //
                DataTable dt = new DataTable();
    
                //
                dt.Columns.AddRange(new DataColumn[3] { new DataColumn("Year", typeof(int)), new DataColumn("Rate1", typeof(int)),new DataColumn("Status", typeof(string))});
    
                //
                dt.Rows.Add(2009, 1, "");
                dt.Rows.Add(2009, 2, "Approuved");
                dt.Rows.Add(2009, 5 ,"Approuved");
                dt.Rows.Add(2009, 6, "Approuved");
                dt.Rows.Add(2010,1, "");
                dt.Rows.Add(2010, 2, "Approuved");
                dt.Rows.Add(2010, 5, "Approuved");
                dt.Rows.Add(2011, 2, "");
                dt.Rows.Add(2011, 5, "Approuved");
           
                //
                return dt;
            }

    i'm sure it's possible to make more easy but i don't have some more free time sorry ..

    hope this help

    Tuesday, February 9, 2016 11:28 AM
  • User-436309264 posted

    This is close to what I am looking, but I only want to select checkboxes for Rates whose status are approved? Also I could only be able to able/disable checkboxes for that year only.

    i.e If I check rate1 for year 2009 I should be able enable/disable checkbox for year 2009. Right now its doing for all the years.

    Thanks

    Kapil 

    Wednesday, February 10, 2016 5:05 PM
  • User632428103 posted

    Helo kapils573,

    if i well understand if status is empty the check box is disable ?

    here is it a new version make while my launch :

    code behind : 

        public partial class JqueryRepeaterCheckBox : System.Web.UI.Page
        {
            /// <summary>
            /// 
            /// </summary>
            /// <param name="sender"></param>
            /// <param name="e"></param>
            protected void Page_Load(object sender, EventArgs e)
            {
                //
                if (!IsPostBack)
                {
                    //
                    DataTable dt = CreateDataTable();
    
                    Repeater1.DataSource = dt;
                    Repeater1.DataBind();
                }
            }
    
    
            /// <summary>
            /// 
            /// </summary>
            /// <returns></returns>
            private DataTable CreateDataTable()
            {
                //
                DataTable dt = new DataTable();
    
                //
                dt.Columns.AddRange(new DataColumn[3] { new DataColumn("Year", typeof(int)), new DataColumn("Rate1", typeof(int)),new DataColumn("Status", typeof(string))});
    
                //
                dt.Rows.Add(2009, 1, "");
                dt.Rows.Add(2009, 2, "Approuved");
                dt.Rows.Add(2009, 5 ,"Approuved");
                dt.Rows.Add(2009, 6, "Approuved");
                dt.Rows.Add(2010,1, "");
                dt.Rows.Add(2010, 2, "Approuved");
                dt.Rows.Add(2010, 5, "Approuved");
                dt.Rows.Add(2011, 2, "");
                dt.Rows.Add(2011, 5, "Approuved");
           
                //
                return dt;
     
            }
            protected void Repeater1_ItemDataBound(object sender, RepeaterItemEventArgs e)
            {
                //
                if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
                {
                    //
                   Label lbl = (Label)e.Item.FindControl("lblStatus");
    
                   if(String.IsNullOrEmpty(lbl.Text))
                   {
                       //
                       CheckBox cbx = (CheckBox)e.Item.FindControl("chkRate1");
                       if (cbx != null)
                           cbx.Enabled = false;
    
                   }
                }
            }

    client :

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script src="../../../Scripts/jquery-2.0.3.js"></script>
        <script type="text/javascript">
            var initFirstTDValue = '';
            var otherTDValue = '';
            function check(checkBox)
            {
                browse(checkBox, $(checkBox).parents().closest('tr').find('td:first').text());
            }
            function browse(checkBox, firstCellValue)
            {
                //browse over rate 1 check box
                $("[id *=chkRate1]").each(function (e) 
                {
                    // get the name
                    var name = $(this).prop('id');
                    var chkChecked = $('#' + name).prop('checked');
    
    
                    // get the first cell value
                    otherTDValue = $(this).parents().closest('tr').find('td:first').text();
    
                    //
                    if (firstCellValue == otherTDValue)
                    {
                        if (checkBox.checked) {
                            if (!chkChecked) // it's checkbox is not check disabled it
                                $("#" + name).prop('disabled', true);
                        }
                        else
                        {
                            var status = $(this).parent().closest('tr').find("td:eq(2)").text();
                            if (status.toLowerCase().indexOf("approuved") >= 0) // if status is equal we disable id
                            {
                                if (!chkChecked)
                                    $("#" + name).prop('disabled', false);
    
                            }
                        }
                    }
                });
            }
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
        <asp:Repeater ID="Repeater1" runat="server" OnItemDataBound="Repeater1_ItemDataBound" >
            <HeaderTemplate>
                <table border="1">
                    <tr>
                    <td>YEAR</td>
                    <td>RATE 1</td>
                    <td>Status</td>
                    <td>check box rate 1</td>
                </tr>
        </HeaderTemplate>
        <ItemTemplate>
            <tr>
                <td>
                    <asp:Label ID="lblYear" runat="server" Text='<%# Eval("year") %>' />
                </td>
                <td>
                    <asp:Label ID="lblRate1" runat="server" Text='<%# Eval("Rate1") %>' />
                </td>
                <td>
                    <asp:Label ID="lblStatus" runat="server" Text='<%# Eval("status") %>' />
                </td>
                 <td>
                    <asp:CheckBox ID="chkRate1" runat="server" onclick="check(this);" />
                </td>
            </tr>
        </ItemTemplate>
            <FooterTemplate>
                </table>
            </FooterTemplate>
            </asp:Repeater>
        </form>
    </body>
    </html>

    i think it will help you ...better solution when you click on the chec box i look for all check box follow the same year and check all check box with status approuved

    if i uncheck i active all checkbox for the same year if status is approuved

    Hope this help guy

    Thursday, February 11, 2016 12:07 PM
  • User-436309264 posted

    Hi Jimmy,

    Your solution is helping me. I implemented your code and found one more scenario to handle in my application 

    When the page loads, I see that for a particular year 2009 i.e I see one check box checked for one particular rate and other check boxes for the year 2009 also  enabled. This other check boxes should be disabled as one checkbox is already checked. How do we handle this in jquery document ready function. 

    Please advice

    Kapil 

    Saturday, February 13, 2016 6:59 PM
  • User632428103 posted

    hello kapils573

    happy to read that's my sample has to help you :)

    Nice ..

    could you validate the post ?

    thanks guy

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, February 15, 2016 4:17 PM