Tab strip control is not properly not working

5 posts, 0 answers
  1. Perfect
    Perfect avatar
    40 posts
    Member since:
    Sep 2010

    Posted 24 May 2012 Link to this post

    Hi,

      As my requirement I'm using Tab strip control. I put 2 tabs and each tab inside I put the "Rad Grid" here I want to perform Insert, update and Delete in grid. Every thing is fine for me. But I get one issue i.e..,  For example Tab1 and Tab2 2 tabs I have. Inside this Tab1 I set "Rad Grid" now when I click on "Add New Record" The rad grid comes in Edit mode, update and cancel link buttons is displaying. now I'm not enter or click anything in control and I want to go "Tab2".   this functionality is not working for me.
    Please help me in this issue. I we are using 2010 version.

    Advance Thanks

    I already check below link but I didn't get any proper solution to solve the problem.

    http://demos.telerik.com/aspnet-ajax/tabstrip/examples/applicationscenarios/dynamicpageview/defaultcs.aspx
    http://www.telerik.com/community/forums/winforms/tabstrip/tab-key-not-working-in-radtextbox-to-switch-to-the-next-radtextbox.aspx
  2. Dimitar Terziev
    Admin
    Dimitar Terziev avatar
    1268 posts

    Posted 28 May 2012 Link to this post

    Hello,

    Could you elaborate a bit more on what is the experienced behavior when you click on the second tab? Do you get any JavaScript errors or the tab is just not selected? Also please share the implementation that you are using so we could inspect it.

    Regards,
    Dimitar Terziev
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  3. Perfect
    Perfect avatar
    40 posts
    Member since:
    Sep 2010

    Posted 30 May 2012 Link to this post

    Hello Terziev,

      Thanks for your reply. I tell my exact requirement scenario. I have 2 tabs lets an example.
      Tab1 name is Emp and Tab2 name is Dept.
      Inside Emp Tab I put "Rad grid" and here I want to perform Insert Update and Delete functionality.
      now I have 5 emp records in Emp Tab1 and I want to update  one record (record name is "AAA"), so I click on "Edit" link button when you click on Edit button the  rad grid comes in Edit mode, update and cancel link buttons is displaying in "AAA" record. now I'm not enter /  click on any control just directly I want to click on "Deprt Tab2"  Tab2 is open again I click on Emp Tab1 What I observe is still the the record is displaying edit mode.(previously I click "Edit" link button right, still the record is displaying is edit mode).

      My problem is, first step : when I click on Emp Tab1 and one record is edit mode  now 
                              Second step: when you click on DeptTab2 and come back to click on Emp Tab1 still the 
                              record is displaying in edit mode.  I don't want to displaying record in edit mode in Emp Tab1.
       i.e.., In tab1 you want to think some records are modify and click on "Edit" link button the entire record row is displaying in Edit mode. you didn't enter any thing in textboxs and not click on "Update/Cancel" link button just you click on Tab2 agian if you click on Tab1 still the record is displaying in Edit mode.this is my exactly problem. I don't want to display the record in edit mode.

    I hope you can understand. Please give solution asap.

    Thanks in  Advance.
    Mr. Perfect 
  4. Dimitar Terziev
    Admin
    Dimitar Terziev avatar
    1268 posts

    Posted 01 Jun 2012 Link to this post

    Hi,

    In order to achieve the desired functionality the grid edit form should be closed when the user navigate back to the first tab. In order to achieve this functionality subscribe to the client OnClientTabSelected event of the RadTabStrip and use the following implementation of the event handler function:
    function OnClientTabSelected(sender, eventArgs) {
     
                  var tab = eventArgs.get_tab();
                  var grid = $find("RadGrid1");
     
                  if (tab.get_text() == "Emp ") {
     
                       if(grid.get_editItems().length>0)
                           grid.get_masterTableView().fireCommand("Cancel","");
     
                  }
               }


    Regards,
    Dimitar Terziev
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  5. Perfect
    Perfect avatar
    40 posts
    Member since:
    Sep 2010

    Posted 02 Jun 2012 Link to this post

    Hi,
     
       Thank you for ur reply and ur support. Actually I'm new to use this control .

     still I getting javascript error :  when I debug the script below specify lines getting error
               

    if (grid.get_editItems().length > 0)

     

    grid.get_masterTableView().fireCommand("Cancel", "");

        This is error message:  "Microsoft JScript runtime error: Object doesn't support this property or method"
    For you reference below I mention  Script file and also .aspx file.

     

    <script type="text/javascript">

       function OnClientTabSelected(sender, eventArgs) {//debugger;

              var tab = eventArgs.get_tab();

              //alert(tab.get_text());

             if (tab.get_text() == "Emp") {

             var checkNull = document.getElementById('ctl00_ContentPlaceHolder1_Emp_userControl_rgEmp');

               if (checkNull != null) {

               var grid = $find('ctl00_ContentPlaceHolder1_Emp_userControl_rgEmp');

                  if (grid.get_editItems().length > 0)

                       grid.get_masterTableView().fireCommand("Cancel", "");

                    }

                 }

           if (tab.get_text() == "Dept") {

             var checkNull = document.getElementById('ctl00_ContentPlaceHolder1_Dept_userControl_rgDept');

              if (checkNull != null) {

                var grid = $find('ctl00_ContentPlaceHolder1_Dept_userControl_rgDept');

                   if (grid.get_editItems().length > 0)

                      grid.get_masterTableView().fireCommand("Cancel", "");

                }
            }
    </script>

    ** aspx  page 
            <table style="text-align: center; width: 100%">

                < tr>  

             <td align="center">

                     <asp:Panel runat="server" BorderStyle="Double">

                   <telerik:RadTabStrip OnClientTabSelecting="onTabSelecting" ID="RadTabStrip1" SelectedIndex="0"

                      CssClass="tabStrip" runat="server" MultiPageID="RadMultiPage1" Skin="Office2007"

                     OnTabClick="RadTabStrip1_TabClick" Orientation="HorizontalTop" Font-Size="X-Large"

                      CausesValidation="false" Font-Bold="true" Font-Italic="true" 
                    OnClientTabSelected
    ="OnClientTabSelected"> 

              </telerik:RadTabStrip>

                 <asp:Panel runat="server" BorderStyle="Ridge">

                        <telerik:RadMultiPage ID="RadMultiPage1" runat="server" SelectedIndex="0"
                   OnPageViewCreated
    ="RadMultiPage1_PageViewCreated"  CssClass="multiPage">

                         </telerik:RadMultiPage>

                   </asp:Panel
          </asp:Panel
    </td>

     </tr>

     </table>

     reference site http://demos.telerik.com/aspnet-ajax/tabstrip/examples/applicationscenarios/loadondemand/defaultcs.aspx
    I implemented Tab strip controls.
    My Exact requirement:
      here I'm using userControls in the tabs.Emp and Dept are 2 user controls. so, as per my requirement Emp and Dept is 2 tabs,In Emp tab bind Emp details and Dept tab bind Dept details here I'm using "Load on Demand" concept. on the fly grids are binding. now in Dept Tab am I click "Add New" link button in grid  columncontrols are display in edit mode and also with update, cancel link button. i didn't enter anything in control and not click on any link button Immediately I click on  "EMP"tab  inside the grid is display with data. now  when I click on "Dept" tab still controls are displaying in editmode. This is not I want . when I move to next tab automatically  edit mode controls are cancelled.
     

    Please help me in this issue. :)

    Advance Thanks.
    Mr.Perfect. 

Back to Top