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

Load ejGrid with Data Example

Thread ID:

Created:

Updated:

Platform:

Replies:

130811 Jun 5,2017 06:50 AM UTC Jun 7,2017 09:33 AM UTC Ionic 1
loading
Tags: ejGrid
PLIACHAS PASCHALIS
Asked On June 5, 2017 06:50 AM UTC

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

Venkatesh Ayothi Raman [Syncfusion]
Replied On 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. 


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.

Please sign in to access our forum

or the page will be automatically redirected to sign-in page in 10 seconds.

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

;