We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

issue while creating tabs

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

3 Replies

KC Kasithangam C Syncfusion Team August 23, 2016 12:59 PM UTC

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,  

Please let us know if you need further assistance,  

Regards,  
Kasithangam 



CH Cholet August 24, 2016 09:42 AM UTC

Hello,
It works thank you !


KC Kasithangam C Syncfusion Team August 25, 2016 04:03 AM UTC

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 


Loader.
Live Chat Icon For mobile
Up arrow icon