On Mouse Print button using JAVASCRIPT

On Mouse Print button  using  JAVASCRIPT

Step 1: Design web form .aspx Page

<form id="form1" runat="server">

        <div>

            <asp:ScriptManager ID="s" runat="server"></asp:ScriptManager>

            <div class="chartContainer">

                <telerik:RadButton runat="server" ID="rbPrintLeft" Text="Print this" AutoPostBack="false"

                    OnClientClicked="printChartOnly" CssClass="PrintButton">

                    <Icon PrimaryIconCssClass="rbPrint"></Icon>

                </telerik:RadButton>

                <telerik:RadGrid ID="RadGrid1" runat="server" CellSpacing="0" AllowPaging="true" PageSize="8" Width="50%" PagerStyle-AlwaysVisible="true"

                    GridLines="None" AutoGenerateColumns="false"

                    OnNeedDataSource="RadGrid1_NeedDataSource">

                    <PagerStyle Mode="NextPrevAndNumeric"></PagerStyle>

                    <HeaderStyle HorizontalAlign="Left" />

                    <MasterTableView DataKeyNames="name" AutoGenerateColumns="false">

                        <NoRecordsTemplate>No records found.</NoRecordsTemplate>

                        <Columns>

                            <telerik:GridBoundColumn HeaderText="Name" DataField="Name" UniqueName="Name" />

                            <telerik:GridBoundColumn HeaderText="Amount" DataField="Amount" />

                            <telerik:GridBoundColumn HeaderText="Phone" DataField="Phone" />

                        </Columns>

                    </MasterTableView>

                </telerik:RadGrid>

            </div>

            <script type="text/javascript">

                function printChartOnly(sender, args) {

                    //Prevent printing if the browser is Chrome or Safari due to their bug

                    if ($telerik.isChrome || $telerik.isSafari) {

                        alert("Your browser has a printing bug. See the Description section for more details. Please use a different browser (e.g. Internet Explorer or Firefox)");

                        return;

                    }

                    var chartContainer = $telerik.$(sender.get_element().parentNode);

                    //save the original CSS rules that will be modified

                    var chartOriginalCSS = {

                        display: chartContainer.css("display"),

                        position: chartContainer.css("position"),

                        top: chartContainer.css("top"),

                        left: chartContainer.css("left"),

                        zIndex: chartContainer.css("zIndex"),

                        visibility: chartContainer.css("visibility")

                    };

                    //make sure the chart container is visible

                    chartContainer.css({

                        display: "block",

                        position: "absolute",

                        top: "6px",

                        left: "1px",

                        zIndex: 10000,

                        visibility: "visible"

                    }

                    );

                    var body = $telerik.$("body");

                    //store the original CSS rules for the body tag that will be modified

                    var bodyOriginalCSS = {

                        visibility: body.css("visibility"),

                        overflow: body.css("overflow"),

                        background: body.css("background"),

                        height: body.css("height")

                    };

                    //hide the body tag

                    body.css({

                        visibility: "hidden",

                        overflow: "hidden",

                        background: "transparent",

                        height: chartContainer.css("height")

                    });

                    //hide the print button

                    $telerik.$(sender.get_element()).css("display", "none");

                    //call the browser print() method

                    window.print();

                    //restore the original CSS properties

                    chartContainer.css(chartOriginalCSS);

                    body.css(bodyOriginalCSS);

                }

                function pageLoad() {

                    //show or hide the print button when the mouse is over or leaves the chart

                    $telerik.$("div.chartContainer").mouseover(function () {

                        $telerik.$(".RadButton", this).css("display", "inline-block");

                    });

                    $telerik.$("div.chartContainer").mouseout(function () {

                        $telerik.$(".RadButton", this).css("display", "none");

                    });

                }

            </script>

        </div>

    </form>

Step 2: Logic on .Cs page

   protected void RadGrid1_NeedDataSource(object sender, Telerik.Web.UI.GridNeedDataSourceEventArgs e)

    {

        DataTable dt = new DataTable();

        dt.Columns.Add("Name");

        dt.Columns.Add("Amount");

        dt.Columns.Add("Phone");

        dt.Rows.Add("Kandy", "12", "8802***2564");

        dt.Rows.Add("Sam", "25", "545502*2544");

        dt.Rows.Add("Izhar", "32", "95802*2452");

        dt.Rows.Add("Vineet", "10.2", "88022564***");

        dt.Rows.Add("Kandy", "0.12", "8802***2564");

        dt.Rows.Add("Sam", "12", "545502*2544");

        dt.Rows.Add("Izhar", "215", "95802*2452");

        dt.Rows.Add("Vineet", "11.00", "88022564***");

        dt.Rows.Add("Kandy", "0.12", "8802***2564");

        dt.Rows.Add("Sam", "12", "545502*2544");

        dt.Rows.Add("Izhar", "215", "95802*2452");

        dt.Rows.Add("Vineet", "11.00", "88022564***");

        dt.Rows.Add("Kandy", "0.12", "8802***2564");

        dt.Rows.Add("Sam", "12", "545502*2544");

        dt.Rows.Add("Izhar", "215", "95802*2452");

        dt.Rows.Add("Vineet", "11.00", "88022564***");

        RadGrid1.DataSource = dt;

    }

It will look like