1. Home
  2. Forum
  3. ASP.NET MVC - EJ 2
  4. How to use local datasource when using syncfusion controls?

How to use local datasource when using syncfusion controls?

Hi team


I am struggling to use a local datasource, meaning if want to use my own database and record list. How do i do this in asp.net mvc? when applying these controls on my application. I see almost some they are called from API server, what if you want to use or test your own model with dataset so can get whatever in the database than interfacing whats its shown on the documentation by syncfusion?


5 Replies
VS Vasugi Sivajothi Syncfusion Team September 20, 2021 11:09 AM UTC

Hi Gcobani, 
 
 
Thank you for contacting Syncfusion support. 
 
 
Before we proceed further, we would like to know the below details since we are not clear with the provided information.  
 
    1. Please share the details in which specific component you may want to use at your end.
    2. Share the package details and version details of the component to validate further on the reported query.
 
This will be helpful to investigate further and assist you better. 
 
 
Regards, 
Vasugi. 


GM Gcobani Mkontwana September 21, 2021 04:18 PM UTC

e.g Dashboard layout(show user log in, timestamp, activity used for that week by user, total hours spend)


Technologies C#, Asp.NET MVC, Visual Studio, Bootstrap and Javascript


Database: SQL Server(Tables with userAccount etc)


Does this makes sense now?


SS Sharon Sanchez Selvaraj Syncfusion Team September 22, 2021 11:27 AM UTC

Hi Gcobani, 
 
Thanks for the details. 
 
We have checked with your reported query in Dashboard Layout. We would like to mention that, you can specify any data source of your choice from the database. However, the mapping of the specified Row, Column, SizeX, SizeY, Header and Content value must be done to the panel structure. 
 
Refer to the code snippet for further reference: 
 
Index.cshtml 
public ActionResult Index() 
        { 
           List<PanelModel> panellist = new List<PanelModel>(); 
           panellist.Add(new PanelModel { id = "1", row = 0, column = 0, sizeX = 2, sizeY = 1, Header = "<div>Activity Spent</div>", Content= " <div class='card'> <span class='e - icons session'></span> <div class='card - content text'> Activity for a user </div> <div class='card - content number'> High usage </div> </div>" }); 
           panellist.Add(new PanelModel { id = "2", row = 0, column = 2, sizeX = 1, sizeY = 1, Header = "<div>User Login</div>", Content = " <div class='card'> <span class='e - icons session'></span> <div class='card - content text'> Login Sessions </div> <div class='card - content number'> 1246 </div> </div>" }); 
           panellist.Add(new PanelModel { id = "3", row = 0, column = 3, sizeX = 2, sizeY = 1, Header = "<div>Time Stamp</div>", Content = " <div class='card'> <span class='e - icons session'></span> <div class='card - content text'> Time Stamp </div> <div class='card - content number'> Time Stamp-12:00 </div> </div>" }); 
           panellist.Add(new PanelModel { id = "4", row = 1, column = 0, sizeX = 3, sizeY = 1, Header = "<div>Total Hours</div>", Content = " <div class='card'> <span class='e - icons session'></span> <div class='card - content text'> Total Hours a day </div> <div class='card - content number'> 12 </div> </div>" }); 
           panellist.Add(new PanelModel { id = "5", row = 1, column = 3, sizeX = 2, sizeY = 1, Header = "<div>Visited Links</div>", Content = " <div class='card'> <span class='e - icons session'></span> <div class='card - content text'> Frequent Visits </div> <div class='card - content number'> 9:00 - 6:23 </div> </div>" }); 
            ViewBag.panels = panellist; 
            return View(); 
        } 
HomeController.cs 
    <div> 
            <!--  DashboardLayout element declaration --> 
            @Html.EJS().DashboardLayout("dynamicLayout").Columns(5).AllowResizing(true).Panels(Panel => 
            { 
                for(int i = 0; i < ViewBag.panels.Count; i++) 
                { 
                    Panel.Row(ViewBag.panels[i].row).Col(ViewBag.panels[i].column).SizeX(ViewBag.panels[i].sizeX).SizeY(ViewBag.panels[i].sizeY).Header(ViewBag.panels[i].Header).Content(ViewBag.panels[i].Content).Add(); 
                } 
              
            } 
         ).Render() 
         
    </div> 
 
Refer to the sample: 
 
 
Refer to the below links to know more about Dashboard Layout component. 
 
 
 
Please get back to us if you need any further assistance. 
 
Regards, 
Sharon Sanchez S. 


GM Gcobani Mkontwana replied to Sharon Sanchez Selvaraj September 22, 2021 03:40 PM UTC

Hi Team


This is my GUI and want to build something like this using these controls from synfusion. See below but i want to call my database object locally not from using synfusion API that part is going to be complicated for me to understand;




KR Keerthana Rajendran Syncfusion Team September 23, 2021 07:23 AM UTC

Hi Gcobani,  
 
Thanks for the update. 
 
Based on your screenshot, we suspect that EJ2 Diagram component might help you and we suggest you to have a glance on the below links to know more details on available functionalities with Diagram component.  
 
 
 
 
Please take a moment to have a look on the below demo samples and choose the component of your preference.  
 
 
Please let us know if you need further assistance. 
 
Regards, 
Keerthana R.  


Loader.
Up arrow icon