Hi ,
I want to make RadGrid Responsive to screen size.
For Eg:
If I am opening RadGrid in Resolution 1024*786
Then
PageSize=10 and height=360px
If I am opening RadGrid in Resolution 1920*1080
Then
PageSize=15 and height=500px
So that user using bigger resolution monitor can see more data in single page without scroll.
Obvious user can change the page size from the dropdown later from UI to see more records.
Kindly please suggest how to achieve this requirement
I want to make RadGrid Responsive to screen size.
For Eg:
If I am opening RadGrid in Resolution 1024*786
Then
PageSize=10 and height=360px
If I am opening RadGrid in Resolution 1920*1080
Then
PageSize=15 and height=500px
So that user using bigger resolution monitor can see more data in single page without scroll.
Obvious user can change the page size from the dropdown later from UI to see more records.
Kindly please suggest how to achieve this requirement
6 Answers, 1 is accepted
0
Jayesh Goyani
Top achievements
Rank 2
Rank 2
answered on 03 Feb 2014, 12:48 PM
Hello,
Please follow the below steps to achieve this.
1. Add one hiddenField in your page.
2. In document ready / Page_load method, get the current window size using JQuery/JavaScipt and set its value in HiddenField.
3. In backend side by using Page_Prerender method, Get the HiddenFiled value and based on its value set Radgrid's pagesize.
Let me know if any concern.
Thanks,
Jayesh Goyani
Please follow the below steps to achieve this.
1. Add one hiddenField in your page.
2. In document ready / Page_load method, get the current window size using JQuery/JavaScipt and set its value in HiddenField.
3. In backend side by using Page_Prerender method, Get the HiddenFiled value and based on its value set Radgrid's pagesize.
Let me know if any concern.
Thanks,
Jayesh Goyani
0
Vaibhav
Top achievements
Rank 1
Rank 1
answered on 04 Feb 2014, 05:48 AM
Hi Jayesh,
Could you provide me the snippet (javascript / Jquery) for the idea you are sugggesting .
I tried to set the height of radGrid using CSS , but it is not working .
It would be very nice of you if you could provide with code .
Thanks in advance.
Could you provide me the snippet (javascript / Jquery) for the idea you are sugggesting .
I tried to set the height of radGrid using CSS , but it is not working .
It would be very nice of you if you could provide with code .
Thanks in advance.
0
Vaibhav
Top achievements
Rank 1
Rank 1
answered on 04 Feb 2014, 03:17 PM
Hi Jayesh,
When following your steps,
Document.Ready event function is called after the page_PreRender event.
So the hidden field value are blank. in page_PreRender event!!
When following your steps,
Document.Ready event function is called after the page_PreRender event.
So the hidden field value are blank. in page_PreRender event!!
0
Jayesh Goyani
Top achievements
Rank 2
Rank 2
answered on 04 Feb 2014, 05:17 PM
Hello,
ASPX
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="Scripts/jquery-1.8.2.min.js" type="text/javascript"></script>
<style type="text/css">
</style>
<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
<script type="text/javascript">
$(document).ready(function () {
$("#HiddenField1").val($(window).height());
__doPostBack("<%=Button1.ClientID%>", null);
});
</script>
</telerik:RadCodeBlock>
</head>
<body>
<form id="form1" runat="server">
<div>
<telerik:RadScriptManager ID="RadScriptManager1" runat="server">
</telerik:RadScriptManager>
<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
<AjaxSettings>
<telerik:AjaxSetting AjaxControlID="RadGrid1">
<UpdatedControls>
<telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1" />
</UpdatedControls>
</telerik:AjaxSetting>
</AjaxSettings>
</telerik:RadAjaxManager>
<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server">
</telerik:RadAjaxLoadingPanel>
<telerik:RadWindowManager ID="RadWindowManager1" runat="server">
</telerik:RadWindowManager>
<telerik:RadGrid ID="RadGrid1" runat="server" AutoGenerateColumns="false" OnNeedDataSource="RadGrid1_NeedDataSource"
PageSize="10" AllowPaging="true">
<MasterTableView CommandItemDisplay="Top" DataKeyNames="ID" ClientDataKeyNames="ID">
<Columns>
<telerik:GridBoundColumn DataField="ID" UniqueName="ID" HeaderText="ID">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="Name" UniqueName="Name" HeaderText="Name">
</telerik:GridBoundColumn>
<telerik:GridEditCommandColumn>
</telerik:GridEditCommandColumn>
</Columns>
</MasterTableView>
<ClientSettings AllowDragToGroup="true">
<Selecting AllowRowSelect="true" />
</ClientSettings>
</telerik:RadGrid>
<br />
<asp:HiddenField ID="HiddenField1" runat="server" />
<asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
</div>
</form>
</body>
</html>
ASPX.CS
protected void RadGrid1_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)
{
dynamic data = new[] {
new { ID = 1, Name ="aaa"},
new { ID = 2, Name = "bbb"},
new { ID = 3, Name = "ccc"},
new { ID = 4, Name = "ddd"},
new { ID = 5, Name ="eee"},
new { ID = 6, Name ="aaa"},
new { ID = 7, Name = "bbb"},
new { ID = 8, Name = "ccc"},
new { ID = 9, Name = "ddd"},
new { ID = 10, Name ="eee"}
};
RadGrid1.DataSource = data;
}
protected void Button1_Click(object sender, EventArgs e)
{
// Access HiddenField Here
string str = HiddenField1.Value;
}
Thanks,
Jayesh Goyani
ASPX
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="Scripts/jquery-1.8.2.min.js" type="text/javascript"></script>
<style type="text/css">
</style>
<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
<script type="text/javascript">
$(document).ready(function () {
$("#HiddenField1").val($(window).height());
__doPostBack("<%=Button1.ClientID%>", null);
});
</script>
</telerik:RadCodeBlock>
</head>
<body>
<form id="form1" runat="server">
<div>
<telerik:RadScriptManager ID="RadScriptManager1" runat="server">
</telerik:RadScriptManager>
<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
<AjaxSettings>
<telerik:AjaxSetting AjaxControlID="RadGrid1">
<UpdatedControls>
<telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1" />
</UpdatedControls>
</telerik:AjaxSetting>
</AjaxSettings>
</telerik:RadAjaxManager>
<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server">
</telerik:RadAjaxLoadingPanel>
<telerik:RadWindowManager ID="RadWindowManager1" runat="server">
</telerik:RadWindowManager>
<telerik:RadGrid ID="RadGrid1" runat="server" AutoGenerateColumns="false" OnNeedDataSource="RadGrid1_NeedDataSource"
PageSize="10" AllowPaging="true">
<MasterTableView CommandItemDisplay="Top" DataKeyNames="ID" ClientDataKeyNames="ID">
<Columns>
<telerik:GridBoundColumn DataField="ID" UniqueName="ID" HeaderText="ID">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="Name" UniqueName="Name" HeaderText="Name">
</telerik:GridBoundColumn>
<telerik:GridEditCommandColumn>
</telerik:GridEditCommandColumn>
</Columns>
</MasterTableView>
<ClientSettings AllowDragToGroup="true">
<Selecting AllowRowSelect="true" />
</ClientSettings>
</telerik:RadGrid>
<br />
<asp:HiddenField ID="HiddenField1" runat="server" />
<asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
</div>
</form>
</body>
</html>
ASPX.CS
protected void RadGrid1_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)
{
dynamic data = new[] {
new { ID = 1, Name ="aaa"},
new { ID = 2, Name = "bbb"},
new { ID = 3, Name = "ccc"},
new { ID = 4, Name = "ddd"},
new { ID = 5, Name ="eee"},
new { ID = 6, Name ="aaa"},
new { ID = 7, Name = "bbb"},
new { ID = 8, Name = "ccc"},
new { ID = 9, Name = "ddd"},
new { ID = 10, Name ="eee"}
};
RadGrid1.DataSource = data;
}
protected void Button1_Click(object sender, EventArgs e)
{
// Access HiddenField Here
string str = HiddenField1.Value;
}
Thanks,
Jayesh Goyani
0
Vaibhav
Top achievements
Rank 1
Rank 1
answered on 06 Feb 2014, 07:16 AM
Hi Jayesh ,
the script is hit after the page load event. and by that time the grid is loaded.
So need to execute the javascript before the pageload event and get the values in hidden fields.
Let me know if you figure out
the script is hit after the page load event. and by that time the grid is loaded.
So need to execute the javascript before the pageload event and get the values in hidden fields.
Let me know if you figure out
0
Jayesh Goyani
Top achievements
Rank 2
Rank 2
answered on 07 Feb 2014, 05:04 AM
Hello,
I will try to achieve this thing with cookie.
Thanks,
Jayesh Goyani
I will try to achieve this thing with cookie.
Thanks,
Jayesh Goyani