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. (Last updated on : November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

issue while creating tabs

Thread ID:

Created:

Updated:

Platform:

Replies:

125521 Aug 22,2016 03:35 PM UTC Aug 25,2016 04:03 AM UTC ASP.NET MVC 3
loading
Tags: Tab
Cholet
Asked On August 22, 2016 03:35 PM UTC

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 [Syncfusion]
Replied On 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 


Cholet
Replied On August 24, 2016 09:42 AM UTC

Hello,
It works thank you !

Kasithangam C [Syncfusion]
Replied On 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 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;