Thursday, June 20, 2013

How to print selected area in zk

Step 1.
 add <zk xmlns:w="client">  tag.

Step 2.

    <button label="Print">
        <attribute w:name="onClick">
            print(this,'group',500,800,true);//
        </attribute>
    </button>
Parameter group box.
1. "group" id of groupbox.
2. 500 windows height.
3. 800 windows width.
4. true for style if true style will apply otherwise style not apply.




Full Page


 Print listbox with style
 code
    print Listbox with style:
    <button label="Print">
        <attribute w:name="onClick">
            print(this,'box1',500,800,true);
        </attribute>
    </button>
    <listbox id="box1" multiple="true" checkmark="true">

 Print Groupbox.

code.
Print Box Area:
    <button label="Print">
        <attribute w:name="onClick">
            print(this,'group',500,800,true);
        </attribute>
    </button>
<groupbox id="group" >
 Print Grid.
code.
        print Grid:
    <button label="Print">
        <attribute w:name="onClick">
            print(this,'grid',500,800,true);
        </attribute>
    </button>
    <grid id="grid">
 Print Listbox without style
code.
    print Listbox without style:
    <button label="Print">
        <attribute w:name="onClick">
            print(this,'box',500,800,false);
        </attribute>
    </button>
    <listbox id="box" multiple="true" checkmark="true">




 Full source code.
print.zul

<?page title="new page title" contentType="text/html;charset=UTF-8"?>
<zk xmlns:w="client">
<script><![CDATA[
function print(obj,id,height,width,style) {
DispWin = window.open('', '', 'toolbar=no,memubar=no,scrollbars=yes,status=no,width='+width+'px,height='+height+"px'");

DispWin.document.write('<html><head>');
if(style==true){
for(var i=0;i<document.styleSheets.length;i++){
    if(document.styleSheets[i].href != null)        {
        DispWin.document.write('<link rel="stylesheet" type="text/css" href="'+document.styleSheets[i].href+'">');
    }
}
}
DispWin.document.write('</head>');
DispWin.document.write('<body>');
DispWin.document.write('<p align="center"><input type="button" value="Close" onclick="window.close()"/>&nbsp&nbsp&nbsp&nbsp<input type="button" value="Print" onclick="print()"/></p>');
DispWin.document.write($(obj.$f(id)).formhtml());
DispWin.document.write('</body></html>');
DispWin.document.close();
//DispWin.close();
//DispWin.print();


(function($) {
      var oldHTML = $.fn.html;

      $.fn.formhtml = function() {
        if (arguments.length) return oldHTML.apply(this,arguments);
        $("input,button", this).each(function() {
          this.setAttribute('value',this.value);   
          this.setAttribute('readonly',true);
        });
        $("textarea", this).each(function() {
          // updated - thanks Raja!
          this.innerHTML = this.value;
        });
        $("input:radio,input:checkbox", this).each(function() {
          // im not really even sure you need to do this for "checked"
          // but what the heck, better safe than sorry
          if (this.checked) this.setAttribute('checked', 'checked');
          else this.removeAttribute('checked');
        });
        $("option", this).each(function() {
          // also not sure, but, better safe...
          if (this.selected) this.setAttribute('selected', 'selected');
          else this.removeAttribute('selected');
        });
        return oldHTML.apply(this);
      };

      //optional to override real .html() if you want
      // $.fn.html = $.fn.formhtml;
    })(jQuery);


]]></script>
Print Box Area:
    <button label="Print">
        <attribute w:name="onClick">
            print(this,'group',500,800,true);
        </attribute>
    </button>
<groupbox id="group" >
<caption
                label="Box"
                sclass="group-header"/>
    print Listbox with style:
    <button label="Print">
        <attribute w:name="onClick">
            print(this,'box1',500,800,true);
        </attribute>
    </button>
    <listbox id="box1" multiple="true" checkmark="true">
        <listhead>
            <listheader label="Name" />
            <listheader label="Gender" />
            <listheader label="Age" />
        </listhead>
        <listitem>
            <listcell label="Mary" />
            <listcell label="FEMALE" />
            <listcell label="18" />
        </listitem>
        <listitem>
            <listcell label="John" />
            <listcell label="MALE" />
            <listcell label="20" />
        </listitem>
        <listitem>
            <listcell label="Jane" />
            <listcell label="FEMALE" />
            <listcell label="32" />
        </listitem>
        <listitem>
            <listcell label="Henry" />
            <listcell label="MALE" />
            <listcell label="29" />
        </listitem>
        <listitem>
            <listcell label="Mark" />
            <listcell label="MALE" />
            <listcell label="15" />
        </listitem>
    </listbox>
    print Listbox without style:
    <button label="Print">
        <attribute w:name="onClick">
            print(this,'box',500,800,false);
        </attribute>
    </button>
    <listbox id="box" multiple="true" checkmark="true">
        <listhead>
            <listheader label="Name" />
            <listheader label="Gender" />
            <listheader label="Age" />
        </listhead>
        <listitem>
            <listcell label="Mary" />
            <listcell label="FEMALE" />
            <listcell label="18" />
        </listitem>
        <listitem>
            <listcell label="John" />
            <listcell label="MALE" />
            <listcell label="20" />
        </listitem>
        <listitem>
            <listcell label="Henry" />
            <listcell label="MALE" />
            <listcell label="29" />
        </listitem>
        <listitem>
            <listcell label="Mark" />
            <listcell label="MALE" />
            <listcell label="15" />
        </listitem>
        <listitem>
            <listcell label="Jeffery" />
            <listcell label="MALE" />
            <listcell label="17" />
        </listitem>
    </listbox>
        print Grid:
    <button label="Print">
        <attribute w:name="onClick">
            print(this,'grid',500,800,true);
        </attribute>
    </button>
    <grid id="grid">
    <auxhead>
        <auxheader label="H1'07" colspan="6"/>
        <auxheader label="H2'07" colspan="6"/>
    </auxhead>
    <auxhead>
        <auxheader label="Q1" colspan="3"/>
        <auxheader label="Q2" colspan="3"/>
        <auxheader label="Q3" colspan="3"/>
        <auxheader label="Q4" colspan="3"/>
    </auxhead>
    <columns>
        <column label="Jan"/><column label="Feb"/><column label="Mar"/>
        <column label="Apr"/><column label="May"/><column label="Jun"/>
        <column label="Jul"/><column label="Aug"/><column label="Sep"/>
        <column label="Oct"/><column label="Nov"/><column label="Dec"/>
    </columns>
    <rows>
        <row>
            <label value="1,000"/><label value="1,100"/><label value="1,200"/>
            <label value="1,300"/><label value="1,400"/><label value="1,500"/>
            <label value="1,600"/><label value="1,700"/><label value="1,800"/>
            <label value="1,900"/><label value="2,000"/><label value="2,100"/>
        </row>
        <row>
            <label value="1,500"/><label value="2,100"/><label value="1,200"/>
            <label value="1,100"/><label value="2,400"/><label value="1,700"/>
            <label value="1,500"/><label value="3,700"/><label value="1,800"/>
            <label value="1,300"/><label value="2,000"/><label value="2,500"/>
        </row>
    </rows>
</grid>
    </groupbox>
</zk>




No comments:

Post a Comment

How ChatGPT can Benefit Coding: Your Guide to Leveraging an AI Language Model

 Introduction: Hello, coders! Welcome to this blog post on how ChatGPT, an AI language model, can benefit your coding skills and projects. A...