This is a migrated thread and some comments may be shown as answers.

[Solved] Print Grid and hide columns not working

6 Answers 379 Views

Grid

This is a migrated thread and some comments may be shown as answers.

Sauge asked on 13 Mar 2013, 02:24 PM

Hi there

I have a grid where I want to hide/show certain columns before printing via a radbutton outside of the grid.

I have used code from the forums to hide these columns and it works well

Protected Sub RadButton1_Click(sender As Object, e As EventArgs) Handles RadButton1.Click

For Each item As GridItem In RadGrid1.MasterTableView.GetItems(New GridItemType() {GridItemType.Pager, GridItemType.FilteringItem})

item.Display = False

Next

RadGrid1.MasterTableView.GetColumn("Column1").Visible = True

RadGrid1.MasterTableView.GetColumn("Column2").Visible = False

RadGrid1.MasterTableView.GetColumn("Column3").Visible = False

End Sub

I also have client side code from the forums to print the grid, which also works well

<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">

<script type="text/javascript">

function getOuterHTML(obj) {

if (typeof (obj.outerHTML) == "undefined") {

var divWrapper = document.createElement("div");

var copyOb = obj.cloneNode(true);

divWrapper.appendChild(copyOb);

return divWrapper.innerHTML

}

else

return obj.outerHTML;

}

function PrintRadGrid() {

var previewWnd = window.open('about:blank', '', '', false);

var sh =

'<%= ClientScript.GetWebResourceUrl(RadGrid1.GetType(),String.Format("Telerik.Web.UI.Skins.{0}.Grid.{0}.css",RadGrid1.Skin)) %>'

;

var shBase = '<%= ClientScript.GetWebResourceUrl(RadGrid1.GetType(),"Telerik.Web.UI.Skins.Grid.css") %>';

var styleStr = "<html><head><link href = '" + sh + "' rel='stylesheet' type='text/css'></link>";

styleStr += "<link href = '" + shBase + "' rel='stylesheet' type='text/css'></link></head>";

var htmlcontent = styleStr + "<body>" + getOuterHTML($find('<%= RadGrid1.ClientID %>').get_element()) + "</body></html>";

previewWnd.document.open();

previewWnd.document.write(htmlcontent);

previewWnd.document.close();

previewWnd.print();

if (!$telerik.isChrome) {

previewWnd.close();

}

</script>

</telerik:RadCodeBlock>

However, if I try to trigger them from my button like so:

<telerik:RadButton ID="RadButton1" runat="server" Text="Print" AutoPostBack="True" OnClick="RadButton1_Click" OnClientClicking="PrintRadGrid">

</telerik:RadButton>

the client side event always gets fired first and so the columns are still displayed in the preview window, and when I go back to my actual page, the columns remain hidden in the grid (I would like them to go back to the way they were on the actual page)

Please could someone tell me how to get all these things to work?
I know I have probably made a stupid mistake somewhere along the line but I am a bit of a newbie girl so please be gentle

Any help greatly appreciated :-)

6 Answers, 1 is accepted

answered on 14 Mar 2013, 06:32 AM

Hi Jayesh
Thank you for replying

I did this

Protected Sub RadButton1_Click(sender As Object, e As EventArgs) Handles RadButton1.Click

For Each item As GridItem In RadGrid1.MasterTableView.GetItems(New GridItemType() {GridItemType.Pager, GridItemType.FilteringItem})

item.Display = False

Next

RadGrid1.MasterTableView.GetColumn("Column1").Visible = True

RadGrid1.MasterTableView.GetColumn("Column2").Visible = False

RadGrid1.MasterTableView.GetColumn("Column3").Visible = False

ScriptManager.RegisterStartupScript(Page, [GetType](), "PrintRadGrid", "<script>PrintRadGrid()</script>", False)

End Sub

And removed OnClientClicking="PrintRadGrid" from my button but now, when I click, it just opens a new blank tab

Could you tell me what I am doing wrong please

Thank you :-)

Accepted

answered on 14 Mar 2013, 12:49 PM

Hello,

i am not able to reproduce this issue. Please check my working code in below.

<telerik:RadGrid ID="RadGrid1" runat="server" AutoGenerateColumns="False" OnNeedDataSource="RadGrid1_NeedDataSource"

AllowPaging="false" AllowFilteringByColumn="false" ShowFooter="true" AllowMultiRowSelection="true"

AllowMultiRowEdit="true" PageSize="10"

>

<MasterTableView EditMode="InPlace" Name="Parent" DataKeyNames="ID" InsertItemPageIndexAction="ShowItemOnCurrentPage"

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>

</telerik:RadGrid>

<br />

<asp:Button ID="Button1" runat="server" Text="check serverside" OnClick="Button1_Click"

ValidationGroup="test" />

function SetColumnValue() {

var previewWnd = window.open('about:blank', '', '', false);

var sh =

'<%= ClientScript.GetWebResourceUrl(RadGrid1.GetType(),String.Format("Telerik.Web.UI.Skins.{0}.Grid.{0}.css",RadGrid1.Skin)) %>'

;

var shBase = '<%= ClientScript.GetWebResourceUrl(RadGrid1.GetType(),"Telerik.Web.UI.Skins.Grid.css") %>';

var styleStr = "<html><head><link href = '" + sh + "' rel='stylesheet' type='text/css'></link>";

styleStr += "<link href = '" + shBase + "' rel='stylesheet' type='text/css'></link></head>";

var htmlcontent = styleStr + "<body>" + getOuterHTML($find('<%= RadGrid1.ClientID %>').get_element()) + "</body></html>";

previewWnd.document.open();

previewWnd.document.write(htmlcontent);

previewWnd.document.close();

previewWnd.print();

if (!$telerik.isChrome) {

previewWnd.close();

}

function getOuterHTML(obj) {

if (typeof (obj.outerHTML) == "undefined") {

var divWrapper = document.createElement("div");

var copyOb = obj.cloneNode(true);

divWrapper.appendChild(copyOb);

return divWrapper.innerHTML

}

else

return obj.outerHTML;

}

function PrintRadGrid() {

setTimeout(function () { SetColumnValue(); }, 3000);

}

protected void Button1_Click(object sender, EventArgs e)

{

RadGrid1.MasterTableView.Columns.FindByUniqueName("ID").Display = false;

ScriptManager.RegisterStartupScript(this, this.GetType(), "PrintRadGrid", "<script>PrintRadGrid()</script>", false);

}

protected void RadGrid1_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)

{

dynamic data = new[] {

new { ID = 1, Name ="Name1"},

new { ID = 2, Name = "Name2"},

new { ID = 3, Name = "Name3"},

new { ID = 4, Name = "Name4"},

new { ID = 5, Name = "Name5"}

};

RadGrid1.DataSource = data;

}

Thanks,
Jayesh Goyani