This is a migrated thread and some comments may be shown as answers.

Bug: tGrid not defined after second AjaxCall

10 Answers 139 Views
Grid
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
Heiko Falk
Top achievements
Rank 1
Heiko Falk asked on 24 Jan 2012, 04:20 PM
    Hi

I created a little wizard assistent and in the first step, I can choose to create a new person or to select a person from a list. Choosing the second option insert a partial view with all persons in a grid and moves the slider to this step.
Everything works fine unitl i go a step backwards, then I remove the list again and move the slider to the fist step again. And when I decide again to select a person from the list, the same partial view as before is inserted again. But now my ajaxBinding doesnt work anymore. So I guess that even when I remove the hole partial view with the grid there is stil some data in my cache. Or what else could be the problem? Do I have to unbind all functions from the grid?

EDIT:
I just found the solution: between the HTML of the first and second loaded partial view is no difference, so it has something with javascript. And then I found the line

   
<script type="text/javascript">
    if(!jQuery.telerik){
    jQuery.ajax({
    url:"/Scripts/2011.3.1115/telerik.common.min.js",
    dataType:"script",
    cache:false,
    success:function(){
    jQuery.telerik.load(["/Scripts/2011.3.1115/jquery-1.6.4.min.js","/Scripts/2011.3.1115/telerik.common.min.js","/Scripts/2011.3.1115/telerik.textbox.min.js","/Scripts/2011.3.1115/telerik.calendar.min.js","/Scripts/2011.3.1115/telerik.datepicker.min.js","/Scripts/2011.3.1115/telerik.grid.min.js","/Scripts/2011.3.1115/telerik.grid.filtering.min.js"],
        function
(){ jQuery('#GridKundenListe').tGrid({columns:[{


So if jQuery.telerik is not defined yet, the needed script are sended to the client and (!) tGrid is defined. That means that in my second call, jQuery.telerik is already defined and the gridData (tGrid) is not defined again, which is not correct in my eyes.

Hopefully you can understand what I mean.


Regards
Heiko

10 Answers, 1 is accepted

Sort by
0
Petur Subev
Telerik team
answered on 24 Jan 2012, 06:31 PM
Hi Heiko,

This code is required to ensure that all needed JavaScript files are loaded. Could you share more details about the scenario so we can investigate further what causes the problem?

Regards,
Petur Subev
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the Telerik Extensions for ASP.MET MVC, subscribe to their blog feed now
0
Heiko Falk
Top achievements
Rank 1
answered on 25 Jan 2012, 09:10 AM
Hi Petur,

I will simplify the problem. I have a view with two divs. In div01, I can choose to create a new person or to select an existing one, so I have a form with two radiobuttons:

1. Provide full details
2. Select person from list

Selecting one of the radiobuttons submits the form and I get a partial view as response which is inserted in div02. When I change my choice in div01, div02 is getting replaced by the new response. So clicking the second button inserts my person grid in div02. Everything works fine, I can filter, ajaxBinding is working, $('#grid').data('tGrid') is defined.

Now I select the first button and then the second button again. So the grid is removed and replaced by the details partial view, whihc is then replaced again by the grid partial view. But now the grid is broken because function(){ jQuery('#GridKundenListe').tGrid({columns:[{ .... is not executed again because telerik.jquery is already defined. As you can see in my first post, the check of jquery.telerik, getting the scripts and the defintion of .tGrid({columns: is in one call.
So I went along and wrote 'jquery.telerik = false;' when before submitting the form in div01 and then everything works fine.

Is it more clear now?

Regards,
Heiko
0
Petur Subev
Telerik team
answered on 25 Jan 2012, 02:51 PM
Hi Heiko,

I am glad you found a solution. I asked for more details (code used to remove and load the Grid via Ajax), because you should not have any problems when loading the Grid via Ajax (this code is executed every time you load a partial View because this script ships along with Grid markup over the network).

Regards,
Petur Subev
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the Telerik Extensions for ASP.MET MVC, subscribe to their blog feed now
0
Heiko Falk
Top achievements
Rank 1
answered on 25 Jan 2012, 03:12 PM
Hi Petur,

I appreciate your answer. I do have problems when loading the Grid via Ajax, that is why i have to set jquery.telerik to false manually everytime when I load the partial view again. I really don't think that getting the required scripts and the grid properties setting should be in one statement . Now it is like "When jquery.telerik is not defined, get the scripts, define jquery.telerik and setup the grid properties". But it should be seperated in two different statement : "When jquery.telerik is not defined, get the scripts, define jquery.telerik" and then in a seperate statement "Setup the grid properties". Then the grid properties are setup every time when loading the partial view and not only on the fist time.

Do have a missunderstanding? For me, it seems like a bug...

Kind Regards
Heiko
0
Petur Subev
Telerik team
answered on 26 Jan 2012, 03:46 PM
Hello again Heiko,

Thank you for the explanation, I am still unable to reproduce such behavior on my side. Each time I load the Grid from partial view it is working as expected (paging, sorting etc.). Since as it seems I do not have enough details about your current setup I would like to ask you once again to send me a runnable sample that reproduces the problem. I will check that demo project and do my best to provide you with the most appropriate solution. 

Regards,
Petur Subev
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the Telerik Extensions for ASP.MET MVC, subscribe to their blog feed now
0
Sid
Top achievements
Rank 1
answered on 15 Feb 2012, 07:49 AM
I've got the same issue:

Here's my script file:
<script type="text/javascript">
    var datastring, actionURL, actionURL2, actionURL3;
 
   function onTaskSelect(e) {
        var dataItem = $("#UserQuestGrid").data("tGrid").dataItem($(e.row));
        var itemid = dataItem.journey_id;
        datastring = 'id=' + itemid;
        actionURL = '@Url.Action("GetJourneyDetail","Dashboard")';
        actionURL2 = '@Url.Action("GetJourneyFiles","Dashboard")';
        actionURL3 = '@Url.Action("GetJourneyQuests","Dashboard")';
 
 
        updateDetail();
        updateQuests();
        updateFiles();
    }
 
    function updateDetail() {
        $.ajax({
            type: "POST",
            url: actionURL,
            data: datastring,
            success: function (d) { $("#journeymain").html(d); }
 
        });
    }
 
    function updateFiles() {
        $.ajax({
            type: "POST",
            url: actionURL2,
            data: datastring,
            success: function (f) { $("#journeyfiles").html(f); }
        });
    }
 
    function updateQuests() {
        $.ajax({
            type: "POST",
            url: actionURL3,
            data: datastring,
            success: function (q) { $("#journeyquests").html(q); }
        });
    }
     
</script>

It works perfectly the first time.  The second request the grid is undefined.  If I comment out the 2nd and 3rd AJAX functions (updateFiles and updateQuests) then it works perfectly as well.

Heiko, where did you add the "jquery.telerik = false"?

Any other thoughts?

Thanks,
-Sid.



0
Heiko Falk
Top achievements
Rank 1
answered on 22 Feb 2012, 11:33 AM
Hey Sid,

I would place it before everey ajaxRequest you are calling, so the first line the funtions updateDetail(), updateFiles() and updateQuests().

Regards
Heiko
0
Rafael
Top achievements
Rank 1
answered on 07 May 2012, 12:19 PM
it seems I faced to the same problem
I try to refresh my grid clicking on tree view items
But I get undefined value for grid, hence rebind throws exception

$.get("../CM/BookingForm", { BookingId: _BookingId }, function (data) {
                $("#BookingForm").empty();
                $("#BookingForm").append(data);
                jQuery.telerik = false;
                var grid = $('#SkillsGrid').data('tGrid'); //I get undefined value
                grid.rebind({ EmployeeId: $('#EmployeeId').val() })
            });

Who could help what's wrong in my code?
0
Heiko Falk
Top achievements
Rank 1
answered on 07 May 2012, 02:19 PM
Hello Raphael,

your call of 'jquery.telerik' is too late, it should be placed before the call to get the grid is made. When you make the call, the grid has already been defined.

Try:
jQuery.telerik = false;
$.get("../CM/BookingForm", { BookingId: _BookingId }, function (data) {
                $("#BookingForm").empty();
                $("#BookingForm").append(data);
                var grid = $('#SkillsGrid').data('tGrid'); //I get undefined value
                grid.rebind({ EmployeeId: $('#EmployeeId').val() })
            });


Regards
Heiko
0
Rafael
Top achievements
Rank 1
answered on 08 May 2012, 08:52 AM
hi Heiko,
No way to get it worked with jQuery.telerik = false
Here is some workaround which works
In grid in partial view I script OnComplete event

function OnComplete(e) {
        if (skillsGridCompleteHandler != undefined) {
             skillsGridCompleteHandler(); 
        }
        skillsGridCompleteHandler = undefined;
     }

Then i changed my script in select event in tree view from where I populate grid

$.get("../CM/BookingForm", { BookingId: _BookingId }, function (data) {
                $("#BookingForm").empty();
                skillsGridCompleteHandler =
                    function () {
                        var grid = $('#SkillsGrid').data('tGrid');
                        grid.rebind({ EmployeeId: $('#EmployeeId').val() });
                    };
                 $("#BookingForm").append(data);
            });

It works but there is not paging in grid: working on it
Tags
Grid
Asked by
Heiko Falk
Top achievements
Rank 1
Answers by
Petur Subev
Telerik team
Heiko Falk
Top achievements
Rank 1
Sid
Top achievements
Rank 1
Rafael
Top achievements
Rank 1
Share this question
or