Hi,

Due to the fact I am using this with Google Maps I need to do all of the processing on client side.

My Javascript is as below. This all works ok except in the following situation:
1. Grid filled with new rows and cells
NB (scroll works ok first time around)
2. Call the code again (which will clear the existing rows, and add the new ones to the grid)
NB (scroll works ok second time around)
3. Call the code again (same operation as step 2)
NB (Upon scrolling the data disappears from the grid and I get an error)
Line: 6
Error: '2' is null or not an object

The error happens each and every time I run through the above steps and always the third time the code is called. Any ideas??



function addNewItem(itemstoadd)
{
var resultsGrid = eo_GetObject("resultsGrid");
//need to clear the grid
for(var h=0, lenh=resultsGrid.getItemCount(); h<lenh;h++){
resultsGrid.deleteItem(h);
}

//get array into rows:
var mySplitRows = itemstoadd.split("#");
var arLen=mySplitRows.length;

for ( var i=0, lenr=arLen-1; i<lenr; ++i ){
var mySplitCols = mySplitRows[i].split("~");

var item = resultsGrid.addItem();

item.getCell(0).setValue(mySplitCols[0]);
item.getCell(1).setValue(mySplitCols[1]);
item.getCell(2).setValue(mySplitCols[2]);
}

var item = resultsGrid.getItem(0);
if (item){
item.ensureVisible();
}
resultsGrid.SelectedItemIndex = -1;
}

Unfortunately the results are all driven from a database so not easily.

I have done some more testing and I think it is an issue with the section:

//need to clear the grid
for(var h=0, lenh=resultsGrid.getItemCount(); h<lenh;h++){
resultsGrid.deleteItem(h);
}

If I comment out the section above that loops through the grid and removes all rows before I append the new cells then I dont get the error.
Of course, this is not what I need as the old results set needs to be cleared rather than appended to.

Hi,

That is actual true --- the Grid never really deletes an item from its item collection when you call client side deleteItem. When you call deleteItem, it is only mark the item as deleted and turns it invisible. This is necessary so that when the Grid is passes back to the server side and fires ItemDeleted event you will be able to find out what has been deleted. Otherwise the event can only tell you something like "the 5th item has been deleted" and that would be almost completely useless if the 5th item is already gone. Once it goes through a server cycle and come back to the client again, all "deleted" items are now really deleted.

Thus the best way for you to completely clear out the Grid is probably to go back to the server to clear it out. You can put the Grid inside an UpdatePanel or CallbackPanel so that it goes through AJAX and you don't have to reload the whole page.

Thanks!

Hi,

I am not exactly sure what you mean by "there is no way that I can call the server side code". There are various ways to do it. If you use our CallbackPanel control, you can call eo_Callback JavaScript function (one of our js functions). You can also use our ScriptEvent control and then call eo_TriggerServerEvent to trigger a post back from JavaScript. Again when you use this together with our CallbackPanel control, it is converted to a callback. The actual steps are in fact quite simple:

1. Place a CallbackPanel in the form;
2. Place the Grid inside the CallbackPanel;
3. Place a ScriptEvent control in the form;
4. Edit the CallbackPanel's Triggers property to include the ScriptEvent control as a trigger;

Once you have it setup this way, you can call the following code whenever you want to refresh the Grid:



The second and third arguments don’t matter. These two values are transferred to the server side as event arguments for the ScriptEvent's Command event. If you handle that event then you need to care about these two arguments. Otherwise you can pass anything.

Note once you trigger the callback (in this case call eo_TriggerServerEvent in your js code), you have to wait until the callback is done (so that the Grid is updated) in order to add new items into the Grid. Usually you can do this by putting the code that add items inside the CallbackPanel’s ClientSideAfterUpdate handler. We can provide a simple sample for you if it sounds confusing to you.

This setup also works with ASP.NET AJAX UpdatePanel, so if you already use that you can place the Grid inside the UpdatePanel as well. The key is the Grid must be placed inside an "AJAX container" to be updated.

We do not view Grid not actually deleting item as a short coming of the control. As already explained in our previous post, it is necessary to be done this way so that ItemDeleted event will work. So if we were to fix this "short coming" for you, other users who use ItemDeleted would start to complain immediately.

As a side note, I am thinking that if you adjust your code "var item = resultGrid.getItem(0)" to "var item = resultGrid.getItem(result.getItemCount() - 1)" it should work for you as well. Basically you only need to adjust the item index here.

Please let us know if this works for you.

Thanks!

Ah. I finally start to get some idea of your page flows.

It seems that you have everything setup correctly except for that Triggers="ScriptEvent1" is not exactly the correct syntax. The correct syntax should be Triggers="{ControlID:ScriptEvent1;Parameter:}". If you edit Triggers in design view the designer should be able to create the correct syntax for you.

I do have another question regarding your original situation where the Grid is not updated though. If you have the Grid inside the UpdatePanel and that panel is being updated (you may need to call that panel's Update method), then the Grid should have been updated. In this setup you do not need to use our CallbackPanel/ScriptEvent control at all.

In any case if you can put together a test page that demonstrates the problem, then we should be able to get it to work for you. It shouldn't be something difficult. Please let us know if you have the test page but do not wish to post it publicly in the forum, in that case we can provide you the email address for you to email it to us.

Thanks!

Hi there, just checking that you had received my PM with a link to the files you need to replicate the probem?

Hi,

We have modified the test page and emailed it back to you. The root of the problem is the AJAX that the map control is an ASP.NET 2.0 "out of band" AJAX call. This is very different than the much more common "panel based" AJAX calls. Generally you can only update a control with "panel based" AJAX calls. This is why when you try to update the Grid MarkerDragEnd nothing happens. Putting the Grid inside an UpdatePanel does not change this because the call itself is not originated by the UpdatePanel.

The Map is able to update because you explicitly passed a list of JavaScript calls through e.MapCommand. We appended a small piece of JavaScript code to this. When this code is passed to the client, it triggers the following chain action:

1. Store the init function inside a global variable (gridInitFx);
2. Call eo_TriggerServerEvent to trigger a regular callback through CallbackPanel1;
3. Server side ScriptEvent1_Command is called. You can modify the Grid anyway you want here. The sample code simply clears all items;
4. Callback returns to the client side and calls the CallbackPanel's ClientSideAfterUpdate, which is set to "initGrid";
5. initGrid calls the function set in step 1, which in turn calls your initialization code;

Grid can be modified with js inside jsInitGrid, or in step 3 with server side code. The difference you format your jsInitGrid directly inside your MarkerMoveEnd event handler, so you may have more context information there; As an alternative you can also store your context information inside Session and then do everything inside ScriptEvent1_Command based on those information.

Please let us know if this works for you.

Thanks!

Glad to hear that it's working for you! Thank you very much for the compliment and referral.

Please feel free to let us know if you need anything else from us.