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. Image for the cookie policy date
  1. Home
  2. Forum
  3. ASP.NET Core
  4. Embedded Signature in Grid Column

Embedded Signature in Grid Column

Is there an example to use the Signature control in a grid cell with CRUD and saving to a SQL Database.

Also, How do you access the Signature control in each cell to set attributes such as background image and color dynamically?




7 Replies
SE Sathyanarayanamoorthy Eswararao Syncfusion Team February 7, 2018 03:48 AM UTC

Hi Eugene, 

Thanks for contacting Syncfusion support. 

We have analyzed your query and found that you need to use Signature control in the grid cell. We have achieved your requirement in the following example and the same can be found below. 



In the below code example using editTemplate we have created the signature control for the grid cell. In the actionBegin event we have saved the signature as image and sent the image to the server side where the image file can be stored in the Database. Also we have used the template column to display the signature image in the grid cell. 

Please refer the code example below. 



 
<div id="ControlRegion"> 
    <ej-grid id="FlatGrid"   allow-paging="true" action-begin="begin"> 
         
                ---------------------------------------- 
 
        <e-columns> 
 
                   ------------------------------------------------------ 
 
            <e-column field="CustomerID" header-text="Sign"   width="75"  > 
                <e-edit-template create="create" read="read" write="write"> 
                </e-edit-template> 
            </e-column> 
 
        </e-columns> 
    </ej-grid> 
</div> 
 
<script type="text/javascript"> 
 
 
    function create() { 
        return $("<div>"); 
    } 
    function write(args) { 
 
        args.element.ejSignature({ width: "200px", height: "35px", backgroundColor: "yellow" }); 
    } 
    function read(args) { 
        debugger; 
        return args.ejSignature({}); 
    } 
 
   
 
    function begin(args) { 
        if (args.requestType == "save" || args.requestType == "cancel") { 
 
            var canvas = $("#FlatGridCustomerID").find("canvas")[0]; 
            image = canvas.toDataURL("image/png"); 
            newimage = image.replace('data:image/png;base64,', ''); 
 
            $.ajax({ 
                type: 'POST', 
                url: '@Url.Action("SignatureSave", "Grid")', 
                data: { 
                    imageData: newimage 
                }, 
 
                success: function (data) { 
                     
                } 
            }); 
        } 
        } 
 
 
[controller.cs] 
 
static string path = Directory.GetCurrentDirectory(); 
                                // give your folder in the application for storing 
 
 
        [HttpPost] 
 
        public ActionResult SignatureSave(string imageData) 
        { 
 
            string fileNameWitPath = path +"\\Images\\" + "10002" + ".png"; 
 
            using (FileStream fs = new FileStream(fileNameWitPath, FileMode.Create)) 
            { 
                using (BinaryWriter bw = new BinaryWriter(fs)) 
                { 
 
                    byte[] data = Convert.FromBase64String(imageData); 
 
                    bw.Write(data); 
 
                    bw.Close(); 
                } 
 
            } 
 
            return View(); 
 
        } 
 
//here the filenamepath contains the path for the image of the signature which can be stored in the database. 
 
 
 
 

Please refer the following documentation. 

To save signature in folder. 
To save signature in database. 
To use template column in grid 
To set the background color of signature. 
To set the background image for signature. 


If you need any further assistance please get back to us. 

Regards, 
Sathyanarayanamoorthy 


EF Eugene Fong replied to Sathyanarayanamoorthy Eswararao February 7, 2018 11:48 PM UTC

Hi Eugene, 

Thanks for contacting Syncfusion support. 

We have analyzed your query and found that you need to use Signature control in the grid cell. We have achieved your requirement in the following example and the same can be found below. 



In the below code example using editTemplate we have created the signature control for the grid cell. In the actionBegin event we have saved the signature as image and sent the image to the server side where the image file can be stored in the Database. Also we have used the template column to display the signature image in the grid cell. 

Please refer the code example below. 



 
<div id="ControlRegion"> 
    <ej-grid id="FlatGrid"   allow-paging="true" action-begin="begin"> 
         
                ---------------------------------------- 
 
        <e-columns> 
 
                   ------------------------------------------------------ 
 
            <e-column field="CustomerID" header-text="Sign"   width="75"  > 
                <e-edit-template create="create" read="read" write="write"> 
                e-edit-template> 
            e-column> 
 
        e-columns> 
    ej-grid> 
div> 
 
<script type="text/javascript"> 
 
 
    function create() { 
        return $("
"); 
    } 
    function write(args) { 
 
        args.element.ejSignature({ width: "200px", height: "35px", backgroundColor: "yellow" }); 
    } 
    function read(args) { 
        debugger; 
        return args.ejSignature({}); 
    } 
 
   
 
    function begin(args) { 
        if (args.requestType == "save" || args.requestType == "cancel") { 
 
            var canvas = $("#FlatGridCustomerID").find("canvas")[0]; 
            image = canvas.toDataURL("image/png"); 
            newimage = image.replace('data:image/png;base64,', ''); 
 
            $.ajax({ 
                type: 'POST', 
                url: '@Url.Action("SignatureSave", "Grid")', 
                data: { 
                    imageData: newimage 
                }, 
 
                success: function (data) { 
                     
                } 
            }); 
        } 
        } 
 
 
[controller.cs] 
 
static string path = Directory.GetCurrentDirectory(); 
                                // give your folder in the application for storing 
 
 
        [HttpPost] 
 
        public ActionResult SignatureSave(string imageData) 
        { 
 
            string fileNameWitPath = path +"\\Images\\" + "10002" + ".png"; 
 
            using (FileStream fs = new FileStream(fileNameWitPath, FileMode.Create)) 
            { 
                using (BinaryWriter bw = new BinaryWriter(fs)) 
                { 
 
                    byte[] data = Convert.FromBase64String(imageData); 
 
                    bw.Write(data); 
 
                    bw.Close(); 
                } 
 
            } 
 
            return View(); 
 
        } 
 
//here the filenamepath contains the path for the image of the signature which can be stored in the database. 
 
 
 
 

Please refer the following documentation. 

To save signature in folder. 
To save signature in database. 
To use template column in grid 
To set the background color of signature. 
To set the background image for signature. 


If you need any further assistance please get back to us. 

Regards, 
Sathyanarayanamoorthy 


I am having problems with the background-image, and save-with-background properties of ejSignature in the Example below.  Neither of those properties are persisting inside the Grid Control.

SE Sathyanarayanamoorthy Eswararao Syncfusion Team February 10, 2018 02:55 AM UTC

Hi Eugene, 

We have analyzed your query and found that you need to show the saved signature images in the grid cell. We have achieved your requirement in the following example using columnTemplate feature of the grid. 

We have prepared a sample for your reference which can be downloaded from the below location. 


Please refer the code example below. 


 
<ej-grid id="FlatGrid" allow-paging="true" action-begin="begin" > 
 
                    ---------------------- 
 
    <e-columns> 
         
              ---------------------------- 
 
        <e-column field="EmployeeID" header-text="Employee ID" template="#columnTemplate" > 
            <e-edit-template create="create" read="read" write="write"> 
            </e-edit-template> 
        </e-column> 
 
          --------------------------------- 
 
</ej-grid> 
 
 
<script type="text/x-jsrender" id="columnTemplate"> 
     
    <img src='/images/{{:OrderID}}.png'  alt='{{:OrderID}}' /> 
     
</script> 
 
 
        --------------------------------------- 
 
 
 
 
    

Please refer the below screenshot. 

 

Please refer the below documentations. 




Regards, 
Sathyanarayanamoorthy 


EF Eugene Fong replied to Sathyanarayanamoorthy Eswararao February 12, 2018 05:16 PM UTC

Hi Eugene, 

We have analyzed your query and found that you need to show the saved signature images in the grid cell. We have achieved your requirement in the following example using columnTemplate feature of the grid. 

We have prepared a sample for your reference which can be downloaded from the below location. 


Please refer the code example below. 


 
<ej-grid id="FlatGrid" allow-paging="true" action-begin="begin" > 
 
                    ---------------------- 
 
    <e-columns> 
         
              ---------------------------- 
 
        <e-column field="EmployeeID" header-text="Employee ID" template="#columnTemplate" > 
            <e-edit-template create="create" read="read" write="write"> 
            </e-edit-template> 
        </e-column> 
 
          --------------------------------- 
 
</ej-grid> 
 
 
<script type="text/x-jsrender" id="columnTemplate"> 
     
    <img src='/images/{{:OrderID}}.png'  alt='{{:OrderID}}' /> 
     
</script> 
 
 
        --------------------------------------- 
 
 
 
 
    

Please refer the below screenshot. 

 

Please refer the below documentations. 




Regards, 
Sathyanarayanamoorthy 


The sample code does not provide the solution to the problem with the ejSignature not taking the background-image, and save-with-background properties.




SE Sathyanarayanamoorthy Eswararao Syncfusion Team February 13, 2018 01:48 PM UTC

Hi Eugene, 

We are quite unclear about your query so, please provide the below details before we proceed with your query. 

Please refer the below online sample. 


  1. Do you want to save the signature with the background image like in the above online sample.
  2. Do you need to display the signature with background image when the grid cell is edited.

The provided details will help us to analyze the query and provide solution as soon as possible. 

Regards, 
Sathyanarayanamoorthy 


EF Eugene Fong February 13, 2018 03:33 PM UTC


    1. Do you want to save the signature with the background image like in the above online sample.
    YES
    2. Do you need to display the signature with background image when the grid cell is edited.
    YES

I need both to happen if possible just like the sample but in the Grid cell.

SE Sathyanarayanamoorthy Eswararao Syncfusion Team February 14, 2018 01:54 PM UTC

Hi Eugene, 

According to your requirement you need to save the signature along with the background-image and also when the cell is edited you need the signature control to display with the background-image. We have achieved your requirement using background-image  and saveWithBackground property of Signature control in the following example. 


Please refer the below code example. 
 
   
<script type="text/javascript"> 
 
 
    function create() { 
        return $("<div>"); 
    } 
    function write(args) { 
 
        args.element.ejSignature({ width: "200px", height: "35px", backgroundImage: "/images/download.png", saveWithBackground: true, }); 
    } 
    function read(args) { 
        return args.ejSignature({}); 
    } 
 
    
 
Please refer the below screenshots. 

After saving the signature with background image and displaying in grid cell. 

 

While editing the cell in grid. 
 

Please refer the below documentation for the details of properties of signature. 



If you need any further assistance please get back to us. 

Regards, 
Sathyanarayanamoorthy 



Loader.
Up arrow icon