How to retain Tree even after Page Postback on Button Click

GoJS
#1

I have a Tree defined on the Page and it initiates and loads the data on a ListBox SelectedIndexChanged. This is working fine.
However, I open a modal popup on double clicking on the node and in that popup, I am trying to load data in a gridview. I cant use static WebMethod for this task in the codebehind file as I need selected values of all the listboxes on the form and them load them in the gridview and WebMethod does not directly give access to the page controls.
So I added a hidden asp button on the page and then fire its click event in the javascript where I open that popup this way:

function nodeDoubleClick(e, obj) {
   var clicked = obj.part;
   if (clicked !== null) {
    var thisnode = clicked.data;
    document.getElementById('__SelNodeKey').value = thisnode.key;
    $('#btnAutoClck').trigger('click');
    $('#dialog-form').dialog('open');
 }
}

Now my issue is that whenever I call the click event of this button, it causes a page postback and the populated tree gets disappeared. Is there any way I could retain the tree as it is or is there any way I could call the asp.net codebehind function?

#2

My question is why you would design the page to do a traditional submit that then goes to a new page? Or is it only that way because you are adding this hidden button?

You can certainly gather the field contents and perform an HttpXmlRequest POST yourself. Here’s an edited version of what I’ve used:

      var myField1 = document.getElementById("myField1");
      var myField2 = document.getElementById("myField2");
      var f1 = encodeURIComponent(myField1.value.trim());
      var f2 = encodeURIComponent(myField2.value.trim());
      var encdata = "myField1=" + f1 + "&myField2=" + f2;

      var req = new XMLHttpRequest();
      req.open("POST", "/someApi");
      req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
      req.responseType = "application/json";
      req.onload = function() {
        var result = JSON.parse(req.response);
        . . .
      };
      req.send(encdata);

An alternative is to use FormData.

I highly recommend that you read about these issues by searching the web. This really doesn’t have anything to do with GoJS.

#3

Thanks for the reply Walter. I am not going on any new page, the div containing gridview is on the same page on which the tree is, it just opens up in a modal popup.
So, you are right, I will try to pass selected values of all the listbox from the javascript only and will fill the gridview with the response.
But still my question remains the same, is there any way I could retain the tree(without needing to repopulate it) even after postback, because there will be so much events I will be adding on this form in future, for ex. exporting data in excel, etc.

#4

There are all kinds of ways of doing POSTs to the server while keeping the current HTML DOM, thereby avoiding the need to re-create the diagram. It seems that you understand that, so I guess I don’t understand what your problem is.

#5

Thats what I was doing all the time, but for that I had to access all required page elements in javascript and then needed to pass their values in Static WebMethod, which itself has its own limitations, thats why I was asking of retaining the tree while directly clicking asp button and calling a normal codebehind function with page postback.
But thanks for the reply, I will see what I can do.