AllInWorld99 provides a reference manual covering many aspects of web programming, including technologies such as HTML, XHTML, CSS, XML, JavaScript, PHP, ASP, SQL,FLASH, jQuery, java, for loop, switch case, if, if else, for...of, for...in, for...each,while loop, blogger tips, blogger meta tag generator, blogger tricks, blogger pagination, client side script, html code editor, javascript editor with instant output, css editor, online html editor, materialize css tutorial, materialize css dropdown list,break, continue statement, label,array, json, get day and month dropdown list using c# code, CSS button,protect cd or pendrive from virus, cordova, android example, html and css to make android app, html code play,telerik show hide column, Transparent image convertor, copy to clipboard using javascript without using any swf file, simple animation using css, SQL etc. AllInWorld99 presents thousands of code examples (accompanied with source code) which can be copied/downloaded independantly. By using the online editor provided,readers can edit the examples and execute the code experimentally.


Show Hide Column filed in telerik control:-
   We can hide or show the column filed in telerik grid, using the unique identify name. First need to find the asp grid and master table view and finally hide the column using hidecolumn property.


Example for hiding Column in Telerik Rad Grid:-
function hide()
{
        var radGrid = $find('<%= GridID_name.ClientID %>');
        var table = radGrid.get_masterTableView();
        var column = table.getColumnByUniqueName("Column_Unique_ID_here");
        table.hideColumn(column.get_element().cellIndex);
}


Example for showing Column in Telerik Rad Grid:-

function show()
{
        var radGrid = $find('<%= GridID_name.ClientID %>');
        var table = radGrid.get_masterTableView();
        var column = table.getColumnByUniqueName("Column_Unique_ID_here");
        table.showColumn(column.get_element().cellIndex);
}



Example Program:-

<script type="text/javascript">
 function show()
{
        var radGrid = $find('<%= GridID_name.ClientID %>');
        var table = radGrid.get_masterTableView();
        var column = table.getColumnByUniqueName("column2");
        table.showColumn(column.get_element().cellIndex);
}


 function hide()
{
        var radGrid = $find('<%= GridID_name.ClientID %>');
        var table = radGrid.get_masterTableView();
        var column = table.getColumnByUniqueName("column2");
        table.hideColumn(column.get_element().cellIndex);
}


 function fun_OnRowDataBound(sender,args)
{
  if(args.get_dataItem()["Location"] == 'null')
 {
   show();
 }
 else
 {
   hide();
 }
}

</script>

--------
--------
--------
<telerik:RadGrid ID="Telerik_Grid"  runat="server" Width="100%" AllowSorting="false" >
                                    <MasterTableView EnableNoRecordsTemplate="true">
                                        <NoRecordsTemplate>
                                            <div>
                                                There are no records to display</div>
                                        </NoRecordsTemplate>
                                        <Columns>
       <telerik:GridBoundColumn HeaderText="Name" DataField="Name" AllowSorting="false" UniqueName="column1">
        </telerik:GridBoundColumn>
        <telerik:GridBoundColumn HeaderText="DOB" DataField="DOB"  AllowSorting="false" UniqueName="column2">
        </telerik:GridBoundColumn>
       <telerik:GridBoundColumn HeaderText="Place" DataField="Location" AllowSorting="false" UniqueName="column2">
        </telerik:GridBoundColumn>
</Columns>
</MasterTableView>
<ClientSettings>
  <ClientEvents OnCommand="fun_OnCommand" OnRowDataBound="fun_OnRowDataBound" />
 </ClientSettings>
 </telerik:RadGrid>




Output:-

telerik show hide column


Advertisement


Debugging technique:-
    We can easy to debugging the client side program in run time, using debugger methods and open the inspect element.

Syntax :-


  Debugger;



Example Program:-
   Before clicking the "Click here To inspect element" this button, press F12 and open the inspect element, and when you press the "Click here To inspect element" button your program will be pause the execution and wait for user input and you can now see the run time output and press F10 to run line by line, F12 to continue the execution.

<html>
<head>
<title>Move The Div Position</title>
</head>

<script type="text/JavaScript">

function debugger_call()
{
    debugger;
    var name="Merbin Joe";
    var place="google";
  
    var mark1=91;
    var mark2=78;
    var mark3=89;
    var Answer;
  
    answer=mark1+mark2+mark3;  
  
    alert(answer);  
}
</script>
</head>

<body>
<input type="button" value="Click here To inspect element" onclick="debugger_call();" style="height:50px;">
</body>
</html>



Output:-

 
Advertisement


Screen shots:-
    you can find the variable value by select or drag the variable to display the popup.



Bind dropdownlist using jquery:-
       In many situation we need to bind the drop down dynamically, example: from database or other. So we can use jquery to bind the dropdowns using a for loop. The example is shown below.

Syntax:-

$("#ddlID").append($("<option></option>").val(i).html(j));



Example:-

<html>
<head>
<title>Move The Div Position</title>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>

<script type="text/JavaScript">
function bind_ddl()
{
 $("#ddl_ID").empty();
 for(var i=1;i<=100;i++)
 {
$("#ddl_ID").append($("<option></option>").val(i).html(i));
 }
 $("#ddl_ID").css("border", "2px solid red");
}

function ddl_click()
{
var ddl_length=$('#ddl_ID').children('option').length;
if(ddl_length==0)
{
alert("Click Bind DropDown");
}
}
</script>
</head>

<body>
Numbers :
<select id="ddl_ID" onclick="ddl_click();">
</select>
<input value="Bind DropDown" type="button" onclick="bind_ddl();">
</body>
</html>
   

Output:-
 

Numbers :


Advertisement

Screenshots:-

Telerik onrowdatabound and oncommand Function
      Telerik is the very easy tool for creating grid, that having two function for control when the grid row is bound and click, that is called OnCommand and OnRowDataBound. We should write this two methods are write into the <ClientSettings> tag.


Example:-

function commandfunction(sender,args)
{}
 function rowboundfunction(sender,args)
{}
-----------
-----------
----------
 <ClientSettings>
<ClientEvents OnCommand="commandfunction" OnRowDataBound="rowboundfunction" />
</ClientSettings>
-----------
-----------

     The standard methods to use the function name for oncommand "gridname_OnCommand" and onrowdatabound function name is "gridname_OnRowDataBound"

Example:-
function RadID_OnRowDataBound(sender,args)
{}

function RadID_OnCommand(sender,args)
{}

-------------
-------------
-------------
<telerik:RadGrid ID="RadID" runat="server" Width="100%">
    <MasterTableView EnableNoRecordsTemplate="true">
            <NoRecordsTemplate>
                   <div>
                         There are no records to display
                  </div>
           </NoRecordsTemplate>
             <Columns>
                   <telerik:GridBoundColumn HeaderText="Req Number" DataField="Req">
                    </telerik:GridBoundColumn>                  
                     <telerik:GridBoundColumn HeaderText="School Name" DataField="School">
                      </telerik:GridBoundColumn>

             </Columns>
    </MasterTableView>
     <ClientSettings>
   <ClientEvents OnCommand="RadID_OnCommand"
                  OnRowDataBound="RadID_OnRowDataBound" />
   </ClientSettings>
</telerik:RadGrid>



Explanation:-
    onRowDataBound function is used for control the data when on row bound we can access data using "args.get_dataItem()["NameField"]"  and we can check and doing some functionality, and the onCommand function is used for control if any event occur on the grid this function will be executed, eg: mainly used for pagination.


Example for onRowDataBound and OnCommand:-
function RadID_OnRowDataBound(sender,args)
{
        var ViLnk = args.get_item().findElement("view");
        var EdLnk = args.get_item().findElement("edit");
        var PrLnk = args.get_item().findElement("process");
        var Status= args.get_item().findElement("GrirdStatus");



        Status.innerHTML = args.get_dataItem()["DBStatus"];

            if (args.get_dataItem()["DBPermission"] == 1) {
                EdLnk.style.display = '';
                ViLnk.style.display = 'none';
                PrLnk.style.display = '';
            }
            else
           {
                EdLnk.style.display = 'none';
                ViLnk.style.display = '';
                PrLnk.style.display = 'none';
            }

            if (args.get_dataItem()["DBEdit"] == 'enable')
            {
                lnkedit.style.display = '';
               ViLnk.style.display = '';
               PrLnk.style.display = 'none';
            }
            ViLnk.href = "javascript:fun_view(" + args.get_dataItem()["ID"] + ")";
            lnkedit.href = "javascript:fun_edit(" + args.get_dataItem()["ID"] + ")";
            PrLnk.href = "javascript:fun_process(" + args.get_dataItem()["ID"] +")";
}

function RadID_OnCommand(sender,args)
{
        args.set_cancel(true);

        var tableView = $find("<%= RadID.ClientID %>").get_masterTableView();
        var pageSize = sender.get_masterTableView().get_pageSize();

        var currentPageIndex = sender.get_masterTableView().get_currentPageIndex();
        PageMethods.Calling_pagemethod(currentPageIndex * tableView.get_pageSize(), tableView.get_pageSize() + (currentPageIndex * tableView.get_pageSize()), Calling_pagemethod_success);
}


PageMethods Success Function in Telerik
function  Calling_pagemethod_success(result)
{
  var tableView = $find("<%= RadID.ClientID %>").get_masterTableView();
  tableView.set_dataSource(result);
  tableView.set_virtualItemCount(result.length);

  tableView.dataBind();
}

Advertisement
Telerik:-
   Telerik is the third party tools,  Powered by Telerik Sitefinity CMS. using this we can use many type of tools like RadDatePicker, RadTimePicker and Grid Binding etc... we have many features in Telerik. You can get demo version for 30 days.



Example Telerik Grid:-


<telerik:RadGrid ID="TelerikGridID" runat="server" AllowSorting="false" Style="width:100%;">
    <MasterTableView EnableNoRecordsTemplate="true">

        <NoRecordsTemplate>
            <div>
                There are no records to display
    </div>
        </NoRecordsTemplate>

        <Columns>
            <telerik:GridBoundColumn HeaderText="Mail Address" DataField="Email" AllowSorting="false">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn HeaderText="Send Date" DataField="SendDate" AllowSorting="false">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn HeaderText="Send Status" DataField="Status" AllowSorting="false">
            </telerik:GridBoundColumn>

            <telerik:GridTemplateColumn HeaderText="Action">
                <ItemTemplate>
                    <span id="SpanID1" runat="server"><a id="ProcessID" runat="server">Process</a> </span>
                    <span id="SpanID2" runat="server"><a id="EditID" runat="server">Edit</a> </span>
                </ItemTemplate>
            </telerik:GridTemplateColumn>
        </Columns>
    </MasterTableView>

    <ClientSettings>
        <ClientEvents OnCommand="TelerikGridID_OnCommand" OnRowDataBound="TelerikGridID_OnRowDataBound" />
    </ClientSettings>

</telerik:RadGrid>



Explanation:-

No Records template tag is used for when your grid data bind zero value then this div content will be display.

        <NoRecordsTemplate>
            <div>
                There are no records to display
           </div>
        </NoRecordsTemplate>



 <Coulumns> tag is used to to define all of your column header title and data.

<Columns>
----------
----------
</Columns>


GridBoundColumn is used to specify your header and data field, The Header Text is "Mail Address" and the data filed name is Email (taken from your database).

--------
--------
            <telerik:GridBoundColumn HeaderText="Mail Address" DataField="Email" AllowSorting="false">
            </telerik:GridBoundColumn>
--------
--------




<ItemTemplate> is used for create a link or other text dynamically  On Row Data Bound time.

<telerik:GridTemplateColumn HeaderText="Action">
<ItemTemplate>
-------
------
</ItemTemplate>
</telerik:GridBoundColumn>



Example:-

-------
-------
function TelerikGridID_OnRowDataBound(sender,args)
{
        var LinkProcess = args.get_item().findElement("ProcessID");
        var LinkEdit = args.get_item().findElement("EditID");      
         
       if(args.get_dataItem()["Email"] == "sample@gmail.com")
      {
         LinkProcess .style.display = 'none';
         LinkEdit .style.display = '';

         LinkEdit .href = "javascript:Process(" + args.get_dataItem()["ID"] + ")";
      }
      else
      {
         LinkProcess .style.display = '';
         LinkEdit .style.display = 'none';

         LinkProcess .href = "javascript:Edit(" + args.get_dataItem()["ID"] + ")";
      }

}

funtion Process(id)
{
   alert("Process Clicked");
}
function Edit(id)
{
   alert("Edit Clicked");
}

-------------
-------------

 <telerik:GridBoundColumn HeaderText="Mail Address" DataField="Email" AllowSorting="false">
 </telerik:GridBoundColumn>

<telerik:GridTemplateColumn HeaderText="Action">
       <ItemTemplate>
                 <span id="SpanID1" runat="server"><a id="ProcessID" runat="server">Process</a> </span>
                 <span id="SpanID2" runat="server"><a id="EditID" runat="server">Edit</a> </span>
        </ItemTemplate>
</telerik:GridTemplateColumn>
-------------
-------------



Output:-


Mail Address Action
googleblogger@gmail.com Process
googlebot@gmail.com Process
sample@gmail.com Edit
Advertisement



Screenshot:-

JQuery to Find the Div Height:-

    We can find the particular height on a div using css property the syntax is shown below

var heigh_cal = $("#divID").css("height");




Example:-

        var heigh_cal = $("#review_form_hideshow").css("height");
        var split_val = heigh_cal.replace('px', '');
        $("#popup_set_position").css("top", parseInt(split_val) + parseInt(667) + "px");



Example Program:- (Editor)



Output:-


Advertisement


Screen Shots:-
 

Total Pageviews