Basic about Telerik Control

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:-