How to change the data binding without server refresh

Hi Alex,

Love your grid. I have spent a great dealof time also building a great looking grid using CSS. It doesn't have the databinding aspects (I use an intermediate XSL transform as an interface between the 'base data structure' and the xml layout structure for the grid proper. I have had some great luck with 'floating' columns so that no column prep is necessary as well. I would love to get with you sometime to see if there is anything I can contribute to your effort.

My question to you. I seem to be having troubles manipulating the datasource on the client side and then getting the grid refreshed with the new data. In particular I am building a mapping application where I show two grids side by side and give the user the ability to drag the fields from one grid to the other. I am prototyping with array based data right now. For some reason I can't get the grid to refresh itself on the new data. A simplified code snippet follows...

var grid = new Active.Controls.Grid;
var data1 = [["1020", "Daytona 500"], ["1030", "Pepsi 500"]];
grid.setRowCount(2);
grid.setColumnCount(2);
grid.setDataText(function(i, j){return data1[i][j]});

function deleteRow(){
var data2 = [["1020", "Daytona 500"]];
grid.setDataText(function(i, j){return data2[i][j]});
grid.refresh();
}

<button onClick="deleteRow()">Why can't I delete a row?</button>

You need to add 'grid.setRowCount(1);' Grid doesn't know that you have an array somewhere - it just calls getDataText for each index. You can implement getDataText function in a very different way without using arrays at all.

That did the trick Alex. Thanks for the fast reply. You mention that getDataText can be implemented in a very different way. I get the feeling that there is quite a bit of plumbing in this control that I am not aware of or making use of. Other than the doc on your site, is there any other reference material I should make use of?

How would you go about adding drag and drop functionality to this control? Is there an onClick handler for each row I can attach to?

Thanks again,
Wade

I am now back to writing docs. Should be a significant improvement there soon. Otherwise you are left with source code, examples and this forum.

Here is how you attach events:

var eventHandler = function(){alert(this.getProperty("item/index"))};
var row = new Active.Templates.Row;
row.setEvent("onmousedown", eventHandler);
obj.setTemplate("row", row);

However native IE drag and drop requires text selection first. I need to check how to do this.