display gridview on button click

First i try to displaly gridview on pageload so girdveiw succesffully displayed now i try to display when click on button i try below code but grid not visible

Code

DataTable dt = new DataTable();
public DataTable info(string id)
try
{
Entities2 wr = new Entities2();
List sv = wr.spvec(id).ToList();
dt.Columns.Add("RowNumber", typeof(int));
foreach (var c in sv)
{
dt.Rows.Add(c.RowNumber);
}
return dt;
}
catch (Exception ex)
{
throw new Exception();
}
}
protected void Button1_Click(object sender, EventArgs e)
{
info(id);
GridView1.DataSource = dt;
GridView1.DataBind();
}

there is data in dt but gridview not display

<asp:GridView ID="GridView1" runat="server" class="display nowrap"
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" Horizontal />
<RowStyle ForeColor="#000066" />
<SelectedRowStyle BackColor="#669999" Font-Bold="True" ForeColor="White" />
<SortedAscendingCellStyle BackColor="#F1F1F1" />
<SortedAscendingHeaderStyle BackColor="#007DBB" />
<SortedDescendingCellStyle BackColor="#CAC9C9" />
<SortedDescendingHeaderStyle BackColor="#00547E" />
any solution?

first for test i try to call gridivew in jquery and i use this feature for gridview https://datatables.net/examples/basic_init/scroll_xy.html

i use this

<scripttype="text/javascript">
$(document).ready(function(){
$("#GridView1").prepend($("<thead>thead>").append($(this).find("tr:first"))).dataTable({
"aoColumnDefs":[{'bSortable':false,'aTargets':[3]}],
"scrollY":200,
"scrollX":true,
dom:'Bfrtip',
buttons:[
'excelHtml5'
]
});
});

and i create public DataTable info(id){ function and call this on page load then grid successfully display

but when i call this on button click then gridview not display here i use two function on one button

for display data in gridview i use datatable (function name griddata) and for display data in chart (function name getvo) i use static web method

"text/javascript">
varstrarr=[["sfdsdfLi",9],["Kiwsdfi",3],["Mixesdfdnuts",1],["Oranges",6],["Grapes(bunch)",1]];
$(function(){
$("#<%=search_dat.ClientID%>").on('click',function(){
varfromdate=$('[ID*=fromdate]').val();
vartodate=$('[ID*=todate]').val();
varregion=$('[ID*=regiondrop]option:selected')[0].value;
varobj={};
varreg={};
obj.fromdate=fromdate;
obj.todate=todate;
obj.region=region;
reg=region;
Getdata(obj,reg);
returnfalse;
});
});
functionGetdata(obj,reg){
$.ajax({
type:"POST",
url:"WebForm1.aspx/GetVo",
data:JSON.stringify(obj),
contentType:"application/json;charset=utf-8",
dataType:"json",
async:true,
cache:false,
success:function(result){
varmyData=JSON.parse(result.d);
console.log(JSON.parse(result.d));
if(myData!==null&&Object.keys(myData).length!==0){
strarr=result.d;
varmyarr=strarr;
$("#<%=GridView1.ClientID%>").show();
$("#container").show();
$("#Button6").show();
$("#<%=Label5.ClientID%>").hide();
$("#<%=Label4.ClientID%>").hide();
$("#<%=CrystalReportViewer1.ClientID%>").hide();
}
else{
$("#<%=GridView1.ClientID%>").hide();
$("#container").hide();
$("#cont").hide();
$("#<%=Label5.ClientID%>").show();
$("#<%=Label5.ClientID%>").text("DATANOTFOUND");
$("#<%=Label4.ClientID%>").hide();
return;
}
$('#container').highcharts({
chart:{
events:{
load:function(event){
vartotal=0;
for(vari=0,len=this.series[0].yData.length;i
total+=this.series[0].yData[i];
}
vartext=this.renderer.text(
'Total:'+total,
this.plotLeft,
this.plotTop-20
).attr({
zIndex:5
}).add()
}
},
borderColor:'Grey',
borderWidth:2,
width:500,
height:300,
type:'pie',
options3d:{
enabled:true,
alpha:45
}
},
title:{
text:'Region:'+reg
},
subtitle:{
text:'
FromDate:'+obj.fromdate+'
ToDate:'+obj.todate
},
plotOptions:{
pie:{
innerSize:100,
depth:45,
allowPointSelect:true,
cursor:'pointer',
dataLabels:{
enabled:true,
format:'{point.name}:{point.y}',
},
showInLegend:true
}
},
series:[{
name:'Deliveredamount',
data:JSON.parse(myarr)
}]
});
},
error:function(error){
alert('nodata');
}
});
}

button html

"search_dat"class="sear_btn"value="SearchData"runat="server"Text="Button"OnClick="search_dat_Click"/>

and

protectedvoidsearch_dat_Click(objectsender,EventArgse)
{
griddata(Convert.ToDateTime(fromdate),Convert.ToDateTime(todate),Convert.ToString(regiondrop.SelectedValue));
GridView1.DataSource=dt;
GridView1.DataBind();
}
"GridView1"runat="server"
Width="100%"CellPadding="0"
Font-Names="Verdana"BackColor="White"BorderColor="#CCCCCC"BorderStyle="None"
BorderWidth="1px"Font-Size="9pt">
"White"ForeColor="#000066"/>
"#006699"Font-Bold="True"ForeColor="White"/>
"White"ForeColor="#000066"Horizontal/>
"#000066"/>
"#669999"Font-Bold="True"ForeColor="White"/>
"#F1F1F1"/>
"#007DBB"/>
"#CAC9C9"/>
"#00547E"/>

div where chart is display

"container"class="container1">

6 Replies

Know the answer? Post it — somebody with the same question will find it here.

scropio gurl10y ago
first for test i try to call gridivew in jquery and i use this feature for gridview https://datatables.net/examples/basic_init/scroll_xy.html
i use this
<scripttype="text/javascript">
$(document).ready(function(){
$("#GridView1").prepend($("<thead>thead>").append($(this).find("tr:first"))).dataTable({
"aoColumnDefs":[{'bSortable':false,'aTargets':[3]}],
"scrollY":200,
"scrollX":true,
dom:'Bfrtip',
buttons:[
'excelHtml5'
]
});
});
and i create public DataTable info(id){ function and call this on page load then grid successfully display
but when i call this on button click then gridview not display here i use two function on one button
for display data in gridview i use datatable (function name griddata) and for display data in chart (function name getvo) i use static web method
"text/javascript">
varstrarr=[["sfdsdfLi",9],["Kiwsdfi",3],["Mixesdfdnuts",1],["Oranges",6],["Grapes(bunch)",1]];
$(function(){
$("#<%=search_dat.ClientID%>").on('click',function(){
varfromdate=$('[ID*=fromdate]').val();
vartodate=$('[ID*=todate]').val();
varregion=$('[ID*=regiondrop]option:selected')[0].value;
varobj={};
varreg={};
obj.fromdate=fromdate;
obj.todate=todate;
obj.region=region;
reg=region;
Getdata(obj,reg);
returnfalse;
});
});
functionGetdata(obj,reg){
$.ajax({
type:"POST",
url:"WebForm1.aspx/GetVo",
data:JSON.stringify(obj),
contentType:"application/json;charset=utf-8",
dataType:"json",
async:true,
cache:false,
success:function(result){
varmyData=JSON.parse(result.d);
console.log(JSON.parse(result.d));
if(myData!==null&&Object.keys(myData).length!==0){
strarr=result.d;
varmyarr=strarr;
$("#<%=GridView1.ClientID%>").show();
$("#container").show();
$("#Button6").show();
$("#<%=Label5.ClientID%>").hide();
$("#<%=Label4.ClientID%>").hide();
$("#<%=CrystalReportViewer1.ClientID%>").hide();
}
else{
$("#<%=GridView1.ClientID%>").hide();
$("#container").hide();
$("#cont").hide();
$("#<%=Label5.ClientID%>").show();
$("#<%=Label5.ClientID%>").text("DATANOTFOUND");
$("#<%=Label4.ClientID%>").hide();
return;
}
$('#container').highcharts({
chart:{
events:{
load:function(event){
vartotal=0;
for(vari=0,len=this.series[0].yData.length;i
total+=this.series[0].yData[i];
}
vartext=this.renderer.text(
'Total:'+total,
this.plotLeft,
this.plotTop-20
).attr({
zIndex:5
}).add()
}
},
borderColor:'Grey',
borderWidth:2,
width:500,
height:300,
type:'pie',
options3d:{
enabled:true,
alpha:45
}
},
title:{
text:'Region:'+reg
},
subtitle:{
text:'
FromDate:'+obj.fromdate+'
ToDate:'+obj.todate
},
plotOptions:{
pie:{
innerSize:100,
depth:45,
allowPointSelect:true,
cursor:'pointer',
dataLabels:{
enabled:true,
format:'{point.name}:{point.y}',
},
showInLegend:true
}
},
series:[{
name:'Deliveredamount',
data:JSON.parse(myarr)
}]
});
},
error:function(error){
alert('nodata');
}
});
}
button html
"search_dat"class="sear_btn"value="SearchData"runat="server"Text="Button"OnClick="search_dat_Click"/>
and
protectedvoidsearch_dat_Click(objectsender,EventArgse)
{
griddata(Convert.ToDateTime(fromdate),Convert.ToDateTime(todate),Convert.ToString(regiondrop.SelectedValue));
GridView1.DataSource=dt;
GridView1.DataBind();
}
"GridView1"runat="server"
Width="100%"CellPadding="0"
Font-Names="Verdana"BackColor="White"BorderColor="#CCCCCC"BorderStyle="None"
BorderWidth="1px"Font-Size="9pt">
"White"ForeColor="#000066"/>
"#006699"Font-Bold="True"ForeColor="White"/>
"White"ForeColor="#000066"Horizontal/>
"#000066"/>
"#669999"Font-Bold="True"ForeColor="White"/>
"#F1F1F1"/>
"#007DBB"/>
"#CAC9C9"/>
"#00547E"/>
div where chart is display
"container"class="container1">