asked on

Call javascript function from code behind

I have a javascript function to expand the grid rows when an image is clicked.

 <script type="text/javascript">
        $("[src*=plus]").live("click", function () {
        $(this).closest("tr").after("<tr><td></td><td colspan = '999'>" + $(this).next().html() + "</td></tr>")
        $(this).attr("src", "images/minus.png");
       
    });
    $("[src*=minus]").live("click", function () {
        $(this).attr("src", "images/plus.png");
        $(this).closest("tr").next().remove();
    });

Open in new window

I need to call this function from code behind in order to expand the row dynamically. How can I achieve this??

Chinmay Patel

Do you intend to load the data dynamically as well? Or data is already available in the grid rows?

Adrian Cross

ASKER

The data is already in the grid

Adrian Cross

ASKER

If I click the image, it will work fine. It will expand the selected row.

  <asp:TemplateField>
                     <ItemTemplate>
                         <img alt="" style="cursor: pointer" src="images/plus.png" />
...

Open in new window

But I've been asked to expand a row dynamically. The problem I'm having is to expand the row and also which row it is. Let's say I need to expand row 6 without clicking the image.

Chinmay Patel

Alright. Please correct my understanding of the question in case I am wrong.

You have a datagrid which already has data populated in it. Now, from your codebehind you want to expand a certain row without user clicking it. But then we still need a trigger/event on which we will expand the row. Do you want it to happen on Page load? or some other event that happens on server?

Adrian Cross

ASKER

Yes, that's spot on. The action will take place when the user clicks a button from a modal window.

SOLUTION

Chinmay Patel

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

ASKER CERTIFIED SOLUTION

Julian Hansen

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Chinmay Patel

Code behind runs on the server - it cannot interact with the page.

Sorry but code behind can interact with the page in couple of ways. It can invoke methods on client side JavaScript.

1. PageMethods - You can call a page method hosted in ASP.Net page and get values back. It will be a polling mechanism but very easy to implement.
2. WebMethods - Similar to page method just hosting is done in a different way.
3. SignalR - My favorite but I wont recommend it for this question
4. Higgs.IO / Socket.IO - Kind of SignalR

And I am sure there are many other ways which I am not aware of (Something due to evolution of WebRTC)

Adrian Cross

ASKER

Thanks both for pointing me in the right direction. It's working nearly as I want now.
THe only isue I have is sometimes does not return the right rowindex if a child row is displayed (expanded)

This is how I'm retrieving the index.

var idx = this.parentNode.parentNode.rowIndex;

Open in new window

However, let's say, if row 4 is expanded and I try to extend row 5, i'm getting index 6 as it is counting the expanded row as another one.
So how can I get just the parent rows?? is there a way I can assigned the row number when the data is loading???

Adrian Cross

ASKER

I think it's working now.

I'm storing the row index in a data tag

data-idx='<%# Container.DataItemIndex %>'

Open in new window

then I/m getting like this:

var rowIdx = $(this).data('idx');

Open in new window

It seems fine at the moment.
Thanks for all your help

Chinmay Patel

You can use a flag IsRowExpanded whenever you expand a Row set it to true and when you unexpand(Set it to false)

and then in your code check if IsRowExpanded === true, if it is, then subtract 1 to get the right it.

Also you can assign row Id using ASP.Net Grid's template feature, if you can share your grid's code I can suggest what needs to be changed.

Adrian Cross

ASKER

thanks both

Chinmay Patel

Any time :)

Julian Hansen

Sorry but code behind can interact with the page in couple of ways. It can invoke methods on client side JavaScript.

No you can't
The first two methods are client initiated.
The second two require sockets and are beyond the scope of this discussion.
From a beginners perspective code behind runs - renders and dies. To change something on the client the client has to initiate the request back to the server.
To setup sockets requires a whole different paradigm than what we are dealing with here.

Chinmay Patel

Code behind runs on the server - it cannot interact with the page.

It was a pretty broad statement without any "Conditions applied" hence I thought I will clarify it a bit. And SignalR as I mentioned - is not in scope of the question. And while other two are client initiated they still interact with the page.

Julian Hansen

And while other two are client initiated they still interact with the page.

That is not initiated from code behind.

Look, it is very simple. Once a .net process has completed and rendered the page and sent it to the browser you cannot call a JavaScript function on the page - end of story.

If you have a websockets solution then from your server you can send a message - but for it to do anything the client has to be subscribed to listen for that event - the client then decides what to do with it - not the server.

So, to re-iterate - you cannot invoke a function on the client from the server code - it is entirely up to the client as to how that interaction takes place.

Chinmay Patel

Alright.