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

Is it possible to embed EJ1 Signature control into Grid?

Thread ID:

Created:

Updated:

Platform:

Replies:

142296 Jan 25,2019 05:31 PM UTC Jan 29,2019 12:37 PM UTC ASP.NET Core - EJ 2 1
loading
Tags: DataGrid
Eugene Fong
Asked On January 25, 2019 05:31 PM UTC

Is there an example of of embedding Signature control for EJ2 Grid and using CRUD against SQL DB?


Thanks

Pavithra Subramaniyam [Syncfusion]
Replied On January 29, 2019 12:37 PM UTC

Hi Eugene, 
 
Greetings from Syncfusion. 
 
Query: Is there an example of of embedding Signature control for EJ2 Grid 
 
We have analyzed your query and we have prepared sample on EJ2 grid with EJ1 signature component. In the below sample we have used columnTemplate and editTemplate to render ej1 signature component. In the actionBegin event we have set the base64 string of the image to the grid field to handle it in the server side. Please refer to the below sample and documentation for your reference, 
 
Code Example:  
 
[.ts] 
... 
<ejs-grid id="Grid" actionBegin="actionBegin" toolbar="@(new List<string>() { "Add", "Update", "Cancel" })" created="created"> 
    <e-grid-editSettings allowAdding="true" allowDeleting="true" allowEditing="true"> 
    </e-grid-editSettings> 
    <e-grid-columns> 
        <e-grid-column field="orderID" headerText="Order ID" isPrimaryKey="true" textAlign="Right" width="120"></e-grid-column> 
        <e-grid-column field="customerID" width="140"></e-grid-column> 
        <e-grid-column field="shipCity" headerText="ship City" template="#columnTemplate" edit="@(new {create = "create", read = "read", write = "write"})" width="200"> 
 
        </e-grid-column> 
    </e-grid-columns> 
</ejs-grid> 
 
 
<script  type="text/x-template" id="columnTemplate"> 
 
    <img src='/images1000.png' /> 
 
</script> 
 
 
<script type="text/javascript"> 
    var dataSource = @Html.Raw(Json.Serialize(ViewBag.datasource)); 
    function created(args) { 
        this.dataSource = new ej.data.DataManager({ 
            json: dataSource, 
            insertUrl: 'Home/NormalInsert', 
            adaptor: new ej.data.RemoteSaveAdaptor() 
        }); 
    } 
 
    var elem; 
    var dobj; 
    function create() { 
        elem = document.createElement('div'); 
        return elem; 
    } 
    function write(args) { 
        $(elem).ejSignature({ width: "200px", height: "35px", backgroundcolor: "yellow" }); 
    } 
    function read(args) { 
        return $(elem).ejSignature({}); 
    } 
 
 
 
    function actionBegin(args) { 
        if (args.requestType == "save" || args.requestType == "cancel") { 
            var canvas = $("#Grid").find("canvas")[0]; 
            image = canvas.toDataURL("image/png"); 
            var imgData = image.replace('data:image/png;base64,', ''); 
            args.data.shipCity = imgData; 
 
        } 
        } 
... 
 
 
 
                              https://ej2.syncfusion.com/javascript/documentation/api/grid#actionbegin  
                              https://ej2.syncfusion.com/aspnetcore/documentation/grid/columns/#column-template  
                              https://ej2.syncfusion.com/aspnetcore/documentation/grid/edit/#cell-edit-template  
 
Please get back to us for further assistance. 
 
Regards, 
Pavithra S. 


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

This page will automatically be redirected to the 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

Live Chat Icon For mobile
Live Chat Icon