Inline edit, only enabled when row selected

3 posts, 1 answers
  1. James Shelton-Agar
    James Shelton-Agar avatar
    108 posts
    Member since:
    May 2008

    Posted 19 Jan 2011 Link to this post

    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?
  2. Answer
    Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 20 Jan 2011 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. James Shelton-Agar
    James Shelton-Agar avatar
    108 posts
    Member since:
    May 2008

    Posted 20 Jan 2011 Link to this post

    this is exactly what I am looking for, thank you
Back to Top