HelloI had used below code but not workingvar prm SysWebFormsPageRequestManagergetInstanceprmaddendRequestfunction fnPageLoad Complete code belowltaspUpdatePanel ID34UpdatePanel134 UpdateMode34Always34 runat34server34gt ltContentTemplategt ltdiv class34row34gt ltdiv class34colsm634 style34borderright solid 3px 1ab39434gt ltdiv class34colsm1234gt

Hi indiaCheck this example Now please take its reference and correct your codeHTMLltaspScriptManager runat34server34 gtltaspUpdatePanel ID34UpdatePanel134 UpdateMode34Always34 runat34server34gt ltContentTemplategt ltaspGridView ID34GridView134 runat34server34 AutoGenerateColumns34false34 ClientIDMode34Static34 AllowPaging34false34gt ltColumnsgt ltaspTemplateField HeaderText34ID34gt ltItemTemplategt ltaspLabel runat34server34 Text39ltEval34Id34 gt39gt ltaspLabelgt ltItemTemplategt ltaspTemplateFieldgt ltaspTemplateField HeaderText34Name34gt ltItemTemplategt ltaspLabel runat34server34 Text39ltEval34Name34 gt39

Apply jQuery DataTable to ASP.Net GridView inside UpdatePanel in jQuery

india

SOLVED CLOSED ACTIVE ANSWERED
User: india
Posted: on Feb 22, 2019 07:07 AM
Forum: Data Controls
Answer: 1
Views: 7694
Sample Code: Download

Hello,

I had used below code but not working

var prm = Sys.WebForms.PageRequestManager.getInstance();

prm.add_endRequest(function () { fnPageLoad(); });

Complete code below:

<asp:UpdatePanel ID="UpdatePanel1" UpdateMode="Always" runat="server">
    <ContentTemplate>
        <div class="row">
            <div class="col-sm-6" style="border-right: solid 3px #1ab394;">
                <div class="col-sm-12">
                    <div class="col-sm-12">
                        <asp:GridView ID="gridItems" AutoGenerateColumns="false" AllowPaging="false" runat="server"
                            CssClass="table table-striped table-bordered table-hover SearchResult" OnRowCommand="gridItems_RowCommand">
                            <Columns>
                                <asp:TemplateField HeaderText="SN">
                                    <ItemTemplate>
                                        <%# Container.DataItemIndex + 1 %>
                                    </ItemTemplate>
                                    <ItemStyle />
                                </asp:TemplateField>
                                <asp:TemplateField HeaderText="Item" HeaderStyle-HorizontalAlign="Left" ItemStyle-HorizontalAlign="Left">
                                    <ItemTemplate>
                                        <asp:Label ID="lblItem" runat="server" Text='<%#Eval("ItemName") %>'></asp:Label>
                                        <asp:HiddenField ID="hdnSaleItemId" runat="server" Value='<%#Eval("SaleItemId") %>' />
                                    </ItemTemplate>
                                </asp:TemplateField>
                                <asp:TemplateField HeaderText="Qty" HeaderStyle-HorizontalAlign="Left" ItemStyle-HorizontalAlign="Left">
                                    <ItemTemplate>
                                        <asp:Label ID="lblQty" runat="server" Text='<%#Eval("Qty") %>'></asp:Label>
                                    </ItemTemplate>
                                </asp:TemplateField>
                                <asp:TemplateField HeaderText="Rate" HeaderStyle-HorizontalAlign="Left" ItemStyle-HorizontalAlign="Left">
                                    <ItemTemplate>
                                        <asp:Label ID="lblRate" runat="server" Text='<%#Eval("Rate") %>'></asp:Label>
                                    </ItemTemplate>
                                </asp:TemplateField>
                                <asp:TemplateField HeaderText="Amount" HeaderStyle-HorizontalAlign="Left" ItemStyle-HorizontalAlign="Left">
                                    <ItemTemplate>
                                        <asp:Label ID="lblAmount" runat="server" Text='<%#Eval("Amount") %>'></asp:Label>
                                    </ItemTemplate>
                                </asp:TemplateField>
                                <asp:TemplateField HeaderText="Action" HeaderStyle-HorizontalAlign="Left" ItemStyle-HorizontalAlign="Left">
                                    <ItemTemplate>
                                        <asp:LinkButton ID="btnEdit" CssClass="btn btn-info" runat="server" Style="padding: 1px"
                                            CommandArgument='<%#Eval("SaleItemId") %>' CommandName="EditRecord"><i class="fa fa-paste"></i></asp:LinkButton>
                                        <asp:LinkButton ID="btnDelete" CssClass="btn btn-danger" runat="server" Style="padding: 1px"
                                            CommandArgument='<%#Eval("SaleItemId") %>' CommandName="DeleteRecord"><i class="fa fa-trash"></i></asp:LinkButton>
                                    </ItemTemplate>
                                    <ItemStyle Width="80px" />
                                </asp:TemplateField>
                            </Columns>
                            <EmptyDataTemplate>
                                No Item Added</EmptyDataTemplate>
                            <EmptyDataRowStyle ForeColor="Red" />
                        </asp:GridView>
                    </div>
                </div>
            </div>
        </div>
        <!-- Mainly scripts -->
        <script src="/js/jquery-2.1.1.js"></script>
        <!-- Jquery Validate -->
        <script src="/js/plugins/validate/jquery.validate.min.js"></script>
        <script>
            $.validator.setDefaults({ ignore: ":hidden:not(.chosen-select)" }) 
            $(document).ready(function () {
                fnPageLoad();
            });
            function fnPageLoad()
            {
                if ($("#<%=gridItems.ClientID %> tr").length > 1) {
                $('.SearchResult').DataTable({
                    bSort: true,
                    dom: '<"html5buttons"B>lTfgitp',
                    lengthChange: false,
                    pageLength: 5,
                    buttons: [],
                    bStateSave: true
                });
            };
                                
            var prm = Sys.WebForms.PageRequestManager.getInstance();
            prm.add_endRequest(function () {
                fnPageLoad();
            });
        </script>
    </ContentTemplate>
</asp:UpdatePanel>

dharmend...

0 1

Reply
ANSWER
User: dharmendr
Replied: on Feb 22, 2019 07:40 AM
Modified: on Feb 22, 2019 07:40 AM
Report

Hi india,

Check this example. Now please take its reference and correct your code.

HTML

<asp:ScriptManager runat="server" />
<asp:UpdatePanel ID="UpdatePanel1" UpdateMode="Always" runat="server">
    <ContentTemplate>
        <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" ClientIDMode="Static"
            AllowPaging="false">
            <Columns>
                <asp:TemplateField HeaderText="ID">
                    <ItemTemplate>
                        <asp:Label runat="server" Text='<%#Eval("Id") %>'> </asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Name">
                    <ItemTemplate>
                        <asp:Label runat="server" Text='<%#Eval("Name") %>'>
                        </asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Country">
                    <ItemTemplate>
                        <asp:Label runat="server" Text='<%#Eval("Country") %>'>
                        </asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>
            <EmptyDataTemplate>
                No Record Available
            </EmptyDataTemplate>
        </asp:GridView>
    </ContentTemplate>
</asp:UpdatePanel>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.10.2.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css" />
<script type="text/javascript" src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        fnPageLoad();
    });
    function fnPageLoad() {
        $('#GridView1').prepend($("<thead></thead>").append($('#GridView1').find("tr:first"))).DataTable({
            bSort: true,
            dom: '<"html5buttons"B>lTfgitp',
            lengthChange: false,
            pageLength: 5,
            buttons: [],
            bStateSave: true
        });
    }
</script>

protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        System.Data.DataTable dt = new System.Data.DataTable();
        dt.Columns.AddRange(new System.Data.DataColumn[3] { new System.Data.DataColumn("Id", typeof(int)),
                    new System.Data.DataColumn("Name", typeof(string)),
                    new System.Data.DataColumn("Country",typeof(string)) });
        dt.Rows.Add(1, "John Hammond", "United States");
        dt.Rows.Add(2, "Mudassar Khan", "India");
        dt.Rows.Add(3, "Suzanne Mathews", "France");
        dt.Rows.Add(4, "Robert Schidner", "Russia");
        GridView1.DataSource = dt;
        GridView1.DataBind();
    }
}

VB.Net

Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
    If Not Me.IsPostBack Then
        Dim dt As System.Data.DataTable = New System.Data.DataTable()
        dt.Columns.AddRange(New System.Data.DataColumn(2) {
            New System.Data.DataColumn("Id", GetType(Integer)), 
            New System.Data.DataColumn("Name", GetType(String)), 
            New System.Data.DataColumn("Country", GetType(String))})
        dt.Rows.Add(1, "John Hammond", "United States")
        dt.Rows.Add(2, "Mudassar Khan", "India")
        dt.Rows.Add(3, "Suzanne Mathews", "France")
        dt.Rows.Add(4, "Robert Schidner", "Russia")
        GridView1.DataSource = dt
        GridView1.DataBind()
    End If
End Sub

Screenshot

Apply jQuery DataTable to ASP.Net GridView inside UpdatePanel in jQuery

Company

Explore

Follow us

Contact Us