Welcome Guest Search | Active Topics | Sign In | Register

Grid - Excel Style - Postback on each cell edit Options
pghcpa
Posted: Wednesday, August 26, 2009 6:01:35 PM
Rank: Advanced Member
Groups: Member

Joined: 8/26/2009
Posts: 64
Brand new to this.

I think I have checked every example and searched the forum -- can't seem to find this simple answer.

Looking for precise instructions using vb and whatever Javascript is req'd.

Is the only/cleanest way to have a non-visible button and in one of the events do a button1.click()?

Or what exactly do I put in the ClientSideEndEdit -- lots of posts out there about validation, but all I want to do is commit it to the dbase. I've got my grid bound to a SQL datasource with Select, Update, Insert and Delete statements all activiated.

Thanks.
eo_support
Posted: Wednesday, August 26, 2009 7:42:08 PM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,194
Hi,

There are many ways to post back through JavaScript, regardless which method you use, they pretty much all come down to __doPostBack. Raising post back itself has nothing to do with Grid.

If you are familiar with __doPostBack, you can call it directly from your JavaScript code. If you not familiar with it, you have several options that you may find easier:

1. Call the Grid's raiseItemCommandEvent. Here is an example demonstrating how to use this method:

http://demo.essentialobjects.com/Default.aspx?path=Grid\_i1\_i13

You can call this method anywhere, not necessary from the Grid. Once you call it, it posts back the page and raises the Grid's ItemCommand event.

2. Use our ScriptEvent object. ScriptEvent is a control that specifically designed for you to raises server side event easily. To use that you would first drag and drop a ScriptEvent control into your form. You would then use something like this to trigger a postback:

eo_TriggerScriptEvent("<%=ScriptEvent1.ClientID>", "whatever", "anything");

This would trigger ScriptEvent1's Command event. The first parameter you pass in ("whatever") will be the command name and the second parameter ("anything") will be command argument.

3. If you are familiar with and use our CallbackPanel control, you can also use eo_Callback to trigger an AJAX callback. It is also a postback except that only a part of the page is updated when the post back is done;

Please note if you intend to call any of these functions inside your ClientSideEndEdit handler, you will need to call it with a time delay. It will be something like this:

Code: JavaScript
function your_client_side_end_edit_handler()
{
    //DO NOT call the function directly from here

    setTimeout(function()
    {
        //call raiseItemCommandEvent/eo_TriggerScriptEvent/eo_Callback here
        .....
    }, 10);
}


Hope this helps.

Thanks!
pghcpa
Posted: Wednesday, August 26, 2009 7:53:02 PM
Rank: Advanced Member
Groups: Member

Joined: 8/26/2009
Posts: 64
Thanks, I can follow that, but in the meantime I decided to replicate as closely as possible the Excel-style demo using the CallbackPanel1 with the trigger to Button1.

I'm getting my grid. The data is there. I can change it. But when I postback (or callback) -- tried both, the edited data isn't changed.

My grid is bound to a SQLdatasource that has the Insert, Delete, Update, Select commands.

I specify the SqlDataSource1 in DataSourceID.

I only have two columns, the first is the primary key field. No errors but the edit doesn't commit -- next time I call up the grid it's the same as the original.

Reading some other posts, it looks as if I can't used the SqlDataSource to write back to the DB? I have to write my own Update statement using the grid.ChangedItems property?

Is that right?

In what event do I place the Update statement? Grid1_ItemsChanged?

Everything looks good, I just don't know how to write my edited data back to the DB.
eo_support
Posted: Wednesday, August 26, 2009 8:01:51 PM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,194
Hi,

Yes. You are correct. The Grid won't do Insert/Delete/Update for you, it only use the Select part of your SqlDataSource. So you will need to write code to update your database directly based on grid.ChangedItems property.

You can place your Update code anywhere as long as you are sure the postback is caused by your Grid. Putting it inside Grid1_ItemChanged event is an option, but not a must.

Thanks!
pghcpa
Posted: Wednesday, August 26, 2009 8:13:50 PM
Rank: Advanced Member
Groups: Member

Joined: 8/26/2009
Posts: 64
That helps. I'm sure I can figure it out the update, but any sample VB code for this?

(I am spoiled because I am used to the SqlDataSource handling everything for me in the ASP Listview, though the EO Grid is 1000x better -- looks like this one thing I have to handle myself and seems like it would be a common request on the forum (?)

Another question related to your comment about postback.

What I did to follow your Grid Excel-style sample is:
1. insert an EO Callbackpanel.
2. Add an EO.Web.CallbackTrigger
3. In the ControlID I put Button1
4. I added a Button1 to the form. but there is not code behind it, right?

When the button is pressed, it should cause a callback and the Grid1_ItemsChanged to fire and there I can use the sample code to examine the Grid1.ChangedItems.Cells collection for item.key and cell.column.datafield and cell.value properties to construct a SqlDataSource update statement.

I can do it for the whole row, the whole grid or just cell-by-cell depending on what I want to do.

Do I have it right?



eo_support
Posted: Wednesday, August 26, 2009 9:07:48 PM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,194
Hi,

You would just handle the button's Click event. When you set a control as a CallbackPanel trigger, you handle whatever event that control has as if there was no CallbackPanel. For example, you could have called the Grid's raiseItemCommand event to raises the Grid's ItemCommand event and set the Grid as a trigger, in that case you would simply handle the Grid's ItemCommand event. The key is you use it whatever way as if the CallbackPanel does not exist.

I am not sure what you meant by VB code though. The code provided in this thread is JavaScript. Those are client side code so there is no server side VB equivalent for it. All our sample code are provided in both C# and VB. You can check the sample folder to find the corresponding code.

Thanks!
pghcpa
Posted: Wednesday, August 26, 2009 10:52:01 PM
Rank: Advanced Member
Groups: Member

Joined: 8/26/2009
Posts: 64
I've invested a lot of time trying to follow your guidance, still need your help.

I've figured out that most of the instructions/examples you've given me refer to FullRowMode=True.

I am trying to edit a cell with FullRowMode=False and as soon as I leave the cell, I want raise an event that I can handle in my VB code to update it back to the SqlDataSource without the user having to press a button.

I like the idea of doing this with a callback instead of a postback but I want the callback to happen when the user edits or completes editing a cell.

There are plenty of examples in the demo project having to do with selecting, inserting and deleting, but none involving Excel-style editing unless you postback with a button press. (I can see how that works, that's not the nature of this question.)

I understand now that any of the methods/properties/events that refer to items, I can't use with FullRowMode=False. I need to concentrate on those that have to do with cells.

I can use the Grid.ClientSideOnCellSelected property to specify a javascript function passing the grid. There I can raise the event Grid1_ItemCommand, BUT then it won't let me edit the cell. It just postsback and leaves me in select mode.

I tried raising an event from the ClientSideEndEdit -- but you can only pass cell (not grid) to that handler, so it is not able to execute a grid.RaiseItemCommantEvent.

Looking back at the four methods you gave me above, of posting or calling back without the user having to press a button, I think all seem to relate to CommandNames and/or FullRowMode=True.

Here's my Javascript code so far. I hope you can get me on track. Love your product, have carefully gone over every example provided, looked up every function and property I can think of,
searched through all the posts -- still stuck.

THIS ONE RAISES EVENT WITH CLIENTSIDEONSELECTED, BUT WON'T LET ME EDIT THE CELL.
function OnItemEdited(grid) {
var cell = grid.getSelectedCell();

setTimeout(function() {
grid.raiseItemCommandEvent(cell.getItemIndex(), "edit");
}, 10);
}

THIS ONE INVOKED FROM CLIENTSIDEENDEDIT, BUT OF COURSE, CAN'T RAISE AN EVENT HERE WITH THIS METHOD BECAUSE YOU'RE NOT PASSING A GRID
function on_endedit(cell, newValue)
{
setTimeout(function() {
grid.raiseItemCommandEvent(cell.getItemIndex(), "edit");
}, 10);


}
eo_support
Posted: Thursday, August 27, 2009 7:11:17 AM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,194
Hi,

You are very close. Both methods should work for you. The key is we have a whole set of client side API you can use. For example, in order to put the Grid cell into edit mode, you can use the following code to edit the first cell:

Code: JavaScript
grid.editCell(0, 0);


If you use a CallbackPanel, you can call this method after you call raiseItemCommandEvent or inside your CallbackPanel's ClientSideAfterUpdate handler (if you updated the Grid).

If you handle on_endedit, then you can get the Grid object form the Cell object. It will be something like this:

Code: JavaScript
function on_endedit(cell, newValue)
{
    var grid = cell.getGrid();
    //now you have the grid....

    ......
}


You can find complete client side API reference here (check for JavaScript objects section):

http://doc.essentialobjects.com/library/1/clientapi_howto.aspx

Hope this helps. Please let us know if you still have any questions.

Thanks!


You cannot post new topics in this forum.
You cannot reply to topics in this forum.
You cannot delete your posts in this forum.
You cannot edit your posts in this forum.
You cannot create polls in this forum.
You cannot vote in polls in this forum.