Announcement

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

    Button in ListGrid cell (on every row)

    Hi,

    Using the SmartClient, latest nightly build.

    I am trying to place a button (edit, delete, etc) on each row of a ListGrid object. I have checked various ideas but none work as expected. Here's what I tried:
    1. addEmbeddedComponent. Code below (apply to the "disable filter" example). Seems to screw up the ListGrid layout because the buttons are not added in the table cell. Is also very slow.

    2. This: http://www.smartclient.com/smartgwt/...id_all_editors shows some promise, but I can't find the equivalent for the SmartClient library.

    Also, I would like those to be button controls, not images.

    Any other ideas on how that can be achieved?

    Code for addEmbeddedComponent:
    Code:
    isc.ListGrid.create({
        ID: "countryList",
        width:500, height:300, alternateRecordStyles:true, cellHeight: 30,
        dataSource: worldDS,
        fields:[
            {name:"countryCode", title:"Flag", width:50, type:"image", imageSize:24, imageURLPrefix:"flags/24/", imageURLSuffix:".png",
                canFilter:false
            },
            {name:"countryName", title:"Country"},
            {name:"capital", title:"Capital",
                canFilter:false
            },
            {name:"continent", title:"Continent", formatCellValue: function(){return '';}}
        ],
    			dataArrived: function(){
    				setTimeout( function(){
    					for (i = 0; i < countryList.data.getLength(); i++)
    					{
    						countryList.addEmbeddedComponent(isc.HLayout.create({
    							members: [
    								isc.Button.create({
    									title: '123', 
    									width: 50, height:20, 
    									click: function(){alert('clicked');}
    								})
    							],
    							height: 20,
    							width: '100%'
    						}), countryList.getCellRecord(i), null, 3);
    					}
    				}, 200);
    			},
    
        autoFetchData: true,
        showFilterEditor: true
    })
    Thanks,
    Sorin

    #2
    Look at the recordComponents subsystem (and sample). But note, it's far less efficient to use a true button than an icon column, and putting three buttons on every row is a very busy UI, where you might just want to have one set of buttons above/below the grid, that operate on the selected row.

    Comment


      #3
      Thanks, that steered me in the right direction. I appreciate the prompt response.

      Comment

      Working...
      X