CODEWITHSUNDEEP
c#asp.nettelerik
user710502
user710502

Reputation: 11471

Create pop up panel or similar

I have a request.. where I need to create a link, then after the link is clicked.. a pop up should come up with a gridview in there but whatever is selected from that grid view I should pass it to a label on the page where the pop up was originated.. How can I do this?

I do not want to create a separate page.. just want to be able to add a gridview maybe in a panel... and then make the panel pop upon clicking on a linkbutton.

So so far, I have the panel and the gridview in the panel, how do i make it pop up?

PS : I also have Telerik just have not used it much (is there anything from there I can use)

Thank you

Upvotes: 0

Views: 798

Answers (2)

Jeff Reddy
Jeff Reddy

Reputation: 5670

I'd put the gridview in a DIV and hide the div. You can then use JQuery to handle showing the DIV, capturing your value selected and setting your label. This can all be done client side, avoiding any trips to the server as it seems that shouldn't be necessary for what you've described. Here's a very simple sample. I'm simply showing a textbox and the value entered is updated into the label. You'll of course want to add some styling and html here to make your div look more like a form. But it should get you started. You'll also need to include the jquery references.

<script type="text/javascript">
    $(document).ready(function () {
        $('.ok').click(function (e) {
            //Cancel the link behavior
            e.preventDefault();

            $('#lbl').text($('#input').val());
            $('#dialog').hide();

    });

        $('#btnShow').click(function (e) {
            //Cancel the link behavior
            e.preventDefault();

            //Set the popup window to center
            $('#dialog').css('top', $(window).height() / 2 - $('#dialog').height() / 2);
            $('#dialog').css('left', $(window).width() / 2 - $('#dialog').width() / 2);

            $('#dialog').show();

        });


    });
</script>

<label id="lbl">Old Value</label>
<input type="button" id="btnShow" value="Get Value" />
<div id="dialog" style="display:none; width:440px; height:200px; position:absolute;  ">
    <input type="text" id="input" />
    <input type="button" value="OK" class="ok" style="width:70px"/>
</div>

Upvotes: 0

Icarus
Icarus

Reputation: 63966

Have a look at the ajax control toolkit.

This example demos the popup functionality that you want.

Upvotes: 2

Related Questions