1. Home
  2. Forum
  3. ASP.NET Core
  4. Add tab items onClick

Add tab items onClick

Hi,
I try to add a new tab item in a current TabFeatures view and without refresh the page containing :

*Another view by clicking in a navbar item 
*A lane details by DoubleClicking in a Treegrid lane .

Can u send me a sample based on this two file? Thanks.

Also don't know why when I still put all divs sizes to percentage it keeps given me higher height size on every single view making the scroll apear in my browser.

Regards,
Kalai Sirajeddine

Attachment: TabFeaturesand_Layout_6aac81ea.7z

34 Replies
KR Keerthana Rajendran Syncfusion Team January 19, 2018 11:56 AM UTC

Hi Kalai, 
 
Query : I try to add a new tab item in a current TabFeatures view and without refresh the page containing : 
 
*Another view by clicking in a navbar item  
 
We have prepared a sample to add item in current view and load content from another partialView page through url parameter of addItem method as shown below 
 
<button id="add" onclick="btnClick()">Add new tab item</button> 
function btnClick() { 
            var tabobj = $("#tabSample").data("ejTab"); 
            var index = tabobj.items.length; 
            tabobj.addItem("/Home/TabContent", "New Item", index,"","new"); 
 
        } 
 
 
Please download the sample from: 
 
 
Query: A lane details by DoubleClicking in a Treegrid lane .Can u send me a sample based on this two file? 
 
We couldn’t get a clear understanding on your query, please provide us some clear details on your requirement. 
 
Query: Also don't know why when I still put all div sizes to percentage it keeps given me static height size on every single view making the scroll appear in my browser. 
 
Based on the page content scroller  is added in browser and based on the content inside splitter scroller is added to splitter.  
 
Regards, 
Keerthana 


KS Kalai Sirajeddine January 19, 2018 02:22 PM UTC

Hi Keerthana,

Thanks for the sample it's helping me a lot.

-What I meant by " A lane details by DoubleClicking in a Treegrid lane " is by DoubleClicking in a BusinessObject ( one random lane ) in the TreeGrid that we see in the Tab named " Book1 ", a new tab is created and its containing all the object Attributes, even the ones that are not visible in the TreeGrid, so it can be modified (or added by clicking in the add button in the TreeGrid) than automatically closed when saving changes (or confirm adding the new BusinessObject ).

-When i put the Div that contain the tab at height:100% it gives me a higher height than my browser page, issue solved now by using "Viewport Height".

-I have some questions about the sample:

*Dindn't get the utility of Content.cshtml inside the Home Folder

*" var tabobj = $("#tabSample").data("ejTab"); " , I dont understand the meaning or where come from the " ejTab "

*I changed the" Content loaded from partial view page on tab click " by the Same TreeGrid in my Tab but Tab sizes changed a bit ( worse when I did it in my current project ) and the TreeGrid is not visible.


Thanks for your help.

Regards,
Kalai Sirajeddine

KR Keerthana Rajendran Syncfusion Team January 22, 2018 01:02 PM UTC

Hi Kalai, 
 
Query 1: What I meant by " A lane details by DoubleClicking in a Treegrid lane " is by DoubleClicking in a BusinessObject ( one random lane ) in the TreeGrid that we see in the Tab named " Book1 ", a new tab is created and its containing all the object Attributes, even the ones that are not visible in the TreeGrid, so it can be modified (or added by clicking in the add button in the TreeGrid) than automatically closed when saving changes (or confirm adding the new BusinessObject ). 
 
In TreeGrid, we have dialog editing support to add/update record when double-clicked on it. To enable this feature set edit mode as “DialogEditing” in EditSettings.  
Please refer to the following code snippet,  
<ej-tree-grid id="TreeGridContainer"  
      <e-tree-grid-edit-settings edit-mode="DialogEditing" />  
>  
</ ej-tree-grid>  
  
 
Query 2: *Didn't get the utility of Content.cshtml inside the Home Folder 
 
Content.cshtml is an empty partial view page added just for testing purpose. You can remove this page from the sample  
 
Query 3: var tabobj = $("#tabSample").data("ejTab");  
 
The above code is used for getting tab instance through JavaScript code using tab control id and you can access properties and methods of tab using this instance. 
 
Query 4: I changed the" Content loaded from partial view page on tab click " by the Same TreeGrid in my Tab but Tab sizes changed a bit ( worse when I did it in my current project ) and the TreeGrid is not visible. 
 
During load time, the TreeGrid will be rendered inside the hidden element of tab control. Hence, the control width and height will not be updated properly. To overcome this issue, we need to update the “SizeSettings” of TreeGrid once we switched to the TreeGrid tab.    
In the Tab control, we have an event called “Item-Active”. It will be triggered when we switch the tab. In this event we have updated the TreeGrid control size properly.   
Please refer to the following code snippet,  
<ej-tab item-active="itemActive" >  
</ ej-tab>  
  
<script type="text/javascript">   
function itemActive(args) {   
            //returns current active index.   
            if (args.activeIndex == 1) {   
                var obj = $("# TreeGridContainer ").data("ejTreeGrid");   
                if (obj) {   
                    obj.setModel({ "sizeSettings": { "height": "350px", "width": "100%" } });   
                }   
            }   
        }       
</script>   
  
Regards, 
Keerthana. 
 


KR Keerthana Rajendran Syncfusion Team January 23, 2018 12:54 PM UTC

Hi Kalai, 
Query 1: First, I'm currently using the DialogEditing but like i said I can’t edit hidden attributes with this method. Maybe there's a way you could tell me about it, either way I have to go back to my previous method wich is by doubleclicking, a newTab appear with all attributes (even those we don't see in the treegrid) that can be modified (or added).  
Answer: In TreeGrid, we have dialog template support to customize our own fields. By using this template support, we can add required columns in JsRender template.  
Please refer following code snippet,  
<ej-tree-grid id="TreeGridContainer"  
      <e-tree-grid-columns>  
           //…   
            <e-tree-grid-column field="Duration" header-text="Duration" edit-type="Numeric" visible="false"  />  
</e-tree-grid-columns>  
<e-tree-grid-edit-settings edit-mode="DialogEditing" dialog-editor-template-id="#template" />  
</ej-tree-grid>  
  
<script type="text/x-jsrender" id="template">  
    <div>  
        <b>Task Details</b>  
        <table>  
            <tr>  
                <td style="text-align: right;padding:10px;">  
                    Task ID  
                </td>  
                <td style="text-align: left;padding:10px;">  
                    <input id="TreeGridContainerTaskId" name="TaskId" value="{{: TaskId}}" />  
                </td>  
                <td style="text-align: right;padding:10px;">  
                    Task Name  
                </td>  
                <td style="text-align: left;padding:10px;">  
                    <input id="TreeGridContainerTaskName" name="TaskName" value="{{: TaskName}}" class="e-field e-ejinputtext" style="width: 100%; height: 100x;" />  
                </td>  
            </tr>  
            <tr>  
                <td style="text-align: right;padding:10px;">  
                    Start Date  
                </td>  
                <td style="text-align: left;padding:10px;">  
                    <input type="text" id="TreeGridContainerFilterStartDate"  name="FilterStartDate" value="{{: FilterStartDate}}" />  
                </td>  
                <td style="text-align: right;padding:10px;">  
                    End Date  
                </td>  
                <td style="text-align: left;padding:10px;">  
                    <input id="TreeGridContainerFilterEndDate" name="FilterEndDate" value="{{: FilterEndDate}}" />  
                </td>  
            </tr>  
            <tr>  
                <td style="text-align: right;;padding:10px;">  
                    Duration  
                </td>  
                <td style="text-align: left;padding:10px;">  
                    <input id="TreeGridContainerDuration" name="Duration"  value="{{: Duration}}" />  
                </td>  
                <td style="text-align: right;padding:10px;">  
                    Progress  
                </td>  
                <td style="text-align: left;padding:10px;">  
                    <input id="TreeGridContainerProgress" name="Progress" type="number"  value="{{: Progress}}" />  
                </td>  
            </tr>  
        </table>  
    </div>  
</script>  
   
Query 2: For the Item-Active function, what it's actually doing is that its adding the content of the second Tab( index=1) to all my other tabs when switching betwen all of them even before try adding the new tab without considering the input sizes in the function or resolving my current problem. The problem is not the treegrid, it's same issue even with an empty TabContent.cshtml 
In previous update,  we have provided work around for setting width and height for treegrid control during itemActive event only for TreeGrid rendered inside index 1 (Book1). And as we have checked a condition (args.activeIndex==1) inside item active event the property will be set for TreeGrid only inside index 1 and this will not  affect any other tab content. Please provide us details on whether you are facing issue with existing treeGrid in index 1 or newly added item through addItem method. Also, provide us some video or screenshot to reproduce the issue in our end along with reproducing steps so that it will be helpful for us to validate and provide solution. 
Query 3: Last prob existing in the project is that i set show-close-button="true" and it's visible but it won't work unless i remove enable-tab-scroll="true" 
We checked this issue in the attached sample and close button is added for tab items with or without enable-tab-scroll= “true”. Please provide us video or reproducing steps to reproduce the issue in our end. 
 
Regards, 
Keerthana. 


KS Kalai Sirajeddine January 23, 2018 01:08 PM UTC

Hi Keerthana,

Thanks for answer. First, I'm currently using the DialogEditing but like i said I cant edit hidden attributes with this method. Maybe there's a way you could tell me about it, either way I have to go back to my previous method wich is by doubleclicking, a newTab appear with all attributes (even those we don't see in the treegrid) that can be modified (or added).

For the Item-Active function, what it's actually doing is that its adding the content of the second Tab( index=1) to all my other tabs when switching betwen all of them even before try adding the new tab without considering the input sizes in the function or resolving my current problem. The prolem is not the treegrid, it's same issue even with an empty TabContent, Actually it's the header who get higher width(from 100%(=1349px) to 1750px).
 
Here's the project so you can see clearly what the problem is.

Last prob existing in the project is that i set show-close-button="true" and it's visible but it won't work unless i remove enable-tab-scroll="true".

Regards,
Kalai Sirajeddine

Attachment: sample_tab_fa295c9f.7z

KS Kalai Sirajeddine January 24, 2018 08:15 AM UTC

Hi Keerthana,

Sorry for the inconvenience caused. I was editing my message when you sent the reply.

Query1: I understand from what you sent that i can't create a tab to add or edit so I will go with this method.

Query2: "this will not  affect any other tab content. ", you mean the sample content but in the project I've sent it has this issue and I still can't see the TreeGrid that I put in TabContent.

Query3: I know that the button is added( I said it's visible) but I said its not working :
Uncaught TypeError: Cannot read property 'css' of undefined
    at Object._executeBackwardScrolling (ej.web.all.min.js:10)
    at Object._tabDeleteClick (ej.web.all.min.js:10)
    at HTMLDivElement. (ej.web.all.min.js:10)
    at HTMLDivElement.dispatch (jquery.js:5201)
    at HTMLDivElement.elemData.handle (jquery.js:5009)

You have the project, please test the issues on it before I create a video.

Regards,
Kalai Sirajeddine

KR Keerthana Rajendran Syncfusion Team January 24, 2018 03:06 PM UTC

Hi Kalai, 
 
Query2: "this will not  affect any other tab content. ", you mean the sample content but in the project I've sent it has this issue and I still can't see the TreeGrid that I put in TabContent. 
 
As you have rendered TreeGrid inside partial view page you need to refer script manager in the page for proper rendering of controls. Please refer to the below code 
 
 
@model sample_creator_design2.Controllers.TabController 
 
    <ej-tree-grid id="TreeGridContainer1" datasource="ViewBag.datasource" 
                  allow-sorting="true" 
                  allow-filtering="true" 
                  allow-paging="true" 
                  child-mapping="Children" tree-column-index="1" is-responsive="true"> 
        <e-tree-grid-columns> 
            <e-tree-grid-column field="TaskId" header-text="Task Id" 
                                allow-filtering="true" 
                                allow-editing="false" 
                                edit-type="Numeric" /> 
            <e-tree-grid-column field="TaskName" header-text="Task Name" edit-type="String" /> 
            <e-tree-grid-column field="FilterStartDate" header-text="Start Date" edit-type="DateTimePicker" filter-edit-type="DateTimePicker" format="{0:MM/dd/yyyy hh:mm tt}" /> 
            <e-tree-grid-column field="FilterEndDate" header-text="End Date" edit-type="DateTimePicker" filter-edit-type="DateTimePicker" format="{0:MM/dd/yyyy hh:mm tt}" /> 
            <e-tree-grid-column field="Duration" header-text="Duration" edit-type="Numeric" /> 
            <e-tree-grid-column field="Progress" header-text="Progress" edit-type="Numeric" /> 
            <e-tree-grid-column field="Progress" header-text="Progress" edit-type="Numeric" /> 
            <e-tree-grid-column field="Progress" header-text="Progress" edit-type="Numeric" /> 
            <e-tree-grid-column field="Progress" header-text="Progress" edit-type="Numeric" /> 
            <e-tree-grid-column field="Progress" header-text="Progress" edit-type="Numeric" /> 
        </e-tree-grid-columns> 
        <e-tree-grid-page-settings page-size="20" page-count="5"></e-tree-grid-page-settings> 
        <e-tree-grid-size-settings width="100%" height="84vh" /> 
        <e-tree-grid-edit-settings allow-deleting="true" allow-adding="true" 
                                   allow-editing="true" 
                                   row-position="AboveSelectedRow" edit-mode="DialogEditing" /> 
        <e-tree-grid-toolbar-settings show-toolbar="true" toolbar-items="ViewBag.toolbarItems"></e-tree-grid-toolbar-settings> 
    </ej-tree-grid> 
    <ej-script-manager></ej-script-manager> 
 
 
 
Query 3: I know that the button is added( I said it's visible) but I said its not working : 
Uncaught TypeError: Cannot read property 'css' of undefined 
    at Object._executeBackwardScrolling (ej.web.all.min.js:10) 
    at Object._tabDeleteClick (ej.web.all.min.js:10) 
    at HTMLDivElement. (ej.web.all.min.js:10) 
    at HTMLDivElement.dispatch (jquery.js:5201) 
    at HTMLDivElement.elemData.handle (jquery.js:5009) 
 
We were able to reproduce the issue in our end. This issue occurs due to 100% width set for ejtab. Due to this scroller on the right side is not positioned correctly. Kindly, remove this width from the sample to resolve this issue  
 
We have attached modified sample in the below link 
 
 
 
Regards, 
Keerthana. 
 
 
 


KS Kalai Sirajeddine January 26, 2018 02:51 PM UTC

Hi Keerthana,

As you said, I removed the width on the ej-tab but still not working. However it's true that the right scroll button must be seen to make close button work.
Actually when I remove the width it becomes auto wich is same as 100% that's why it's still not working, but when I put width to 30% reducing enouth the header to make scroll button appear i can delete tabs. But 30% width is not a solution.

There's also a problem in dialog-editor-template, dates can't be changed or edited. 

For the add tab issue, when i referred script manger in the page it worked. I can now see the treegrid but there is still the changing sizes problem.
Like I said, when I add a tab, the header get higher width(from 1349px(100%) to 1750px) and all tab-items lose some height and don't fill the Tab anymore making the tab header behind content template when i scroll inside the Tab.
I'm trying to make a responsive application, that's why I'm focusing on sizes and not using "px", only "%" and "vh". Having some sizes issues on mobile view as well. I've sent some images before and after adding a tab so you can see clearly what the problem is.

Thanks for help.

Regards,
Kalai Sirajeddine

Attachment: Size_issues_89c7a4a7.7z

KR Keerthana Rajendran Syncfusion Team January 26, 2018 02:55 PM UTC

Hi Kalai, 
 
Query: As you said, I removed the width on the ej-tab but still not working. However it's true that the right scroll button must be seen to make close button work. Actually when I remove the width it becomes auto wich is same as 100% that's why it's still not working, but when I put width to 30% reducing enouth the header to make scroll button appear i can delete tabs. But 30% width is not a solution 
 
We have added scroller in tab based on the items added for tab. When  invisible tab items are present scroller will be added on left or right end. When we set a width of 100% the items are added within this width and scroller is not visible within this width. 
 
Query: Like I said, when I add a tab, the header get higher width(from 1349px(100%) to 1750px) and all tab-items lose some height and don't fill the Tab anymore making the tab header behind content template when i scroll inside the Tab. 
I'm trying to make a responsive application, that's why I'm focusing on sizes and not using "px", only "%" and "vh". Having some sizes issues on mobile view as well. I've sent some images before and after adding a tab so you can see clearly what the problem is. 
 
We suggest you to set z-index property for tab header to avoid tab header gets hidden behind content template during tab scroll. Refer to the below code 
 
<style> 
      #tabSample>ul.e-header 
                        { 
                        z-index:1; 
                        } 
                         
    </style> 
 
 To avoid scroller added for browser please add a container with a width based on your requirement as shown below so that on button click only tab item will be added. 
 
<div id="tabcontainer" style="width:50%"> 
<ej-tab id="tabSample" height="91vh" show-close-button="true" height-adjust-mode="@HeightAdjustMode.Fill" enable-tab-scroll="true" enable-Persistence="false" enable-rtl="false" header-position="@HeaderPosition.Top"> 
    <e-tab-items> 
        <e-tab-item id="ASP" text="Home"> 
            <e-content-template> 
                <div style="float:left;width:54%;min-width:300px"> 
                    <ej-chart id="container1" can-resize="true" load="loadTheme" series-rendering="seriesRender" is-responsive="true"> 
                        </ej-chart> 
………………………………….. 
    </e-tab-items> 
</ej-tab> 
</div> 
 
 
We have attached modified sample in the below link. Please download the sample from the following link 
 
 
Regards, 
Keerthana. 
 


KR Keerthana Rajendran Syncfusion Team January 29, 2018 10:23 AM UTC

 
Hi Kalai, 
 
Query: There's also a problem in dialog-editor-template, dates can't be changed or edited.    
   
Answer: We have analyzed the reported issue from your given sample, but we are unable to replicate it. Please make sure that whether you have provided different JsRender template Id for both the TreeGrid.    
 
Because, the input elements’ ID used in the template should be the control id and field name. Hence, we need to a create separate template for each TreeGrid.   
   
We have also prepared a demo sample for you reference. Please find the sample as below,   
 
                                                                                
If you are facing the same issue again, please revert with modified sample which can reproduce the issue. It will be help us to serve you better.   
  
Regards, 
Keerthana. 
 


KS Kalai Sirajeddine January 29, 2018 12:02 PM UTC

Hi Keerthana,

"We have added scroller in tab based on the items added for tab. When  invisible tab items are present scroller will be added on left or right end. When we set a width of 100% the items are added within this width and scroller is not visible within this width. "

I had set width to 40% still not working it starts to work at 30% or less, you did give me an explanation but not the solution, I need to fill all browser's content and make close button work at the same time.

Thanks for the z-index tip its working now. But the added div didn't solve the problem, I added max-width: 1345px; to "#tabSample > ul.e-header" so header width change is fixed now but Tab-items still no more filling Tab after add. i tried "#tabSample > ul.e-tab-items" but didn't work.

Please check also the last images about mobile issues (Tab-items not filling Tab before even try to add).

Last, for the dialog-editor-template, I'm trying to fix this for now, could you please send me links to downlowd jsrender and syncfusion.javascript nuget packages. Tried to download from this link "http://nuget.syncfusion.com/package/javascript/15_4_0_20" for 5 days now.

Regards,
Kalai Sirajeddine

KR Keerthana Rajendran Syncfusion Team January 30, 2018 12:46 PM UTC

Hi Kalai, 
 
Query: I had set width to 40% still not working it starts to work at 30% or less, you did give me an explanation but not the solution, I need to fill all browser's content and make close button work at the same time. 
 
We have logged “Console error is thrown while clicking close button with enableTabScroll set to true and width set to 100%” as a defect. The fix for this issue will be included in our upcoming volume 1, 2018 release which will be rolled out by the month of February. We will let you know once it has been rolled out. 
 
Query: Thanks for the z-index tip its working now. But the added div didn't solve the problem, I added max-width: 1345px; to "#tabSample > ul.e-header" so header width change is fixed now but Tab-items still no more filling Tab after add. i tried "#tabSample > ul.e-tab-items" but didn't work.Please check also the last images about mobile issues (Tab-items not filling Tab before even try to add). 
 
In mobile mode, scroll bar will not be added in controls and you can scroll through mouse or swipe(in touch devices) to view the content. We have attached video for your reference which can be downloaded from the below link 
 
 
Query: Last, for the dialog-editor-template, I'm trying to fix this for now, could you please send me links to downlowd jsrender and syncfusion.javascript nuget packages. Tried to download from this link "http://nuget.syncfusion.com/package/javascript/15_4_0_20" for 5 days now. 
 
You can use the below cdn link to refer jsrender script in sample  
 
 
Refer to the below UG for more details about cdn links 
 
 
Regards, 
Keerthana.

KS Kalai Sirajeddine January 30, 2018 03:23 PM UTC

Hi Keerthana,

“Console error is thrown while clicking close button with enableTabScroll set to true and width set to 100%”  
100% or even 10%, as long as the scroller button is not visible(not enough tab-items to fill the space we give), close button won't work. Also when I add enough tab-items with the onclick() function to fill the space, line break and close button starts working like tab-scroll was disabled. Anyway, please let me know for the upcoming release and hope this will fix it.

About the video:
*I removed that add button, instead I used "< onclick="btnClick()" rel='nofollow' href="#">Page 1-3<> " in the navbar.
That button covered a bit the issue in mobile mode. If you remove it, you'll have back same issues as the sended images(Tab-items not filling Tab before even try to add).
*In desktop mode, it's when I add new tab-item(with the button removed) that Tab-items not filling Tab anymore. You can try it like you did on mobile mode after removing the add button and use onclick in the navbar menu.
 
You can clearly see what i'm saying in the sended images, I need solutions if they exists .Or, like "#tabSample > ul.e-header" could you send me how to control tab-items style like you helped me with header? 

Finally, to be sure I'm doing this right, i just have to add src="http://cdn.syncfusion.com/js/assets/external/jsrender.min.js" in a script in Layout cs.html ? 

Thanks for help.

Regards,
Kalai Sirajeddine

KR Keerthana Rajendran Syncfusion Team January 31, 2018 11:16 AM UTC

Hi Kalai, 
 
Query : Console error is thrown while clicking close button with enableTabScroll set to true and width set to 100%”   
100% or even 10%, as long as the scroller button is not visible(not enough tab-items to fill the space we give), close button won't work. Also when I add enough tab-items with the onclick() function to fill the space, line break and close button starts working like tab-scroll was disabled. Anyway, please let me know for the upcoming release and hope this will fix it. 
 
We will ensure the fix based on the mentioned cases and include in upcoming release stated earlier. 
 
Query: I removed that add button, instead I used "< onclick="btnClick()" rel='nofollow' href="#">Page 1-3<> " in the navbar.That button covered a bit the issue in mobile mode. If you remove it, you'll have back same issues as the sended images(Tab-items not filling Tab before even try to add). 
*In desktop mode, it's when I add new tab-item(with the button removed) that Tab-items not filling Tab anymore. You can try it like you did on mobile mode after removing the add button and use onclick in the navbar menu.You can clearly see what i'm saying in the sended images, I need solutions if they exists .Or, like "#tabSample > ul.e-header" could you send me how to control tab-items style like you helped me with header?  
 
We checked by adding tab item through rel='nofollow' href click and the tab items are rendered fine in both desktop and mobile mode. The only issue we can reproduce at our end is while switching from desktop view to mobile view TreeGrid inside tab index 1 is not set with proper width because TreeGrid height and width are not updated correctly. To overcome this, we suggest you to set height and width through size settings property of TreeGrid during itemActive event of tab as shown below 
 
function onactive(args) {    
            //returns current active index.    
            if (args.activeIndex == 1) {    
                var obj = $("#TreeGridContainer").data("ejTreeGrid");    
                if (obj) {    
                    obj.setModel({ "sizeSettings": { "height": "450px", "width": "100%" } });    
                }    
            }    
 
If you face any issue with the newly added TreeGrid you can add these size settings during btnClick function as shown below 
 
  function btnClick() { 
                var tabobj = $("#tabSample").data("ejTab"); 
                var index = tabobj.items.length; 
                tabobj.addItem("/Tab/TabContent", "Page 1-3", index, "", "new"); 
                var obj1 = $("#TreeGridContainer1").data("ejTreeGrid");   
                if (obj1) { 
                    obj1.setModel({ "sizeSettings": { "height": "450px", "width": "100%" } }); 
                }    
            } 
 
 
Modified sample can be downloaded from the following link 
 
 
If you still face any issues kindly modify the above sample to reproduce the issue in our end along with replication steps, so that we can validate and provide you a better solution. 
 
Query: Finally, to be sure I'm doing this right, i just have to add src="http://cdn.syncfusion.com/js/assets/external/jsrender.min.js" in a script in Layout cs.html ? 
 
Yes , you have to add this cdn link for jsrender in Layout.cshtml page as shown below.  
 
<environment names="Development"> 
            ………………… 
            <script src="@Url.Content("http://cdn.syncfusion.com/js/assets/external/jsrender.min.js")"></script> 
            <script src="~/js/site.js" asp-append-version="true"></script> 
        </environment> 
 
You can refer this in the layout page of provided sample  
 
Regards, 
Keerthana. 


KS Kalai Sirajeddine January 31, 2018 01:55 PM UTC

Hi Keerthana,

Thanks for help, I just opened the sample,as desktop mode it has the same issue as in the images when i add a tab, the "ASP" div went from 534.453px to 490.265px+new top padding=44.188px, same for the "MVC" and "Mobile" div.
On mobile mode its the same problem before adding. Am I the only one having the issue? (That self created padding is the issue).

Is there anyway to control tab-item's style the way you did for header with "#tabSample > ul.e-header"?

Last, I think the cdn link is not working since for example it didn't propose me the cheked attribute in :
"$("#Radio_checked").ejRadioButton({ name: "Gender", checked: true });" . 

Or it isn't the dependancy needed?

Regards,
Kalai Sirajeddine

KR Keerthana Rajendran Syncfusion Team February 1, 2018 12:47 PM UTC

Hi Kalai, 
 
Query: Thanks for help, I just opened the sample,as desktop mode it has the same issue as in the images when i add a tab, the "ASP" div went from 534.453px to 490.265px+new top padding=44.188px, same for the "MVC" and "Mobile" div. 
On mobile mode its the same problem before adding. Am I the only one having the issue? (That self created padding is the issue).Is there anyway to control tab-item's style the way you did for header with "#tabSample > ul.e-header"? 
 
We have added padding for tab header from tab source based on the outer height of items container for scrollable tab. If you wish to change this padding after adding item you can modify this while adding new item as shown below. Tab item’s container style can be handled with “e-content-item” class. 
 
function btnClick() { 
                var tabobj = $("#tabSample").data("ejTab"); 
                var index = tabobj.items.length; 
                tabobj.addItem("/Tab/TabContent", "Page 1-3", index, "", "new"); 
        $("#tabSample> div.e-content.e-content-item").css("padding-top","5px"); 
                var obj1 = $("#TreeGridContainer1").data("ejTreeGrid");   
                if (obj1) { 
                    obj1.setModel({ "sizeSettings": { "height": "450px", "width": "100%" } }); 
                }    
            } 
 
Else, you can modify this during create event of tab on initial rendering 
 
<ej-tab id="tabSample" height="91vh" show-close-button="true" height-adjust-mode="@HeightAdjustMode.Fill" enable-tab-scroll="false" enable-Persistence="false" item-active="onactive" enable-rtl="false" create="oncreate" header-position="@HeaderPosition.Top" width="100%" > 
</ej-tab> 
function oncreate(args) {    
            $("#tabSample> div.e-content.e-content-item").css("padding-top","5px");  
            } 
 
 
Query: Last, I think the cdn link is not working since for example it didn't propose me the cheked attribute in : 
"$("#Radio_checked").ejRadioButton({ name: "Gender", checked: true });" .  
 
Or it isn't the dependancy needed? 
 
RadioButton is not dependent on jsrender script and the provided cdn script link is for rendering template of TreeGrid. Also, we couldn’t find any radio button in the provided sample similar to the updated code. Kindly , share us the details on which page you have used this radio button and whether checked attribute is not working on initial rendering of RadioButton. 
 
 
Regards, 
Keerthana. 


KS Kalai Sirajeddine February 5, 2018 11:56 AM UTC

Hi Keerthana,

Thank for the "e-content-item" tip it made me closer to solve the issue. I've added:
#tabSample > div.e-content.e-content-item {
        min-height: 84vh !important;
        padding-top: 0px !important;
    }
It made padding dissapear and height don't change but content items still all move up,leaving empty space on bottom(height equal to Tab's header I think) and their top parts is been covered by header. That's why an auto-padding is created while adding a new tab-item.

I tried "position:absolute !important;", didn't work. Also, while inspecting Tab-items element.style is not responding when I uncheck "display: block"or any others in the list. I've sended some images so you can see what's the issue.


For the radio button I've added it recently, it's not on the project I've sended, i just wanted to create it inside a script not the usual <ej-radio-button ... 
And I just wanted to  know wich dependency I could use to not write every single word by my self (more like javascript js1)

Attachment: Tab_items_issues_982713f5.7z

KR Keerthana Rajendran Syncfusion Team February 6, 2018 01:09 PM UTC

Hi Kalai, 
 
Query:  Thank for the "e-content-item" tip it made me closer to solve the issue. I've added: 
#tabSample > div.e-content.e-content-item { 
        min-height: 84vh !important; 
        padding-top: 0px !important; 
    } 
It made padding disappear and height don't change but content items still all move up,leaving empty space on bottom(height equal to Tab's header I think) and their top parts is been covered by header. That's why an auto-padding is created while adding a new tab-item. 
I tried "position:absolute !important;", didn't work. 
 
Response: Padding for tab header is set from source during addition of tab to adjust height of items container. Since we have overridden this padding in sample the tab content moves up on addItem method. We suggest you to set position relative for tab header as shown below in style section. 
 
#tabSample > ul.e-header { 
            z-index: 1; 
            max-width: 1345px; 
            position: relative !important; 
        } 
 
Query: Also, while inspecting Tab-items element.style is not responding when I uncheck "display: block"or any others in the list. I've sended some images so you can see what's the issue. 
 
As we are adding new tab dynamically styles cannot be modified with console window for initially rendered elements. 
 
Query: For the radio button I've added it recently, it's not on the project I've sended, i just wanted to create it inside a script not the usual <ej-radio-button ...  
And I just wanted to  know wich dependency I could use to not write every single word by my self (more like javascript js1) 
 
You can render any input element as radio button through JavaScript as shown below 
 
  <div class="row"> 
                        <div class="col-xs-6 col-sm-3"> 
                            <span>Gender</span> 
                        </div> 
                        <div class="col-xs-6 col-sm-3"> 
                            <input type="radio" name="Gender" id="Radio_checked" /> 
                            <label for="Radio_checked" class="male">Male</label> 
                                                                                    <br/> 
                            <input type="radio" name="Gender2" id="Radio_Unchecked" /> 
                            <label for="Radio_Unchecked" class="female">Female</label> 
                        </div> 
                    </div> 
<script> 
            $(document).ready(function () { 
                $('.dropdown-submenu a.test').on("click", function (e) { 
                    $(this).next('ul').toggle(); 
                    e.stopPropagation(); 
                    e.preventDefault(); 
                }); 
                $("#Radio_checked").ejRadioButton({ checked:true,size: "medium" }); 
                $("#Radio_Unchecked").ejRadioButton({size: "medium"}); 
            }); 
</script> 
 
Modified sample can be downloaded from the following link 
 
 
 
Regards, 
Keerthana.

KS Kalai Sirajeddine February 6, 2018 02:17 PM UTC

Hi Keerthana,

Thanks for "position:relative !important;" , that finally fixed tab-content position and nearly all issue solved.

Now, what it did bad is if you scroll in tab or click on content browser scroll will appear, when i checked html and body gained just little height to make that scroll appear. couldn't fix it manually by sitting max height to html and body.

Last, that's exactly what I used to create ejRadio by script and it's working but that's not the point, the application is not proposing me the attributes (like the "cheked") so when I wrote them wrong for example it won't correct me. Or this dosen't work in script?

Thanks for help.

Regards,
Kalai Sirajeddine

KS Kalai Sirajeddine February 7, 2018 09:15 AM UTC

Hi,

First problem solved by adding "overflow:hidden" on body.

Regards,
Kalai Sirajeddine

KR Keerthana Rajendran Syncfusion Team February 7, 2018 12:48 PM UTC

Hi Kalai, 
 
Thanks for the update. 
 
Query: Last, that's exactly what I used to create ejRadio by script and it's working but that's not the point, the application is not proposing me the attributes (like the "cheked") so when I wrote them wrong for example it won't correct me. Or this dosen't work in script? 
 
Currently, we don’t have intellisence support for properties and methods in JavaScript controls and we have added this to our feature request list.  This feature will be included in any of our upcoming releases. 
 
Regards, 
Keerthana.

KS Kalai Sirajeddine February 8, 2018 11:30 AM UTC

Hi Keerthana,

Thanks for update. Please let me know for these upcoming releases that I hope, will also solve close button issue when scroll-tab is active.

Regards,
Kalai Sirajeddine

KR Keerthana Rajendran Syncfusion Team February 9, 2018 04:04 AM UTC

Hi Kalai,   
 
Most Welcome. We will update you once Volume 1, 2018 is rolled out with fix for the issue “Console error is thrown while clicking close button with enableTabScroll set to true and width set to 100%”.   
   
We appreciate your patience until then.   
   
Regards,   
Keerthana.   
 


KR Keerthana Rajendran Syncfusion Team February 26, 2018 06:28 AM UTC

Hi Kalai,  
 
We are glad to announce that our Essential Studio 2018 Volume 1 Release v16.1.0.24 is rolled out and is available for download under the following link. 
 
 
“Console error is thrown while clicking close button with enableTabScroll set to true and width set to 100%” has been fixed and included in this release. 
 
We thank you for your support and appreciate your patience in waiting for this release. Please get in touch with us if you would require any further assistance. 
 
Regards, 
Keerthana. 
 
 


KS Kalai Sirajeddine February 27, 2018 12:40 PM UTC

Hi Keerthana,

Thanks for update, I've downloaded the new release and close button is now working fine while scroll enabled.
But in mobile mode,left Tab_scroll button is not visible so I can't go back to see firsts tab_items and right scroll is visible (but not in header level) only when I click on headers(not the active one) and hide again when I click inside Tab_content(so when I need to scroll I need to switch Tab_item).
I've sended two images explaining the problem.

Regards,
Kalai Sirajeddine

Attachment: tab_scroll_issue_5e13a40.7z

KR Keerthana Rajendran Syncfusion Team February 28, 2018 10:12 AM UTC

Hi Kalai,   
   
We have checked your shared screenshots. Left scroll and right scroll icon will not be visible by default. This will be shown when li items are hidden either in right or left side of Tab. Click on the tab header so that left icon or right icon will be shown if any of the li items are hidden. The right scroll icon is added below the li header in the sample due to the below overridden CSS    
   
#tabSample > ul.e-header {   
            z-index: 1;   
            max-width: 1345px;   
           position:relative !important;   
        }   
         
   
   
If you wish you to maintain the above styles in your sample, please add the below CSS for the position of right scroll icon   
   
      #tabSample > div.e-icon.e-chevron-circle-right   
                        {   
                        z-index:2;   
                        top:2px;   
                        }   
   
As scroller icon is only to navigate within headers this will be hidden when we click on tab content. We have prepared a video based on the working of scroller in our sample. Please refer to the following link   
   
   
Regards   
Keerthana.   
 


KS Kalai Sirajeddine February 28, 2018 11:46 AM UTC

Hi Keerthana,

Thanks for help, by adding that code, scrollbar is back in headers level now and I get I need to select headers to make scroller appear.
Theres still a problem with the left scroller, it's not visible, I tried:
#tabSample > div.e-icon.e-chevron-circle-left {
        z-index: 9002;
        top: 2px;
        display: block;
    }
but didnt work. I send another image where we can see it's not visible and when trying to inspect it's clearly not activated.

Regards,
Kalai Sirajeddine

Attachment: left_scroll_bug_84b0c15.7z

KR Keerthana Rajendran Syncfusion Team March 1, 2018 11:56 AM UTC

Hi Kalai,   
   
We have checked the reported issue in our sample. As mentioned earlier, scroll icon will not be visible by default. Click on the tab header so that left icon will be shown, if any of the li items are hidden in the left end.    
   
We have prepared a video based on the working of scroller in our sample. Please refer to the following link   
   
   
We have attached a sample with reference to latest script. Kindly check this sample as done in the above video.   
   
   
If the issue persists, please modify the above sample to reproduce the issue in our end so that we can proceed further.   
   
Regards   
Keerthana.   
 


KS Kalai Sirajeddine March 2, 2018 12:53 PM UTC

Hi Keerthana,

Sorry for the inconvenience caused. I forgot to select the Tab-header to make the problem more visible.
Since I don't know where the problem come from I can't really reproduce the issue on the sanded sample.
I've sended a new Image explaining the issue, and where you can see ".e-tab.e-js .e-icon.e-chevron-circle-left" is somehow not active 

Regards,
Kalai Sirajeddine

Attachment: left_scroll_bug_1bd78468.7z

KR Keerthana Rajendran Syncfusion Team March 5, 2018 12:30 PM UTC

Hi Kalai,   
   
We suspect that this issue occurs due to higher z-index set for tab header in your sample. By default, left scroll icon will be rendered with z-index 10.  This will be hidden when the ul header of tab has higher z-index above this. Refer to the below screenshot   
   
   
    
If you have set z-index css for tab header in your sample, kindly reduce this value below scroll icon z-index value (10), so that the icon will be visible on clicking tab header.   
   
Regards   
Keerthana.   
 


KS Kalai Sirajeddine March 5, 2018 01:08 PM UTC

Hi Keerthana,
You're right it's working now. I actually thought it may be the problem so I added:
    #tabSample > div.e-icon.e-chevron-circle-left {
        z-index: 9002;(#tabSample > ul.e-header was at 9000)
        top: 2px;
        display: block;
    }
but it didn't work. I removed now that code and fixed header's z-index to 9 and now scroll is working fine.
Unfortunately, in desktop mode while testing by adding many Tab-items I noticed another problem, Tab header is acting like enableTabScroll was set as false.(working fine in mobile mode)
I sended an image describing the issue.

Regards,
Kalai Sirajeddine

Attachment: Scroll_issue_30692d9c.7z

KR Keerthana Rajendran Syncfusion Team March 6, 2018 08:44 AM UTC

Hi Kalai,   
   
This issue occurs due to the maxWidth set for tab header in your sample. When maximum width is set for header, then items will not be added beyond that and it will added down as second layer of header like enableTabScroll and set to false. When maxWidth css is removed for tab header in layout page this works fine as shown in the below image   
   
   
    
   
Regards   
Keerthana.   
 


KS Kalai Sirajeddine March 6, 2018 10:14 AM UTC

Hi Keerthana,

Thanks, scroll issue solved.
I added that max width because header weight went up on his own when I added a tab-item, but when removed now it's still working fine

Regards,
Kalai Sirajeddine

KR Keerthana Rajendran Syncfusion Team March 7, 2018 04:41 AM UTC

Hi Kalai, 
 
Most Welcome. We have fixed the issue “Additional scroller added in page while adding new item” along with close button issue and included in our latest release 16.1.0.24. So, tab will work fine without maxWidth css property in latest version. Please get back to us if you require further assistance on this. We will be happy to assist you. 
 
Regards, 
Keerthana. 


Loader.
Up arrow icon