Three Tabs with each one displaying a different grid.

[Felix]

Does anyone have a project code sample of an EJ Tab which builds three different EJ grids when the appropriate Tab is clicked. 

[Prince Oliver]

Hi Felix,

Here is the sample for EjTab binding different EjGrids on Each Tabs.

Refer to the following link for the sample:
http://www.syncfusion.com/downloads/support/forum/123679/ze/Sample1053410584

If you have any further queries, please get back to us.

Regards,
Prince

[Felix]

Thank you so much for your trouble. I am examining it.

Really very grateful.

Felix

[Prince Oliver]

Hi Felix,

Thanks for the update.

We are glad that your issues have been resolved.

Please let us know if you require any further assistance on this.

Regards,
Prince

[Felix]

Your code was very helpful. I notice that the Tab loads all three grids before displaying on the client side. Is this the only way to use the tab? For instance, can I trap the click event to build the appropriate grid? This is a purely theoretical question. If one limits the displayed rows to five or even 10, the strain on resources and 'traffic' is quite minimal. Could you resend the small project that you sent me allowing the grid to be edited?

I 'come from' WinForms and C# using an MS access database and OLEDB. There are specific reasons to do this as our main app is a standalone VB6 financial application with multiple grids. Your sample uses the Entity Framework. Very easy to understand BUT, can't use Access and it is somewhat of a 'black box' for me. This 'concerns' me. So I elected to stay with Access files. Works well in the skeleton app that I have been trying to construct. Your grid can display and update an access file on the server. 

Another question. The (inbuilt) grid update code is initiated when the user changes a row. How do I detect that the user is closing the page, and hasn't saved the row so that I loose the updated data. I assume JQuery stuff but didn't find a sample in the Grid online samples. If it is there and I just didn't find it, can you link me to it?

Being in complete control of Syncfusion's Tab control would somewhat simplify my main screen which always has the Accordion visible. Am using the Accordion with 'InnerAccordion'. I would much prefer the Tab control for sub items to replace the InnerAccordion. I have already decided that all my data entry screen will be limited to 5 rows. If the user wants more flexibility, the intention is to persuade him/her to purchase our VB6 app. It can be used on the cloud and the application knows how to prevent multiple users using a specific plan file. 

So. To keep it short, and simple, could you add the editing facility to the grids in your sample?

Thanking you in advance.

Felix.

PS. In the App-Data, you have the SQL file. But. As far as I can see, you don't use it. You use the 'infamous' Northwind database on your servers. Am I right?

[Prince Oliver]

Hi Felix,

Query 1: can I trap the click event to build the appropriate grid?	Yes. We can render the Grid or bind dataSource to grid in the ItemActive clientside event of the Tab control.  http://help.syncfusion.com/js/api/ejtab#events:itemactive Please refer to the below code example. <script type="text/javascript">     //itemActive event of the Tab control     function onItemActive(args) {         var data = [];         //get the current tab         var activeTab = $(args.activeHeader).find("a").attr("rel='nofollow' href");                 if (activeTab == "#EmployeesGrid")             data = ej.DataManager({ url:"http://mvc.syncfusion.com/Services/Northwnd.svc/Employees/" });         else if (activeTab == "#CustomersGrid")             data = ej.DataManager({ url:"http://mvc.syncfusion.com/Services/Northwnd.svc/Customers/" })         //find the grid inside the current tab and assign dataSource         var activeGrid = $(activeTab).find(".e-grid");//get the grid element within the tab element         if ($(activeGrid).ejGrid("model.dataSource") == null) {             $(activeGrid).ejGrid({                 dataSource: data//bind dataSource to grid             });         }     } </script> from the above code example, we have bound dataSource to Grid in the itemActive event of the Tab control. So, the data will be retrieved from the service if only when the tab item is active.
Query 2: How do I detect that the user is closing the page, and hasn't saved the row so that I loose the updated data. I assume JQuery stuff but didn't find a sample in the Grid online samples. If it is there and I just didn't find it, can you link me to it?	We can display an alert message to the user by closing the page when there are unsaved data in the page using the onbeforeunload event. The onbeforeunload event will be triggered when the document is unloaded. Please refer to the below code example. $(function () {         window.onbeforeunload = function () {                         if ($(".gridform").length)//when the edit form is present in grid             return "Unsaved changes will be lost";         }     })
Query 3: could you add the editing facility to the grids in your sample?	The editing functionality can be enabled by enabling the AllowEditing property of the Grid EditSettings. If editing is enabled in the sample, we need to set the isPrimaryKey property for the primary key column of the dataSource. Please refer to the below code example. @(Html.EJ().Grid<object>("FlatGrid")         . . . .        .EditSettings(edit => { edit.AllowAdding().AllowDeleting().AllowEditing(); })         .ToolbarSettings(toolbar =>         {             toolbar.ShowToolbar().ToolbarItems(items =>             {                 items.AddTool(ToolBarItems.Add); //for including add icon in toolbar                 items.AddTool(ToolBarItems.Edit);                 items.AddTool(ToolBarItems.Delete);                 items.AddTool(ToolBarItems.Update);                 items.AddTool(ToolBarItems.Cancel);             });         })         . . . ) Please refer to the below documentation where we have explained clearly on the editing feature. http://help.syncfusion.com/aspnetmvc/grid/editing If you want to update the changes made in grid to the database, then we suggest you to use our adaptors. Please refer to the below documentation link. Persisting data in server: http://help.syncfusion.com/aspnetmvc/grid/editing#persisting-data-in-server Data Binding: http://help.syncfusion.com/aspnetmvc/grid/data-binding Data Adaptor: http://help.syncfusion.com/aspnetmvc/grid/data-adaptors
Query 4: In the App-Data, you have the SQL file. But. As far as I can see, you don't use it. You use the 'infamous' Northwind database on your servers. Am I right?	Yes, we used online database in the sample. You can remove the SQL file in App-Data folder if you don’t need of it.

Regards,
Prince

[Felix]

Prince. Thank you so much for your very constructive help. Your reply above looks to be just what I need.

Felix.

[Prince Oliver]

Hi Felix,

We are glad to know that your issue has been fixed please let us know if you require any further assistance on this we will be happy to assist you.

Regards,
Prince

[Caroline Reitzer]

I have trouble downloading this link. I get an error the sample was not loaded correctly. What is the issue?

[Prince Oliver]

Hi Caroline, 

Thank you for contacting Syncfusion support. 

We were able to get the sample from the link and run it properly. We suspect that this might be a network issue in your end. Kindly share more information on the error you are facing in your end. it will help us provide a solution. 

Meanwhile, we have prepared a new sample by rendering 3 Grids inside 3 Tabs for your reference. In the attached sample, we have rendered first two Grid inside Tab directly and the third Grid is rendered from partial view based on the activeIndex of tab. Please find the sample at the following location: http://www.syncfusion.com/downloads/support/forum/123679/ze/SyncfusionMvcApplication1-767483345  

Kindly check this new sample in your end. Please let us know if you need any further assistance on this. 

Regards, 

Prince