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 : Nov 16th 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Three Tabs with each one displaying a different grid.

Thread ID:

Created:

Updated:

Platform:

Replies:

123679 Apr 10,2016 04:46 PM UTC Apr 22,2016 08:43 AM UTC ASP.NET MVC 7
loading
Tags: Tab
Felix
Asked On April 10, 2016 04:46 PM UTC

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 [Syncfusion]
Replied On April 12, 2016 01:00 PM UTC

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
Replied On April 12, 2016 03:46 PM UTC

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

Really very grateful.

Felix

Prince Oliver [Syncfusion]
Replied On April 13, 2016 07:02 AM UTC

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
Replied On April 13, 2016 08:08 AM UTC

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 [Syncfusion]
Replied On April 21, 2016 12:59 PM UTC

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
Replied On April 21, 2016 02:22 PM UTC

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

Felix.

Prince Oliver [Syncfusion]
Replied On April 22, 2016 08:43 AM UTC

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

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

;