+1-888-365-2779
Try Now
More in this section

Forums / Sitefinity SDK / IScriptControl Help

IScriptControl Help

8 posts, 1 answered
  1. Kristian
    Kristian avatar
    214 posts
    Registered:
    03 Jun 2010
    24 Feb 2011
    Link to this post
    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" />
    </ClientSettings>

    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:

    MyGrid.js
    // Register the namespace for client control.
    Type.registerNamespace('MyGrid');
     
    // ------------------------------------------------------------------------
    // 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;
                this.raisePropertyChanged('deleteButton');
            }
        },
        get_radGrid: function () {
            return this._deleteButton;
        },
        set_radGrid: function (value) {
            if (this._radGrid !== value) {
                this._radGrid = value;
                this.raisePropertyChanged('radGrid');
            }
        },
        _gridCommand: function (sender, args) {
            if (args.get_commandName() == "RowSelected") {
                alert("Row: ");
            }
        }
    }
    MyGrid.Grid.registerClass('MyGrid.Grid', Sys.UI.Control);


    Grid.cs
        //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";
  2. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    25 Nov 2016
    25 Feb 2011
    Link to this post
    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!
  3. Kristian
    Kristian avatar
    214 posts
    Registered:
    03 Jun 2010
    25 Feb 2011
    Link to this post
    Ok, but how would I disable/enable my button? Like I said finding the ClientID doesn't work.
  4. Steve
    Steve avatar
    3037 posts
    Registered:
    03 Dec 2008
    25 Feb 2011
    Link to this post
    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
    buttonref.set_enabled(false);


    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....
  5. Kristian
    Kristian avatar
    214 posts
    Registered:
    03 Jun 2010
    25 Feb 2011
    Link to this post
    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) {
            rowsSelected++;
     
            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) {
            rowsSelected--;
     
            if (rowsSelected < 0) {
                document.getElementById('DeleteSelectedRadButton1').disabled = true; // <- is undefined
            }
            alert("Row: " + eventArgs.get_itemIndexHierarchical() + " deselected. Rows Selected=" + rowsSelected);
            var e = eventArgs.get_domEvent();
     
        }
    </script>

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


  6. Steve
    Steve avatar
    3037 posts
    Registered:
    03 Dec 2008
    25 Feb 2011
    Link to this post
    Oh! yes....I assumed the button lived in each grid row, sorry

    So it should be easier then...you 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);
    else
       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)
       button.set_enabled(false);
    else
       button.set_enabled(true);
    Answered
  7. Steve
    Steve avatar
    3037 posts
    Registered:
    03 Dec 2008
    25 Feb 2011
    Link to this post
    I should note

    This
    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 file...so 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.
  8. Kristian
    Kristian avatar
    214 posts
    Registered:
    03 Jun 2010
    25 Feb 2011
    Link to this post
    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?
8 posts, 1 answered