IScriptControl Help - Front- & Back-End Development - Front- & Back-End Development - Progress Community
 Front- & Back-End Development

IScriptControl Help

  • IScriptControl Help
  • I have a radgrid in where I want to enable/disable a button when a user clicks a checkbox for a selected row. I originally just wanted to use some inline javascript and just enable to the button based on it's clientid but it can never find that id.

    <ClientSettings ClientEvents-OnRowSelected="RowSelected" ClientEvents-OnRowDeselected="RowDeselected">
        <Selecting AllowRowSelect="True" />

    doesn't work.
    function RowSelected(sender, eventArgs)
        document.getElementById('DeleteSelectedRadButton1').disabled = false;       

    So I decided to Inherit IScriptControl and try from there, but the RowSelected  Method isn't firing? How do I call the RowSelected Method in my embedded javascript?. this is what i have so far:

    // Register the namespace for client control.
    // ------------------------------------------------------------------------
    // Definition of MyGrid class and properties
    // ------------------------------------------------------------------------
    MyGrid.Grid = function (element)
        MyGrid.Grid.initializeBase(this, [element]);
        // ------------------------------------------------------------------------
        // MyGrid.Grid class properties
        // ------------------------------------------------------------------------
        this._deleteButton = null;
        this._radGrid = null;
    MyGrid.Grid.prototype =
        // ------------------------------------------------------------------------
        // initialization and clean-up
        // ------------------------------------------------------------------------
        initialize: function ()
            MyGrid.Grid.callBaseMethod(this, 'initialize');
            Sys.Application.add_load(Function.createDelegate(this, this._onLoad));
        dispose: function ()
            MyGrid.Grid.callBaseMethod(this, 'dispose');
        // ------------------------------------------------------------------------
        // public functions
        // ------------------------------------------------------------------------
        // ------------------------------------------------------------------------
        // private functions
        // ------------------------------------------------------------------------
        // ------------------------------------------------------------------------
        // property accessors
        // ------------------------------------------------------------------------
        get_deleteButton: function ()
            return this._deleteButton;
        set_deleteButton: function (value)
            if (this._deleteButton !== value)
                this._deleteButton = value;
        get_radGrid: function ()
            return this._deleteButton;
        set_radGrid: function (value)
            if (this._radGrid !== value)
                this._radGrid = value;
        _gridCommand: function (sender, args)
            if (args.get_commandName() == "RowSelected")
                alert("Row: ");
    MyGrid.Grid.registerClass('MyGrid.Grid', Sys.UI.Control);

        //expose the necessary data to the client control
        public IEnumerable<ScriptDescriptor> GetScriptDescriptors()
            var descriptor = new ScriptBehaviorDescriptor(this.GetType().FullName, this.ClientID);
            descriptor.AddProperty("deleteButton", this.DeleteSelectedRadButton1.ClientID);
            descriptor.AddProperty("radGrid", this.MyGrid1.ClientID);
            return new ScriptDescriptor[] descriptor ;
        //create a script reference
        public IEnumerable<ScriptReference> GetScriptReferences()
            ScriptReference reference = new ScriptReference(this.GridScript);
            return new ScriptReference[] reference ;
    private string GridScript= "MyGrid.js";
  • Hello Kristian,

    1. You should have <ClientEvents OnRowSelected="RowSelected" /> in the control html
    2. You have to create a js function RowSelected

    function RowSelected(sender, eventArgs)
      var grid = sender;
      var MasterTable = grid.get_masterTableView();
      var row = MasterTable.get_dataItems()[eventArgs.get_itemIndexHierarchical()];
    // or var row = eventArgs.get_gridDataItem();  
    // or var row= args.get_gridDataItem().get_element().rowIndex;

    Best wishes,
    Ivan Dimitrov
    the Telerik team
    Registration for Q1 2011 What’s New Webinar Week is now open. Mark your calendar for the week starting March 21st and book your seat for a walk through all the exciting stuff we ship with the new release!
  • Ok, but how would I disable/enable my button? Like I said finding the ClientID doesn't work.
  • Assuming only one selected row, you could wire up some jQuery perhaps...?

    Find the selected row with
    var selectedRow = $('.rgSelectedRow');

    Find the buttonID (radbutton?) with it's partial name (Ends with Button1)
    var buttonid = selectedRow.find('[id$="Button1"]').attr('id');

    Then get the clientside object off of that
    var buttonref = $find(buttonid);

    Then disable it

    Haven't tested this...but I think it should work. 

    To make it more efficient you could even put a style on the radgrid column the button lives in and change the selectedRow to be Selected column with
    var selectedCol = $('.rgSelectedRow .buttonColumn');

    Just an idea I guess....
  • Thanks steve, but your code looks like it suggests that my radbutton is in the radgrid, my radbutton is outside of the radgrid. Also wouldn't the jquery still run into the same problem, it is still looking for that radbutton's id?

    Basically what I want is to have a radbutton that will be enabled when one or more rows are selected and disabled when 0 are selected. I have all the logic in place.. I am using a count to determine how many rows are selected.
     it is just enabling / disabling the radbutton that is the problem. 
    <script type="text/javascript">
        var rowsSelected = 0;
        function RowSelected(sender, eventArgs)
            if (rowsSelected > 0)
                document.getElementById('DeleteSelectedRadButton1').disabled = false; // <- is undefined
            alert("Row: " + eventArgs.get_itemIndexHierarchical() + " selected. Rows Selected=" + rowsSelected + "!");
            var e = eventArgs.get_domEvent();
        function RowDeselected(sender, eventArgs)
            if (rowsSelected < 0)
                document.getElementById('DeleteSelectedRadButton1').disabled = true; // <- is undefined
            alert("Row: " + eventArgs.get_itemIndexHierarchical() + " deselected. Rows Selected=" + rowsSelected);
            var e = eventArgs.get_domEvent();

    <telerik:RadButton ID="DeleteSelectedRadButton1" runat="server"
         Skin="Sitefinity" Text="Delete" Font-Bold="True" Enabled="True">
         <Icon PrimaryIconCssClass="rbRemove" PrimaryIconLeft="4" PrimaryIconTop="4" />
    <telerik:RadGrid ID="RadGrid1" runat="server" Skin="Sitefinity" AllowMultiRowSelection="true"
        AutoGenerateColumns="False" GridLines="None" AllowPaging="True" AllowSorting="True"
        <ClientSettings AllowColumnsReorder="True">
        <Selecting AllowRowSelect="True" />
        <ClientEvents OnRowSelected="RowSelected" />
        <ClientEvents OnRowDeselected="RowDeselected" />

  • Oh! yes....I assumed the button lived in each grid row, sorry

    So it should be easier can still find the button by it's ID no problem.

    Same code should still apply (assuming standard HTML button)

    var button = $('[id$="Button1"]');
    if(mycount ==0)
       button.attr('disabled', true);
       button.attr('disabled', false);

    Just use jQuery for the enable\disable

    However if you have your heart set on more complex (non jQuery code)
    var buttonid = $('[id$="DeleteSelectedRadButton1"]').attr('id'); //gets the clientside ID
    document.getElementById(buttonid).disabled = false; //Gets the object

    But this is a RadButton, so do this
    var buttonid = $('[id$="Button1"]').attr('id'); //Gets unique ID for the button
    var button = $find(buttonid); //Get the clientside object
    if(mycount ==0)
  • I should note

    document.getElementById('DeleteSelectedRadButton1').disabled = true; // <- is undefined

    Will always be undefined since the actual ID of the control on render (if you look at firebug) is like "ctl00_blah_ctl00whatver_ctlDeleteSelectedRadButton1"

    So what the jQuery .attr('id') like does is search the DOM for an ID that ENDS WITH the text you assigned it.  Once found, pass it into the $find so you can start using it.

    It's like a way to do '<%= DeleteSelectedRadButton1.ClientID %>' in an external .js whereas that converts itself to the retarded clientside ID on render, the jQuery searches the DOM after render.

    You might even try setting ClientIDMode="Static" on the button...some telerik ajax controls support it (not sure if SF 4.0 does), but that'll make the retarded clientID exactly what you named it.
  • Awesome thanks! The clientidmode="static" works (in firebug) as well but it still can't enable/disable it that way. Which brings me to another question. 

    If you have more than one of those controls on a page would that effect every button with that id?