user6628729 user6628729 - 2 months ago 17
Javascript Question

Searching,sorting on gird-view

I try this example for search and sort but in this example they use table and I am using

gridview


datatable example

I try this

public DataTable info(string id)
{
try
{
Entities2 wr = new Entities2();
List<spvechile_Result> sv = wr.spvechile(id).ToList();
DataTable dt = new DataTable();
dt.Columns.Add("Name", typeof(int));
foreach (var c in sv)
{
dt.Rows.Add(c.Name);
}
GridView1.DataSource = dt;
GridView1.DataBind();
return dt;
}
catch (Exception ex)
{
throw new Exception();
}
}


so how is this this possible to use this example with gridview

latest update

i modify this file .

<link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css" />


and remove padding-right:30px
so after i this this is the result
this is updated html

<div class="panel" id="paneldiv">
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<div id="firstgrid">
<asp:GridView ID="GridView1" runat="server"
CssClass="table table-striped table-bordered" Width="100%" CellPadding="0"
Font-Names="Verdana" BackColor ="White" BorderColor="#CCCCCC" BorderStyle="None"
BorderWidth="1px" Font-Size="9pt">
<FooterStyle BackColor="White" ForeColor="#000066" />
<HeaderStyle BackColor="#006699" Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="White" ForeColor="#000066" HorizontalAlign="Left" />
<RowStyle ForeColor="#000066" />
<SelectedRowStyle BackColor="#669999" Font-Bold="True" ForeColor="White" />
<SortedAscendingCellStyle BackColor="#F1F1F1" />
<SortedAscendingHeaderStyle BackColor="#007DBB" />
<SortedDescendingCellStyle BackColor="#CAC9C9" />
<SortedDescendingHeaderStyle BackColor="#00547E" />
</asp:GridView>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</div>


image

in the last column there is long text and beacuse of this formatting not correct and grid-view height become so long how to manage this

Answer
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css" />

<script type="text/javascript" src="//code.jquery.com/jquery-1.12.3.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js"></script>

<script>
    $(document).ready(function () {
        $("#GridView1").prepend($("<thead></thead>").append($(this).find("tr:first"))).dataTable({
            "aoColumnDefs": [{ 'bSortable': false, 'aTargets': [3] }]
        });
    });
</script>

Add css class in gridview CssClass="table table-striped table-bordered" and set Width="100%" CellPadding="0"

For your refrence:jquery bootstrap datatable

UPDATE:

<asp:GridView ID="GridView1" runat="server"
        CssClass="table table-striped table-bordered" Width="100%" CellPadding="0"
        Font-Names="Verdana" BackColor ="White" BorderColor="#CCCCCC" BorderStyle="None" 
        BorderWidth="1px" Font-Size="9pt">
    <FooterStyle BackColor="White" ForeColor="#000066" />
    <HeaderStyle BackColor="#006699" Font-Bold="True" ForeColor="White" />
    <PagerStyle BackColor="White" ForeColor="#000066" HorizontalAlign="Left" />
    <RowStyle ForeColor="#000066" />
    <SelectedRowStyle BackColor="#669999" Font-Bold="True" ForeColor="White" />
    <SortedAscendingCellStyle BackColor="#F1F1F1" />
    <SortedAscendingHeaderStyle BackColor="#007DBB" />
    <SortedDescendingCellStyle BackColor="#CAC9C9" />
    <SortedDescendingHeaderStyle BackColor="#00547E" />
</asp:GridView>

I have added only this line CssClass="table table-striped table-bordered" Width="100%" CellPadding="0" in your current gridview HTML

Comments