Disable border for printing and allow multi-line display

[Jonathan]

I have a simple line that invokes a dropdownlist within an MVC page.  The page displays perfectly on-screen, however, when selecting "print" I'd like to remove the border and drop-down selector and just display the text of the control.  Also, if the text is large, I'd like the printed form to expand the control to show multiple lines.

Is this possible within the syncfusion control?

Code example:

@Html.EJ().DropDownList("dlConfirmProofOfAge").Datasource(((IEnumerable<ELLBooking.Models.ControlInfo>)ViewBag.SelectionList).Where(m => m.ControlName == "ConfirmProofOfAgeAndParents").ToList()).DropDownListFields(df => df.ID("ControlID").Text("ControlValue").Value("ControlID")).Value(((IEnumerable<ELLBooking.Models.ControlInfo>)ViewBag.SelectionList).Where(m => m.ControlID == Model.ConfirmProofOfAge.ToString()).Select(m => new { m.ControlID }).Single().ControlID.ToString()).ReadOnly(disableControls).CssClass("form-control").CssClass((disableControls) ? "customdisable" : "").Width("100%")

[Prince Oliver]

Hi Jonathan, 

Thank you for contacting Syncfusion forums. 

To achieve your requirement, we have to detect the print requests using JavaScript code and bind event handlers for before print and after print. In the before print handler, we need to hide the DropDownList control and display only its content in a span element and in the after Print handler, we need to remove the added span element and display the control once again. Kindly refer to the following code.   

<script type="text/javascript"> 

    $(function () { 

        var beforePrint = function() { 

            var ddl = $('#skillsets').data("ejDropDownList"); 

            var val = ej.isNullOrUndefined(ddl._hiddenValue) ? "" : ddl._hiddenValue;  

            ddl.wrapper.append("<span id='cont'>"+ val +"</span>"); 

            ddl.container.css("display","none"); 

        }; 

        var afterPrint = function() { 

            var ddl = $('#skillsets').data("ejDropDownList"); 

            ddl.container.css("display",""); 

            $("#cont").remove(); 

        }; 

 

        if (window.matchMedia) { 

            var mediaQueryList = window.matchMedia('print'); 

            mediaQueryList.addListener(function(mql) { 

                if (mql.matches) { 

                    beforePrint(); 

                } else { 

                    afterPrint(); 

                } 

            }); 

        } 

 

        window.onbeforeprint = beforePrint; 

        window.onafterprint = afterPrint; 

    }); 

</script> 

We have prepared a sample for your convenience. Kindly refer to the following link for the sample: http://www.syncfusion.com/downloads/support/forum/133642/7z/DDLprint722347889 

Regards, 

Prince 

[Jonathan]

This worked great for the dropdownlist, however, we have the same issue for the datepicker and the maskedit controls as shown by the following code:

@Html.EJ().DatePicker("dpDatePicker").ReadOnly(disableControls).Value(@Model.DateOfBirth ?? DateTime.Today).DateFormat("dd-MMM-yyyy").CssClass("form-control").CssClass((disableControls) ? "customdisable" : "").Width("100%")

@Html.EJ().MaskEdit("txtPhoneStudentHome").ReadOnly(disableControls).WatermarkText("Home Phone Number").MaskFormat("999-999-9999").Value(Model.PhoneStudentHome).HtmlAttributes((disableControls) ? new Dictionary<string, object>() { { "readonly", "readonly" } } : new Dictionary<string, object>()).CssClass("form-control noFormMargins").CssClass((disableControls) ? "customdisable" : "").Width("100%")

The issue is that the controls don't allow the <object>.container.css("display", "none"); to be applied.

Is there any suggestions for this?  I thought I'd be able to extract your answer for the ddl, but it seems that it can't be applied and I'm unable to identify any way to convert it to work with those controls.

[Prince Oliver]

Hi Jonathan, 

Thank you for your update. 

 

Datepicker: 

We have achieved your requirement using before and after print event handlers by hiding the DatePicker control and display only its content within a span element using before printing event handler. Also removing the span element and display the control again after printing event handler as shown in the below code. Please check it.  

  

<script type="text/javascript">  

    $(function () {  

        var beforePrint = function () {  

            var dateobj = $("#datepick").ejDatePicker("instance");  

            var dateval = ej.isNullOrUndefined(dateobj.element.val()) ? "" : dateobj.element.val();   

            dateobj.wrapper.append("<span id='cont1'>" + dateval + "</span>");  

            dateobj.wrapper.find('.e-in-wrap.e-box').css('display', 'none');  

        };  

        var afterPrint = function () {  

            var dateobj = $("#datepick").ejDatePicker("instance");  

            dateobj.wrapper.find('.e-in-wrap.e-box').css('display', 'block');  

            $("#cont1").remove();  

        };  

  

        if (window.matchMedia) {  

            var mediaQueryList = window.matchMedia('print');  

            mediaQueryList.addListener(function(mql) {  

                if (mql.matches) {  

                    beforePrint();  

                } else {  

                    afterPrint();  

                }  

            });  

        }  

  

        window.onbeforeprint = beforePrint;  

        window.onafterprint = afterPrint;  

    });  

</script>  

  

MaskEdit: 

 

We can achieve your requirement by hiding the input container within the maskedit wrapper. Please refer the below code block.  

  

var beforePrint = function () {  

    var obj = $("#Mask").ejMaskEdit("instance");  

    var val = ej.isNullOrUndefined(obj._hiddenInput.val()) ? "" : obj._hiddenInput.val();   

    obj.wrapper.append("<span id='cont'>" + val + "</span>");  

    obj.wrapper.find('.e-in-wrap.e-box').css('display', 'none')  

};  

var afterPrint = function () {  

    var obj = $("#Mask").ejMaskEdit("instance");  

    obj.wrapper.find('.e-in-wrap.e-box').css('display', 'block')  

    $("#cont").remove();  

};  

  

For your convenience, we have created a sample based on your requirement and attached in the below link.  

  

Sample Link: http://www.syncfusion.com/downloads/support/forum/133642/ze/DDLprint1790564305  

 

Regards, 

Prince