gistfile1.txt

    import {
  Component,
  Inject,
  OnInit,
  EventEmitter,
  ViewChild,
  Input,
  Output
}
from '@angular/core';
import {
  Router
}
from '@angular/router';
import {
  LengthService
}
from '../../services/hyper.service';
import {
  KendoGridComponent
}
from '../grid/grid.component';
import {
  saveService
}
from '../../services/saveService';
import {
  jellyService
}
from '../jelly/jellyService';
import {
  KendoDialog
}
from '../shared/kendoDialog/kendodialog';
import {
  validationService
}
from '../shared/content/validation';
import {
  Star
}
from '../shared/sky/sky-circle';

declare var $: any;

var record_to_delete = null;



@Component({
  selector: 'Penguin',
  template: `<div id="windowcontainer"></div>`
})

export class Penguin implements OnInit {

  private ContractInfoPopUpWindow;
  private airDate;
  private airTime;
  private showTitle;
  private episodeTitle;
  private isEditable: boolean;
  private MainGrid;
  private grid;
  private dataSourceVal;
  private gridData;
  private dynamic_cols = [];
  private dynamic_model;
  public _dataSource;
  private fileName;
  private _grid;
  private _grid2;
  private options;
  public scrollClicked;
  private window;
  private isVisible = false;
  public encodeBase64: any;
  public dragDrop: string;
  public clearBtn: string;
  public fileSelect: string;
  private isDone: boolean = true
  public isContractLocked = false;
  private filesToUpload: Array < File > ;
  private loggedUserName;
  private pencilType = '';
  public show: string;
  public all: string;
  public entries: string;
  public cancelBtn: string;
  public okBtn: string;
  public attachBtn: string;
  public elfBtn: string;
  public browseBtn: string;
  public attachmentType: string;
  private dialogCommand;
  private selectedoptions;
  public openFlag = false;
  private isNavigate = false;
  private resolve;
  private isOkOnly;
  private isDeleteOnly;
  private isYesNO;
  private isDeleteYesNO;
  private delCostAlert;
  private _contextmenuCost;
  private _contextmenuOption;
  private selectedDotRow;
  private _contextmenu;
  private delWinAlert;
  private _contextmenuWindow;
  public pencilsCheck=false;
  public selectedPencilId;
  public userId;


  private activeTab = 'tab-1';



  @Input() kendoCommandObj: any;
  @ViewChild(Star) public sky: Star;
  @ViewChild('tabs') private tabs;

  private futureAirings = [];
  private pastAirings = [];

  constructor(public validation: validationService, private router: Router, public hyperService: LengthService, public saveService: saveService, public jellyService: jellyService) {
    //this.name = 'simple tabs'
    //this.name = 'simple tabs';
  }

  private kendocommand = {
    edit: {
      createAt: "bottom"
    },
    group: false,
    reorder: true,
    disableFreeze: true,
    resize: true,
    sort: true,
    autoBind: true,
    filter: false,
    pager: {
      messages: {
        //display: "Showing {0} to {1} of {2} entries"
      }
    },
    model: {},
    columns: [],
    pagesize: 50,
    getComponentUrl: "pencils",
    searchFields: [],
    mandatoryFields: [],
    saveStatus: false
  };


  @Output() applyAPTInfo: EventEmitter < any > = new EventEmitter < any > ();
  @Output('pencilCount') getPencilEvent = new EventEmitter<number>();

  
  
  ngOnInit() {
    this.pencilType = 'Contract';
    let that = this;
    let attributes=this.hyperService.getSeesionStorageValue();
        if(attributes) {
            this.userId = attributes.user_attributes.SSO[0];
        }
    console.log("this.userId---->" + this.userId);
    
    if (!this.isContractLocked) {
      this.isContractLocked = this.jellyService.isContractLocked;
    }
    //this.kendocommand.getComponentUrl = 'pens/v1/pencil/' + this.jellyService.selectedContract + '?includes=pencils';

    let language = this.hyperService.userLang;
    let navHeaderHeight = $('.navHeaderBox').outerHeight();
    $('.breadCrumbBox').css('top:' + navHeaderHeight + 'px');

    //this.filepath();

    this.kendocommand.model = {
      id: "pencilId",
      fields: {
        contextRow: {
          editable: false,
          filterable: true
        },
        pencilId: {
          editable: true,
          filterable: false,
          sortable: false
        },
        pencilName: {
          editable: false,
          nullable: true
        },
        pencilType: {
          editable: true,
          nullable: true
        },
        pencilData: {
          editable: false,
          nullable: true
        },
        notes: {
          editable: false,
          nullable: true
        },
        elfDocID: {
          validation: {
            required: true,
            digits: true
          }
        },
        url: {
          editable: false,
          nullable: true
        },
        date: {
          editable: false,
          nullable: true
        },
        addedByName: {
          editable: false,
          nullable: true
        },
        userID: {
          editable: false,
          nullable: true
        },
        operationType: {
          editable: true,
          filterable: false,
          sortable: false
        }
      }
    };



  }

  @ViewChild(KendoGridComponent) public gridkendo: KendoGridComponent;
  @ViewChild(KendoDialog) private kendoDialog: KendoDialog;



  girdPagesize(value): void {
    this.gridkendo.gridPageSizeChange(value);
  }

  // addPencil(): any {
  //   $('.addELFPencilForm').show();
  // }




  getDate(): any {
    let cDate = new Date();
    let cMonth = cDate.getMonth();
    cMonth++;
    let date = cMonth + "/" + cDate.getDate() + "/" + cDate.getFullYear(); //+" "+Time;
    return date;
  }

  tabsUL(event): void {
    var tab_id = event.target.hash.replace('#', '');
    console.log(event);
    // alert("tab_id------>" + tab_id);
    this.activeTab = tab_id;
    console.log(tab_id);
    event.preventDefault();
  }



  cancel(): void {
    this.isDone = true;
    this.dragDrop = this.clearBtn;
    this.pencilType = 'Contract';
    $("#attachPencilBrowseBtn").val('');
    $('.addELFPencilForm').hide();
  }

  /*Encode File*/
  readThis(inputValue: any): void {
    var that = this;
    var file: File = inputValue.files[0];

    var myReader: FileReader = new FileReader();
    myReader.onloadend = (e) => {
      this.encodeBase64 = myReader.result;
      that.fileSelect = $("#attachPencilBrowseBtn").val().replace(/^.*\\/, "");
      if (that.fileSelect == '') {
        that.dragDrop = that.clearBtn;
      } else {
        that.dragDrop = "";
        that.dragDrop = that.fileSelect;
      }
    }
    $('.addELFPencilForm').show();
    if (inputValue.files.length > 0) {
      var fileSize = 0;

      fileSize = inputValue.files[0].size / 1048576; //size in mb 

      if (fileSize > 5) {
        $('.sizeFinancialPencil').show();
        $("#attachPencilBrowseBtn").val('');
        this.fileSelect = "";
      }

      myReader.readAsDataURL(file);
    }


  }






  uploadFile(evt, dropValue, values) {

    let todayDate = this.todayDate();
    let grid = $('#penPencilsGrid').data('kendoGrid');
    let _dataSource = grid.dataSource;
    let pageSize = _dataSource.pageSize();
    //console.log("_dataSource._data---->" + _dataSource._data.length);
    let gridLength = _dataSource._data.length;
    let filename;

     console.log("loggedUserName---->" + $(".loggedUserName").text());

    let attributes=this.hyperService.getSeesionStorageValue();


     if(attributes) {
      this.userId = attributes.user_attributes.SSO[0];
      this.loggedUserName = attributes.user_attributes.DisplayName[0];
    }

    if (this.fileSelect == null || this.fileSelect == "") {
      _dataSource.insert(gridLength, {
        "pencilId": "104",
        "pencilName": filename,
        "pencilType": this.pencilType,
        "pencilData": "",
        "notes": "",
        "notesId": null,
        "elfDocID": "",
        "url": "http://localhost:3000/upload",
        "date": todayDate,
        "addedByName": this.loggedUserName,
        "userID": this.userId,
        "operationType": "create"
      });
    } else {

      let temparry = [];
      let attributes = this.hyperService.getSeesionStorageValue();
      let lastIndex = this.fileSelect.lastIndexOf(".");
      if (lastIndex >= 0) {
        filename = this.fileSelect; //.substring(lastIndex,0);
      }
   

      var fileSize = 0;
      fileSize = fileSize / 1048576; //size in mb 



      let k = _dataSource._data.length;

      _dataSource.insert(k, {
        "pencilId": "105",
        "pencilName": filename,
        "pencilType": this.pencilType,
        "pencilData": "",
        "notes": "",
        "notesId": null,
        "elfDocID": "",
        "url": "http://localhost:3000/upload",
        "date": todayDate,
        "addedByName": this.loggedUserName,
        "userID": this.userId,
        "operationType": "create"
      });

      // let data = {
      //   "data": [{
      //     "pencilId": "106",
      //     "pencilName": filename,
      //     "pencilType": this.pencilType,
      //     "pencilData": "",
      //     "notes": "",
      //     "notesId": null,
      //     "elfDocID": "",
      //     "url": "http://localhost:3000/upload",
      //     "date": todayDate,
      //     "addedByName": $(".loggedUserName").text(),
      //     "userID": "",
      //     "operationType": "create"
      //   }]
      // };

      //temparry.push(data)
      let pencilData = {};
      //pencilData["gridData"] = data;

      this.dragDrop = "";
      this.dragDrop = this.clearBtn;

      $("#attachPencilBrowseBtn").val('');
      this.fileSelect = "";

      let data_source = _dataSource.data();
      for (let d = 0; d < data_source.length; d++) {
        if (data_source[d].isElfDoc == true && data_source[d].elfDocID == "") {
          //this.gridkendo.enableSavePencil(false);
        }

      }

    }
    $('.addELFPencilForm').hide();
    let permissionDto = "";
    let functionalList = "";

    if (true) {

      let currentData = _dataSource._data;
      // console.log("filename---->" + filename);
       console.log("values.urle---->" + values.url);
      //this.selectedPencilId=values.url;


              this.selectedPencilId=values.url;
        
        // var str = "pens/v1/pencil/35369";
        
         var strx = this.selectedPencilId;

      var res = strx.substring(23);


   

    let attributes=this.hyperService.getSeesionStorageValue();

    if(attributes) {
      this.userId = attributes.user_attributes.SSO[0];
      this.loggedUserName = attributes.user_attributes.DisplayName[0];
    }
    
    let compassUser = this.userId;
    // console.log("this.userId---->" + this.userId);
    // console.log("this.userId---->" + this.loggedUserName);

    //"pencilId": this._dataSource._data.length+1,

      let records = [
        { 
          "id": res,
          "pencilDtos" : [{
            "pencilId": this._dataSource._data.length+1,
            "pencilName": filename,
            "pencilType": this.pencilType,
            "pencilData": this.encodeBase64,
            "notes": "",
            "notesId": 123,
            "elfDocID": 123,
            "url": "http://localhost:3000/upload",
            "categoryType": "",
            "Timestamp": todayDate,
            "userID": compassUser,
            "addedByName": this.loggedUserName,
            "operationType": "create",

            }]
          
        } 






      ];
      for (let i = 0; i < currentData.length; i++) {
        if (currentData[i].pencilId == "") {
        } 
      }

      for (let i = 0; i < _dataSource._destroyed.length; i++) {

      }

       
      this.sky.tigerStart();
      //kendo.ui.sky($("#loading"), true);
      this.hyperService.getResponse("pens/v1/pencil/", "post", records[0])

      .subscribe(data => {

        console.log("data---->" + data);

          if (data.code == 'S001') {
            //kendo.ui.sky($("#loading"), false);
           // this.sky.requestEnd();

          } else {
           // this.sky.requestEnd();
          }
          //this.sky.requestEnd();


        },
        err => {
          //this.sky.requestEnd();
        }
      );
    }

    $('.k-pager-numbers li').last().find('a').click();

  }

  browseButtonAdd(): any {
    $('#attachPencilBrowseBtn').trigger('click');
  }

  todayDate(): any {
    let date;
    let month;
    let today = new Date();
    let dd = today.getDate();
    let mm = today.getMonth() + 1; //January is 0!
    let yyyy = today.getFullYear();
    if (dd < 10) {
      date = dd.toString();
      date = '0' + date;
    } else {
      date = dd.toString();
    }
    if (mm < 10) {
      month = mm.toString();
      month = '0' + month;
    } else {
      month = mm.toString();
    }
    let todayDay = month + '/' + date + '/' + yyyy;
    return todayDay;
  }





  /* On Change */
  changeListener($event): void {
    this.readThis($event.target);
  }

  

  openPopup(values, source:string): void {

    //this.sky.tigerStart();
    kendo.ui.sky($("#loading"), true);

    if(source=='title')
      {
        this.pencilsCheck=true;
      }

      

        $("#windowcontainer").append(`
              <div class="record-del-menu">
                <div class="record-arrow-left"></div>
                <div class="record-del-menu-label">Delete Pencil</div>
              </div>


              <div id="PenguinPopup" class="kendopobUpBox">
                <div id="popup-loading"></div>
                <div class="row kendoPopUpHeader">
                                <div class="kendoPopUpHeaderTitleBox">
                                  <h4 class="kPopUpTitle">VIEW AIRINGS</h4>
                                                
                                </div>
                                <div class="kendoPopUpHeaderActionsBox">
                                    <a id="forcloseBtn" class="commonLink triggerKPopUpClick" (click)=close()>CLOSE</a>
                                </div>
                </div><div class="clearFloat"></div>

                <div class="" style="`+(source == 'jelly' ? 'display:none' : 'display:inherit')+`">
                    <div  class="subTabsBox popupSubTab"  id="subTabsBoxPopup">
                                    <div class="row subTabsContainer listSliderContainer">
                                                    <div class="scroller scroller-left inactive">
                                                                    <i class="glyphicon glyphicon-chevron-left"></i>
                                                    </div>
                                                    <div class="scroller scroller-right inactive">
                                                                    <i class="glyphicon glyphicon-chevron-right"></i>
                                                    </div>
                                                    <div class="subTabwrapper listSliderWrapper">
                                                                    <ul class="nav nav-tabs list sliderList" id="subTabNav">
                                                                                    <li class="active" data-tab="title-tab"><a>title</a></li>
                                                                                    <li data-tab="jelly-tab"><a>jelly</a></li>
                                                                    </ul>
                                                    </div>
                                    </div>
                    </div>
                </div>

                
                      <div class="manage-pencils-tabs-container">
                          

                          <div id="title-tab" class="manage-pencils-tabs-content active">
                            <div class="row">
                              <div class="compBoxGrid financeDocComp">
                                              <div class="pull-left">
                                                              <div>
                                                                              <label class="fileContainer marginBottom0Imp">
                                                                                              <div class="dragDropIcon displayInlineBlock marginTop5px"></div>
                                                                                              <input type="file" id="attachPencilBrowseBtn" [class.disabled]="isContractLocked" (change)="changeListener($event)" />
                                                                              </label>
                                                                              <label class="penUploadInfoText">
                                                                              Drop pencils here to upload (Maximum pencil size: 5MB)
                                                                              </label>
                                                              </div>

                                                              
                                                              <div class="pasteLinkHolder">
                                                                              <div class="pull-left">
                                                                                              <input type="text" class="penUploadTextBox" placeholder="Paste link here to upload pencil."  name="pasteLinkTextBox" id="pasteLinkTextBox">
                                                                                              <button type="button" id="savePencilFromLink" class="clearBtn">Save</button>
                                                                              </div>
                                                              </div>

                                                              

                                              </div>
                                              <div class="pull-right">
                                                              <label class="commonLink cursorPointer lineHeightInputs" (click)="browseButton()" id="forAttachPencilBrowseBtn" >
                                                              ADD NEW
                                                              </label>
                                              </div><div class="clearFloat"></div>
                              </div>
                              
                              <div class="addELFPencilForm">
                                              <div class="kendopobUpBox kendoWindow kPopupConfirmationBox">
                                                              <div class="row kendoPopUpGridCollection kendoPopUpContent lineHeightInputs">
                                                                              <div class="kendoContent">Are you sure you want to upload file</div>
                                                              </div><div class="clearFloat"></div>
                                                              
                                                              <div class="row kendoPopUpFooter textAligncenterImp">
                                                                              <button class="commonBtn" type="button" id ="penPencilOk" (click)="uploadFile($event,pencil.value, v)">OK</button>
                                                                              <button class="clearBtn" type="button" id ="penPencilCancel" (click)="cancel()">Cancel</button>
                                                              </div><div class="clearFloat"></div>
                                              </div>
                              </div>

                              <div class="deleteFinancialPencil" id="divdeleteFinancialPencil">
                                  <div class="kendopobUpBox kendoWindow kPopupConfirmationBox">
                                    <div class="row kendoPopUpGridCollection kendoPopUpContent lineHeightInputs">
                                      <div class="kendoContent">Are you sure you want to delete the selected pencil</div>
                                    </div><div class="clearFloat"></div>
                                    
                                    <div class="row kendoPopUpFooter textAligncenterImp">
                                    <button class="commonBtn" type="button" id ="deletePencilYes" (click)="recordDelete(values)">Yes</button>
                                    <button class="clearBtn" type="button" id ="deletePencilNo" >No</button>
                                    </div><div class="clearFloat"></div>
                                  </div>
                              </div>

                              <div class="saveLinkPopup">
                                  <div class="kendopobUpBox kendoWindow kPopupConfirmationBox">
                                    <div class="row kendoPopUpGridCollection kendoPopUpContent lineHeightInputs">
                                      <div class="kendoContent">Are you sure you want to upload file</div>
                                    </div>
                                    <div class="clearFloat"></div>

                                    <div class="row kendoPopUpFooter textAligncenterImp">
                                      <button class="commonBtn" type="button" id="saveLinkPopupYes">Ok</button>
                                      <button class="clearBtn" type="button" id="saveLinkPopupNo">Cancel</button>
                                    </div>
                                    
                                    <div class="clearFloat"></div>
                                  </div>
                                </div>

                              <div class="filePathpenPencil">
                                  <div class="kendopobUpBox kendoWindow kPopupConfirmationBox">
                                    <div class="row kendoPopUpGridCollection kendoPopUpContent lineHeightInputs">
                                      <div class="kendoContent">Are you sure you want to upload the selected pencil</div>
                                    </div><div class="clearFloat"></div>
                                    
                                    <div class="row kendoPopUpFooter textAligncenterImp">
                                    <button class="commonBtn" type="button" id ="filePathpenPencilYes" >Yes</button>
                                    <button class="clearBtn" type="button" id ="filePathpenPenciltNo" >No</button>
                                    </div><div class="clearFloat"></div>
                                  </div>
                              </div>

                              <div class="sizeFinancialPencil" id="divsizeFinancialPencil">
                                  <div class="customOverlayNKendoPopup"></div>

                                    <div class="kendopobUpBox kendoWindow kPopupConfirmationBox">
                                      <div class="row kendoPopUpGridCollection kendoPopUpContent lineHeightInputs">
                                        <div class="kendoContent">The pencil size exceeds the max limit of 5 MB</div>
                                      </div><div class="clearFloat"></div>
                                     
                                      <div class="row kendoPopUpFooter textAligncenterImp">
                                        <button class="clearBtn" type="button" id ="sizePencilYes" (click)="recordSize()">CANCEL</button>
                                      </div><div class="clearFloat"></div>
                                    </div>
                                </div>
                              

                              <div class="col-sm-12 popUpKGrid pad0Imp">
                                              <div id="penPencilsGrid"></div>
                              </div>
                            </div>
                          </div>

                          <div class="" style="`+(source == 'jelly' ? 'display:none' : 'display:inherit')+`">

                            <div id="jelly-tab" class="manage-pencils-tabs-content">
                                <div class="col-sm-12 popUpKGrid pad0Imp">
                                                          
                                    <div class="padTop10px" id="penTitleGrid">
                                        
                                    </div>
                                </div>
                            </div>
                          </div>
                        

                      </div><!-- container -->
                

               
 
                
                <div class="clearFloat"></div>
 
                <div id="contextMenuItems">
                                <ul class= "kendu-custom-contextmenu" id="context-menuWindows">
                                                <li id="delWin">Delete Windows</li>
                                </ul>
                </div>
        </div>`);

      //}
      



    let that = this;

     $('#subTabsBoxPopup .sliderList li').click(function(){
        var tab_id = $(this).attr('data-tab');

        $('#subTabsBoxPopup .sliderList li').removeClass('active');
        $('.manage-pencils-tabs-content').removeClass('active');

        $(this).addClass('active');
        $("#"+tab_id).addClass('active');
      })
      
      $('#subTabsBoxPopup .glyphicon-chevron-left').click(function(){
       $('#subTabsBoxPopup .sliderList li').eq(0).trigger('click');
            $('#subTabsBoxPopup .glyphicon-chevron-left').addClass('inactive');
             $('#subTabsBoxPopup .glyphicon-chevron-right').removeClass('inactive');
      })
      $('#subTabsBoxPopup .glyphicon-chevron-right').click(function(){
        $('#subTabsBoxPopup .sliderList li').eq(1).trigger('click');
            $('#subTabsBoxPopup .glyphicon-chevron-left').removeClass('inactive');
             $('#subTabsBoxPopup .glyphicon-chevron-right').addClass('inactive');
      })

    $("#attachPencilBrowseBtn").unbind().change(function(e) {
      that.changeListener(e);
    });

    $("#attachPencilBrowseBtn2").unbind().change(function(e) {
      that.changeListener(e);
    });

    $("#forAttachPencilBrowseBtn").unbind().click(function(e) {
        that.browseButtonAdd();
    });

    $("#penPencilCancel").unbind().click(function() {
      that.cancel();
    });


    $("#penPencilOk").unbind().click(function(evt, dropValue) {
      that.uploadFile(evt, dropValue, values);
    });


    $("#penPencilSave").unbind().click(function(evt, dropValue) {
      that.uploadFile(evt, dropValue, values);
    });

    $("#forcloseBtn").unbind().click(function() {
      that.close();
    });
    $("#deletePencilYes").unbind().click(function() {
      that.recordDelete(values);
    });
    $("#sizePencilYes").unbind().click(function() {
      that.recordSize();
    });

    that.ContractInfoPopUpWindow = $("#PenguinPopup");


    this.fileName = values.excelFileName;
    let dataSourceData = [];
    that._dataSource = new kendo.data.DataSource({
      
      pageSize: 10
    });

    $('.saveLinkPopup').hide();
    var textBoxPathValue;
    $("#savePencilFromLink").click(function() {
      //alert("inside savePencilFromLink");
      textBoxPathValue = $("#pasteLinkTextBox").val().replace(/\\/g,"/");

      //testingWindowVal = $("#fname").val();
    // Size calculate
    var request;
    // request = $.ajax({
    //   type: "HEAD",
    //   url: $("#pasteLinkTextBox").val(),
    //   success: function () {
    //     //alert("Size is " + request.getResponseHeader("Content-Length"));
    //     // 10485760 -10MB
    //     if(request.getResponseHeader("Content-Length") <= 10485760/2){
    //       //alert(request.getResponseHeader("Content-Length") <= 10485760/2);
    //       //$('.testingConfirmation').show();

    //       $('.saveLinkPopup').show();
    //     }
    //     else{
    //       //alert("Your File size is too big");
    //       $('.sizeFinancialPencil').show();

    //     }
    //   }
    // });
      
      
      
      
      if (textBoxPathValue) {
        $('.saveLinkPopup').show();
      }
    });
    
    $('#saveLinkPopupYes').click(function(){

      let date;
    let month;
    let today = new Date();
    let dd = today.getDate();
    let mm = today.getMonth() + 1; //January is 0!
    let yyyy = today.getFullYear();
    if (dd < 10) {
      date = dd.toString();
      date = '0' + date;
    } else {
      date = dd.toString();
    }
    if (mm < 10) {
      month = mm.toString();
      month = '0' + month;
    } else {
      month = mm.toString();
    }
    let todayDay = month + '/' + date + '/' + yyyy;
    //return todayDay;

    let grid = $('#penPencilsGrid').data('kendoGrid');
    let _dataSource = grid.dataSource;
    

      //let todayDate = this.todayDate();
      this.selectedPencilId=values.url;
      var strx = this.selectedPencilId;
      var res = strx.substring(23);

      
      $('#penPencilsGrid').data("kendoGrid").dataSource.add({
        "pencilName": textBoxPathValue,
        "date": todayDay,
        "addedByName": $(".loggedUserName").text()
      });

      $("#pasteLinkTextBox").val('');
      textBoxPathValue = null;
      $('.saveLinkPopup').hide();
      $('.k-pager-numbers li').last().find('a').click();
    });
    
    $('#saveLinkPopupNo').click(function(){
      textBoxPathValue = null;
      $("#pasteLinkTextBox").val('');
      $('.saveLinkPopup').hide();
    });

    that.options = {
      excel: {
        fileName: "",
        allPages: true
      },
      dataSource: that._dataSource,
      selectable: "row",
      sortable: true,
      reorderable: true,
      resizable: true,
      editable: false,
      contextMenuId: "context-menuWindows",
      autoBind: false,
      pageable: {
        messages: {
          display: "Showing {0} to {1} of {2} entries"
        }
      },
      model: this.kendocommand.model,

      columns: values.columns,

      dataBound: function(e) {
        let that = this;
        //console.log(e.sender);
        let grid = e.sender;
        let items = grid.items();


        let groupingStatus = e.sender.options.groupable;

        setTimeout(function() {
        }, 5000);
        $(".triggerPencilScroll").trigger('click');

        if (e.sender.dataSource.view().length === 0) {
          let container = e.sender.wrapper.children(".k-grid-content"); // or ".k-virtual-scrollable-wrap"
          container.scrollLeft(scrollOffset.left);
        }

        if($("ul").find('[data-tab="jelly-tab"]')) {
          $("#jelly-tab .contextMenuRow").off("click").on("click", function (){
            //alert("I am here off");
            //$(".record-del-menu").hide();
            //$(".record-del-menu").css("display", "none");
            //  $(".record-del-menu-label").hide();
             $(".record-del-menu-label").css("display", "none");
            // $(".record-arrow-left").hide();
             $(".record-del-menu-label").css("display", "none");
            //$(".contextMenuRow").css("cursor", "default");
            
          });

        }

        //  $("#jelly-tab .contextMenuRow").off("click").on("click", function (){ 

        //   alert("I am here off");
        //   //data-tab="jelly-tab"

        //   //$("ul").find("li").css({"color": "red", "border": "2px solid red"});

        //   $("ul").find('[data-tab="jelly-tab"]').css({"color": "red", "border": "2px solid red"});
        //   //event.preventDefault();
        //   //$("#jelly-tab .record-del-menu").hide();

        //   //$("#jelly-tab .record-del-menu").css("display", "none");
        // });

        

        $(".contextMenuRow").bind("click", function(e) {
          $(".record-del-menu").blur(function() {
            $(this).hide();
            record_to_delete = null;
          });

       

          $(".record-del-menu").click(function() {
            $(this).hide();
              var record_to_delete = $(this).parent().parent();

            if (record_to_delete != null) {
              var recordToDelete = record_to_delete;
              $('.deleteFinancialPencil').show();
               $(".record-del-menu").hide();

              $(pencil).on("click", "#deletePencilNo", function() {
                $('.deleteFinancialPencil').hide();
              });
            }
          });


          var record_x = e.pageX;
          var record_y = e.pageY - $(".navHeaderBox").height() - $(".breadCrumbBox").height() - 20;

          $(".record-del-menu").css({
            left: record_x,
            top: record_y
          });

          $(".record-del-menu").fadeIn(200);

          $(".record-del-menu").show();
          $(".record-del-menu").attr('tabindex', -1).focus();

        });



        $("#unlockNo").click(function() {
            $("#unLockWindow").data("kendoWindow").close();
          })
      }
    };

    let scrollOffset = {
      left: 0,
      top: 0
    };


    if (values.title == "DOCUMENTS") {
      let that = this;
      let data = {};
      let penMock = [{
        "pencilId": "100",
      
        "operationType": "create"
      }, {
        "pencilId": "101",
        "pencilName": "example.pdf",
        "pencilType": "TITLE",
        
      }, {
        "pencilId": "102",
        "pencilName": "example.ppt",
        "pencilType": "TITLE",
        
      }, {
        "pencilId": "100",
      
        "operationType": "create"
      }, {
        "pencilId": "101",
        "pencilName": "example.xls",
        "pencilType": "TITLE",
        
      }, {
        "pencilId": "102",
        "pencilName": "example.xlsx",
        "pencilType": "TITLE",
        
      }, {
        "pencilId": "100",
      
        "operationType": "create"
      }, {
        "pencilId": "101",
        "pencilName": "example.doc",
        "pencilType": "TITLE",
        
      }, {
        "pencilId": "102",
        "pencilName": "example.docx",
        "pencilType": "TITLE",
        
      }, {
        "pencilId": "100",
      
        "operationType": "create"
      }, {
        "pencilId": "101",
        "pencilName": "example.newDocIcon",
        "pencilType": "TITLE",
        
      }, {
        "pencilId": "102",
        "pencilName": "example.msg",
        "pencilType": "TITLE",
        
      }, {
        "pencilId": "100",
      
        "operationType": "create"
      }, {
        "pencilId": "101",
        "pencilName": "example.pdf",
        "pencilType": "TITLE",
        
      }];
      this.futureAirings = [];
      this.pastAirings = [];
      //this.sky.tigerStart();
      this.hyperService.getResponse(values.url, 'get', null)
        .subscribe(data => {
            this.gridData = data.pencilDtos;
            //that._dataSource.data(penMock);
            that._dataSource.data(this.gridData);
            //this.sky.requestEnd();

          },
          err => {
            //this.sky.requestEnd();
          }
        );

    }

    that.window = $("#PenguinPopup");
    that.window.kendoWindow({
      width: "60%",
      title: false,
      visible: false,
      resizable: false,
      actions: [],
      draggable: false,
      modal: true,
      open: function() {
        $("html, body").css("overflow", "hidden");
        that.isVisible = true;
        $('.kPopUpTitle').html(values.title);
        this.sky.tigerStart();
        //kendo.ui.sky($("#loading"), true);
        that._grid = $('#penPencilsGrid').kendoGrid(that.options);
        that._grid2 = $('#penTitleGrid').kendoGrid(that.options);
        //that.setscroll('penPencilsGrid');
        //that.setscroll('penTitleGrid');
      },
      deactivate: function() {
        this.destroy();
      },
      close: function(e) {
         $("html, body").css("overflow", "");
      }
    });
    $("#PenguinPopup").prev().find(".k-window-title").text(values.title);
    that.window.data("kendoWindow").center();
    that.window.data("kendoWindow").open();


  }
  // recordDelete()
  // {
  //   var grid = $('#penPencilsGrid').data('kendoGrid');
  //   var dataitem = grid.dataItem(grid.select());
  //   grid.dataSource.remove(dataitem);
  //   $('#divdeleteFinancialPencil').hide();
   
  // }

  recordDelete(values)
  {
    var grid = $('#penPencilsGrid').data('kendoGrid');
    var dataitem = grid.dataItem(grid.select());
    grid.dataSource.remove(dataitem);
    //  var recordToDelete = record_to_delete;
    //  recordToDelete.remove();

    $('#divdeleteFinancialPencil').hide();


    let _dataSource = grid.dataSource;
    let currentData = _dataSource._data;
    let filename;
    let todayDate = this.todayDate();

    

    let records = [
        { 
          "id": values.mainId,
          "pencilDtos" : [{
            "pencilId":dataitem.pencilId,
            "pencilName": dataitem.pencilName,
            "pencilType": dataitem.pencilType,
            "pencilData": this.encodeBase64,
            "notes": "",
            "notesId": 123,
            "elfDocID": 123,
            "url": "http://localhost:3000/upload",
            "categoryType": "",
            "Timestamp": dataitem.date,
            "userID": dataitem.userID,
            "addedByName": dataitem.addedByName,
            "operationType": "delete",

            }]          
        } 
      ];
    
      //this.sky.tigerStart();
    this.hyperService.getResponse("pens/v1/pencil/", "post", records[0])
      .subscribe(data => {
          if (data.code == 'S001') {
          } else {
          }
          //this.sky.requestEnd();
        },
        err => {
          //this.sky.requestEnd();
        }
      );
   
  }
  recordSize() {
    $('.sizeFinancialPencil').hide();
    $('.addELFPencilForm').hide();
  }
  close(): void {
    let that =  this;
    let grid = $('#penPencilsGrid').data('kendoGrid');
    let datasource = grid.dataSource;
   let t= datasource.data().length
    that.window.data("kendoWindow").close();
    let dialog = this.window.data("kendoWindow");
    dialog.destroy();
    this.getPencilEvent.emit(this._dataSource._data.length);

   }

  gridPageSizeChange(target): void {
    let grid = $('#penPencilsGrid').data('kendoGrid');
    let datasource = grid.dataSource;
    let value = target.value;
    if (value == 4) {
      value = datasource.data().length;
    }
    datasource.pageSize(parseInt(value));
  }

  setscroll(kGridId): void {
    $('<div class="gridScrollIconsBox"><i  class="fa fa-chevron-left previousGridColumns"></i><i class="fa fa-chevron-right nextGridColumns"></i></div>').insertBefore('#' + kGridId + ' .k-grid-header');
    let that = this;
    let kGridHeight = $('#' + kGridId + '.k-grid').outerHeight(true);
  }

  ImageType(model, values): any {
      let docImageIcon = "pencilIconDiplay";
      let extensionType = {
        ".pdf": "pdfIcon",
        ".ppt": "pptIcon",
        ".xls": "xlsIcon",
        ".xlsx": "xlsIcon",
        ".doc": "pencilIcon",
        ".docx": "pencilIcon",
        "newDocIcon": "doc",
        ".msg": "mailIcon"
      };
      let lastIndex = model.pencilName.lastIndexOf(".");

      docImageIcon = extensionType[model.pencilName.slice(lastIndex).toLowerCase()];
      if (typeof model.pencilIcon != "undefined" && model.pencilIcon != "") {
        docImageIcon = model.pencilIcon;
      }
      if (typeof docImageIcon == "undefined") {
        docImageIcon = "newDocIcon";
      }
      let kendotxtMenu = "";
      if (model.isElfDoc == true) //isElfDocUploaded
      {
        kendotxtMenu = "pencilIconDiplay";
      }
      if (model.isElfDoc == true && model.elfDocID <= 0) //isElfDocUploaded
      {

      }

      console.log("model.pencilName--->" + model.pencilName);
      
      return "<span onclick=\"window.open('" + model.pencilName + "', 'popup', 'width=800,height=600,scrollbars=yes,resizable=no')\" class='" + docImageIcon + " displayInlineBlock " + kendotxtMenu + "'></span> <ul class='fileTypeHolder' id='fileTypeIcons' style='display: none;'><li class='fileTypeHolderTitle'>ELF Pencil Type</li><li><span class='pencilIcon displayInlineBlock' (click)='browseFileType(doc)'></span></li> <li><span class='xlsIcon displayInlineBlock' (click)='browseFileType('xls')'></span></li> <li><span class='pptIcon displayInlineBlock'(click)='browseFileType('ppt')'></span></li> <li><span class='pdfIcon displayInlineBlock' (click)='browseFileType('pdf')'></span></li><li><span class='newDocIcon displayInlineBlock' (click)='browseFileType('newdoc')'></span></li><li><span class='mailIcon displayInlineBlock' (click)='browseFileType('mail')'></span></li><li class='fileTypeHolderCloseBtn'> <button id='CloseBtn' class='commonBtn'>Close</button></ul>";

      //return "<span onclick=\"window.open('" + model.pencilName + "', 'popup', 'width=800,height=600,scrollbars=yes,resizable=no')\" class='" + docImageIcon + " displayInlineBlock " + kendotxtMenu + "'></span> <ul class='fileTypeHolder' id='fileTypeIcons' style='display: none;'><li class='fileTypeHolderTitle'>ELF Pencil Type</li><li><span class='pencilIcon displayInlineBlock' (click)='browseFileType(doc)'></span></li> <li><span class='xlsIcon displayInlineBlock' (click)='browseFileType('xls')'></span></li> <li><span class='pptIcon displayInlineBlock'(click)='browseFileType('ppt')'></span></li> <li><span class='pdfIcon displayInlineBlock' (click)='browseFileType('pdf')'></span></li><li><span class='newDocIcon displayInlineBlock' (click)='browseFileType('newdoc')'></span></li><li><span class='mailIcon displayInlineBlock' (click)='browseFileType('mail')'></span></li><li class='fileTypeHolderCloseBtn'> <button id='CloseBtn' class='commonBtn'>Close</button></ul>";
  }


}