IScriptControl Help

Posted by Community Admin on 24-Feb-2011 00:00

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";

Posted by Community Admin on 25-Feb-2011 00:00

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!

Posted by Community Admin on 25-Feb-2011 00:00

Ok, but how would I disable/enable my button? Like I said finding the ClientID doesn't work.

Posted by Community Admin on 25-Feb-2011 00:00

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

Posted by Community Admin on 25-Feb-2011 00:00

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>

Posted by Community Admin on 25-Feb-2011 00:00

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);

Posted by Community Admin on 25-Feb-2011 00:00

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.

Posted by Community Admin on 25-Feb-2011 00:00

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?

This thread is closed

All Replies