Telerik grid disable onrowselected event once a row is selected

Question

I am using Html.Telerik().Grid in my asp.net MVC 3 project where in i have a Grid (Telerik grid) which sows searchResults, User has facility to click on these rows to see more information of the particular row in a new page which is opened in the new window. I am also using Jquery to handle the onrowselected event and i am doing a post to the controller to fetch the details.

Jquery code:

 function onRowSelected(e) {
        var grid = $(this).data('tGrid');
       //populate criteria here

        $.ajax({
            type: "POST",
            contentType: "application/json; charset=utf-8",
            url: //"some url",
            data: //data to controller,
            dataType: "text json",
            success:
        function (data, textStatus) {
            if (data != "Success") {
                ShowError(data);
            }
            else {
                window.location.href = //"redirect";
            }
        }
        }

        });

I dont want the user to select anything else on the page and want him to just wait until the details are loaded i.e. once he selects a row he should not be able to select any other row in the grid. Any way of achieving this.

Igorrious Igorrious · Accepted Answer · 2012-05-30T17:32:08

May I suggest using a loading progress pop-up that will prevent the user from selecting anything else and indicate that some action is happening behind the scenes.

Here is a plugin that I've used before http://contextllc.com/tools/jQuery-showLoading

Implementation would be fairly simple, after including the the plug-in script:

function onRowSelected(e) {
    $('#someID').showLoading();  //To show the loading progress bar, someID could be the div that contains the grid.

    $.ajax({
        type: "POST",
        contentType: "application/json; charset=utf-8",
        url: //"some url",
        data: //data to controller,
        dataType: "text json",
        success:
            function (data, textStatus) {
                 $('#someID').hideLoading();  //To hide the loading progress bar
            }
    });
}

EDIT:

Alternatively you could try something like this, it will show the overlay hiding the whole page and a loading picture in the middle of the screen.

Add the following styling to your page, you'll have to find an image and edit the path in the background attribute of the .loading-indicator class:

<style type="text/css">
.loading-indicator {
    position: absolute; 
    height: 80px;
    width: 80px;
    left: 50%;
    top: 50%;
    z-index: 1001;
    background: url( '../images/loading.gif' );
    background-repeat: no-repeat;
    background-position: center center;
}

.loading-indicator-overlay {
    position: absolute; 
    width:100%;
    height: 100%;
    z-index: 1000;
    background-color: black;
    opacity: 0.6;
}
</style>

Add javascript to show and hide the loading bar:

<script type="text/javascript">
function showLoadingBar() {
    $('#overlay').addClass('loading-indicator-overlay');
    $('#loadingbar').addClass('loading-indicator');
}

function hideLoadingBar() {
    $('#overlay').removeClass('loading-indicator-overlay');
    $('#loadingbar').removeClass('loading-indicator');
}
</script>

Add the following div tags to the page:

<body>
    <div id="overlay"></div>
    <div id="loadingbar"></div>
    ....
    ....
</body>

Now you can call the showLoadingBar() or hideLoadingBar() to block the user from interacting with the page, while you do some background processing. You'll have to test that css to make sure it is compatible with the main stream browsers.

Telerik grid disable onrowselected event once a row is selected

1 Answers