[Solved] Grid ajax binding happening on page load with initial server binding

[Donna Stewart]

I have a partial view with 3 grids, each with initial server loading and ajax binding.  I load the partial view when a node is clicked on a treeview in the calling view.  So on treeview OnSelect, I call a javascript function (getReports) that uses jquery .load to call the action on the controller that populates the model for the partial view with the grids and then returns the partial view.  However, when I select a node on the treeview, it not only calls that acton, but it also then calls the ajax binding actions for all 3 grids.  How can I keep it from doing that?  I am getting errors.  I do have an OnSelectRow event on the first grid that rebinds the other 2 grids, but that should only call those 2 ajax action methods.  The initial partial view load is calling all 3.  I was under the impression that if you have initial server loading, the ajax binding wouldn't happen on initial page load - am I wrong?

Here is the code:
Treeview:

<%= Html.Telerik().TreeView().Name("ReportGroups").ShowCheckBox(True).HtmlAttributes(New With {.style = "height:550px;"}) _
   .ClientEvents(Function(evt) evt.OnSelect("getReports")) _
   .ClientEvents(Function(evt) evt.OnLoad("setContextMenu")) _
   .ClientEvents(Function(evt) evt.OnDataBound("onTreeViewLoad")) _
   .ClientEvents(Function(evt) evt.OnCollapse("updateTreeViewState")) _
   .ClientEvents(Function(evt) evt.OnExpand("updateTreeViewState")) _
   .BindTo(CType(Model.reportGroupNames, IEnumerable(Of ReportTreeModel)),
       Sub(mappings)
           mappings.For(Of ReportTreeModel)(
           Sub(binding)
               binding _
                   .ItemDataBound(
                       Sub(item, rpt)
                           Dim isExpanded As Boolean = DirectCast(ViewData("ReportExpandedNodes"), String()).Contains(rpt.reportGroupNameKey)
                           If isExpanded Then
                               item.Text = "<span class='expanded'></span>" + rpt.reportGroupName
                           Else
                               item.Text = rpt.reportGroupName
                           End If
                           item.Value = rpt.reportGroupNameKey
                           item.Encoded = False
                           item.LoadOnDemand = False
                       End Sub)
               binding.Children(Function(rpt) rpt.reportUserGroups)
           End Sub)
           mappings.For(Of ReportUserGroupModel)(
           Sub(binding)
               binding _
                   .ItemDataBound(
                       Sub(child, userGroup)
                           child.Text = userGroup.userGroupName
                           child.Value = userGroup.userGroupNameKey
                           child.LoadOnDemand = False
                           child.Encoded = False
                       End Sub)
               binding.Children(Function(userGroup) userGroup.reportTypes)
           End Sub)
           mappings.For(Of UserGroupReportType)(
           Sub(binding)
               binding _
                   .ItemDataBound(
                       Sub(child, reportType)
                           Dim taskInfoFormatted As String = If(NullS(reportType.taskInfo).Equals(""), "", "<ul><li>" + reportType.taskInfo + "</li></ul>")
                           Dim reportFileType As String = If(NullS(reportType.fileType).Equals(""), reportType.fileType, " - " + reportType.fileType)
                           child.Text = reportType.resourceType + reportFileType + taskInfoFormatted
                           child.Value = reportType.webPermissionsKey
                           child.Encoded = False
                       End Sub)
           End Sub)
       End Sub)
%>

function getReports(e) {
    var reportTree = $('#ReportGroups').data('tTreeView');
    var selectedValue = reportTree.getItemValue(e.item);
    var selectedText = reportTree.getItemText(e.item);
    var treeView = $(this);
    var item = $(e.item);
    var parent = $(e.item).closest('.t-item').parent().closest('.t-item');
    var groupCheckedNodes = $('#ReportGroups :checked').closest('.t-item');
    $.each(groupCheckedNodes, function (index, checkedNode) {
        var checkbox2 = $(checkedNode).find('.t-checkbox :checkbox');
        $(checkbox2).attr('checked', false);
    });
    var checkbox = item.find('.t-checkbox:first [type=checkbox]');
    var shouldCheck = !checkbox.is(':checked');
    checkbox.attr('checked', shouldCheck);
    if (!parent.length) {
        var urlFormat = '<%= HttpUtility.UrlDecode(Url.Action("ShowReportGroupDetail", "Report", New With { .id = "{0}" })) %>';
        var specificUrl = $.telerik.formatString(urlFormat, selectedValue);
        $('#reportindexright').load(specificUrl);
    }
}

Partial view with grids:

<%@ Control Language="VB" Inherits="System.Web.Mvc.ViewUserControl(Of GMC_Hub_and_Spoke.ReportGroupDetailModel)" %>
<%@ Import Namespace="com.gmcps" %>
<%@ Import Namespace="GMC_Hub_And_Spoke" %>
<%@ Import Namespace="com.gmcps.GMCDataModel" %>
<%@ Import Namespace="com.gmcps.Core.CoreUtilities" %>
    <script language="javascript" type="text/javascript">
        function getReportOtherInfo(e) {
            var reportKey = e.row.cells[0].innerHTML;
            var grid = $('#ScheduleGrid').data('tGrid');
            if (isNaN(parseInt(reportKey))) {
                grid.rebind({ scheduleRptKey: 0 });
            }
            else {
                grid.rebind({ scheduleRptKey: reportKey });
            }
            var historygrid = $('#HistoryGrid').data('tGrid');
            if (isNaN(parseInt(reportKey))) {
                historygrid.rebind({ historyRptKey: 0 });
            }
            else {
                historygrid.rebind({ historyRptKey: reportKey });
            }
        }
    </script>
    <div style="clear:both;">
    <span id="reporttitle" class="listbox-label">Reports For Selected Customer Report Group</span><br />
    <%= Html.Telerik().Grid(Model.ReportLineItemList).Name("ReportGrid") _
                                      .Columns(Function(col) col.Bound(Function(p) p.ReportKey)) _
                                      .Columns(Function(col) col.Bound(Function(p) p.ReportType)) _
                                      .Columns(Function(col) col.Bound(Function(p) p.FileName)) _
                                      .Columns(Function(col) col.Bound(Function(p) p.Description)) _
                                      .Columns(Function(col) col.Bound(Function(p) p.CRS_Schedule)) _
                                      .DataKeys(Function(key) key.Add(Function(k) k.ReportKey)) _
                                      .DataBinding(Function(binding) binding.Ajax().Select("GetCustomerReportsAjax", "Report")) _
        .ClientEvents(Function(events) events.OnRowSelect("getReportOtherInfo")) _
        .Selectable().Filterable().Sortable().Pageable()
    %>
    </div>
    <div class="line" style="clear:both;">
        <div class="item" id="scheduleinfo">
            <br />
            <span class="listbox-label">Report Schedule Information</span>
            <%= Html.Telerik().Grid(Model.ScheduleGridList).Name("ScheduleGrid") _
                .Columns(Function(col) col.Bound(Function(p) p.label).Title("").HeaderHtmlAttributes(New With {.style = "height:1px;"})) _
                .Columns(Function(col) col.Bound(Function(p) p.field).Title("Schedule Information").HeaderHtmlAttributes(New With {.style = "height:1px;"})) _
                .DataBinding(Function(binding) binding.Ajax().Select("GetRptScheduleInfo", "Report")) _
                .Selectable().Filterable().Sortable().Pageable()
            %>
        </div>
        <div class="item" id="scheduledates">
            <br />
            <span class="listbox-label">Report Schedule</span>
            <%= Html.Telerik().Calendar.Name("ReportDates")%>
        </div>
        <div class="item" id="reporthistory">
            <br />
            <span class="listbox-label">Report Schedule History</span>
            <%= Html.Telerik().Grid(Model.HistoryGridList).Name("HistoryGrid") _
                                .Columns(Function(col) col.Bound(Function(p) p.CRS_Occurrence)) _
                                .Columns(Function(col) col.Bound(Function(p) p.Report_TimeStamp)) _
                                .DataBinding(Function(binding) binding.Ajax().Select("GetReportHistory", "Report")) _
                                .Selectable().Filterable().Sortable().Pageable()
                %>
        </div>
    </div>

Controller:

Function ShowReportGroupDetail(ByVal id As Integer) As ActionResult
    Dim gmcPermissions As New GMCPermissions
    Dim reportGroupDetailModel As New ReportGroupDetailModel
    Dim scheduleInfo As Customer_Reports_Schedule
    reportGroupDetailModel.ReportLineItemList = gmcPermissions.GetCustomerReports(id)
    If reportGroupDetailModel.ReportLineItemList.Count > 0 Then
        scheduleInfo = gmcPermissions.GetScheduleInformation(reportGroupDetailModel.ReportLineItemList.Item(0).ReportKey)
        reportGroupDetailModel.ScheduleGridList = New List(Of GridInfoModel)
        If Not scheduleInfo Is Nothing Then
            reportGroupDetailModel.ScheduleGridList.Add(New GridInfoModel With {.label = "Occurrence", .field = scheduleInfo.CRS_Occurrence})
            reportGroupDetailModel.ScheduleGridList.Add(New GridInfoModel With {.label = "Description", .field = scheduleInfo.CRS_Occurrence_Description})
            reportGroupDetailModel.ScheduleGridList.Add(New GridInfoModel With {.label = "Job on", .field = scheduleInfo.CRS_Job_On.ToString()})
            reportGroupDetailModel.ScheduleGridList.Add(New GridInfoModel With {.label = "Job in error", .field = scheduleInfo.CRS_Job_In_Error.ToString()})
            reportGroupDetailModel.ScheduleGridList.Add(New GridInfoModel With {.label = "Retry counter:", .field = scheduleInfo.CRS_Retry_Counter.ToString()})
        End If
        reportGroupDetailModel.HistoryGridList = gmcPermissions.GetReportHistory(reportGroupDetailModel.ReportLineItemList.Item(0).ReportKey)
    End If
    Return PartialView("ShowReportGroupDetail", reportGroupDetailModel)
End Function
<Telerik.Web.Mvc.GridAction()>
Function GetCustomerReportsAjax(ByVal id As Integer) As ActionResult
    Dim gmcPermissions As New GMCPermissions
    Dim custReportList As New List(Of ReportLineItem)
    custReportList = gmcPermissions.GetCustomerReports(id)
    Return Json(custReportList)
End Function
<Telerik.Web.Mvc.GridAction()>
Function GetRptScheduleInfo(ByVal scheduleRptKey As Integer) As JsonResult
    Dim gmcPermissions As New GMCPermissions
    Dim scheduleInfo As Customer_Reports_Schedule
    Dim scheduleInfoList As New List(Of GridInfoModel)
    If scheduleRptKey = 0 Then
        Return New JsonResult With {.Data = ""}
    End If
    scheduleInfo = gmcPermissions.GetScheduleInformation(scheduleRptKey)
    If Not scheduleInfo Is Nothing Then
        scheduleInfoList.Add(New GridInfoModel With {.label = "Occurrence", .field = scheduleInfo.CRS_Occurrence})
        scheduleInfoList.Add(New GridInfoModel With {.label = "Description", .field = scheduleInfo.CRS_Occurrence_Description})
        scheduleInfoList.Add(New GridInfoModel With {.label = "Job on", .field = scheduleInfo.CRS_Job_On.ToString()})
        scheduleInfoList.Add(New GridInfoModel With {.label = "Job in error", .field = scheduleInfo.CRS_Job_In_Error.ToString()})
        scheduleInfoList.Add(New GridInfoModel With {.label = "Retry counter:", .field = scheduleInfo.CRS_Retry_Counter.ToString()})
    End If
    Return New JsonResult With {.Data = scheduleInfoList}
End Function
<Telerik.Web.Mvc.GridAction()>
Function GetReportHistory(ByVal historyRptKey As Integer) As JsonResult
    Dim gmcPermissions As New GMCPermissions
    Dim reportLogList As New List(Of Customer_Reports_Log)
    If historyRptKey = 0 Then
        Return New JsonResult With {.Data = ""}
    End If
    reportLogList = gmcPermissions.GetReportHistory(historyRptKey)
    Return New JsonResult With {.Data = reportLogList}
End Function

I really need someone's help!

Thank you very much!
Donna

[Atanas Korchev]

Hi Donna Stewart,

 I am afraid the provided code does not indicate the source of the problem. We will need a sample project which we can run locally.

Regards,
Atanas Korchev
the Telerik team

[Donna Stewart]

After further testing this morning, it appears that the ajax binding action calls are only made if the initial server binding returns nothing in the model for that grid.  Could that be a clue to aid you in helping me?  :-) 

Thank you,
Donna

[Atanas Korchev]

Hello Donna Stewart,

 Yes. This is by design. The grid makes an ajax call automatically if it is empty and configured for ajax binding. If you don't want that to happen you need to subscribe to the OnDataBinding event of the grid and prevent it the first time.

var first = true;
function OnDataBinding(e) {
     if (first) {
         e.preventDefault();
         first = false;
     }
}

Regards,
Atanas Korchev
the Telerik team

[Donna Stewart]

Yes thank you!  That works wonderfully!

Donna