|
|
Rank: Advanced Member
Groups: Member
Joined: 8/26/2021
Posts: 53
|
For eo.web grid's item doubleclick event (either in client-side or server-side), there is a very old post : https://www.essentialobjects.com/forum/postst1331_Grid-Row-Double-Click-Event.aspxJust would like to know: even in the latest build, is it still true that there is no such grid's item doubleclick event available? If still not available, then, is it possible to leverage the ClientSideBeforeEditItem and/or ClientSideAfterEditItem to mimic the doubleclick event handling?? Any possible code sample to demonstrate?
|
|
Rank: Administration
Groups: Administration
Joined: 5/27/2007
Posts: 24,245
|
Hi, The grid does not natively support double click however you can do this with JavaScript. The basic idea is: 1. Apply a specific "marker" CSS class to each grid row through ItemStyle.CssClass property. For example:
Code: HTML/ASPX
<eo:Grid .....>
<ItemStyles>
<eo:GridItemStyleSet>
....
<ItemStyle .... CssClass="grid_row"></ItemStyle>
</eo:GridItemStyleSet>
</ItemStyles>
....
</eo:Grid>
2. Use JavaScript to search for all elements with "grid_row" CSS class once the Grid is loaded. For example:
Code: HTML/ASPX
<eo:Grid ClientSideOnLoad="grid_loaded" ....>
....
</eo:Grid>
Code: JavaScript
function grid_loaded()
{
var id = $(this)[0].id;
var p = id.search("_i");
if (p > 0)
{
var index = id.substr(p + 2);
index = parseInt(index);
alert("Row #" + index + " double clicked!");
}
}
The above code also demonstrates how to get the index of the item that is clicked. This code relies on the undocumented facts that each row has an ID in the format of "GridID_i[Index]". For example, for "Grid1", the first row's ID will be "Grid1_i0". Hope this helps. Please feel free to let us know if you have any more questions. Thanks!
|
|
Rank: Advanced Member
Groups: Member
Joined: 8/26/2021
Posts: 53
|
Thanks for reply.
I have try it with my code, but double-click on grid's item, nothing happened.
(1) in the sample, is the "grid_row" a built-in css style provided by EO.Web library?
If not, what style text should it be for detecting item's doubleclicking?
(2) in the sample, the code in the grid_loaded() does not seem to search for all elements with "grid_row" CSS class.
and, why item's doubleclick event handling has anythin to do with grid load event??
|
|
Rank: Administration
Groups: Administration
Joined: 5/27/2007
Posts: 24,245
|
Hi, I apologize for the mistake. The code posted above in page_loaded is the code inside the double click handler. This is wrong because the code in page_loaded should be the code that installs the double click handler. The code should be something like this:
Code: JavaScript
function grid_loaded()
{
$(".grid_row").on("dblclick", function()
{
var id = $(this)[0].id;
var p = id.search("_i");
if (p > 0)
{
var index = id.substr(p + 2);
index = parseInt(index);
alert("Row #" + index + " double clicked!");
}
}
}
The first line of the code looks for all elements with class "grid_row" and install a dblclick handler on every one of them. Here CSS class "grid_row" is not a built-in CSS class. It's just a "marker" class that you attach to each row so that your JavaScript code can find the row. Note the code uses JQuery. So you will need to include JQuery in your page first. Thanks
|
|
Rank: Advanced Member
Groups: Member
Joined: 8/26/2021
Posts: 53
|
Thanks for reply.
It works.
|
|
Rank: Advanced Member
Groups: Member
Joined: 8/26/2021
Posts: 53
|
Update: when I try it using a grid without using CallbackPanel, then it can show alert message when each item is doubleclicked.
But, when put the grid within callbackpanel, then ONLY doubleclicking on odd numbered items (ex: item1, item3,...) will show alert message. it seems even numbered items (ex: item0, item2,..) have no doubleclick event handler?
How to troubleshoot the issue? Is there anything missing?
|
|
Rank: Administration
Groups: Administration
Joined: 5/27/2007
Posts: 24,245
|
We tested it inside CallbackPanel and it works fine. Do you also set AlternatingItemStyle? If you set AlternatingItemStyle, then you need to attach your marker class (grid_row in the sample code) to AlternatingItemStyle as well.
|
|
Rank: Advanced Member
Groups: Member
Joined: 8/26/2021
Posts: 53
|
After attaching marker class to AlternatingItemStyle, it works.
Thanks again.
|
|
Rank: Administration
Groups: Administration
Joined: 5/27/2007
Posts: 24,245
|
Great!
|
|