Firing JavaScript after Grid is loaded

Hello there,

I have some problems accessing the EnterEditMode function:
We wrote a small wrapper function in our grid, which derives from webdatagrid:

function GridRowEnterEditMode(src, validationGroup) {

var savePageValidate = undefined;

if (typeof (Page_ClientValidate) != “undefined”) {
savePageValidate = Page_ClientValidate;
Page_ClientValidate = undefined;
}

var row = jQuery(src).parents(“tr[type=’row’]”).get(0)._object;
var editingCore = row.get_grid().get_behaviors().get_editingCore();

debugger;

if (editingCore != null) {
var rowEditingTemplate = editingCore.get_behaviors().get_rowEditingTemplate();
if (rowEditingTemplate != null) {
rowEditingTemplate.enterEditMode(row);
}
}

if (savePageValidate != undefined) {
Page_ClientValidate = savePageValidate;
}
if (typeof (Page_ClientValidate) != “undefined” && validationGroup != null) {
Page_ClientValidate(validationGroup);
}
}

Works well, when I add it on a button client click event. Something like this:

OnClientClick=”GridRowEnterEditMode(this, ‘EditRole’); return false;”

But I need to enter the edit mode, when a load from another page happens.  tried to register a script per

ScriptManager.RegisterStartupScript(this.Page, this.GetType(), script.ToString() + “Key”, val, true);

I save the client id of the button he klicked in the sesson and pass it to a other javaScript function:

function EnterRolesEditMode(btnClientId) {
var grd = document.getElementById(‘dgrRoles’);
var btn = document.getElementById(btnClientId);
grd.GridRowEnterEditMode(btn, ‘EditRole’);
}

The idea is something like this:

1. User presses on a button in the grid
2. Edit mode gets shown –> Works
3. User presses in another button
4. The ClientId of the button he pressed gets saved in the session
5. User gets redirected to another page whe he can enter some data
6. User presses OK button on page 2 and gets redirected to page 1
7. Page 1 checks, if there was a button id saved in the session, if yes, enter edit mode

Next step would be to reload the data from the session in the editing grid, but I’m stuck in the previous step.

I guess the problem is, when the Event fires the grid is not finished loading, so I kinda need to delay the javascript event till the loading finished.

Is there a easy solution to solve this?

Thanks for your response

Matthias

Hello Matthias,

Based on the functionality you mentioned, I would recommend you to check if the document is ready to load with relevant dependencies. 

The code example:

 function GridRowEnterEditMode (src, validationGroup) {

if (document.readyState != "complete")

{

//Add some delay if document.readyState is not completed

window.setTimeout("GridRowEnterEditMode ()",500); }

else { //Code logic goes here } }

I hope this helps.

 

Hello Bhadresh

thanks for the hint, I'll check this out.

Hello Bhadres,

does not seem to work. From what I've seen the datagrid objects behind are not loaded.

This code crashes:

var row = jQuery(src).parents("tr[type='row']").get(0)._object;

It works perfectly fine when the user clicks on a button, but when I call this after the document.ready it doesnt work.

I made sure the search button is the same as the clicked one, which is the case.

Is there no possibility to identify if the datagrid finished loading everything?

The task is still open and I need a solutation asap.

All I need to do is enter the editing mode after the page is loaded, I'm sure there is a possibility to do this?

Hello Bhadesh,

since I needed a solutation I made the work to debug your whole BLOCKED SCRIPT
You are basically lazyLoading the rows, which means you are loading the dom structure, but not the needed attributes (cell, adr, etc.) nor the objects behind (._object, etc.)

BUT you are loading them on the first row,  no idea why…

So there is no timing problem, but you register a mouseover event to set this values after someone moved over a cell.

So I took a td on the needed row, setted the .target to itself and fired the mosueover, of the rows-collection. This made the grid to set the needed objects –> No timing problem, no javascript problem, just special webdatagrid behavior.

For me, the problem is kinda solved, but I request two things:

• DOCUMENT THIS BEHAVIOR, everybody who wants to enter the edit mode programmatically will run into a deep sea of problems, like I did.
• Make it possible to set the edit mode programatically: All you need is a cell in the row OR the tr itself, then you can keep the lazy loading stuff, but load this row and enter the edit mode!

Ofc this are just suggestions base on the experience of the last weeks.

Hello Matthias,

Thank you for providing the approach you sued to resolve this issue. I have looked into why this approach you used didn't work.

As you have already discovered the type attribute on the td element is not actually present until mouse over. This is done for performance reasons and is only present for the mouse events of the grid to help provide information in the event.   The _object value of the tr element that you are accessing is added to the tr element for convenience. It is only done once the JavaScript object for the row has been initialized. This happens either in mouse over or if row is accessed through the public API of the WebDataGrid.

Rather than simulating the mouse event it is recommended to use Client side API for WebDataGrid to get the row instead of using tr element directly. For example the following code accomplishes this:

    var grid = $find("wdg");  

   var row = grid.get_rows().get_row(0);

Let me know if have any further questions.

Hello Matthias,

I am just following up to see if you have any further questions with this matter.