Add/update with MutuallyExclusiveExtender RSS

• • Reply
  

  I-Weedy

  Member

  67 Points

  239 Posts

  Add/update with MutuallyExclusiveExtender

  Apr 09, 2012 10:18 PM|LINK

  I have a MutiallyExclusivExtender that works through checkboxes which resides within a GridView.These Checkboxes are not visable and selection is triggered through the press of an image (like a button). Each checkbox has a seperate value attached to it (1 to 4).

  In the gridview I have a series of rows which i would like to select the correct value in each row and after Ive selected add/update on the click of one button.

  Anybody ever done this before?

  SOURCE PAGE

  <asp:UpdatePanel ID="UpdatePanel2" runat="server">
     <ContentTemplate>
      <asp:GridView ID="GridView1" runat="server" DataSourceID="SqlDataSource1" AutoGenerateColumns="False"
          CssClass="rounded-corner" DataKeyNames="tt_id,s_id,n_id,o_id" ShowFooter="true" >
          <Columns>
          
   
              <asp:BoundField DataField="serviceNo" HeaderText="No." SortExpression="serviceNo"
                  ItemStyle-Width="60px" ReadOnly="true" HeaderStyle-Font-Bold="true"  >
                  <ItemStyle Width="60px" ></ItemStyle>
              </asp:BoundField>
              <asp:BoundField DataField="forename" HeaderText="First Name" SortExpression="forename"
                  ItemStyle-Width="80px" ReadOnly="true" HeaderStyle-Font-Bold="true">
                  <ItemStyle Width="80px" ></ItemStyle>
              </asp:BoundField>
              <asp:BoundField DataField="surname" HeaderText="Surname" SortExpression="surname"
                  ItemStyle-Width="80px" ReadOnly="true" HeaderStyle-Font-Bold="true">
                  <ItemStyle Width="80px" ></ItemStyle>
              </asp:BoundField>
               
              <asp:TemplateField HeaderText="Results" SortExpression="outcome" HeaderStyle-Font-Bold="true" >
                  <EditItemTemplate>
        
                  <asp:CheckBox ID="CheckBoxTick" runat="server" Text="" CssClass="chkLine" checked='<%# Eval("o_id").ToString().Equals("1") %>' />
                      
                          <asp:CheckBox ID="CheckBoxExcl" runat="server" Text="" CssClass="chkLine" checked='<%#Eval("o_id").ToString().Equals("2") %>'  />
                    
                          <asp:CheckBox ID="CheckBoxCross" runat="server" Text="" CssClass="chkLine" checked='<%#Eval("o_id").ToString().Equals("3") %>' />
                      
                          <asp:CheckBox ID="CheckBoxAbs" runat="server" Text="" CssClass="chkLine" checked='<%#Eval("o_id").ToString().Equals("4") %>' />
                 
               
  
             
             
             <ajaxToolkit:MutuallyExclusiveCheckBoxExtender ID="MutuallyExclusiveCheckBoxExtender1" runat="server" TargetControlID="CheckBoxTick" Key="MyCheckboxes" />
             <ajaxToolkit:MutuallyExclusiveCheckBoxExtender ID="MutuallyExclusiveCheckBoxExtender2" runat="server" TargetControlID="CheckBoxExcl" Key="MyCheckboxes"/>
             <ajaxToolkit:MutuallyExclusiveCheckBoxExtender ID="MutuallyExclusiveCheckBoxExtender3" runat="server" TargetControlID="CheckBoxCross" Key="MyCheckboxes"/>
              <ajaxToolkit:MutuallyExclusiveCheckBoxExtender ID="MutuallyExclusiveCheckBoxExtender4" runat="server" TargetControlID="CheckBoxAbs" Key="MyCheckboxes"/>
              
  
              
              <ajaxToolkit:ToggleButtonExtender ID="ToggleButtonExtender1" runat="server"
                  TargetControlID="CheckBoxTick" ImageHeight="100" Imagewidth="100" UncheckedImageUrl="~/images/tickFade_50.png" CheckedImageUrl="~/images/tick_50.png" CheckedImageAlternateText="Checked" UncheckedImageAlternateText="Unchecked">
              </ajaxToolkit:ToggleButtonExtender>
              <ajaxToolkit:ToggleButtonExtender ID="ToggleButtonExtender2" runat="server"
                  TargetControlID="CheckBoxExcl" Imageheight="100" Imagewidth="100" UncheckedImageUrl="~/images/excl_markFade_50.png" CheckedImageUrl="~/images/excl_mark_50.png" CheckedImageAlternateText="Checked" UncheckedImageAlternateText="Unchecked">
              </ajaxToolkit:ToggleButtonExtender>
              <ajaxToolkit:ToggleButtonExtender ID="ToggleButtonExtender3" runat="server"
                  TargetControlID="CheckBoxCross" Imageheight="100" Imagewidth="100" UncheckedImageUrl="~/images/crossFade_50.png" CheckedImageUrl="~/images/cross_50.png" CheckedImageAlternateText="Checked" UncheckedImageAlternateText="Unchecked">
              </ajaxToolkit:ToggleButtonExtender>
               <ajaxToolkit:ToggleButtonExtender ID="ToggleButtonExtender4" runat="server"
                  TargetControlID="CheckBoxAbs" Imageheight="100" Imagewidth="100" UncheckedImageUrl="~/images/absentFade_50.png" CheckedImageUrl="~/images/absent_50.png" CheckedImageAlternateText="Checked" UncheckedImageAlternateText="Unchecked">
              </ajaxToolkit:ToggleButtonExtender>
             
                      
                  </EditItemTemplate>
                  <ItemTemplate>
       <asp:Image ID="imgStatus" runat="server" ImageURL='<%# GetImage(CType(Eval("o_id"),Integer)) %>' />
                      <%--<asp:Label ID="Label2" runat="server" Text='<%# Bind("o_id") %>'></asp:Label>--%>
                      
                  </ItemTemplate>
                  <ItemStyle Width="67px" />
              </asp:TemplateField>
              <asp:TemplateField HeaderText="Notes" SortExpression="notes" ItemStyle-Width="" HeaderStyle-Font-Bold="true">
                  <EditItemTemplate>
                      <asp:TextBox ID="TextBox1" runat="server" TextMode="MultiLine" Text='<%#Eval("notes")%>'></asp:TextBox>
                  </EditItemTemplate>
                  <ItemTemplate>
                      <asp:Label ID="Label1" runat="server" Text='<%# Eval("notes")%>'></asp:Label>
                  </ItemTemplate>
              </asp:TemplateField>
          </Columns>
         
          
      </asp:GridView>               
        </ContentTemplate>
      </asp:UpdatePanel>    

  CODEBEHIND

   Public Shared Function GetImage(ByVal value As Integer) As String
          If value = 1 Then
              Return "~/Images/tick_50.png"
          ElseIf value = 2 Then
  
              Return "~/Images/excl_mark_50.png"
          ElseIf value = 3 Then
              Return "~/Images/cross_50.png"
              ElseIf value = 4 Then
              Return "~/Images/absent_50.png"
  
  End If
      End Function
     

• • Reply
  

  Song-Tian - ...

  All-Star

  43705 Points

  4304 Posts

  Microsoft

  Re: Add/update with MutuallyExclusiveExtender

  Apr 11, 2012 09:46 AM|LINK

  I-Weedy

  selection is triggered through the press of an image (like a button).

  Hi,

  You should use an imagebutton to do that. And then set the button as trigger of updatepanel.

  For more details of updatepanel, please refer to: http://msdn.microsoft.com/en-us/library/bb386454.aspx.

  Please mark the replies as answers if they help or unmark if not.
  Feedback to us
  
  Develop and promote your apps in Windows Store
  
• • Reply
  

  I-Weedy

  Member

  67 Points

  239 Posts

  Re: Add/update with MutuallyExclusiveExtender

  Apr 11, 2012 04:39 PM|LINK

  How does that work with the toggle effect?

• • Reply
  

  Song-Tian - ...

  All-Star

  43705 Points

  4304 Posts

  Microsoft

  Re: Add/update with MutuallyExclusiveExtender

  Apr 13, 2012 06:59 AM|LINK

  Hi,

  You could do that with js. Just have a try.

  Please mark the replies as answers if they help or unmark if not.
  Feedback to us
  
  Develop and promote your apps in Windows Store
  
  • Marked as answer by I-Weedy on May 04, 2012 01:44 PM
• • Reply
  

  I-Weedy

  Member

  67 Points

  239 Posts

  Re: Add/update with MutuallyExclusiveExtender

  Apr 13, 2012 09:37 AM|LINK

  Do you have any code or tutorial tios to get me started?

• • Reply
  

  Song-Tian - ...

  All-Star

  43705 Points

  4304 Posts

  Microsoft

  Re: Add/update with MutuallyExclusiveExtender

  Apr 13, 2012 09:39 AM|LINK

  Hi,

  Please refer to: http://www.w3schools.com/.

  Please mark the replies as answers if they help or unmark if not.
  Feedback to us
  
  Develop and promote your apps in Windows Store
  
• • Reply
  

  I-Weedy

  Member

  67 Points

  239 Posts

  Re: Add/update with MutuallyExclusiveExtender

  Apr 14, 2012 09:00 AM|LINK

  Okay I've followed your advice and come up with this quite simple but effective way of replacing the terrible MutuallyExclusiveExtender

  Now I have 2 issues;

  1. Through the code below how do I replace the radio button as the way I select with the image? (hide radio buttons and use image)

  2. Why will this not work in a MasterPage?

  <head runat="server">
      <title></title>
        <script type="text/javascript" src="../Scripts/jquery-1.6.1.min.js"></script>
  <script type="text/javascript">
      $(document).ready(function () {
          $("input:radio[name=rdImg]").change(function () {
              if (this.value == "1") {
  
                  $("#imgOne").attr(
                          'src', '../images/tick.png'
                      );
  
              }
              else if (this.value == "2") {
  
                  $("#imgOne").attr(
                          'src', '../images/excl_mark.png'
                      );
              }
              else if (this.value == "3") {
  
                  $("#imgOne").attr(
                          'src', '../images/cross.png'
                      );
              }
              else if (this.value == "4") {
  
                  $("#imgOne").attr(
                          'src', '../images/absent.png'
                      );
              }
          });
      });
      </script>
  </head>
  <body>
      <form id="form1" runat="server">
      <div>
   
  
   
  <asp:Label ID="Label1" runat="server" Text="Label"><input name="rdImg" type="radio" value="1" id="option1" />Tick</asp:Label><br />
  <asp:Label ID="Label2" runat="server" Text="Label"><input name="rdImg" type="radio" value="2" id="option2" />Excl Mark</asp:Label><br />
  <asp:Label ID="Label3" runat="server" Text="Label"><input name="rdImg" type="radio" value="3" id="option3"  />Cross</asp:Label><br />
  <asp:Label ID="Label4" runat="server" Text="Label"><input name="rdImg" type="radio" value="4" id="option4"  />Absent</asp:Label><br />
     
  <asp:Image ID="imgOne" runat="server" />
      </div>
      </form>
  </body>
  </html>

  Really need this to work so I can use in a GridView as an edit select method.

• • Reply
  

  Song-Tian - ...

  All-Star

  43705 Points

  4304 Posts

  Microsoft

  Re: Add/update with MutuallyExclusiveExtender

  Apr 16, 2012 07:04 AM|LINK

  Hi,

  If you have any question, please debug with IE Developer Tools.

  Please mark the replies as answers if they help or unmark if not.
  Feedback to us
  
  Develop and promote your apps in Windows Store