Title disappear when cancel the print

[Yukiko Imazu]

Hi,

I'm working on grid with print button on toolbar.

I just want to print grid with header title.  I clicked the print button on toolbar, it shows preview screen correctly with header title.  When I clicked the cancel button in print dialog, after preview screen disappeared, Title disappeared in main screen.  Is there something wrong in my code?  I attach my code.  

Thank you in advance.

Yukiko

Attachment: PrintTest_8822413.7z

[Alan Sangeeth S]

Hi Yukiko, 

Thanks for contacting Syncfusion support. 

Query: Title disappear when cancel the print 

 

We are able to reproduce the mentioned issue with the provided sample. The cause of the issue is because in the beforePrint event you have prepend the original label element to the grid, so the label element will be moved inside the grid. So, when the print is finished the grid is re-rendered, hence the title is disappeared on the main screen since it was moved. To avoid this issue, we suggest you to prepend the clone of the label element to the grid in the beforePrint event. 

Please refer the below code example. 

<ej:Grid ID="Grid1" runat="server" AllowPaging="True"  DataSourceID="test34" ClientIDMode="AutoID"  OnServerAddRow="Grid1_ServerAddRow" AllowCellMerging="true" AllowGrouping="true"  OnServerEditRow="Grid1_ServerEditRow"  AllowSorting="true">  

        <EditSettings AllowEditing="true"  AllowAdding="true"  AllowDeleting="true" AllowEditOnDblClick="false"    /> 

         <ClientSideEvents ActionBegin="onbegin" MergeHeaderCellInfo="mergeHead"  RowSelected="rowselect" ActionComplete="complete"  BeforePrint="print" />          

        <ToolbarSettings ToolbarItems="add,edit,delete,update,cancel,printGrid" ShowToolbar="true"></ToolbarSettings> 

       

        <Columns> 

            <ej:Column Field="memberId" Width="100px" IsPrimaryKey="true"/> 

            <ej:Column Field="first_name" Type="string"   Width="80px" > 

          

                           …... 

 

        </Columns> 

</ej:Grid> 

function print(args){ 

        console.log("print"); 

        var clone = $(".PrintHeader").clone(); 

            args.element.prepend(clone); 

    } 

If you need any further assistance, please get back to us. 

Regards,
Alan Sangeeth S 

[Yukiko Imazu]

Hi Alan,

Thank you for your help.

I could resolve my issue.

I have two more concerns.  Top line of the title isn't shown in main screen.  Only side lines appeared.

Should we set up extra css?

Another issue is if there're two grids in a user control, title doesn't place correctly.

How can we fix this?

I just put each label under the grid.

Thanks,

Yukiko

Attachment: PrintTest_c447e9e7.7z

[Prasanna Kumar Viswanathan]

Hi Yukiko, 

Thanks for the update. 

Query 1: “Top line of the title isn't shown in main screen.  Only side lines appeared. Should we set up extra css?” 

 

To achieve your requirement (show border at top), we suggest to use external css. Refer the below style to apply border to grid header.   

 

.e-grid{ 

     border-top:1px solid #ececec; 

} 

 

Refer the below screenshot for the output 

 

 

 

Query 2: “Another issue is if there're two grids in a user control, title doesn't place correctly.” 

Based on your code example, we are able to reproduce the reported issue at our end. The root cause of the issue is that  you have used same class name for both the label and also you have defined ClientSideEvents only for first Grid. Refer the below code example for error 

   <ej:Grid ID="Grid1" runat="server" AllowPaging="True"  DataSourceID="test34" ClientIDMode="AutoID"  OnServerAddRow="Grid1_ServerAddRow" AllowCellMerging="true" AllowGrouping="true"  OnServerEditRow="Grid1_ServerEditRow"  AllowSorting="true">  

        <EditSettings AllowEditing="true"  AllowAdding="true"  AllowDeleting="true" AllowEditOnDblClick="false"    /> 

         <ClientSideEvents ActionBegin="onbegin" MergeHeaderCellInfo="mergeHead"  RowSelected="rowselect" ActionComplete="complete"  BeforePrint="print" />          

  <%--   ToolbarClick="toolbar" --%> 

.               .                      .             .               .              .         .          .  

</ej:Grid> 

   <label id="Label1" runat="server" class="PrintHeader">Title 1</label> 

 

<asp:ObjectDataSource runat="server" ID="test34" SelectMethod="BindDataSource" DeleteMethod="DeleteRecord"     

            UpdateMethod="EditRecord"   InsertMethod="AddRecord" TypeName="test.ucPerson"   DataObjectTypeName="test.member" >  

.                                       .                .               .             .              .             .  

</asp:ObjectDataSource> 

 

 

<hr /> 

<ej:Grid ID="Grid" runat="server" AllowPaging="True" AllowResizing="true">       

 

        .                     .                 .               .           .            .          .         .  

        </ej:Grid>  

   <label id="lblPrintHeader" runat="server" class="PrintHeader">Title 2</label> 

If you want to display different header to second Grid, we suggest you to achieve your requirement using ActionComplete event of Grid and different class name for label class. 

Refer the below code example 

<style>  

.e-grid .e-rowcell {  

    line-height:10px; 

} 

 

 

.PrintHeader1, .PrintHeader2{ 

            margin-left: 250px; 

            font-family : Calibri; 

            font-size : 35px; 

        }  

</style> 

 

.               .              .           .  

 

<ej:Grid ID="Grid1" runat="server" AllowPaging="True"  DataSourceID="test34" ClientIDMode="AutoID"  OnServerAddRow="Grid1_ServerAddRow" AllowCellMerging="true" AllowGrouping="true"  OnServerEditRow="Grid1_ServerEditRow"  AllowSorting="true">  

        <EditSettings AllowEditing="true"  AllowAdding="true"  AllowDeleting="true" AllowEditOnDblClick="false"    /> 

         <ClientSideEvents ActionBegin="onbegin" MergeHeaderCellInfo="mergeHead"  RowSelected="rowselect" ActionComplete="complete1"  BeforePrint="print" />          

  <%--   ToolbarClick="toolbar" --%> 

.                                      .                          .              .          .  

</ej:Grid> 

   <label id="Label1" runat="server" class="PrintHeader1">Title 1</label> 

 

.                          .                       .              .                .                  .  

 

 

<hr /> 

<ej:Grid ID="Grid" runat="server" AllowPaging="True" AllowResizing="true">       

     <ClientSideEvents ActionComplete="complete2"/>          

 

.                    .              .                .                 .              .               .  

        </ej:Grid>  

   <label id="lblPrintHeader" runat="server" class="PrintHeader2">Title 2</label> 

 

 

.                   .             .               .            . 

 

  function complete1(args) { 

        $("#" + args.model.clientId).prepend($(".PrintHeader1")); 

    } 

    function complete2(args) { 

        $("#" + args.model.clientId).prepend($(".PrintHeader2")); 

    } 

        

For your convenience we have prepared a sample which can be downloaded from below link 

Sample: https://www.syncfusion.com/downloads/support/forum/139568/7z/test1055723019  

Regards, 

Prasanna Kumar N.S.V 

 

[Yukiko Imazu]

Hi Prasanna Kumar,

Thank you so much for your support.

I could solve my issue.

Regards,

Yukiko

[Prasanna Kumar Viswanathan]

Hi Yukiko, 

We are glad that your issue has been resolved. 

 

Please get back to us if you require further assistance from us. 

Regards, 

Prasanna Kumar N.S.V