TypeError: Cannot set property 'paint' of undefined

TypeError: Cannot set property 'paint' of undefined

Posted by: arnoldbendaa on 1 November 2017, 11:46 am EST

• 

  arnoldbendaa

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 1 November 2017, 11:46 am EST

          function IOCellType() {GC.Spread.Sheets.CellTypes.Text.call(this);}
  
  //        IOCellType.prototype = new $.wijmo.wijspread.TextCellType();
          IOCellType.prototype = GC.Spread.Sheets.CellTypes.Text();
  
          IOCellType.prototype.paint = function(ctx, value, x, y, w, h, style, context) {
              var cellMode = ViewModeService.getCurrentViewMode().name;
              var sheet = context.sheet;
              var tag = sheet.getCell(context.row, context.col, GC.Spread.Sheets.SheetArea.viewport, true).tag();
  
              if (tag) {
                  if (cellMode === "INPUT" && tag.inputMapping !== null) {
                      value = tag.inputMapping;
                  }
  
                  if (cellMode === "OUTPUT" && tag.outputMapping !== null) {
                      value = tag.outputMapping;
                  }
  
                  if (cellMode === "FORMULA" && tag.text !== null) {
                      value = tag.text;
                  }
              }
  
  //            $.wijmo.wijspread.TextCellType.prototype.paint.apply(this, [ctx, value, x, y, w, h, style, context]);
              GC.Spread.Sheets.CellTypes.Text.prototype.paint.apply(this, [ctx, value, x, y, w, h, style, context]);
  
              if (tag && cellMode !== "TEST") {
                  if (tag.inputMapping) {
                      ctx.fillStyle = "red";
                      ctx.beginPath();
                      ctx.moveTo(x + w - 12, y);
                      ctx.lineTo(x + w, y);
                      ctx.lineTo(x + w, y + 12);
                      ctx.closePath();
                      ctx.fill();
                  }
  
                  if (tag.outputMapping) {
                      ctx.fillStyle = "green";
                      ctx.beginPath();
                      ctx.moveTo(x, y + h - 12);
                      ctx.lineTo(x, y + h);
                      ctx.lineTo(x + 12, y + h);
                      ctx.closePath();
                      ctx.fill();
                  }
  
                  if (tag.text) {
                      ctx.fillStyle = "blue";
                      ctx.beginPath();
                      ctx.moveTo(x, y + h - 10);
                      ctx.lineTo(x, y + h);
                      ctx.lineTo(x + 10, y + h);
                      ctx.closePath();
                      ctx.fill();
  
                      ctx.beginPath();
                      ctx.moveTo(x + w - 10, y);
                      ctx.lineTo(x + w, y);
                      ctx.lineTo(x + w, y + 10);
                      ctx.closePath();
                      ctx.fill();
                  }
              }
          };
  
  

  when I run this code, I can get such error.
  
  TypeError: Cannot set property ‘paint’ of undefined.
  
  How can I fix this error?
  
  I followed only this code.
  
  http://help.grapecity.com/spread/SpreadSheets10/webframe.html#cellcustom.html
  
  Pls help me.
  
  Thanks.

• 

  grapecity

  • Post Options:
  • Link
    Copy

  Posted 1 November 2017, 7:47 pm EST

  Hello,

  With V10 of Spread.Sheets you can create the custom celltype using the Base class of CellTypes.
  
  http://help.grapecity.com/spread/SpreadSheets10/webframe.html#JavascriptLibrary~GC.Spread.Sheets.CellTypes.Base.html

  The code for creating a custom celltype looks like this:

  
  function FullNameCellType() {
           }
           FullNameCellType.prototype = new GC.Spread.Sheets.CellTypes.Base();
           FullNameCellType.prototype.paint = function (ctx, value, x, y, w, h, style, context) {
               if (value) {
                   GC.Spread.Sheets.CellTypes.Base.prototype.paint.apply(this, [ctx, value.firstName + "." + value.lastName, x, y, w, h, style, context]);
               }
           };
           FullNameCellType.prototype.updateEditor = function (editorContext, cellStyle, cellRect, context) {
               if (editorContext) {
                   $(editorContext).width(cellRect.width);
                   $(editorContext).height(100);
               }
           };
           FullNameCellType.prototype.createEditorElement = function (context) {
               var div = document.createElement("div");
               var $div = $(div);
               $div.attr("gcUIElement", "gcEditingInput");
               $div.css("background-color", "white");
               $div.css("position", "absolute");
               $div.css("overflow", "hidden");
               $div.css("border", "2px #5292f7 solid");
               var $span1 = $("<span></span>");
               $span1.css("display", "block");
               var $span2 = $("<span></span>");
               $span2.css("display", "block");
               var $input1 = $("<input type='text'/>");
               var $input2 = $("<input type='text'/>");
               $div.append($span1);
               $div.append($input1);
               $div.append($span2);
               $div.append($input2);
               return div;
           };
           FullNameCellType.prototype.getEditorValue = function (editorContext) {
               if (editorContext && editorContext.children.length === 4) {
                   var input1 = editorContext.children[1];
                   var firstName = $(input1).val();
                   var input2 = editorContext.children[3];
                   var lastName = $(input2).val();
                   return { firstName: firstName, lastName: lastName };
               }
           };
           FullNameCellType.prototype.setEditorValue = function (editorContext, value) {
               if (editorContext && editorContext.children.length === 4) {
                   var span1 = editorContext.children[0];
                   $(span1).text("First Name:");
                   var span2 = editorContext.children[2];
                   $(span2).text("Last Name:");
                   if (value) {
                       var input1 = editorContext.children[1];
                       $(input1).val(value.firstName);
                       var input2 = editorContext.children[3];
                       $(input2).val(value.lastName);
                   }
               }
           };
           FullNameCellType.prototype.isReservedKey = function (e, context) {
               //cell type handle tab key by itself
               return (e.keyCode === GC.Spread.Commands.Key.tab && !e.ctrlKey && !e.shiftKey && !e.altKey);
           };
           FullNameCellType.prototype.isEditingValueChanged = function (oldValue, newValue,context) {
               if (newValue.firstName != oldValue.firstName || newValue.lastName != oldValue.lastName) {
                   return true;
               }
               return false;
           };
           $(function () {
  
  var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"),{sheetCount:3});
               var sheet = spread.getActiveSheet();
               sheet.suspendPaint();            
               sheet.setCellType(0, 1, new FullNameCellType());
               sheet.setColumnWidth(1, 200);
               sheet.setValue(0, 1, { firstName: "Bob", lastName: "Smith" });
               sheet.resumePaint();
           });
  
  

  I hope it helps.

  Thanks,
  
  Deepak Sharma

• 

  arnoldbendaa

  • Post Options:
  • Link
    Copy

  Posted 1 November 2017, 8:00 pm EST

  thanks a lot.