1. Home
  2. Forum
  3. Ionic
  4. How to share the image files which are displayed and selected on the grid view on click of share button

How to share the image files which are displayed and selected on the grid view on click of share button

Hello!
I am working on an app in which I want to share the furniture images which are displayed and selected on grid view. on click of the share button selected images should share to the social media which are existing in remote or android device

1 Reply 1 reply marked as answer
FS Farveen Sulthana Thameeztheen Basha Syncfusion Team November 30, 2020 03:42 PM UTC

Hi Ishan, 

Thanks for contacting Syncfusion Support. 
 
Query#:-  share the furniture images which are displayed and selected on grid view on click of the share button. 
 
We have checked your query and we can get the corresponding Image and row Details using Custom button. You can add custom button in the command column by specifying the type property of commands as “empty”. 

In the below example, we have placed the Image using Template column and button inside Grid column as custom button and also displayed the Image of the corresponding row on clicking button. You can perform your required actions on clicking the button as per your convenience. 

Refer to the code example:- 
Index.html 
  <body ng-app="starter"> 
    <ion-pane> 
        <!--<ion-header-bar class="bar-stable"> 
                  </ion-header-bar>--> 
            <ion-content ng-controller="ExampleController"> 
 
 
            <div class="angularbind ioncenter"> 
 
 
                <div ej-grid id="Grid" e-width="500px" e-datasource="data" class="ang-grid" e-allowpaging="true" > 
                     .      .      . 
                    <div e-columns> 
                     <div e-column e-headertext="Prodcut_Image" e-template="#templateDetails" e-textalign="right"></div>  //placed as template column                        <div e-column e-field="EmployeeID" e-headertext="Size"  e-textalign="right"></div> 
                      <div e-column e-headertext="Share"  e-commands="command" e-textalign="right"></div> //place button as custom button 
                    </div> 
                </div> 
 
               <div id="commanddialog" ej-dialog e-title="Details" e-showOnInit="false" e-width="450px"></div> 
            </div> 
 
        </ion-content> 
        <ion-list> 
 
        </ion-list> 
    </ion-pane> 
       <script type="text/x-jsrender" id="templateDetails"> 
           <img style="width: 65px; height: 60px" src="ej/Employees/{{:EmployeeID}}.png" alt="{{: EmployeeID }}" /> 
       </script> 
      <script id="templateData" type="text/x-jsrender"> 
          <table> 
             <tr> 
                <td style="text-align: center"> 
                <img style="width: 60px; height: 50px" class="emp-img" src="ej/Employees/{{:EmployeeID}}.png" alt="{{: EmployeeID }}" /> 
               </td> 
            <td> 
            <td> 
                <table class="CardTable" cellpadding="3" cellspacing="2"> 
                    <tr> 
                        <td>Name</td> 
                        <td>: {{:TitleOfCourtesy}} {{:FirstName}} {{:LastName}}</td> 
                    </tr> 
                    <tr> 
                        <td>Birth Date</td> 
                        <td>: {{:BirthDate}} </td> 
                    </tr> 
                     
                </table> 
            </td> 
            </td> 
        </tr> 
    </table> 
</script> 

App.js 

example.controller("ExampleController", function($scope, $cordovaSQLite) { 
     
      .   .    . 
     $scope.command = [ 
             { type: "details", buttonOptions: { text: "Details", width: "100", click: "onClick" } }  //define the custom command 
    ], 
     
        
  
}); 
  function onClick(args){    
          var grid = $("#Grid").ejGrid("instance"); 
          var index = this.element.closest("tr").index(); 
          var record = grid.getCurrentViewData()[index]; 
          $("#commanddialog").html($("#templateData").render(record))  //render template inside Dialog 
                .ejDialog("option", { position: { X: this.element.offset().left - 766, Y: this.element.offset().top - 187 } }) 
                .ejDialog("open"); 
           if (navigator.userAgent.indexOf("MSIE 8.0") != -1) 
               $("#commanddialog").find("img").width(150); 
       } 


Refer to the documentation and Demo link for js:- 

Please get back to us if you need any further assistance on it. 

Regards, 
Farveen sulthana T 
 
 


Marked as answer
Loader.
Up arrow icon