issue while creating tabs

[Cholet]

Hello,

I have a problem with Tabs. In my first page i have a Tab with an item. In this item there is a grid.
@(
            Html.EJ().Tab("TabMenu").Items(data =>
            {
data.Add().ID("TabListConsumer").Text("Consumer").ContentTemplate(@<div>

@(Html.EJ().Grid<ConsumerView>("gridConsumer")
.Datasource((IEnumerable<ConsumerView>)Model.myList)
                .AllowScrolling(true)
                .AllowSorting(true)
                .AllowMultiSorting(true)
                .AllowResizeToFit(true)
                .AllowResizing(true)
                .AllowFiltering(true)
                .FilterSettings(fs => fs.FilterType(FilterType.Menu))
                .IsResponsive(true)
                .EnableResponsiveRow(true)
                .Locale("fr-FR")

                .Columns(col =>
                {
col.Field("id").HeaderText("id").TextAlign(TextAlign.Left).Width(60).Add();
col.Field("name").HeaderText("Name").TextAlign(TextAlign.Left).Width(200).Add();
col.Field("firstName").HeaderText("firstName").TextAlign(TextAlign.Left).Width(200).Add();
                }).ClientSideEvents(ev => ev.RecordDoubleClick("ViewDetails")))
            </div>);
            }).ShowCloseButton(true)
)

Controller to show data :

ObjectUIConsumer objectUI = new ObjectUIConsumer();
objectUI.myList.Add(new ConsumerView(){id = "1", name = "Smith", firstName = "Jon"});
objectUI.myList.Add(new ConsumerView(){id = "2", name = "Smith", firstName = "Cindy"});
objectUI.myList.Add(new ConsumerView(){id = "3", name = "Adams", firstName = "Alison"});
objectUI.myList.Add(new ConsumerView(){id = "4", name = "Richard", firstName = "Rose"});
return View(objectUI);


When i double click on a record, i create a new tab, for detail informations.

 function ViewDetails()
    {
        var mysRowSelect = $("#gridConsumer").data("ejGrid").getSelectedRecords()[0];
        var action = "@Url.Action("Index", new { controller = "DetailConsumer", area = "", id = "MYID" })".replace("MYID", $("#gridConsumer").data("ejGrid").getSelectedRecords()[0].id);
        $("#TabMenu").ejTab("addItem", action, mysRowSelect.name + " " + mysRowSelect.firstName);
        $("#TabMenu").ejTab({ selectedItemIndex: $("#TabMenu").ejTab("instance")["anchors"].length - 1 });
    }

In this tab i also have a grid.
@(Html.EJ().Grid<ConsumerView>("gridFriend")
.Datasource((IEnumerable<ConsumerView>)Model.myFriendsList)
                .AllowScrolling(true)
                .AllowSorting(true)
                .AllowMultiSorting(true)
                .AllowResizeToFit(true)
                .AllowResizing(true)
                .AllowFiltering(true)
                .FilterSettings(fs => fs.FilterType(FilterType.Menu))
                .IsResponsive(true)
                .EnableResponsiveRow(true)
                .Locale("fr-FR")

                .Columns(col =>
                {
col.Field("id").HeaderText("id").TextAlign(TextAlign.Left).Width(60).Add();
col.Field("name").HeaderText("Name").TextAlign(TextAlign.Left).Width(200).Add();
col.Field("firstName").HeaderText("firstName").TextAlign(TextAlign.Left).Width(200).Add();
                }))

Controller to charge this view :
public ActionResult Index(string id)
        {
            ObjectUIFriends  myFriends = new ObjectUIFriends();
            myFriends.myFriendsList.Add(new ConsumerView() { id = "34", name = "Bacon", firstName = "Kevin" });
            myFriends.myFriendsList.Add(new ConsumerView() { id = "72", name = "Simpson", firstName = "Bart" });

            return PartialView(myFriends);
        }

My problem is that the second grid do not display in the  screen. There is no log in console.

In attachement, i have a project with my problem.

Thanks for you help,


Cholet

Attachment: TestTab01_3f015362.rar

[Kasithangam C]

Hi Cholet,  

Thanks for contacting Syncfusion support,  

We have analyzed your query and found the cause of the issue. If “UnobtrusiveJavaScriptEnabled” Mode is not enabled while rendering a control in the partial view, we need to specify @Html.EJ().ScriptManager() in the partial view page after the initializing the control. Please refer the below code snippet.  

Please refer the below code example,  

[DetailConsumer/Index.cshtml]  

<div>  

@(Html.EJ().Grid<ConsumerView>((string)id)  

…  

  

    </div>  

  

@Html.EJ().ScriptManager()           //It is necessary to refer the ScriptManager in the partial view page at the bottom  

  

  

Also when moving from one tab to another you have rendered the same grid with same ID. This will cause issue when rendering the third tab and makes the grid to not render. So we suggest you to change the grid ID which is in the partialView based on clicking the record in first grid.  

Please refer the below code example,  

[DetailConsumer/Index.cshtml]  

@{  

    var id = ViewBag.data;  

}  

  

<div>  

    My Freind List : <br />  

      

    

    @(Html.EJ().Grid<ConsumerView>((string)id)  

                .Datasource((IEnumerable<ConsumerView>)Model.myFriendsList)  

…  

                .Columns(col =>  

                {  

                    …  

                }))  

  

    </div>  

  

In the above code example, we have passed the value from the controller to PartialView page based on record clicking in the first tab of grid and assigned it to the grid as a string.  

Please refer the below code example for how we passed the value from controller to view,  

[DefaultConsumerController.cs]  

  

  public ActionResult Index(string id)  

        {  

            ObjectUIFriends myFriends = new ObjectUIFriends();  

            …  

            ViewBag.data = "gridFriends" + id;  

            return PartialView(myFriends);  

        }  

  

In the above code example, we have get the id value where we passed when double clicking the record and assigned it to the ViewBag.data and passed to view page.   

We have also modified your sample that can be downloaded from the below link,  

Link: http://www.syncfusion.com/downloads/support/forum/125521/ze/TestTab01-755282660  

Please let us know if you need further assistance,  

Regards,  

Kasithangam 

[Cholet]

Hello,

It works thank you !

[Kasithangam C]

Hi Cholet, 

 

Thanks for your update. Please let us know if you have further query. We will be happy to help you out. 

Regards, 

Kasithangam