[Solved] Radgrid enable cell visibility client side on row click

[Mike]

Good day.
I have a grid. The one column (template column) is set to display = false. Lets call this column passport.
I want to change the passport template column to display on client side when a client selects the row. 
Only the selected row's cell should be enabled.
When another row is selected the previous selected row's passport cell should be disabled and the new row shown.

Can this be done client side?

Kind regards
Mike

[Shinu]

Hi Mike,

Please try the below code snippet which works fine at my end.

ASPX:

<telerik:RadGrid ID="rgrdOrders" runat="server" DataSourceID="sqldsOrders" CellSpacing="-1"
    GridLines="Both" ResolvedRenderMode="Classic">
    <MasterTableView DataSourceID="sqldsOrders" AutoGenerateColumns="False" DataKeyNames="OrderID">
        <Columns>
            <telerik:GridBoundColumn DataField="OrderID" DataType="System.Int32" FilterControlAltText="Filter OrderID column" HeaderText="OrderID" ReadOnly="True" SortExpression="OrderID" UniqueName="OrderID">
            </telerik:GridBoundColumn>
            <telerik:GridTemplateColumn UniqueName="Passport" Display="false">
                <ItemTemplate>
                    <asp:Label ID="lblDemo" runat="server" Text='<%# DataBinder.Eval(Container, "DataItem.CustomerID") %>'>
                    </asp:Label>
                </ItemTemplate>
            </telerik:GridTemplateColumn>
        </Columns>
    </MasterTableView>
    <ClientSettings Selecting-AllowRowSelect="true">
        <ClientEvents OnRowSelected="showTemplateColumn" />
    </ClientSettings>
</telerik:RadGrid>

JavaScript:

var previouslySelectedRow = -1;
function showTemplateColumn(sender, args) {
    var grid = sender;
    var MasterTable = grid.get_masterTableView();
    var row = MasterTable.get_dataItems()[args.get_itemIndexHierarchical()];
    if (previouslySelectedRow == -1) {
        previouslySelectedRow = args.get_itemIndexHierarchical();
        var cell = MasterTable.getCellByColumnUniqueName(row, "Passport");
        cell.style.display = "block";
    }
    else {
        var previousRow = MasterTable.get_dataItems()[previouslySelectedRow];
        var previousCell = MasterTable.getCellByColumnUniqueName(previousRow, "Passport");
        previousCell.style.display = "none";
        var cell = MasterTable.getCellByColumnUniqueName(row, "Passport");
        cell.style.display = "block";
        previouslySelectedRow = args.get_itemIndexHierarchical();
    }
}

Thanks,
Shinu.

[Mike]

Thanks Shinu.
This works great... (Except that the header disappears, which I do not want ) Can you possibly assist in setting the actual display of the content of the template and not the template itself.
So in your example I want to change the code to this

<telerik:GridTemplateColumn UniqueName="Passport" >                
     <ItemTemplate>                    
        <asp:Label ID="lblDemo" runat="server" Text='<%# DataBinder.Eval(Container, "DataItem.CustomerID") %>' Display="false" >                    
        </asp:Label>
     </ItemTemplate>            
</telerik:GridTemplateColumn>

I.e. lblDemo Display="false"and then change that to display or hide?

Kind regards
Mike​

[Shinu]

Hi Mike,

In order to achieve your scenario style the Label control display as none as follows and do the following modification in your JavaScript.

ASPX:

...
<telerik:GridTemplateColumn UniqueName="Passport" HeaderText="Passport">
   <ItemTemplate>
      <asp:Label ID="lblDemo" runat="server" Style="display: none" Text='<%# DataBinder.Eval(Container, "DataItem.CustomerID") %>'>
      </asp:Label>
   </ItemTemplate>
</telerik:GridTemplateColumn>
...

JavaScript:

function showTemplateColumn(sender, args) {
    var index = args._itemIndexHierarchical;
    var MasterTable = sender.get_masterTableView();
    var length = MasterTable.get_dataItems().length;
    var count, row;
    for (var count = 0; count < length; count++) {
        row = MasterTable.get_dataItems()[count];
        if (count == index) {
            row.findElement("lblDemo").style.display = "block";
        }
        else {
            row.findElement("lblDemo").style.display = "none";
        }
    }
}

Thanks,
Shinu.

[Mike]

Thanks you Shinu!
Just one question. My template control is a RadTextBox
"<telerik:RadTextBox runat="server" ID="IdNumberTexbox" MaxLength="13" Width="100%" Style="display: none"></telerik:RadTextBox>"

OnRowSelected now shows the textbox, BUT WHEN I MOVE INTO THE BOX TO TYPE DATA IT'S DISPLAY CHANGES TO NONE. So it disappears again.

Any Ideas?

Thanks Mike

[Shinu]

Hi Mike,

Please do the following modification in your JavaScript which works fine at my end.

JavaScript:

function showTemplateColumn(sender, args) {
    var index = args._itemIndexHierarchical;
    var MasterTable = sender.get_masterTableView();
    var length = MasterTable.get_dataItems().length;
    var count, row, txtBox;
    for (var count = 0; count < length; count++) {
        row = MasterTable.get_dataItems()[count];
        if (count == index) {
            row.findControl("IdNumberTexbox").get_styles().EnabledStyle[0] += "display : block;";
            row.findControl("IdNumberTexbox").updateCssClass();
        }
        else {
            row.findControl("IdNumberTexbox").get_styles().EnabledStyle[0] += "display : none;";
            row.findControl("IdNumberTexbox").updateCssClass();
        }
    }
}

Thanks,
Shinu.

[Mike]

Thank you Shinu! You are the best!!!