Showing posts with label JavaScript. Show all posts
Showing posts with label JavaScript. Show all posts

Tuesday, November 27, 2012

Read Telerik drop downlist javascript

sometimes we need to read the value/text of a Telerik MVC dropDownList  items.
using JQUERY:

function getData()
{
var items= $('#dropdownlistName).data('tDropDownList').data;
// items is the items list
// items can be dealt as an array
// then we can get the text and the value of each item as following:
 
var text = items[0].Text;
var value = items[0].Value;
 
 
}

Note :
you have to read " $('#dropdownlistName) " after document.read() function as we have to wait for  the Telerik JQuery library to be loaded.
it is preferred to be read pageLoad function of the Microsoft.Ajax library

function pageLoad()
{
    getData()
}

or at any event handler javascript function

Wednesday, December 28, 2011

ActiveX controls at asp.net


As web application developers, we want to give our users a highly functional application. We want to provide our users with functionality like printing ,scanning images etc., but it is difficult due to the security and the disconnected architecture of the Internet .

1. create an activeX control
   a. create interface
     public interface ITest
    {
        string Name { get; }
        string SayHello(string str);
    }
    b.create class
     [Guid("a991dd50-ff67-47b0-a4c3-f2b3e9fbd0f4")]
    [ComVisible(true)]
    [ProgId("Test.Test")]
    public class TestClass:ITest
    {
         public string Name
        {
            get  { return "My Test Name"; }
        }
        public string SayHello(string str)
        {
            return "Hello " + str;
        }

    }
   c.register the activeX control:
      at the project properties window => build => check => "Register for COM interop"
2.Host control at wweb application
    a. add object tag to the html page
      <object classid="CLSID:a991dd50-ff67-47b0-a4c3-f2b3e9fbd0f4" id="myCtrl" />
    b. access the object and the functions/properties from javascript
      var myAx = new ActiveXObject("Test.Test");    => the name of ProgId
            alert(myAx.Name);  

   an example for the html:
     <script type="text/javascript">
        function getProperty() {
            var myAx = new ActiveXObject("Test.Test");
            alert(myAx.Name);
        }
        function getName() {
            var myAx = new ActiveXObject("Test.Test");
            var text = document.getElementById("myName").value;
            alert(myAx.GetMe(text));
        }
    </script>
    <table>
        <tr>
            <td>
                <input type="text" id="myName" />
            </td>
            <td>
                <input type="button" value="Property" onclick="getProperty()" />
            </td>
            <td>
                <input type="button" value="Function" onclick="getName()" />
            </td>
        </tr>
    </table>
    <object classid="CLSID:a991dd50-ff67-47b0-a4c3-f2b3e9fbd0f4" id="myCtrl" />

       

Friday, November 18, 2011

ASP.NET Report Viewer 2010 Auto Resize

The ASP.NET Report Viewer provides a wonderful job when viewing local or server (remote) reports beside its rich feature provided like printing, exporting and report and pages navigation tools

But the report viewer control itself didn't provide any tools to display the report control inside web controls correctly to stretch in height.

To solve the problem, JavaScript methods can resize the report viewer control to fit inside its control height as follows:

  1. When document is ready do the following
    1. Start a timer to enforce the report viewer height change. This timer is important because the report viewer height is not adjusted until it is fully loaded. If we change the height before the report viewer finished loading the report, the original report viewer height will be used
    2. In the timer function, we adjust the report viewer height
    3. Clear the timer when the report viewer height adjusted successfully
  2. When document window resize, set the report viewer height again
  3. Report height calculation is calculated to fit the window height minus the report viewer control toolbar to avoid displaying vertical scroll bar in the report viewer container

Note that you should set the SizeToReportContent property to false to avoid the report viewer auto calculate its height to fit the report content height.

The below ASPX page code describes how to fit the report viewer to the entire window of the browser (tried in IE 9 and chrome)

<%@
Page
Language="C#" AutoEventWireup="true" CodeBehind="ReportViewer.aspx.cs" Inherits="NCS.Website.Reports.ReportViewer"
%>


 

<%@
Register
Assembly="Microsoft.ReportViewer.WebForms, Version=10.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a"


Namespace="Microsoft.Reporting.WebForms" TagPrefix="rsweb"
%>

<!DOCTYPE
html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


 

<script
type="text/jscript" src="../Scripts/jquery-1.5.1.min.js">

</script>

<script
type="text/jscript">


 


var reportViewer = $('#<%= this.ReportViewer1.ID %>_ctl10').parent('td');


 


var rvId = '<%= this.ReportViewer1.ID %>';


 

$(document).ready(function () {


 


// Enforce height on the report viewer


 


var oldHeight = reportViewer.height();


 


// Poll the report height so it can be set after the Report Viewer has


 


// fully loaded. Otherwise the RV will default to original config


 


var intevalId = setInterval(function () {


 


if (reportViewer.height() != oldHeight) {


 

clearInterval(intevalId);


 

}


 


var rv = $find(rvId);


 


if (!rv.get_isLoading()) {


 

SetHeight(reportViewer, rvId);


 

}


 

}, 1000);


 


 


 


// Resize report viewer when windows resizes


 

$(window).resize(function () {


 

SetHeight(reportViewer, rvId);


 

});

});


function ReportHeight() {


var windowHeight = $(window).height();


var reportBar = $('span#ReportViewer_Toolbar').height();


var totalReportHeight = windowHeight - reportBar;


return totalReportHeight;

};


function SetHeight(rptViewer, rvId) {


 


var rv = $find(rvId);


 


if (!rv.get_isLoading()) {


 

rptViewer.css("height", ReportHeight() + "px");


 

}


 

};

</script>


 

<html
xmlns="http://www.w3.org/1999/xhtml">

<head
runat="server">


<title></title>

</head>

<body>


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


<asp:ScriptManager
runat="server"
/>


<div>


<rsweb:ReportViewer
ID="ReportViewer1" runat="server" Width="100%" Height="100%"


ZoomMode="FullPage" ShowDocumentMapButton="False" AsyncRendering="True" SizeToReportContent="False">


</rsweb:ReportViewer>


</div>


</form>

</body>

</html>


 

Waiting your comments…