Formatting OnRowCreated

[JustinWong]

Hi there:

I have a RadGrid with 2 simple columns: one is BOUND and the other one is TEMPLATED.  Inside the Templated column, I have a label control.

Say, I want to change the backgound color of the BOUND control (different colors for different rows. Let's say, red, yellow, green and recycle them) and I want to change the innerHTML of the label control inside the Templated column to something different every row (say, A, B, C and recycle them). 

Furthermore, I want to achieve this using ClientEvents OnRowCreated. How can I achieve that? 

Of course, I know that the above can be easily done with server-side codes, however, I'm just learning how to use this new control and I want to understand the capacity of the OnRowCreated client event and I seem not to be able to find any document that explains how I can achieve the above-mentioned effect using OnRowCreated. . .

Thanks for you help!

Justin

[Georgi Krustev]

Hi JustinWong,

To achieve this functionality, you can subscribe to the OnRowCreated client event. When this event is fired you can get the current element from the passed eventArgs (second argument in the handler). I bind the grid using advanced binding (OnNeedDataSource event).

Here is a code snippet showing my RadGrid declaration:

    <telerik:RadGrid ID="RadGrid1" runat="server" AllowPaging="True"
        AllowSorting="True" AutoGenerateColumns="False" GridLines="None"
        onneeddatasource="RadGrid1_NeedDataSource">
        <MasterTableView>
            <Columns>
                <telerik:GridBoundColumn DataField="CustomerID" HeaderText="Customer ID" UniqueName="CustomerID"></telerik:GridBoundColumn>
                <telerik:GridTemplateColumn >
                    <ItemTemplate>
                        <asp:Label ID="lblCompanyName" runat="server" Text='<%# Eval("CompanyName") %>' />
                    </ItemTemplate>
                </telerik:GridTemplateColumn>
            </Columns>
        </MasterTableView>
        <ClientSettings>
            <ClientEvents OnRowCreated="RowCreated" />
        </ClientSettings>
    </telerik:RadGrid>

As you see I've attached RowCreated JavaScript function to the OnRowCreated event. Here is the function definition:

function RowCreated(sender, eventArgs) {

                if (eventArgs.get_gridDataItem().get_element().rowIndex % 2) {
                    eventArgs.get_gridDataItem().get_element().style.backgroundColor = "Yellow";
                    eventArgs.get_gridDataItem().get_element().cells[1].innerText = "A";
                } else {
                    eventArgs.get_gridDataItem().get_element().style.backgroundColor = "Red";
                    eventArgs.get_gridDataItem().get_element().cells[1].innerText = "B";
                }
            }

In short, I check whether the row index is even or odd number. Depending on this check I set different style for whole row (eventArgs.get_gridDataItem().get_element().stylebackgroundColor) and change the innerText value in the second cell of the currently created row. For further information you can examine RadGrid's client-side API and particularly OnRowCreated event.

Best regards,
Georgi Krustev
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[JustinWong]

Hi Georgi:

 

That is very cool. And they worked for both IE and Firefox, which is great!  Now, what if I needed to complicate things? For example, what if I have not just a label within the template column and something more complex?

What if I have a checkbox, and I wan't to disable the checkbox and change the text of the checkbox lablel (which is wrapped inside a span tag and uses the "for" attributes). In that case, after I got hold of the cell  how do then change the attributes of the checkbox?

In general, after one gets hold of the cell via  eventArgs.get_gridDataItem().get_element(), how can one go about testing what kind of children are inside it (e.g.: a textbox, a dropdownlist, a checkbox, and other controls) the cell?

Thanks so much for your help!

Justin

[Georgi Krustev]

Hello JustinWong,

This code is executed when OnRowCreated event is fired.

To attain your goal, first of all you have to know in which cell the checkbox and checkbox label are placed. Once you find which the cell is, you can get the checkbox and the checkbox label with this JavaScript code:

if (eventArgs.get_gridDataItem().get_element().cells[2].childNodes[0].nodeName == "INPUT" &&

eventArgs.get_gridDataItem().get_element().cells[2].childNodes[0].getAttribute("type") == "checkbox") {

var checkbox = eventArgs.get_gridDataItem().get_element().children[2].childNodes[0];

checkbox.checked = true; //set the value.

}

if (eventArgs.get_gridDataItem().get_element().cells[2].childNodes[1].nodeName == "LABEL") {

var label = eventArgs.get_gridDataItem().get_element().cells[2].childNodes[1];

label.innerText = "Cheked"

}

To reference the checkbox I verify that the first child node of the cell has tag name "INPUT" and then check if the type of this child is "checkbox". After these verifications I am sure that this is the checkbox. From here you easily set the checked attribute to "true" or "false".

The procedure to get checkbox label is quite identical.  The difference is that you can get the label and to change its innerText value.

Please note that ASP.NET checkbox control is rendered in two childNodes in the cell. So the checkbox is in the first childNode and the label is the second. If you add other controls in the GridTemplateColumn the childNodes in the cell may have different order. To be able to find the exact control, the first option is to know in which node you have to look for, and the other options is to loop all childNodes in the cell to find the control which you are searching for.

To test what kind of children a cell has, you have to check what nodeName they have. But the nodeName contains HTML tag names, and not ASP.NET web controls. So for example if you want to find DropDownList control, you have to know in what html tag it is rendered.

Best regards,
Georgi Krustev
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[JustinWong]

Wow, you guys are GREAT in your support. That is such a detail explanation. Thanks so much!

Justin

[james w]

I agree that this reply is excellent and sorted out a problem i had been trying to solve for a while.

Why is this detail about the cell properties, what they are and how to access them,  not given in the main radgrid help site, where it would be very useful?!

thanks

james.

ps.
If it helps anyone else, I had a requirement to create a checkbox column with client side select all functionality, that didn't select disabled rows. The standard built in radgrid functionality worked well, but I couldn't get it to ignore the disabled rows, hence the need to write my own code. 'RadGrid_Assigned' is the grid in question, the checkbox column is unbound. The disabled rows had a NodeName of SPAN and a property of disabled='disabled' (which turned out not to be needed).

Code is as follows:

Template column declaration:
             <telerik:GridTemplateColumn UniqueName="chkColSelectAssigned" AllowFiltering="false">
                <HeaderTemplate>
                    <asp:CheckBox ID="chkSelectAssignedHeader" runat="server" OnClick="GridAssignedSelectAll(this);" ></asp:CheckBox>
                </HeaderTemplate>
                <ItemTemplate>
                    <asp:CheckBox ID="chkSelectAssigned" runat="server"></asp:CheckBox>
                </ItemTemplate>
            </telerik:GridTemplateColumn>

javascript:
    function GridAssignedSelectAll(checkbox) {
        var GridAssigned = $find("<%= RadGrid_Assigned.ClientID %>");
        var MasterTableAssigned = GridAssigned.get_masterTableView();
        var rows = MasterTableAssigned.get_dataItems();
        //Go through the rows in the table
        for (var i = 0; i < rows.length; i++) {
            var row =rows[i]
            var cell = MasterTableAssigned.getCellByColumnUniqueName(row, "chkColSelectAssigned");
            //Find the checkbox inside the cell elements
            for (var ii = 0; ii < cell.childNodes.length; ii++) {                
                if (cell.childNodes[ii].nodeName == "INPUT") {
                    if (cell.childNodes[ii].getAttribute("type") == "checkbox") {
                        var chkbox = cell.childNodes[ii];
                        chkbox.checked = checkbox.checked;
                    }
                }
            }
        }
    }

[Georgi Krustev]

Hello James,

The suggested approach is not included in the RadGrid's documentation, because it is related to the HTML DOM knowledge. Hence the required information, which should be documented, is the how to retrieve the HTML element (which is documented). The actions which you can perform from this point is related to the DOM functionality and it is documented in the W3Schools site. In this chain of thoughts the RadGrid's documentation should contains only information which is tightly specialized to the control.

Thank you for providing a solution for the described scenario and for your cooperation.

Greetings,
Georgi Krustev
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.