locked
Gridview not binding RRS feed

  • Question

  • User-73514677 posted

    Hi,

    I am aspx page in which I have added a datalist. Inside the datalist, I have a dynamic anchor tags. On click of the anchor tag, I am getting the data from sql database and bind to a gridview. The anchor tags are shown inside the div id "phss". The anchor tags are created from code behind.

    I have tried the below code, but the gridview is not getting displayed with the data. I can see the data in the dataset.

    // aspx code
    
       <table>
                                <tr>
                                    <td>
                                        <asp:DataList ID="DlSearch" OnItemDataBound="Item_Bound" runat="server" OnItemCommand="DlSearch_ItemCommand">
                                            <ItemTemplate>
                                                <table>
                                                    <tr>
                                                        <td>
                                                            <asp:Image Height="17px" Width="19px" runat="server" ID="imgasset" />
     <asp:LinkButton Font-Size="16px" ID="lnkAName" Text='<%# Eval("Assets") %>' OnClick="LnkAName_Click" OnClientClick="showWindow(this); return true;" CommandArgument='<%# Eval("Name") %>' CommandName='<%# Eval("ShortDescription") %>' runat="server"></asp:LinkButton>
     </td>
                                                    </tr>
                                                <tr>
                                                        <td style="padding-left: 10px; height: 10px;">
                                                            <asp:UpdatePanel ID="upsdsTest" runat="server">
                                                                <ContentTemplate>
                                                                    <asp:Label ID="lbltest" runat="server"></asp:Label>
     <div id="phss" runat="server"></div>  // div id 'phss' contains dynamic anchor tags
                                                                </ContentTemplate>
                                                            </asp:UpdatePanel>
                                                        </td>
                                                    </tr>
    
     <tr>
                                                        <td>
    <asp:GridView ID="grdsc" GridLines="both" AutoGenerateColumns="false" runat="server" ShowHeaderWhenEmpty="false"  >
    <Columns>
    <asp:TemplateField HeaderText="Column" >
    <ItemTemplate>
      <asp:Label ID="lnkColumn" runat="server" Text='<%# Eval("TBLCOL_NAME") %>'></asp:Label>
     </ItemTemplate>
    </asp:TemplateField>
                                                                                                                          </Columns>
    </asp:GridView>
    </td>
                                                    </tr>
    
                                                </table>
    // code behind
    
    // In item bound, the anchor links are created as below
     foreach (var catmemb in jsonBulkMembers.items[j][property1].items)
     {
     text += "<a id='schema' href='#' onclick='win(this)'>" + jsonBulkMembers.items[j][property1].items[k]._name + "</a>&nbsp;";
                                        if (k != 0 && k % 5 == 0)
                                        { text += "<br/>"; }
                                          k++;
     }
    
    // On click of the anchor link, a javascript function is called
    function win(anchor) {
        var SchemaName = anchor.innerHTML;  
        PageMethods.getDetails(SchemaName,On_Success, On_Failure);
    }
    
    //getDetails method in code behind
     [WebMethod]
            public static void getDetails(string schemaname)
            {          
                Sample temp = new Sample();
                Sample.NonStaticDelegate = new Action(temp.NonStaticMethod);
                if (Sample.NonStaticDelegate != null)
                {
                    Sample.NonStaticDelegate();                
                }
            }
    
     public void NonStaticMethod()
            {
                SqlConnection con = new SqlConnection(ConfigurationManager.AppSettings["Connection Name"].ToString());
                using (con)
                {
                    SqlCommand cmd = new SqlCommand("stored procedure");
                    DataSet ds = new DataSet();
                    cmd.CommandType = CommandType.StoredProcedure;
                    cmd.Parameters.AddWithValue("@DataTableName", "test12");
                    cmd.Connection = con;
                    SqlDataAdapter da = new SqlDataAdapter(cmd);
                    da.Fill(ds);
                    GridView grdsc = (GridView)DlSearch.SelectedItem.FindControl("grdsc");
                    grdsc.DataSource = ds.Tables[0];
                    grdsc.DataBind();
                 
                }
            }

    How to fix this?

    Thanks

    Thursday, November 17, 2016 9:29 AM

All replies

  • User-1838255255 posted

    Hi venkatzeus,

    According to your description, as far as I know, you call win() in JS,  you set dataset in NonStaticMethod(), but it is a local variable, dataset need return to JS function, then them to GridView! That is why you can see data in dataset, but can not bind them in gridview! About how to bind them in GridView, you can refer to this link:

    Bind data to GridView with jQuery or JSON in ASP.Net:

    http://www.aspsnippets.com/Articles/Bind-data-to-GridView-with-jQuery-or-JSON-in-ASPNet.aspx 

    Best Regards,

    Eric Du

    Friday, November 18, 2016 12:19 PM
  • User-73514677 posted

    Hi Eric Du,

    Your answer helped me alot. I am now able to bind the data.

    I want to show pagination for the gridview which is inside the datalist. Below is the sample aspx:

    <div class="divsearchresult">
                        <asp:Panel ID="pnlsearchitems" Width="100%" ScrollBars="auto" runat="server">
                            <table>
                                <tr>
                                    <td>
     <asp:DataList ID="DlSearch" OnItemDataBound="Item_Bound" runat="server" OnItemCommand="DlSearch_ItemCommand">
                                            <ItemTemplate>
                                                <table>
     <tr>
     <td>
    <asp:GridView ID="grdsc" GridLines="both" CssClass="Grid" AutoGenerateColumns="false" runat="server" ShowHeaderWhenEmpty="false"  >
                                                                <Columns>
                                                                    <asp:TemplateField >
                                                                        <ItemTemplate>
     <asp:Label ID="lnkColumn" runat="server" Text='<%# Eval("table_name") %>'></asp:Label>
                                                                        </ItemTemplate>
                                                                    </asp:TemplateField>
                           
                                                                </Columns>
                                                            </asp:GridView>
                                                            <br />
                                                            <div class="Pager"></div>
                                                        </td>
                                                    </tr>
    
                                                </table>

    Below is the javascript function whihc I have used to achieve the paging.

    function win(anchor) {
        window.tes = anchor.innerHTML;  // This give you 'Team 2'
        GetSchemaDetails(window.tes, 1);    
    }
    
    
    function GetSchemaDetails(schemaName,PageIndex) {
        $.ajax({
    
            type: "POST",
    
            url: "../Sample.aspx/BindSchemaDetails",
    
            data: '{schemaname: "' + schemaName + '",PageIndex: ' +PageIndex+ '}',
    
            contentType: "application/json; charset=utf-8",
    
            dataType: "json",
    
            success: OnSuccess,
    
    
            failure: function (response) {
    
                alert(response.d);
    
            },
    
            error: function (response) {
    
                alert(response.d);
    
            }
    
        });
    
    }
    
    
    $(".Pager .page").live("click", function () {
           GetSchemaDetails(window.tes,parseInt($(this).attr('page')));
    
    });
    
    function OnSuccess(response) {
    
         var xmlDoc = parseXml(response.d);
        var xml = $(xmlDoc);
    
        var SchemaDetails = xml.find("SchemaDetails");
    
        var row = $("[id*=grdsc] tr:last-child").clone(true);
        $("[id*=grdsc] tr").not($("[id*=grdsc] tr:first-child")).remove();
    
        $.each(SchemaDetails, function () {
    
            var Schema = $(this);
    
            $("td", row).eq(0).html($(this).find("table_name").text());
    
            $("[id*=grdsc]").append(row);
    
            row = $("[id*=grdsc] tr:last-child").clone(true);
    
        });
    
        var pager = xml.find("Pager");
    
        $(".Pager").ASPSnippets_Pager({
    
            ActiveCssClass: "current",
    
            PagerCssClass: "pager",
    
            PageIndex: parseInt(pager.find("PageIndex").text()),
    
            PageSize: parseInt(pager.find("PageSize").text()),
    
            RecordCount: parseInt(pager.find("RecordCount").text())
    
        });
    
    };
    function parseXml(xml) {
        if (jQuery.browser.msie) {
            var xmlDoc = new ActiveXObject('Microsoft.XMLDOM');
            xmlDoc.loadXML(xml);
            xml = xmlDoc;
        }
        return xml;
    }

    The problem is the div "pager" is showing for every item in the datalist, without the link being selected.

    Example:

    Item1
     Test
      Link1    Link2  Link3
    
    Item2
     Test2
       Link5

    If i click on Link5, the details of Link5 are shown in gridview with pagination. However, the pagination is also getting shown for "Item1" ,  "Item2".

    The pagination should be shown only for "Link5", which is the selected item.

    How to achieve this?

    Thanks

    Thursday, November 24, 2016 12:39 PM
  • User-1838255255 posted

    Hi venkatzeus,
     

    According to your further description, I suggest you can upload your demo to OneDrive(Including your test material). I can download it and debugging. This will help you quickly analyze the problem.

    Share OneDrive files and folders:

    https://support.office.com/en-us/article/Share-OneDrive-files-and-folders-9fcc2f7d-de0c-4cec-93b0-a82024800c07

    Best Regards,

    Eric Du

    Monday, December 5, 2016 5:42 AM