[Solved] Controls in ItemTemplate of RadGrid are not accessible in OnRowDataBound event

[Sadaf]

I've a RadGrid and a ItemTemplateColumn which contains a RadTextBox, I'm binding the grid on client side by using a Webservice and on "OnRowDataBound" event i want to set value in the textbox (that is present inside the ItemTemplate)

 

<telerik:RadGrid ID="dgvDataEntry" runat="server">

    <MasterTableView>

        <Columns>

        <telerik:GridTemplateColumn HeaderText="Attribute Name" DataField="AttrName" UniqueName="AttrName">

            <ItemTemplate>

                <telerik:RadTextBox ID="RadTextBox1" runat="server" />

        </ItemTemplate>

        </telerik:GridTemplateColumn>

        </Columns>

    </MasterTableView>

<ClientSettings>

    <ClientEvents OnRowDataBound="RadGrid1_RowDataBound" />

</ClientSettings>

</telerik:RadGrid>

here is my OnRowDataBound event

function RadGrid1_RowDataBound(sender, args) {

var txt = args.get_item().findControl("RadTextBox1"); //I always get "null" here
}

Is it the wrong way to access the control inside the ItemTemplate? Let me know where i'm doing wrong?

 

 

 

 

 

 

 

 

 

[Venelin]

Hello Sadaf,

Try using this function instead:

JavaScript:

function onGridRowBound(sender, args) {
    var btn = args.get_item().findElement("RadTextBox1");
    btn.value = args.get_dataItem().Text;
}

ASPX:

<ClientSettings>
    <ClientEvents OnRowDataBound="onGridRowBound" />
</ClientSettings>

I am also attaching a runnable sample project.

I hope this helps.

Kind regards,
Venelin
the Telerik team

[Sadaf]

Thanks for your reply and the sample code.

After spending time on this issue, i came to know that the issue was not with accessging control in that way, it was actually because, the Page size is set to "2" initially, and the grid is binded to a list of objects containing only 2 rows, later on when i binded the grid again on some other event the page size gets change and more than 2 rows came in the data source, but as the grid's page size was set to 2 initially, thats why it only binds the 1st  two rows and recognized the controls of those rows only.

To resolve this issue, i update the page size every time when the grid binds again, here is my code for updating page size,

var tableView = $find("<%= dgvDataEntry.ClientID %>").get_masterTableView();

var grid = $find("<%= dgvDataEntry.ClientID %>");

grid.MasterTableView.set_pageSize(result); //here result gets the updated page size

tableView.rebind();

 

tableView.set_dataSource(data);

 

tableView.dataBind();

          
"data" is coming from the web service. but the problem is, its not updating the page size and shows only two rows.

[Venelin]

Hello Sadaf,

Firstly, when you initially set page size to two there are two server controls that are created on the page. For this reason you can't use <ItemTemplate>. Instead you should use ClientItemTemplate in which you can add your text boxes like this:

<telerik:GridTemplateColumn DataField="Text">
    <ClientItemTemplate>
        <input type="text" value="#= Text #"></input>
    </ClientItemTemplate>
</telerik:GridTemplateColumn>

In this manner you can add dynamically the new text boxes.

Secondly, the .set_pageSize() method throws server command PageSize and postbacks. This means that OnCommand event this command should be canceled to prevent the postback.

JavaScript:

function updateGrid(data) {
    var mtv = $find('<%=RadGrid1.ClientID %>').get_masterTableView();
    mtv.set_dataSource(data);
    mtv.set_pageSize(data.length);
    mtv.dataBind();
}
/*Simulate the web service*/
function pageLoad() {
    var data = [{
        Text: "TEXT"
    }, {

        Text: "TEXT2"
    }];
    updateGrid(data);
    setInterval(function () {
        data.push({ Text: "TEXT" + (i++) });
        updateGrid(data);
    }, 1000);
}
/*Cancel the PageSize Command*/
function gridCommand(sender, args) {
    if (args.get_commandName() === "PageSize") {
        args.set_cancel(true);
    }
}

I also attach a sample project to demonstrate the approach.

I hope this helps.

Regards,
Venelin
Telerik

[Sadaf]

Thanks for the sample code and your reply.

When i use your file in my sample project, it gives the following error:
Type 'Telerik.Web.UI.GridTemplateColumn' does not have a public property named 'ClientItemTemplate',
its not allowing me to add this property inside the GridTemplateColumn, I'm using the version "2011.2.915.40" whereas its Runtime version is v4.0.30319

Secondly there is not only textboxes in my grid,but also many other controls as well, like RadCombo, RadTreeView inside comboBox, Toggle buttons etc..

Brief description of my scenario is given below:

1. When the page loads, there is nothing in my RadGrid.
2. I've a RadTreeView, on clicking on its any node, the RagGrid populates. (Data is coming from webservice & all this work is done in client side, means no post back occurs in my case)
3. When the webservice returns data, i update the datasource of grid, then update the page size and bind it.

This function calls to load grid (OnClientNodeClicked event of RadTreeView which load the RadGrid)

 function valueTreeClicked(sender, eventArgs) {
 var node = eventArgs.get_node();
 BDDWebDataService.LoadMetaAttrList(node.get_value(), onSuccess, onFailure);
}

If the Web service successfully returns data, it will call the function below:

  function onSuccess(result) {
            data = eval('(' + result + ')');
            var tableView = $find("<%= dgvDataEntry.ClientID %>").get_masterTableView();
            var grid = $find("<%= dgvDataEntry.ClientID %>");

            if (data) {
                tableView.set_dataSource(data);
                tableView.set_pageSize(data.length);
                tableView.dataBind();
            }
            grid.set_visible(true);
        }

I'm also attaching the snap shot of grid after populating data. please have a look.

Regards,
Sadaf

[Venelin]

Hello Sadaf,

The ClientItemTemlate column is a newer feature and you need to upgrade in order to use it.

About the problem with the empty rows, as I mentioned in the last post by setting a value for the page size you are creating as many server controls as the value indicates and no more than this. You can not add server controls on client. This is where the ClientItemTemplate column comes in handy. You can add any html in it anytime.

Regards,
Venelin
Telerik

[Sadaf]

Thanks Venelin, I'll get back to you after upgrading my dll.