Tab based display on the same web page.

[rajesh kandepu]

Team,

My project has a requirement where I need to load 2 spreadsheets on the same page and 1 spreadsheet will be shown based on the tab user clicks. I am using Bootstrap navtabs. Behind the scenes it we will load both the Spreadsheet controls on the same page and base don user clicking the tabs, one div is hidden and the other div will be shown. The first spreadsheet is loading fine and when I click the 2 tab, the spreadsheet shows empty and weird thing is when I just resize the browser or click F12 it will show up fine. I am not sure what exactly is happening here. Could you please let me know what I am missing here.

I have tried do the refresh on the Spreadsheet when the user clicks tab 2. But that did not work. We have bought the license 2 weeks back and all the work is completed on the project but could not move to production because of this issue.

I have attached the 3 screenshots along with this thread.

Could you please help us in this.

Thanks!

Rajesh

Attachment: ScreenShots_13378bc2.zip

[Silambarasan I]

Hi Rajesh, 

 

Thank you for contacting Syncfusion support. 

 

We have checked the reported query and we would like to let you know that in responsive mode, the spreadsheet rendering is based on available dimension (height & width) in DOM and its should be in visible. In your case, the second Spreadsheet didn’t works since it’s in display ‘none’.  

 

So, we suggest you to render the second Spreadsheet on first time tab navigation. Please refer the below code example. 

 

JS Playground Sample: https://jsplayground.syncfusion.com/ury14xaz 

 

 

<div class="container"> 

    <ul class="nav nav-tabs"> 

        <li class="active"><a data-toggle="tab" rel='nofollow' href="#tab1">Spreadsheet 1</a></li> 

        <li><a data-toggle="tab" rel='nofollow' href="#tab2">Spreadsheet 2</a></li>            

    </ul> 

 

    <div class="tab-content"> 

        <div id="tab1" class="tab-pane fade in active"> 

            <div id="Spreadsheet1"></div> 

        </div> 

        <div id="tab2" class="tab-pane fade"> 

            <div id="Spreadsheet2"></div> 

        </div> 

    </div> 

</div> 

 

<script type="text/javascript"> 

    $(function () { 

        //Here rendering first Spreadsheet. 

        $("#Spreadsheet1").ejSpreadsheet({ 

 

        }); 

 

        $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) { 

            var target = $(e.target).attr("rel='nofollow' href"); 

            if (target == "#tab2") { 

                var ssObj2 = $("#Spreadsheet2").data("ejSpreadsheet"); 

                if (!ssObj2) { 

                    //Here rendering second Spreadsheet. 

                    $("#Spreadsheet2").ejSpreadsheet({ 

 

                    }); 

                } 

            } 

        }); 

    }); 

</script> 

 

 

 

Could you please check the above sample and get back to us if issue still persists or need further assistance? 

 

Regards, 

Silambarasan 

[rajesh kandepu]

Hai Silambarasan,

Thanks for the reply. I am rendering the Spreadsheets using HTML helper and providing the datasource for both the spreadsheets during initialization. I do not find any examples in the documentation to render the spreadsheet from JavaScript. Could you please me a working example of this or any links to the documentation with this scenario. My project basic requirement is it will have 2 tabs and each tab contains a spreadsheet and bunch of dropdowns. And based on user selecting the values in the dropdowns, the spreadsheet should render appropriate data. Just like how SSRS Reports works. From the forums I got some help on how to dynamically render the spreadsheet using JSON data object. I am using updateRange() to do this. But I have to do a lot of cleanup to make sure there won't be any empty rows and if updated data has more rows than what current state of spreadsheet has, then I have to first create empty rows and then use the update range method.

Along with my current query, can you suggest any other best ways to dynamically update the spreadsheet with the data. Could you please provide me with Response ASAP.

Also one more observation. I have 2 columns in the spreadsheet having drop downs. And I see lot of performance drop while scrolling the spreadsheet. Is there any way the performance can be improved even columns have a dropdowns in it?. I haven't tested with large data during evaluation so did not find this issue. But it is usual that production contains more data and users obviously use scrolling.  

 

Thanks!

Rajesh 

[rajesh kandepu]

Forgot to attach my Index View in my ASP.NET MVC project. Just thought that will be helpful for you to get an idea.

Attachment: View_5db2d822.zip

[rajesh kandepu]

Team, 

Just want to follow up on this. Could you please respond on this ASAP. 

Thanks!

Rajesh

[Silambarasan I]

Hi Rajesh, 

 

Query #1 “Could you please me a working example of this or any links to the documentation with this scenario. My project basic requirement is it will have 2 tabs and each tab contains a spreadsheet...” 

 

We have checked your requirement and we have prepared a sample to demonstrate this in MVC platform.  In your case, we would like to suggest you to use the ‘refresh()’ client-side method to re-render the Spreadsheet while on tab switching. Please refer the below modified code example. 

 

 

$('#MyTabs a').click(function (e) { 

    e.preventDefault() 

    $(this).tab('show') 

    if ($(this).attr('title') == 'SaveAndCompile') { 

        var ssObj = $("#SpreadsheetTab2").data("ejSpreadsheet"); 

        //... 

        //Checking whether the sheet element generated or not. 

        if (ssObj.getSheetElement().height() < 25) 

            ssObj.refresh(); 

    } 

}); 

 

 

Query #2 “can you suggest any other best ways to dynamically update the spreadsheet with the data. Could you please provide me with Response ASAP.” 

 

We would like to suggest you to achieve your requirement ‘To dynamically update the Spreadsheet (normal mode) with the data’ by using ‘blankWorkbook()’ to clear entire sheet data’s, ‘refreshContent()’ to refresh the sheet (row & column count) based on updated datasource and ‘updateRange()’ to update the new datasource to Spreadsheet. Please refer the below code example. 

 

 

function loadDatatoSpreadsheet() { 

    var ssObj = $("#Spreadsheet").data("ejSpreadsheet"), sheetIdx = ssObj.getActiveSheetIndex(), sheet, dataSource; 

 

    //Get Datasouce. 

    dataSource = [{ ... }]; 

 

    //reset workbook. 

    ssObj.blankWorkbook(); 

 

    //Update sheet row & column count and refresh it. 

    sheet = ssObj.getSheet(); 

    sheet.rowCount = dataSource.length; 

    sheet.colCount = ssObj.getObjectLength(dataSource[0]); 

    ssObj.refreshContent(sheetIdx); 

 

    //Update new datasource using range settings. 

    ssObj.updateRange(sheetIdx, { dataSource: dataSource, startCell: "A1", showHeader: true }); 

 

    //Here your code. 

 

} 

 

 

Query #3 “I have 2 columns in the spreadsheet having drop downs. And I see lot of performance drop while scrolling the spreadsheet. Is there any way the performance can be improved even columns have a dropdowns in it?...” 

 

Currently, we are working with performance improvement of celltype dropdownlist while on scrolling and this improvement will be completed & included in our Essential Studio 2018 Volume 2 release which is scheduled to be rolled out in the month of May, 2018. 

 

Sample Link: https://www.syncfusion.com/downloads/support/forum/136314/ze/SpreadsheetSample1668739113 

 

Could you please check the above sample and get back to us if we misunderstood or need further assistance? 

 

Regards, 

Silambarasan 

[rajesh kandepu]

Hai Silambarasan, 

Thanks for the sample code. I have tried this code but I got the below error. Seems like blankWorkbook() is not a function.

Also I just want to ask about another issue. I have 2 columns as drop down. When I render the spreadsheet, the cell which is a Cell Type of Drop down contains text which is one of the option in the drop down. But still the drop down doesn't show the cell text as a selected text. When I click the drop down the 1 of the 2 options shows as selected and then after that the cell value is shown as selected value in the drop down. Please see the screen shot below.

I have not clue why this wierd behavior is happening. Could you please help me regarding this. I could not find any sources in the forums about this topic.

Thanks for your help!

Rajesh

[rajesh kandepu]

Hai Silambarasan,

I have one more question. Can we set the Spreadsheet height through JavaScript after the sheet gets rendered. I want to check about this feature because, I want to avoid the vertical scrolling by setting the height of the Spreadsheet according to the number of rows that get renders to it dynamically. I want to avoid vertical scrolling because, the performance is too horrible when we have 2 columns as drop downs. So if we render the spreadsheet with the height the total rows will take, we can avoid scrolling in the Spreadsheet itself. But the user can use the web page scrolling.

Thanks for your help!

Rajesh

[Silambarasan I]

Hi Rajesh, 

 

Query #1 “I have tried this code but I got the below error. Seems like blankWorkbook() is not a function.” 

 

We have checked this issue and we were unable to reproduce it in our end. We would like to let you know that the ‘blankWorkbook()’ client-side method is available only from the product version (>v15.4.0.20). So, we suggest you to upgrade to the latest Essential studio product version. We have prepared a sample in latest version to demonstrate this and the same can be downloaded from the following sample link. 

 

Query #2 “I have 2 columns as drop down. When I render the spreadsheet, the cell which is a Cell Type of Drop down contains text which is one of the option in the drop down…” 

 

We can able to reproduce this reported issue in our end. As we stated earlier, currently we are working on performance improvement of rendering & scrolling with CellType DropDownList. We will fix this issue along with improvement and it will available & included in our Essential Studio 2018 Volume 2 release which is scheduled to be rolled out in the month of May, 2018. 

 

Query #3 “Can we set the Spreadsheet height through JavaScript after the sheet gets rendered. I want to check about this feature because…” 

 

Once the above improvement has been completed, there’s no need to be rendered the Spreadsheet with full row view’s (without vertical scrollbar) since the performance issue could be resolved. Meanwhile, we would like to achieve your requirement by using option method to set the updated height to Spreadsheet. Please refer the below code example. 

 

 

var updatedHeight = ssObj.element.height() - ssObj.getSheetElement().height() + ssObj.getSheetElement().find(".e-content .e-table").height() + 36; //36 => Horizontal Scrollbar + Column header 

ssObj.option({ scrollSettings: { height: updatedHeight, isResponsive: false } }); 

 

 

 

Sample link: https://www.syncfusion.com/downloads/support/forum/136314/ze/SpreadsheetSample-938755807 

 

Could you please check the above sample and get back to us with more information if your requirement is not fulfilled or need further assistance on this? 

 

Regards, 

Silambarasan 

[rajesh kandepu]

Hai Silambarasan,

Sry for the delay with the response. I have been switching between projects. I have tried setting the height dynamically and works out beautifully. But I haven't tried the other thing about refreshing the spreadsheet with data dynamically. Right now I have workaround for it with adding rows and deleting rows. But I will definitely try it later.

I have one more question. When the page gets loaded, the Spreadsheet gets focused and user not able to see the header content on the page. The user has to scroll up again to see the header content on the page. I there any way we can avoid the default focus to Spreadsheet when the page loads so that the page shows the header content first.

Thanks!

Rajesh

[Silambarasan I]

Hi Rajesh, 

 

Thanks for your update. 

 

We have checked the reported issue and we can able to reproduce it in our end. We considered this as a defect “To prevent auto focused for Spreadsheet when page loads” and logged a defect report for the same. The fix of this issue will be available and included in the release of Essential Studio 2018 Volume 2 which is scheduled to be rolled out in the month of May, 2018. 

 

Meanwhile, we would suggest you to use the ‘window.scroll()’ method in ‘create’ client-side event in Spreadsheet to resolve this issue. Please refer the below code example. 

 

 

@(Html.EJ().Spreadsheet<object>("Spreadsheet") 

//... 

.ClientSideEvents(eve => eve.Create("onCreate"))) 

 

 

function onCreate(args) { 

    //Scroll to coordinates that you want. 

    window.scroll(0, 0); 

} 

 

 

 

Could you please check the above information and get back to us if you need further assistance? 

 

Regards, 

Silambarasan 

[rajesh kandepu]

Hai Silambarasan, 

This have tried it and worked fine. Can we wrap the text in the cells. I have tried setting the AllowWrap(true) property but it did not work. 

.Allowwrap(true)

Thanks!

Rajesh

[Silambarasan I]

Hi Rajesh, 

 

Thanks for your update. 

 

We have checked the reported issue by setting ‘AllowWrap’ to true and applying wrap text working properly in our end. We suspect that you have assumed wrongly as when setting this property to true will convert the entire cells as wrapped cells by automatically. This property is used only to enable or disable the wrap text feature.  

 

If you want to apply wrap text, do any one of the following, 

 

1. By using UI interaction: 

You can apply the wrap text for selected cells by using ‘Wrap Text’ button under Alignment group in HOME tab - Ribbon. 

 

 

2. By using method: 

Using ‘wrapText(range)’ public method, you can apply wrap text for the specified range of cells in Spreadsheet. 

 

CODE EXAMPLE: 

 

function applyWrapOnBtnClick() { 

    var ssObj = $("#Spreadsheet").data("ejSpreadsheet"), range; 

 

    range = ssObj.getSheet().selectedRange; //e.g: "A1:A10" or [0,0,10,0] 

    ssObj.wrapText(range); 

} 

 

 

 

Note: By default, ‘AllowWrap’ property is enabled in Spreadsheet. 

 

Could you please check the above information and get back to us if we misunderstood or need further assistance? 

 

Regards, 

Silambarasan 

[rajesh kandepu]

Hai Silambarasan,

Sorry for the late response. I have been working on a different project. But I have tried your suggestion and it worked fine. I just want to say thank you for all the help. I am good at this moment. But I will let you know if I can't figure out something from the documentation for any features.

Thanks!

Rajesh

[Silambarasan I]

Hi Rajesh, 

 

Thanks for your update. Please get back to us if you need any further assistance. 

 

Regards, 

Silambarasan