Is it possible to embed EJ1 Signature control into Grid?

[Eugene Fong]

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

Thanks

[Pavithra Subramaniyam]

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; 

 

        } 

        } 

... 

 

 

Sample: http://www.syncfusion.com/downloads/support/directtrac/general/ze/gridWithSignaturecomp-2048782150  

 

Documentation: https://ej2.syncfusion.com/aspnetcore/documentation/grid/how-to/render-both-ej1-and-ej2-grids-in-same-application/#render-both-ej1-and-ej2-grids-in-same-application  

                              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.