Inline edit, only enabled when row selected

[James Shelton Agar]

I currently have an GridTemplateColumn-Button for edit and Gridbuttoncolumn as for delete.
How do I make them enabled only when the row's been selected in clientside?

[Shinu]

Hello James,

Here is my mark-up for the similar scenario:

<Columns>
    <telerik:GridTemplateColumn UniqueName="EditColumn">
        <ItemTemplate>
            <asp:Button ID="editButton" runat="server" Text="Edit" />
        </ItemTemplate>
    </telerik:GridTemplateColumn>
    <telerik:GridButtonColumn Text="Delete this" ButtonType="PushButton" HeaderText="ButtonColumn"
        UniqueName="DeleteColumn">
    </telerik:GridButtonColumn>

The following client side code disables all the Edit/Delete buttons in grid initially.
JavaScript:

function OnRowCreated(sender, args) {
    var btn = args.get_gridDataItem().findElement("editButton");
    btn.disabled = true;
    var td = args.get_gridDataItem().get_cell("DeleteColumn");
    $telerik.$(td).find('input')[0].disabled = true;
}

Now enabling the buttons when the row is selected, also disabling the unselected row.

JavaScript:

function OnRowSelected(sender, args) {
    var dataItems = sender.get_masterTableView().get_dataItems();
    for (var index = 0; index < dataItems.length; index++) {
        var EditBtn = sender.get_masterTableView().get_dataItems()[index].findElement('editButton');
        EditBtn.disabled = true;
        var element = dataItems[index].get_cell("DeleteColumn");
        $telerik.$(element).find('input')[0].disabled = true;
    }
    var btn = args.get_gridDataItem().findElement("editButton");
    btn.disabled = false;
    var td = args.get_gridDataItem().get_cell("DeleteColumn");
    $telerik.$(td).find('input')[0].disabled = false;
}

Hope this helps.


-Shinu.

[James Shelton Agar]

this is exactly what I am looking for, thank you