Announcement

Collapse
No announcement yet.
X
  • Filter
  • Time
Clear All
new posts

    to access listgrid column values in the canvas

    hi all,
    i am using version7.

    i want 5-6 images in one layout/canvas(but i can't use TileGrid as my images are not symmetric and the size of all the images is different,like i want 3 images above and 2 big images below).
    so i created 3-4 images as members of a Layout.
    i have one listGrid from which i want to drag few rows and drop in any particular image.
    now i want to access the column value(like "partName" here) in the respective image(where i want to drag that row).
    can u please tell me the function that i can use here, to access any particular column value??


    Code:

    var exampleData = [
    {partName:"Blue", partSrc:"cube_blue.png", partNum:1},
    {partName:"Yellow", partSrc:"cube_yellow.png", partNum:2},
    {partName:"Green", partSrc:"cube_green.png", partNum:3},
    {partName:"Blue", partSrc:"cube_blue.png", partNum:4},
    {partName:"Yellow", partSrc:"cube_yellow.png", partNum:5},
    {partName:"Green", partSrc:"cube_green.png", partNum:6},
    {partName:"Blue", partSrc:"cube_blue.png", partNum:7},
    {partName:"Yellow", partSrc:"cube_yellow.png", partNum:8},
    {partName:"Green", partSrc:"cube_green.png", partNum:9}
    ]


    isc.Img.create({
    ID:"bluePiece",
    showEdges:true, border:"0px", bodyStyleName:"normal",
    left:50, top:50, width:148, height:148, src:"pieces/48/pawn_blue.png",
    canDrag: true,
    dropOver: "this.setBackgroundColor('#ffff80')",
    dropOut: "this.setBackgroundColor('#ffffff')",
    canAcceptDrop:true,
    canDrop: true,
    dragAppearance: "tracker",
    setDragTracker: "isc.Event.setDragTracker('Blue Piece')",
    drop: "isc.say('You dropped the '+isc.Event.getDragTarget().getID())"
    // HERE I WANT TO ACCESS THE COLUMN VALUE
    })

    isc.Img.create({
    ID:"greenPiece1",
    showEdges:true, border:"0px", bodyStyleName:"normal",
    left:150, top:50, width:48, height:48, src:"pieces/48/pawn_green.png",
    canDrag: true,
    dropOver: "this.setBackgroundColor('#ffff80')",
    dropOut: "this.setBackgroundColor('#ffffff')",
    canAcceptDrop:true,
    canDrop: true,
    dragAppearance: "tracker",
    fields:[
    {name:"partName"},
    {name:"partNum", width:20}
    ]
    //drop: "isc.say('You dropped the '+partName)"
    // HERE I WANT TO ACCESS THE COLUMN VALUE
    })

    isc.Img.create({
    ID:"greenPiece2",
    left:250, top:50, width:48, height:48, src:"pieces/48/pawn_green.png",
    showEdges:true, border:"0px", bodyStyleName:"normal",
    canAcceptDrop:true,
    dropOver: "this.setBackgroundColor('#ffff80')",
    dropOut: "this.setBackgroundColor('#ffffff')",
    canDrag: true,
    canDrop: true,
    dragAppearance: "tracker",
    drop: "isc.say('Hi Green Piece 2')"
    // HERE I WANT TO ACCESS THE COLUMN VALUE
    })

    isc.Img.create({
    ID:"greenPiece3",
    left:350, top:50, width:48, height:48, src:"pieces/48/pawn_green.png",
    showEdges:true, border:"0px", bodyStyleName:"normal",
    canAcceptDrop:true,
    dropOver: "this.setBackgroundColor('#ffff80')",
    dropOut: "this.setBackgroundColor('#ffffff')",
    canDrag: true,
    canDrop: true,
    dragAppearance: "tracker",
    drop: "isc.say('HIIIII')"
    })


    isc.Layout.create({
    ID:"ImgLayout",
    membersMargin: 10,showEdges:true, border:"0px", bodyStyleName:"normal",
    dropLineThickness:0,
    members: [
    greenPiece2,greenPiece1,bluePiece

    ]
    });

    isc.defineClass("PartsListGrid","ListGrid").addProperties({
    width:150, cellHeight:24, imageSize:16,
    showEdges:true, border:"0px", bodyStyleName:"normal",
    alternateRecordStyles:true, showHeader:false, leaveScrollbarGap:false,
    emptyMessage:"<br><br>Drag &amp; drop parts here",
    fields:[
    {name:"partSrc", type:"image", width:24, imgDir:"pieces/16/"},
    {name:"partName"},
    {name:"partNum", width:20}
    ],
    trackerImage:{src:"pieces/24/cubes_all.png", width:24, height:24}
    })

    isc.HStack.create({membersMargin:10, height:160, members:[
    ImgLayout,
    isc.PartsListGrid.create({
    ID:"myList1",
    data:exampleData,
    canDragRecordsOut: true,
    canAcceptDroppedRecords: true,
    canReorderRecords: true,
    dragDataAction: "move"
    })
    ]})
    Attached Files

    #2
    Also i want one more image below the first 2 images(the 4th image in the Layout).
    which property i have to set for that??

    Comment


      #3
      i am able to place the images anywhere by creating one Canvas instead of Layout and using Children insted of members, but still not able to access the column values inside the Img.
      Last edited by vdas; 13 Jul 2009, 03:19.

      Comment


        #4
        i tried accessing a column value inside the Img using following code :

        isc.Img.create({
        ID:"bluePiece",
        showEdges:true, border:"0px", bodyStyleName:"normal",
        left:5, top:10, width:148, height:148, src:"pieces/48/pawn_blue.png",
        canDrag: true,
        dropOver: "this.setBackgroundColor('#ffff80')",
        dropOut: "this.setBackgroundColor('#ffffff')",
        canAcceptDrop:true,
        canDrop: true,
        dragAppearance: "tracker",
        setDragTracker: "isc.Event.setDragTracker('Blue Piece')",
        drop: "isc.say('You dropped the '+isc.Event.getDragTarget().getID().getField(2))"
        })


        but i am getting a js error.
        how can i access a listgrid column here??

        Comment


          #5
          getDragTarget() would return the grid. Calling getID() on the ListGrid is going to return a String. Note that in the docs, methods show their return types - this will allow you to easily figure out what to call.

          Comment

          Working...
          X