Extending RadGrid Client Interface

8 posts, 0 answers
  1. Justavian
    Justavian avatar
    23 posts
    Member since:
    Aug 2010

    Posted 17 Oct 2010 Link to this post

    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!'); }
    }
  2. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 21 Oct 2010 Link to this post

    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
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Thomas Mittag
    Thomas Mittag avatar
    19 posts
    Member since:
    Jun 2008

    Posted 01 Oct 2012 Link to this post

    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
  5. Antonio Stoilkov
    Admin
    Antonio Stoilkov avatar
    530 posts

    Posted 04 Oct 2012 Link to this post

    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.
  6. Christian Pardun
    Christian Pardun avatar
    112 posts
    Member since:
    May 2010

    Posted 18 Feb 2014 Link to this post

    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






                                









  7. Antonio Stoilkov
    Admin
    Antonio Stoilkov avatar
    530 posts

    Posted 21 Feb 2014 Link to this post

    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.
  8. Christian Pardun
    Christian Pardun avatar
    112 posts
    Member since:
    May 2010

    Posted 21 Feb 2014 in reply to Antonio Stoilkov Link to this post

    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



  9. Antonio Stoilkov
    Admin
    Antonio Stoilkov avatar
    530 posts

    Posted 25 Feb 2014 Link to this post

    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.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017