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

client side paging-- Hyperlink not working

4 Answers 132 Views

Grid

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

kavitha asked on 19 Apr 2011, 05:23 PM

when i was doing client side paging and changed the page size in the radgrid at runtime, it is throwing error at
var link = item.get_cell(“Project”).getElementsByTagName(“a”)[0]; as
Uncaught TypeError: Cannot set property ‘innerHTML’ of undefined.

I totally have 3 rows to be binded in the grid. If i set pagesize in the aspx as 10 and then change the pagesize at run time to 20 it works.

But if i set the pagesize in aspx as 1 and later change the pagesize in the runtime to 10 it’s not work.

gesize in aspx as 1 and later change the pagesize in the runtime to 10 it’s not work.

aspx:

ASPX:

<telerik:RadGrid ID="RadGrid1" Skin="Office2007" runat="server"
   GridLines="None" AllowPaging="true" AllowSorting="true" AutoGenerateColumns="false" PageSize="1">
   <ClientSettings>
       <ClientEvents OnCommand="RadGrid1_Command" OnRowDataBound="OpenSurveys_OnRowDataBound" />
   </ClientSettings>
   <MasterTableView>
     <Columns>
       <telerik:GridBoundColumn DataField="ProjectID" HeaderText="ProjectID" Visible="False" />
       <telerik:GridBoundColumn DataField="SurveyPriority" HeaderText ="Priority" DataType="System.String"/>
       <telerik:GridHyperLinkColumn DataTextField="SurveyName" DataNavigateUrlFields="SurveyName"
                        UniqueName="Name" HeaderText="Name" ItemStyle-Font-Underline="true" />
       <telerik:GridBoundColumn DataField="SurveyCompletionStatusForPanelist" HeaderText="Completion Status" DataType="System.String" />
       <telerik:GridBoundColumn DataField="SurveyClosingDate" HeaderText="Due Date" DataFormatString="{0:d}"/>
       <telerik:GridBoundColumn DataField="AdditionalInfo" HeaderText ="Additional Information" />
     </Columns>
     </MasterTableView>
     <PagerStyle AlwaysVisible="true" />
    </telerik:RadGrid>

CS:

function OpenSurveys_OnRowDataBound(sender, args)
        {
            console.log("hyperlink");
            // manually set the hyperlink's title
            var item = args.get_item();
            var dataItem = args.get_dataItem();
            var link = item.get_cell("Name").getElementsByTagName("a")[0];
            console.log("item,dataItem,link",item,dataItem,link);

            link.innerHTML = dataItem.SurveyName;
            link.href = dataItem.SurveyURL;

        }

4 Answers, 1 is accepted

answered on 19 Apr 2011, 05:33 PM

I totally have 3 rows to be binded in the grid. If i set pagesize in the aspx as 10 and then change the pagesize at run time to 20 it works.

But if i set the pagesize in aspx as 1 and later change the pagesize in the runtime to 10 it’s not work.

ASPX:

CS:

answered on 25 Apr 2011, 01:32 PM

RadGridClientBinding415958.zip

Hello Kavitha,

I tried to replicate the issue which you described, but to no avail.
Attached to this message, you will find the code which I used for testing.

Please, take a look at it and let me know if there are any differences at your end, which I may be leaving out.

Greetings,
Mira
the Telerik team

Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

answered on 25 Apr 2011, 03:00 PM

Hello Mira,

Thanks for the code. But i couldn't make any difference in my code. Below is my code, could you please let me know what is the error in my code.

Thanks in advance.

code:

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="PrincipalSurveys.ascx.cs" Inherits="DOE.Web.Nycenet.Common.Controls.Vovici.PrincipalSurveys" %>
<%@ Register Assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"
    Namespace="System.Web.UI" TagPrefix="asp" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
    <script type="text/javascript">
    var commandName = "";
    var OpenSurveysTableView = null;
    var ClosedSurveysTableView = null;
    function OpenSurveys()
    {
         document.getElementById("<%=RadGrid2.ClientID%>").style.display="none";
         document.getElementById("<%=RadGrid1.ClientID%>").style.display="block";
         $find("<%= RadAjaxLoadingPanel1.ClientID %>").show("<%= RadGrid1.ClientID %>");
         executeMethod("/WebServices/SurveyDetails.asmx", "OpenSurveys", getOpenSurveysRequestData(OpenSurveysTableView), updateOpenSurveyGrid, updateFailed);
    }
    function ClosedSurveys()
    {
       document.getElementById("<%=RadGrid1.ClientID%>").style.display="none";
       document.getElementById("<%=RadGrid2.ClientID%>").style.display="block";
       ClosedSurveysTableView= $find("<%= RadGrid2.ClientID %>").get_masterTableView();
       $find("<%= RadAjaxLoadingPanel1.ClientID %>").show("<%= RadGrid2.ClientID %>");
       executeMethod("/WebServices/SurveyDetails.asmx", "ClosedSurveys", getClosedSurveysRequestData(ClosedSurveysTableView), updateClosedSurveyGrid, updateFailed);
    }
    function pageLoad(sender, args)
    {
      document.getElementById("<%=RadGrid1.ClientID%>").style.display="block";
      document.getElementById("<%=RadGrid2.ClientID%>").style.display="none";
      OpenSurveysTableView = $find("<%= RadGrid1.ClientID %>").get_masterTableView();
      $find("<%= RadAjaxLoadingPanel1.ClientID %>").show("<%= RadGrid1.ClientID %>");
      commandName = "Load";
      executeMethod("/WebServices/SurveyDetails.asmx", "OpenSurveys", getOpenSurveysRequestData(OpenSurveysTableView), updateOpenSurveyGrid, updateFailed);
    }
    function RadGrid1_Command(sender, args)
    {
      args.set_cancel(true);
      commandName = args.get_commandName();
      $find("<%= RadAjaxLoadingPanel1.ClientID %>").show("<%= RadGrid1.ClientID %>");
      executeMethod("/WebServices/SurveyDetails.asmx", "OpenSurveys", getOpenSurveysRequestData(OpenSurveysTableView), updateOpenSurveyGrid, updateFailed);
    }
    function RadGrid2_Command(sender, args)
    {
      args.set_cancel(true);
      commandName = args.get_commandName();
      $find("<%= RadAjaxLoadingPanel1.ClientID %>").show("<%= RadGrid2.ClientID %>");
      executeMethod("/WebServices/SurveyDetails.asmx", "ClosedSurveys", getClosedSurveysRequestData(ClosedSurveysTableView), updateClosedSurveyGrid, updateFailed);
    }
    function updateOpenSurveyGrid(result)
    {

       $find("<%= RadAjaxLoadingPanel1.ClientID %>").hide("<%= RadGrid1.ClientID %>");
       OpenSurveysTableView.set_dataSource(result);
       OpenSurveysTableView.dataBind();
       if (commandName == "PageSize" || commandName == "Load" || commandName == "Page" || commandName=="Sort") {
             executeMethod("/WebServices/SurveyDetails.asmx", "GetOpenSurveyCount", "{}", updateOpenSurveyVirtualItemCount);
        }
    }
    function updateClosedSurveyGrid(result)
    {

       $find("<%= RadAjaxLoadingPanel1.ClientID %>").hide("<%= RadGrid2.ClientID %>");
       ClosedSurveysTableView.set_dataSource(result);
       ClosedSurveysTableView.dataBind();

       if (commandName == "PageSize" || commandName == "Load" || commandName == "Page" || commandName=="Sort") {
             executeMethod("/WebServices/SurveyDetails.asmx", "GetClosedSurveyCount", "{}", updateClosedSurveyVirtualItemCount);
        }
    }
    function updateOpenSurveyVirtualItemCount(result)
    {
      OpenSurveysTableView.set_virtualItemCount(result);
    }
     function updateClosedSurveyVirtualItemCount(result)
    {
      ClosedSurveysTableView.set_virtualItemCount(result);
    }
    function updateFailed(result)
    {
     //alert(result);
    }
    function getOpenSurveysRequestData(OpenSurveysTableView)
    {
      var openpageSize = OpenSurveysTableView.get_pageSize();
      var opencurrentPageIndex = OpenSurveysTableView.get_currentPageIndex();
      var openstartIndex = openpageSize * opencurrentPageIndex;

      return JSON.stringify({
      "startIndex": openstartIndex,
      "maximumRows": OpenSurveysTableView.get_pageSize(),
      "sortExpression": '',
      "filterExpression": ''
       });

    }
    function getClosedSurveysRequestData(ClosedSurveysTableView)
    {

      var closedpageSize = ClosedSurveysTableView.get_pageSize();
      var closedcurrentPageIndex = ClosedSurveysTableView.get_currentPageIndex();
      var closedstartIndex = closedpageSize * closedcurrentPageIndex;

      return JSON.stringify({
      "startIndex": closedstartIndex,
      "maximumRows": ClosedSurveysTableView.get_pageSize(),
      "sortExpression": '',
      "filterExpression": ''
       });
    }
    function executeMethod(location, methodName, methodArguments, onSuccess, onFail)
    {

      $.ajax({
      type: "POST",
      url: location + "/" + methodName,
      data: methodArguments,
      contentType: "application/json; charset=utf-8",
      dataType: "json",
      success: onSuccess,
      fail: onFail
      });
    }

    var currentLoadingPanel = null;
    var currentUpdatedControl = null;
    function RequestStart(sender, args) {
        console.log("RequestStart");
        currentLoadingPanel = $find("<%= RadAjaxLoadingPanel1.ClientID %>");

            if (args.get_eventTarget() == "<%= RadGrid1.UniqueID %>") {
                currentUpdatedControl = "<%= RadGrid1.ClientID %>";
            }
            if (args.get_eventTarget() == "<%= RadGrid2.UniqueID %>") {
                currentUpdatedControl = "<%= RadGrid2.ClientID %>";
            }
            if (args.get_eventTarget() == "<%= btnOpen.UniqueID %>") {
                currentUpdatedControl = "<%= RadGrid1.ClientID %>";
            }
            if (args.get_eventTarget() == "<%= btnClosed.UniqueID %>") {
                currentUpdatedControl = "<%= RadGrid2.ClientID %>";
            }
            //show the loading panel over the updated control
            currentLoadingPanel.show(currentUpdatedControl);
        }
        function ResponseEnd() {
            //hide the loading panel and clean up the global variables
            if (currentLoadingPanel != null)
                currentLoadingPanel.hide(currentUpdatedControl);
            currentUpdatedControl = null;
            currentLoadingPanel = null;
        }
        function OpenSurveys_OnRowDataBound(sender, args)
        {

            // manually set the hyperlink's title
            var item = args.get_item();
            var dataItem = args.get_dataItem();
            var link = item.get_cell("Name").getElementsByTagName("a")[0];
            if(link)
            {
            link.innerHTML = dataItem.SurveyName;
            link.href = dataItem.SurveyURL;
            }

        }

   </script>
</telerik:RadCodeBlock>