1. Home
  2. Forum
  3. Ionic
  4. Load ejGrid with Data Example

Load ejGrid with Data Example

Is it possible to provide an example for ejGrid showing how to load it with data from a database?
Thanks

1 Reply
VA Venkatesh Ayothi Raman Syncfusion Team June 7, 2017 09:33 AM UTC

Hi Customer, 

Thanks for contacting Syncfusion support. 

We can use a SQLite data source for managing your data in Android and iOS.  Pair this with ngCordova and you can better compliment your Ionic Framework development with an AngularJS experience.  
We have also prepared a sample based on your requirement which can be download from following link, 
 
In that sample, we have used the SqlLite local DB for storing and retrieving the data with help of angular JS. We have initially rendered the Grid with some records like as follows, 
$ionicPlatform.ready(function() { 
        . . . 
        $cordovaSQLite.execute(db, "CREATE TABLE IF NOT EXISTS employee (id integer primary key, EmployeeID integer, Name text)"); //Create a table 
 
        var query = "SELECT EmployeeID,Name FROM employee"; 
        $cordovaSQLite.execute(db, query).then(function (res) { 
          
            if (res.rows.length > 0) { 
                 
                var gridObj = $(".e-grid").ejGrid("instance"), dataSource = [];// create a Grid instance 
                for (var i = 0; i < res.rows.length; i++) { 
                    dataSource.push(res.rows[i]); 
                } 
                gridObj.dataSource(dataSource); //bound the Grid data source 
            } else { 
                console.log("No results found"); 
            } 
        }, function (err) { 
            console.error(err); 
        }); 
    }); 
    
 
 
We add the record in database while adding the record in Grid using actionBegin event. Please refer to the following code example and Help documentation, 
Code example: 
<body ng-app="starter"> 
    <ion-pane> 
        <!--<ion-header-bar class="bar-stable"> 
          <h1 class="title">Ionic - Teste DataBase</h1> 
        </ion-header-bar>--> 
             <ion-content ng-controller="ExampleController"> 
 
 
            <div class="angularbind ioncenter"> 
 
 
                <div ej-grid id="Grid" e-width="500px" 
                     e-datasource="data" e-editsettings-allowadding="true" e-actionbegin="actionBegin" e-toolbarclick="toolbarclick" e-editsettings-allowdeleting="true" e-editsettings-allowediting="true" e-toolbarsettings-showtoolbar="true" e-toolbarsettings-toolbaritems="tools"> 
 
                    <div e-columns> 
                        <div e-column e-field="EmployeeID" e-headertext="Employee ID" e-isprimarykey="true" e-textalign="right"></div> 
                        <div e-column e-field="Name" e-headertext="Employee Name" e-textalign="right"></div> 
                    </div> 
                </div> 
                 
            </div> 
            
             
            <button class="button" ng-click="select()">Show DB</button>         
        </ion-content> 
        <ion-list> 
           
        </ion-list> 
    </ion-pane> 
</body> 
 
example.controller("ExampleController", function($scope, $cordovaSQLite) { 
    $scope.tools = ["add", "edit", "delete", "update", "cancel"]; 
    $scope.actionBegin = function (args) { 
 
        if (args.requestType == "save") { 
            
            var EmployeeID = +args.data.EmployeeID, Name = args.data.Name; //get the added record datas in action beign event 
 
            var query = "INSERT INTO employee (EmployeeID,Name) VALUES (?,?)"; //insert the record in local DB 
            $cordovaSQLite.execute(db, query, [EmployeeID, Name]).then(function (res) { 
                alert(res); 
            }, function () { 
 
            }); 
        } 
    }, 
    $scope.data = []; 
     
     
 
}); 
  
 
You can click “Show DB” button to show the data in database. 
Regards, 
Venkatesh Ayothiraman. 


Loader.
Up arrow icon