Grid +dynamic rowdetails

[pkParticipant]

Hi everyone,
I’m creating a grid using array data that changes frequently. I have the following questions:

a) Is it possible to specify the row details on the data array, or do I have to go through ‘setrowdetails’ after grid creation each time? See b why.

b) the ‘refreshdata’ function removes the row “expand” buttons, but not any already displayed details. I have to do something like (pseudocode):
-keep the expanded index
-for all grid rows: hiderowdetails
-refreshdata
-setrowdetails
-showrowdetails at previous index

c) initrowdetails fires only the first time a row is expanded. Is there an event that fires each time a row is expanded/collapsed?

d) Is there an option to have only a single row expanded each time if c) isn’t possible?

e) The ‘rowclick’ event fires even when I click on a control in the row details. I’ve tried the following, with no success:
var mygrid = $("#mygrid");
mygrid.bind('rowclick', function (event)
{
if(event.target != this){
return true;
}
//.....
});
Any ideas?

Thank you,
Paul

[Peter StoevKeymaster]

Hi Paul,

Regarding your questions:

1. It is possible to specify the row details only by using the setrowdetails function.
2. That’s true. The ‘refreshdata’ function completely recreates the Grid – it refreshes the Data View(rebinds the Grid) and calls the render function i.e it’s like creating a new Grid. If you are using this function, you should set the row details again after calling it.
3. The initrowdetails fires only the first time as its a callback function called only for initialization purposes. Unfortunately, there are no rowexpand and rowcollapse events, but I will create a work item for adding such events in a future version.
4. There’s no such built-in logic or work-around about this.
5. That behavior is correct because of the event is bubbling. It’s the same as binding to the document’s mousedown event and binding to the ‘mousedown’ event of a DIV tag inside the document.

For example:

<div id="divTag" style="width: 100px; height: 100px; background: Red;"></div>

If you bind to the events with this code:

$(document).mousedown(function () {
});
$("#divTag").mousedown(function (event) {
});

Then the ‘mousedown’ will be handled by the DIV tag and the document.

If you want to stop the bubbling, you can do this:

$(document).mousedown(function () {
});
$("#divTag").mousedown(function (event) {
    event.preventDefault();
    event.stopPropagation();
    return false;
});

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[pkParticipant]

Thank you Peter for your prompt answer.

[Author]

Posts