gridLayout Property

export class MedicalViewer_2DCell_Grid_Example { 
    constructor(callback) { 
        // LEADTOOLS ImageViewer to be used with this example 
        this.medicalViewer = null; 
        // Generic state value used by the examples 
        this.timesClicked = 0; 
        // Set the LEADTOOLS license. Replace this with your actual license file 
        lt.RasterSupport.setLicenseUri("https://demo.leadtools.com/licenses/js/LEADTOOLSEVAL.txt", "EVAL", null); 
        // Create an image viewer inside the imageViewerDiv element 
        const imageViewerDiv = document.getElementById("imageViewerDiv"); 
        const createOptions = new lt.Controls.ImageViewerCreateOptions(imageViewerDiv); 
        this.medicalViewer = new lt.Controls.Medical.MedicalViewer(imageViewerDiv, 2, 2); 
        this.medicalViewer.onSizeChanged(); 
        var cell = new lt.Controls.Medical.Cell(this.medicalViewer, this.medicalViewer.get_divId(), 1, 1); 
        // Set the show border to "true", to show a border around the cell.  
        cell.set_showFrameBorder(true); 
        // Add the cell to the viewer.   
        this.medicalViewer.layout.get_items().add(cell); 
        // [optional] Select the cell (it can also be selected by clicking on it.)  
        cell.set_selected(true); 
        // Now create a frame object which will hold the image inside the cell.  
        var cellFrame = new lt.Controls.Medical.Frame(cell); 
        // Add the frame to the cell class.  
        cell.get_frames().add(cellFrame); 
        // we are now going to to download an image from LEADTOOLS medical viewer demo web site, you need to change this to download images from your database.  
        var xhttp = new XMLHttpRequest(); 
        xhttp.onreadystatechange = function (data) { 
            if (this.readyState == 4 && this.status == 200) { 
                // here we got the authentication Code that we need to retrieve the images from leadtools database.  
                var authenticationCode = encodeURIComponent(this.responseText); 
                // now, this is the MRTI info that contains the image information, width, height, tiles....etc.  
                var mrtiInfo = new lt.Controls.Medical.MRTIImage(); 
                // The image dpi.  
                mrtiInfo.fullDpi = lt.LeadSizeD.create(150, 150); 
                // the tile size, recommended value is 256  
                mrtiInfo.tileSize = lt.LeadSizeD.create(256, 256); 
                mrtiInfo.frameIndex = 0; 
                // does this image support window level.  
                mrtiInfo.supportWindowLevel = true; 
                // different resolution for the image.  
                var resolutions = [{ "width": 512, "height": 512 }, { "width": 256, "height": 256 }, { "width": 128, "height": 128 }, { "width": 64, "height": 64 }]; 
                mrtiInfo.resolutions = []; 
                for (var i = 0; i < resolutions.length; i++) { 
                    mrtiInfo.resolutions[i] = lt.LeadSizeD.create(resolutions[i].width, resolutions[i].height); 
                } 
                // the image width and height.  
                cellFrame.set_width(mrtiInfo.resolutions[0].width); 
                cellFrame.set_height(mrtiInfo.resolutions[0].height); 
                // the image full size.  
                mrtiInfo.fullSize = lt.LeadSizeD.create(cellFrame.get_width(), cellFrame.get_height()); 
                // now we need the image URL,  
                var imageUri = "https://medicaldemos.leadtools.com/MedicalViewerServiceAsp22/api/retrieve"; 
                imageUri += "/GetImageTile?auth="; 
                imageUri += authenticationCode; 
                // this the image instance UID, change this if you want to retrieve anything else.  
                imageUri += "&instance=0.0.0.0.1.373.3.18.920663105"; 
                mrtiInfo.imageUri = imageUri; 
                // set this info to the cell frame.  
                cellFrame.mrtiInfo = mrtiInfo; 
                // now we need to set the information for the image so we can do window level.  
                var imageInfo = new lt.Controls.Medical.DICOMImageInformation(); 
                // set the image width and height.  
                imageInfo.width = 512; 
                imageInfo.height = 512; 
                // bits per pixel for the image  
                imageInfo.bitsPerPixel = 16; 
                // low and high bit.  
                imageInfo.lowBit = 0; 
                imageInfo.highBit = 11; 
                // other information, setting some of them to zero means that the toolkit will try and calculate it by itself, but you can always get those values from the DicomDataSet.  
                imageInfo.modalityIntercept = 0; 
                imageInfo.modalitySlope = 1; 
                imageInfo.minValue = 0; 
                imageInfo.maxValue = 0; 
                imageInfo.windowWidth = 1079; 
                imageInfo.windowCenter = 539; 
                imageInfo.signed = false; 
                imageInfo.photometricInterpretation = 'MONOCHROME2'; 
                imageInfo.firstStoredPixelValueMapped = 0; 
                // set these information to the frame.  
                cellFrame.set_information(imageInfo); 
            } 
        }; 
        // We are trying here to get an image from the LEADTOOLS database, we need to login and get the authentication code.  
        xhttp.open("POST", "https://medicaldemos.leadtools.com/MedicalViewerServiceAsp22/api/auth/AuthenticateUser", true); 
        xhttp.setRequestHeader('Content-Type', 'application/json; charset=UTF-8'); 
        // we log in as a 'guest', after calling the below line, we will receive the authentication code sent via 'onreadystatechange' above.  
        xhttp.send(JSON.stringify({ userName: 'guest', password: 'guest', userData: '' })); 
        const exampleButton = document.getElementById("exampleButton"); 
        exampleButton.addEventListener("click", () => { 
            this.timesClicked++; 
            // Run the example 
            if (callback) 
                callback(this.medicalViewer); 
        }); 
    } 
} 

import { MedicalViewer_2DCell_Grid_Example } from "../MedicalViewer_2DCell_Grid_Example"; 
 
 
export class MenuItem_Example { 
   private viewerExample; 
   private medicalViewer; 
   constructor() { 
      this.viewerExample = new MedicalViewer_2DCell_Grid_Example(this.run); 
   } 
 
   private clicked = (e: MouseEvent) => { 
      if (e.button == 2) { 
         var cell: lt.Controls.Medical.Cell = this.medicalViewer.layout.cells.get_item(0); 
         var menu: lt.Controls.Medical.Menu = new lt.Controls.Medical.Menu("Relocate "); 
 
         menu.items.add(new lt.Controls.Medical.MenuItem("Move the cell here", null, (<any>e.currentTarget).emptyCell)); 
 
         menu.show((<any>e.currentTarget).emptyCell, e.offsetX, e.offsetY, lt.LeadRectD.create(0, 0, 500, 500)); 
 
 
         menu.menuItemSelected.add((sender, e) => { 
 
            var selectedCell: lt.Controls.Medical.LayoutManagerItem = e.item.userData; 
 
            var selectedCellRowPosition = selectedCell.rowPosition; 
            var selectedCellColumnsPosition = selectedCell.columnPosition; 
 
            selectedCell.rowPosition = cell.rowPosition; 
            selectedCell.columnPosition = cell.columnPosition; 
            cell.rowPosition = selectedCellRowPosition; 
            cell.columnPosition = selectedCellColumnsPosition; 
         }); 
      } 
   } 
 
   private run = (medicalViewer: lt.Controls.Medical.MedicalViewer) => { 
      this.medicalViewer = medicalViewer; 
      var i = 0; 
      var length = medicalViewer.emptyDivs.count; 
      for (i = 0; i < length; i++) { 
         var emptyCell: lt.Controls.Medical.EmptyCell = <lt.Controls.Medical.EmptyCell>medicalViewer.emptyDivs.item(i); 
         (<any>emptyCell.div).emptyCell = emptyCell; 
 
         emptyCell.div.addEventListener('mouseup', this.clicked); 
      } 
 
 
      medicalViewer.emptyDivs.add_collectionChanged((sender, e) => { 
         var index = 0; 
         var div; 
         var length = e.newItems.length; 
 
         if (e.get_action() === lt.NotifyLeadCollectionChangedAction.add) { 
            for (; index < length; index++) { 
 
               var emptyCell: lt.Controls.Medical.EmptyCell = e.newItems[index]; 
               div = emptyCell.div; 
               (<any>div.emptyCell) = emptyCell; 
               div.addEventListener('mouseup', this.clicked); 
            } 
 
         } 
      }); 
 
   } 
} 

export class MedicalViewer_2DCell_Grid_Example { 
   // LEADTOOLS ImageViewer to be used with this example 
   protected medicalViewer: lt.Controls.Medical.MedicalViewer = null; 
   // Generic state value used by the examples 
   public timesClicked: number = 0; 
 
   constructor(callback?: (medicalViewer: lt.Controls.Medical.MedicalViewer) => void) { 
      // Set the LEADTOOLS license. Replace this with your actual license file 
      lt.RasterSupport.setLicenseUri("https://demo.leadtools.com/licenses/js/LEADTOOLSEVAL.txt", "EVAL", null); 
 
      // Create an image viewer inside the imageViewerDiv element 
      const imageViewerDiv: HTMLDivElement = <HTMLDivElement>document.getElementById("imageViewerDiv"); 
      const createOptions: lt.Controls.ImageViewerCreateOptions = new lt.Controls.ImageViewerCreateOptions(imageViewerDiv); 
 
 
 
      this.medicalViewer = new lt.Controls.Medical.MedicalViewer(imageViewerDiv, 2, 2); 
      this.medicalViewer.onSizeChanged(); 
 
      var cell = new lt.Controls.Medical.Cell(this.medicalViewer, this.medicalViewer.get_divId(), 1, 1); 
 
      // Set the show border to "true", to show a border around the cell.  
      cell.set_showFrameBorder(true); 
 
      // Add the cell to the viewer.   
      this.medicalViewer.layout.get_items().add(cell); 
 
      // [optional] Select the cell (it can also be selected by clicking on it.)  
      cell.set_selected(true); 
 
      // Now create a frame object which will hold the image inside the cell.  
      var cellFrame = new lt.Controls.Medical.Frame(cell); 
 
      // Add the frame to the cell class.  
      cell.get_frames().add(cellFrame); 
 
      // we are now going to to download an image from LEADTOOLS Medical Viewer demo web site, change this to download images from your database.  
      var xhttp = new XMLHttpRequest(); 
      xhttp.onreadystatechange = function (data) { 
         if (this.readyState == 4 && this.status == 200) { 
            // here we got the authentication Code that we need to retrieve the images from LEADTOOLS database.  
            var authenticationCode = encodeURIComponent(this.responseText); 
 
 
            // now, this is the MRTI info that contains the image information, width, height, tiles....etc.  
            var mrtiInfo = new lt.Controls.Medical.MRTIImage(); 
 
            // The image dpi.  
            mrtiInfo.fullDpi = lt.LeadSizeD.create(150, 150); 
 
            // the tile size, recommended value is 256  
            mrtiInfo.tileSize = lt.LeadSizeD.create(256, 256); 
            mrtiInfo.frameIndex = 0; 
 
            // does this image support window level.  
            mrtiInfo.supportWindowLevel = true; 
 
            // different resolution for the image.  
            var resolutions = [{ "width": 512, "height": 512 }, { "width": 256, "height": 256 }, { "width": 128, "height": 128 }, { "width": 64, "height": 64 }]; 
            mrtiInfo.resolutions = []; 
            for (var i = 0; i < resolutions.length; i++) { 
               mrtiInfo.resolutions[i] = lt.LeadSizeD.create(resolutions[i].width, resolutions[i].height); 
            } 
 
            // the image width and height.  
            cellFrame.set_width(mrtiInfo.resolutions[0].width); 
            cellFrame.set_height(mrtiInfo.resolutions[0].height); 
 
            // the image full size.  
            mrtiInfo.fullSize = lt.LeadSizeD.create(cellFrame.get_width(), cellFrame.get_height()); 
 
            // now we need the image URL  
            var imageUri = "https://medicaldemos.leadtools.com/MedicalViewerServiceAsp22/api/retrieve"; 
            imageUri += "/GetImageTile?auth="; 
            imageUri += authenticationCode; 
            // this the image instance UID, change this if you want to retrieve anything else.  
            imageUri += "&instance=0.0.0.0.1.373.3.18.920663105"; 
            mrtiInfo.imageUri = imageUri; 
 
 
            // set this info to the cell frame.  
            cellFrame.mrtiInfo = mrtiInfo; 
 
 
            // now we need to set the information for the image so we can do window level.  
            var imageInfo = new lt.Controls.Medical.DICOMImageInformation(); 
 
 
            // set the image width and height.  
            imageInfo.width = 512; 
            imageInfo.height = 512; 
 
            // bits per pixel for the image  
            imageInfo.bitsPerPixel = 16; 
            // low and high bit.  
            imageInfo.lowBit = 0; 
            imageInfo.highBit = 11; 
 
            // other information, setting some of them to zero means that the toolkit will try and calculate it by itself, but you can always get those values from the DicomDataSet.  
            imageInfo.autoScaleIntercept = 0; 
            imageInfo.autoScaleSlope = 1; 
            imageInfo.minValue = 0; 
            imageInfo.maxValue = 0; 
            imageInfo.windowWidth = 1079; 
            imageInfo.windowCenter = 539; 
            imageInfo.signed = false; 
            imageInfo.photometricInterpretation = 'MONOCHROME2'; 
            imageInfo.firstStoredPixelValueMapped = 0; 
 
            // set these information to the frame.  
 
            cellFrame.set_information(imageInfo); 
         } 
      }; 
 
      // We are trying here to get an image from the Leadtools database, we need to login and get the authentication code.  
      xhttp.open("POST", "https://medicaldemos.leadtools.com/MedicalViewerServiceAsp22/api/auth/AuthenticateUser", true); 
      xhttp.setRequestHeader('Content-Type', 'application/json; charset=UTF-8'); 
      // we log in as a 'guest', after calling the below line, we will receive the authentication code sent via 'onreadystatechange' above.  
      xhttp.send(JSON.stringify({ userName: 'guest', password: 'guest', userData: '' })); 
 
      const exampleButton = document.getElementById("exampleButton"); 
      exampleButton.addEventListener("click", () => { 
         this.timesClicked++; 
         // Run the example 
         if (callback) 
            callback(this.medicalViewer); 
      }); 
   } 
} 

<!doctype html> 
<html lang="en"> 
   <title>Menu Item Example</title> 
 
<head> 
   <script src="https://code.jquery.com/jquery-2.2.4.min.js" 
      integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script> 
 
   <script src="../../LT/Leadtools.js"></script> 
   <script src="../../LT/Leadtools.Controls.js"></script> 
   <script src="../../LT/Leadtools.Annotations.Engine.js"></script> 
   <script src="../../LT/Leadtools.Annotations.Designers.js"></script> 
   <script src="../../LT/Leadtools.Annotations.Rendering.Javascript.js"></script> 
   <script src="../../LT/Leadtools.Annotations.Automation.js"></script> 
   <script src="../../LT/Leadtools.ImageProcessing.Main.js"></script> 
   <script src="../../LT/Leadtools.ImageProcessing.Color.js"></script> 
   <script src="../../LT/Leadtools.ImageProcessing.Core.js"></script> 
   <script src="../../LT/Leadtools.ImageProcessing.Effects.js"></script> 
   <script src="../../LT/Leadtools.Document.js"></script> 
   <script src="../../LT/Leadtools.Document.Viewer.js"></script> 
   <script src="../../LT/Leadtools.Controls.Medical.js"></script> 
   <style> 
      body { 
         font-family: 'Segoe UI', sans-serif; 
      } 
 
      #imageViewerDiv { 
         border: 1px solid #888; 
         width: 500px; 
         height: 500px; 
         background-color: #eee; 
      } 
   </style> 
 
   <!-- All demo files are bundled and appended to the window --> 
   <script src="../../bundle.js" type="text/javascript"></script> 
</head> 
 
<body  oncontextmenu="return false;"> 
   <p>Right click on empty cell and select the item to move the cell to the clicked location.</p> 
   <div> 
      <button type="button" id="exampleButton">Run Example</button> 
   </div> 
   <div id="imageViewerDiv"></div> 
   <div id="output"></div> 
</body> 
 
<script> 
   window.onload = () => { 
       const example = new window.examples.MedicalViewer.MenuItem(); 
 
   }; 
</script> 
</html>