Can't checkbox checked and visible false in the radgrid on client side.

8 posts, 0 answers
  1. Nagendra
    Nagendra avatar
    35 posts
    Member since:
    Jan 2011

    Posted 04 Jun 2011 Link to this post

    Hi All,
         I have one radgrid in that i have checkboxes,raddatepicker and radnumerictextbox.
         Attached is the screenshot of my radgrid.
        When i select raddatepicker i need to fill Percent complete radnumerictextbox with 100,completed checkbox checked
        and 99% complete checkbox uncheck and visible false on client side only.

     aspx page
     -----------------
    <
    telerik:RadGrid ID="RadGrid1" Skin="WebBlue" runat="server" AllowFilteringByColumn="true"
                        AutoGenerateColumns="false" ShowStatusBar="True" GridLines="None"
                        AllowPaging="true" PageSize="20" AllowSorting="True" onitemdatabound="RadGrid1_ItemDataBound">
                    <MasterTableView GroupLoadMode="Client">
                   <Columns>
                         <telerik:GridTemplateColumn UniqueName="Complete" HeaderText="Completed" AllowFiltering="false">
                            <ItemTemplate>
                                <asp:Panel ID="Panel1" runat="server" Width="2px">
                                    <asp:CheckBox ID="chkComplete" runat="server"/>
                                </asp:Panel>
                            </ItemTemplate>
                        </telerik:GridTemplateColumn>
                         <telerik:GridTemplateColumn UniqueName="gridActFinish" HeaderText="Actual Finish" AllowFiltering="false">
                         <ItemTemplate>
                           <telerik:RadDatePicker ID="actfinish" runat="server" Width="100px" MaxDate='<%# Convert.ToDateTime(Eval("early_start_display")).ToString("dd/MMM/yyyy") %>'
                           Calendar-ShowOtherMonthsDays="false" Calendar-ShowRowHeaders="false" DbSelectedDate='<%# Bind("actual_finish") %>' DateInput-DateFormat="MM/dd/yyyy">
                           <ClientEvents OnDateSelected ="actfinish_OnDateSelected" >
                           </ClientEvents>
                           </telerik:RadDatePicker>
                         </ItemTemplate>
                        </telerik:GridTemplateColumn>
                      <telerik:GridTemplateColumn UniqueName="perComplete" HeaderText="99% Complete" AllowFiltering="false">
                            <ItemTemplate>
                                <asp:Panel ID="Panel2" runat="server">
                                    <asp:CheckBox ID="Chkbox" runat="server"/>
                                </asp:Panel>
                            </ItemTemplate>
                        </telerik:GridTemplateColumn>
                        <telerik:GridTemplateColumn UniqueName="perComplete" HeaderText="Percent Complete" AllowFiltering="false">
                         <ItemTemplate>
                           <telerik:radnumerictextbox id="pct" runat="server" text='<%#Eval("pct") %>' minvalue="0" maxvalue="100" width="50px" FocusedStyle-BackColor="Yellow" NumberFormat-DecimalDigits="0">
                               <numberformat allowrounding="true" decimaldigits="4"/> 
                           </telerik:radnumerictextbox>
                         </ItemTemplate>
                        </telerik:GridTemplateColumn>
                           </Columns>
                    </MasterTableView>
                    </telerik:RadGrid>

      javascript
      --------------------------
      function actfinish_OnDateSelected(sender, args) {

                   var rdgrid = $find("<%=RadGrid1.ClientID %>");
                   var cell = sender.get_element().parentNode.parentNode;
                   var index = cell.parentNode.rowIndex;
                   var MasterTable = rdgrid.get_masterTableView();
                   var row = MasterTable.get_dataItems()[index - 3]; //getting row
                   var tbxAdopted = row.findControl("pct").set_value(100); //getting value of TextBox 'tbxAdopted'
                   var checkbox = row.findControl("chkComplete");
                   checkbox.checked = true;
               }
     in this action i am successfully filling value 100 in radnumerictextbox but i can't check the checkbox.

    Thanks in advance, Please help me this senario on client side only.

    Thanks,
    Nagendra.
  2. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 06 Jun 2011 Link to this post

    Hello Nagendra,

    Try using findElement() instead of findControl().

    Javascript:
    function actfinish_OnDateSelected(sender, args)
      
            var rdgrid = $find("<%=RadGrid1.ClientID %>");
            var cell = sender.get_element().parentNode.parentNode;
            var index = cell.parentNode.rowIndex;
            var MasterTable = rdgrid.get_masterTableView();
            var row = MasterTable.get_dataItems()[index - 3]; //getting row
            var checkbox = row.findElement("chkComplete");
            checkbox.checked = true;
        }

    Thanks,
    Princy.
  3. Nagendra
    Nagendra avatar
    35 posts
    Member since:
    Jan 2011

    Posted 06 Jun 2011 Link to this post

    Thanks Princy.... It's working great.
    But in my senario when i am selecting Actual Finish raddatepicker of radtreeview Lot2, Percent Complete filled with 100 and Completed checkbox checked in the below row. In the above part its working fine.
     
    JavaScript
    ------------------------
     function actfinish_OnDateSelected(sender, args) {
     
                   var rdgrid = $find("<%=RadGrid1.ClientID %>");
                   var cell = sender.get_element().parentNode.parentNode;
                   var index = cell.parentNode.rowIndex;
                   var MasterTable = rdgrid.get_masterTableView();
                   var row = MasterTable.get_dataItems()[index - 3]; //getting row
                   var checkbox = row.findElement("chkComplete");
                   checkbox.checked = true;
                   var tbxAdopted = row.findControl("pct").set_value(100);
                   var checperComp = row.findElement("Chkbox");
                   checperComp.checked = false;
                   checperComp.style.display = 'none';
               }
     
    i think my problem in row 'index'.
    Please give me the solution for this issue.
     
    Thanks,
    Nagendra.
  4. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 07 Jun 2011 Link to this post

    Hello Nagendra,

    One suggestion is to attach the event form server and pass the ItemIndex from there. Here is the sample code.
    C#:
    protected void RadGrid1_ItemCreated(object sender, GridItemEventArgs e)
       {
           if (e.Item is GridDataItem)
           {
               GridDataItem item = (GridDataItem)e.Item;
               RadDatePicker dtPkr = (RadDatePicker)item.FindControl("actfinish");
               dtPkr.ClientEvents.OnDateSelected = "function(sender,args){OnDateselected('"+e.Item.ItemIndex+"');}";
           }
     }

    Javascript:
    function OnDateselected(index)
      {
           var rdgrid = $find("<%=RadGrid1.ClientID %>");
           var MasterTable = rdgrid.get_masterTableView();
           var row = MasterTable.get_dataItems()[index];
           var checkbox = row.findElement("chkComplete");
           checkbox.checked = true;
       }

    Thanks,
    Shinu.
  5. Nagendra
    Nagendra avatar
    35 posts
    Member since:
    Jan 2011

    Posted 07 Jun 2011 Link to this post

    Hi Shinu,

     changed my code based on your reply.
    I am getting this error.
    Conversion from string "function(sender,args){OnDatesele" to type 'Double' is not valid.

    Please help me.

    Thanks,
    Nagendra.
  6. Nagendra
    Nagendra avatar
    35 posts
    Member since:
    Jan 2011

    Posted 10 Jun 2011 Link to this post

    Hi All,

        Please help me to resolve above problem...

    Thanks,
    Nagendra.
  7. Nagendra
    Nagendra avatar
    35 posts
    Member since:
    Jan 2011

    Posted 18 Jun 2011 Link to this post

    Hi Shinu,

    I resolved my problem with this change.
    datepickerAS.ClientEvents.OnDateSelected = "function(index, sender,e){actstart_DateSelected('" + e.Item.ItemIndex.ToString() + "');}"


    Thanks,
    Nagendra.
  8. Nagendra
    Nagendra avatar
    35 posts
    Member since:
    Jan 2011

    Posted 18 Jun 2011 Link to this post

    Hi Shinu,

    I resolved my problem with this change.
    datepickerAS.ClientEvents.OnDateSelected = "function(index, sender,e){actstart_DateSelected('" + e.Item.ItemIndex.ToString() + "');}"


    Thanks,
    Nagendra.
Back to Top