issue with tab calling a page

[Cholet]

Hello,

I have a issue when i call a page in a tab.

In my main page i have a grid. When i double click on a row, a dialog appears, and, in this dialog, i have tabs. Each tab call a different page.

When i'm not putting the references  of syncfusion etc in a page called by a tab, i can see the button i put here. but, when i'm putting them, my tabs disappear and i don't have any error in my browser's console.

But i have a second grid appearing, so i think it may call again my main page but i don't know why because i'm not calling it.

I putting every time the same references so they are correct.

Does anyone have any idea to help me ?

Regards,

[Prasanna Kumar Viswanathan]

Hi Cholet, 

Thanks for contacting Syncfusion support. 

To provide a prompt solution, we need the following details 

 

1)      You have mentioned that you have tabs in the dialog. So, please confirm whether you are using 

ejTab or bootstrap tab? 

 

2)      Have you rendered a grid or button inside the tab? 

3)      You have mentioned that each tab call a different page. So, are you loading the tab using any partial views? 

4)      Code example of the grid and tab. 

 

5)      Essential Studio version details. 

 

6)      Provide information about the issue that you are facing in your sample. 

 

Regards, 

Prasanna Kumar N.S.V 

 

[Cholet]

Thank you for answering.

1/I'm using ejTab.

2/I put a button in the tab.

3/ I'm calling an entire page. I'm using the url parameter in "$("#myTab").ejTab("addItem", "Mypage", "Mypage");" to launch a action in my controller which load the page in the tab. 

4/

This is the code of my main cshtml page. There are my grid, my dialog and my tab in it.

    @(Html.EJ().Grid<SyncfusionTest.Models.Test>("myGrid").Datasource(Model).ClientSideEvents(events => events.RecordDoubleClick("Show"))
    .Columns(col =>
            {
                col.Field("P1").HeaderText("P1").HeaderTextAlign(TextAlign.Center).TextAlign(TextAlign.Left).Add();
                col.Field("P2").HeaderText("P2").HeaderTextAlign(TextAlign.Center).TextAlign(TextAlign.Left).Add();
            }))
    @{Html.EJ().Dialog("myDialog").Title("Dialog").ShowOnInit(false).Width("1000").ShowHeader(true).ContentTemplate
            (@<div>
            <div id="myTab">
                <ul></ul>
                <div id="Tab1"></div>
                <div id="Tab2"></div>                
            </div>
        </div>
).Render();}
    <script type="text/javascript">    
    function Show(sender) 
    {       
        $("#myTab").ejTab({ width: "950px" });
        if ($("#myTab").ejTab("getItemsCount") < 1) {
            $("#myTab").ejTab("addItem", "#Tab1", "Nothing");
            $("#myTab").ejTab("addItem", "Mypage", "Mypage");                     
        }     
        openDialog();
    }
    function openDialog() {
        $("#myDialog").ejDialog("open");
    }    
    </script>

5/I'm using version 14.1450.0.41

6/ When i double click on a row of my grid, my dialog appears. I have two tabs in it. The first one is empty, and when i click on the second one, after 2 seconds my tabs disappear and my grid is duplicated. 

In the attached file you have my controller, my views, my model and screenshots.

Regards,

Cholet

Attachment: Syncfusion_69db0a92.rar

[Seeni Sakthi Kumar Seeni Raj]

Hi Cholet, 

We are unable to reproduce the issue at our end. We have used your code example to create sample and followed your procedure to view the duplication of Grid. The sample can be downloaded from the following location. 

Sample: http://www.syncfusion.com/downloads/support/forum/124065/ze/Sample-1054519720.zip 

We could see that you are referring the CSS and scripts in multiple view pages which may also be the reason for an issue. So we suggest to refer the scrips and _layout.cshml alone and avoid jQuery conflict in any case. 

If you are still facing any issue, please provide following information to analyze and provide you solution as early as possibile. 

1)      Please check whether your project is referring multiple Scripts and try to avoid the jQuery conflict 

2)      If possible, replicate the issue in the attached sample and send back. 

Regards, 

Seeni Sakthi Kumar S. 

[Cholet]

Hello,

Indeed it works with your sample. I compared it with my solution and i found that i'm using the unobtrusive javascript and not you. So I modified your sample to add the unobtrusive and then i have my issue on your sample.

It's bigger then 30Mb so i put it in a .rar in two parts so i will do another post to send you the other part.

Regards,

Cholet

Attachment: MvcApplication66.part01_ce565cf2.rar

[Cholet]

Here is the second part of my .rar .

Attachment: MvcApplication66.part02_d1eedcd.rar

[Prasanna Kumar Viswanathan]

Hi Cholet, 

Sorry for the inconvenience caused. 

In the last updated sample we have refer the script files in both index.cshtml and Mypage.cshtml file. So, we suggest you to remove the script files from the Mypage.cshtml file and use ej.widget.init() method to render the button at partial view page when in unobtrusive mode. We also suggest you to load the partial View in the tab. 

Please find the code example and sample: 

Mypage.cshtml 

@Html.EJ().Button("button").Text("Just a button").ShowRoundedCorner(true).Size(ButtonSize.Normal) 

<script> 

    ej.widget.init(); 

</script> 

 

------------------------------------------------- 

HomeController 

public ActionResult MyPage() 

        { 

            return PartialView(); 

        } 

Sample: http://www.syncfusion.com/downloads/support/forum/124065/ze/MvcApplication66-244391104 

Regards, 

Prasanna Kumar N.S.V 

 

[Cholet]

Hello,

Don't worry, you couldn't guess that i use the unobtrusive.

It works with the partial view, thank you !

Regards,

Cholet

[Prasanna Kumar Viswanathan]

Hi Cholet,
 
We are happy that the provided solution working fine at your end.  

 

Please let us know if you need any further assistance.
 
Regards, 

Prasanna Kumar N.S.V