1. Home
  2. Forum
  3. ASP.NET Core - EJ 2
  4. Print partial view which contains Card TileView

Print partial view which contains Card TileView

This is a Razor Page which has a search criteria at the top of the page and when you hit search it will show 1 of 2 partial views.

1) DataGrid View if the Display Photo checked is unchecked

2) Card TileView if the Display Photo checked is checked

If the Display Photo check box is check after the partial view is render there's a print button next to the Search button. If the user selects the print Button I want to only print the partial view which contains the Card TileView

Below is the code from the partial View.

@model Models.EmployeeResults

    <div id="EmployeeTiles" class="control-section card-control-section tile_layout">

        @if (Model != null && Model.Employees != null && Model.Employees.Count > 0)

        {

            <div class="row e-card-layout" style="text-align:Left;">

                <div class="row">

                    @foreach (Models.EmployeeTableData card in Model.Employees)

                    {

                        <div class="col-lg-3 col-md-3" style="padding: 15px;">


                            <div class="e-card">

                                <div class="e-card-image" style="background-image: url(@card.imagePath) "></div>

                                <div class="e-card-header">

                                    <div class="e-card-header-caption">

                                        <div class="e-card-title"> <a rel='nofollow' href="/EmpDir/Orgchart/[email protected]">@card.FirstName @card.LastName</a> </div>

                                        <div class="e-card-sub-title">@card.JobTitle</div>

                                    </div>

                                </div>

                                <div class="e-card-content">@card.Department</div>

                            </div>

                        </div>

                    }

                </div>

            </div>

            <div>Returned @Model.Employees.Count records</div>


            }

        </div>




1 Reply
BS Buvana Sathasivam Syncfusion Team April 13, 2022 04:24 AM UTC

Hi Joseph,


Greetings from Syncfusion support.


In the below sample, we have achieved your requirement. When you check the check box and press the print button, we have printed the card alone. Please find the below code and sample for your reference.

Index.cshtml

<ejs-checkbox id="checked" label="Display Photo"></ejs-checkbox>

<ejs-button isPrimary=true id="print" onclick="print()"><e-content-template>Print</e-content-template></ejs-button>

<div class="row">

    <div id="PartialView">

    </div>

</div>

 

<script>

    function print() {

        var checkBox = document.getElementById('checked').ej2_instances[0];

        if (checkBox.checked) { // Checked check box enabled or not

            var ajax = new ej.base.Ajax('/PartialPage/index', 'GET', true);

            ajax.send().then(function (result) {

               document.getElementById('PartialView').innerHTML = result;

                eval(document.getElementById('PartialView').querySelector('script').innerHTML);

                

                var a = window.open('', '', 'height=500, width=500'); //Created new window

                a.document.write('<html>');

                a.document.write('<body > <h1>Div contents are <br>');

                const style = a.document.createElement('style');

                style.innerHTML = document.getElementById('PartialView').querySelector('style').innerHTML;     

                a.document.head.appendChild(style);

                var head = a.document.getElementsByTagName('head')[0];

                var link = a.document.createElement('link');

                link.rel = 'stylesheet';

                link.rel='nofollow' href = 'https://cdn.syncfusion.com/ej2/bootstrap.css';

                head.appendChild(link);

                a.document.write(document.getElementById('PartialView').innerHTML);

                a.document.write('</body></html>');

                a.document.close();

                setTimeout(function () {

                    a.print();

                }, 2000);

            });

        }

       

    }

 

 

</script>


PartialPage/Index.cshtml

@{

    ViewData["Title"] = "";

}

 

<div class="control-section card-control-section tile_layout">

 

    <div class="row e-card-layout" style="text-align:center;">

        <div class="row">

            <div class="row error" style="display:none;min-height:150px">

                <div class="e-error-content" style="margin:auto;height:inherit;font-size:18px;font-weight:500;color:inherit">No results found. Please try a different search.</div>

            </div>

            <div class="col-xs-6 col-sm-6 col-lg-6 col-md-6">

                <!-- Tile View Layout  -->

                <div id="card_sample_1" class="card_sample"></div>

            </div>

        </div>

    </div>

</div>

 

 

<style>

    /* Tile view card customization */

 

    .tile_layout.card-control-section .row.filter .tile_search {

        justify-content: flex-end;

    }

 

    .tile_layout.card-control-section .row .e-card {

        text-align: left;

    }

</style><ejs-scripts></ejs-scripts>


Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Partical_View(2)-2080475071


Knowledge Base for render partial view page: https://www.syncfusion.com/kb/9630/how-to-render-syncfusion-components-in-partial-view


Please check the above sample and let us know if your requirements are satisfied. If not, can you please share more details about your requirements?

Regards,

Buvana S


Loader.
Up arrow icon