Telerik Forums / UI for ASP.NET AJAX
This is a migrated thread and some comments may be shown as answers.

Extending RadGrid Client Interface

7 Answers 195 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Justavian
Top achievements
Rank 1
Justavian asked on 17 Oct 2010, 03:31 PM
Does anyone know the *right way to extend the client interface for a RadGrid?  In other words, how can i add additional functions, properties, and events to the client object you can get via $find()?


I tried to create a new control, derive from RadGrid, and implement the IScriptControl functions.  Since i didn't want to interfere with the existing virtual functions, i tried doing something like this:
    List<ScriptReference> lBaseRefs = (List<ScriptReference>)base.GetScriptReferences();
    lBaseRefs.Add(MyReferenceGoesHere);
    return lBaseRefs;

That part works fine, but the descriptors function will basically only pay attention to one or the other - so i either *just* get the RadGrid client interface, or my own - but never both.

Does anyone know how to do this?  I spent some time searching online (since this is really a generic problem, rather than a Telerik problem), but i only came up with one StackOverflow question that matched what i was trying to do (and it was unanswered).


* I mention "the right way", because i've got something that appears to work.  Because of the client even "OnGridCreated", i'm able to attach a function that will then extend the client object:

function ExtendGridFunctionality(sender, eventArgs) {
    $find(sender.get_id()).alertMe = function() { alert('hi!'); }
}

7 Answers, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 21 Oct 2010, 03:45 PM
Hello Justavian,

You can extend the RadGrid client object like this:

Telerik.Web.UI.RadGrid.prototype.methodName = function(parameters)
{
    // method body
    // in this method this is the reference to the RadGrid control object
}

The above will be applied to all RadGrid instances on the page. Note that the code must be executed after the RadGrid script files have been registered, which generally means that you should include (in a <script> tag or external JS file) the code in the <body>.

Here is a demo:

<%@ Page Language="C#" %>
<%@ Import Namespace="System.Data" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
  
<script runat="server">
  
    protected void RadGrid_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)
    {
        DataTable dt = new DataTable();
        DataRow dr;
        int colsNum = 4;
        int rowsNum = 5;
        string colName = "Column";
  
        for (int j = 1; j <= colsNum; j++)
        {
            dt.Columns.Add(String.Format("{0}{1}", colName, j));
        }
  
        for (int i = 1; i <= rowsNum; i++)
        {
            dr = dt.NewRow();
  
            for (int k = 1; k <= colsNum; k++)
            {
                dr[String.Format("{0}{1}", colName, k)] = String.Format("{0}{1} Row{2}", colName, k, i);
            }
            dt.Rows.Add(dr);
        }
  
        (sender as RadGrid).DataSource = dt;
    }
  
</script>
  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  
<head runat="server">
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>RadControls</title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
 
<telerik:RadNumericTextBox ID="RadNumericTextBox1" runat="server" ShowButton="true"
    Value="800" MinValue="1" MaxValue="1000" Label="New Width (1 - 1000) :" Width="200px">
    <ClientEvents OnButtonClick="myClick" />
    <NumberFormat DecimalDigits="0" />
</telerik:RadNumericTextBox>
 
<br /><br />
 
<telerik:RadGrid
    ID="RadGrid1"
    runat="server"
    Width="800px"
    Skin="Office2007"
    OnNeedDataSource="RadGrid_NeedDataSource" />
 
<script type="text/javascript">
 
function myClick(sender, args)
{
    var grid = $find("<%= RadGrid1.ClientID %>");
    grid.resizeMe(sender.get_value());
}
 
Telerik.Web.UI.RadGrid.prototype.resizeMe = function(newWidth)
{
    this.get_element().style.width = newWidth + "px";
}
 
</script>
  
</form>
</body>
</html>


Sincerely yours,
Dimo
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
Thomas Mittag
Top achievements
Rank 1
answered on 01 Oct 2012, 06:19 PM

Would it also be permissable to extend the control by creating a derived control type like this?

[assembly: WebResource("MyProject.Scripts.MyGrid.js", "text/javascript")]
  
namespace MyControls
{
    [ClientScriptResource("MyNamespace.MyGrid", "MyProjectScripts.MyGrid.js")]
    public class MyGrid : RadGrid
    {
        public string MyProperty { get; set; }
        public string OnClientMyEvent { get; set; }
  
        protected override IEnumerable<ScriptDescriptor>  GetScriptDescriptors()
        {
            List<ScriptDescriptor> descriptors = new List<ScriptDescriptor>();
            descriptors.Add(base.GetScriptDescriptors());
            ScriptControlDescriptor descriptor = descriptors[0] as ScriptControlDescriptor;
            descriptor.AddProperty("MyProperty", MyProperty);
            descriptor.AddEvent("myEvent", OnClientMyEvent);
            return descriptors;
        }
    }
}

and in the script:

Type.registerNamespace("MyNamespace");
  
(function () {
    MyNamespace.MyGrid = function(element) {
        MyNamespace.MyGrid.initializeBase(this, [element]);
        this._myProperty = null;
    };
    MyNamespace.MyGrid.prototype = {
        get_MyProperty: function() {
            return this._myProperty;
        },
        set_MyProperty: function(v) {
            this._myProperty = v;
        },
        add_myEvent: function(v) {
            this.get_events().addHandler("myEvent", v);
        },
        remove_myEvent: function(v) {
            this.get_events().removeHandler("myEvent", v);
        },
        initialize: function() {
            MyNamespace.MyGrid.callBaseMethod(this, "initialize"); 
        },
        dispose: function() {
            MyNamespace.MyGrid.callBaseMethod(this, "dispose");
        },
        myfunction: function() {
            //do your own stuff here.
        }
    };
  
    MyNamespace.MyGrid.registerClass('MyNamespace.MyGrid', Telerik.Web.UI.RadGrid);
  
}());

Thanks
Thomas Mittag
0
Antonio Stoilkov
Telerik team
answered on 04 Oct 2012, 12:13 PM
Hello Thomas,

Extending RadControls is not supported and it is developer responsibility to handle such cases. However, you could wrap the RadGrid control in another control or a user control in order to encapsulate its functionality and custom logic. Note that the post from Dimo Dimov explains how to override a control client function externally not extend the whole control.

Greetings,
Antonio Stoilkov
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
0
Christian
Top achievements
Rank 1
answered on 18 Feb 2014, 11:23 AM
Dear telerik team,

i found this post to extend a client object of an rad control.

I follow the example by Dimo but in my senario it doesnt work.I have an Masterpage/Contentpage. On the masterpage I add a RadScriptManager that adds an addtional javascript 

      <telerik:RadScriptReference Path="~/Scripts/jQuery.telerik.extention.js" ScriptMode="Inherit" />

This script is load. (check by debugging it). In this script I add an extending methods like this:

       $.extend(Telerik.Web.UI.RadTabStrip.prototype, { show_alert: function() { 'big world' } });

On initializing an error occur because Telerik.Web.UI.RadTabStrip.prototype isn't defined. If I do the same on pageLoad event on a content page it works and I can extend the RadTabStrip client object.

How can I solve this to extend the rad control client object on the way I prefer?

Thanks a lot.
Christian






                            









0
Antonio Stoilkov
Telerik team
answered on 21 Feb 2014, 08:17 AM
Hello Christian,

In order to resolve your issue you should place the script reference to the jQuery.telerik.extension.js file after the RadScriptManager on the page as shown in the example below. This is required because the RadScriptManager loads the scripts for the Telerik.Web.UI.RadTabStrip.
<telerik:RadScriptManager runat="server"></telerik:RadScriptManager>
<script type="text/javascript" src="Scripts/jQuery.telerik.extention.js"></script>

Regards,
Antonio Stoilkov
Telerik
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the UI for ASP.NET AJAX, subscribe to the blog feed now.
0
Christian
Top achievements
Rank 1
answered on 21 Feb 2014, 10:21 AM
Hi Antonio ,

first off all thanks for your answer.

I'll give it a try.

If I use this solution is the script I added after the RadScriptManager in a script tag also involved for script combining and compression through the RadScriptManager because I use this feature.


If not how can I fix this also?

Thanks again,
Christian



0
Antonio Stoilkov
Telerik team
answered on 25 Feb 2014, 12:10 PM
Hi Christian,

Unfortunately, there is no easy way to both combine and include the script in the end. A possible approach is to define a custom server control which have embedded resource the wanted script and include the control at the end of the page so its associated script will be included last.

Regards,
Antonio Stoilkov
Telerik
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the UI for ASP.NET AJAX, subscribe to the blog feed now.
Tags
Grid
Asked by
Justavian
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Thomas Mittag
Top achievements
Rank 1
Antonio Stoilkov
Telerik team
Christian
Top achievements
Rank 1
Share this question
or