Capturing new value in GridTemplateColumn on RadGrid

[David Kucharski]

Hello,

I am creating a RadGrid programmatically in the Page_Init. One of my columns I need to use the GridTemplateColumn to show a text box. The text box will initially come up with a numeric value. The user has the ability to change the value in the text box. The value is required and needs to be an integer. Once they have typed their new value and focus is lost from the text box, I would like to gather some other information on the same row, run some javascript to show a message with not only the new value they typed in but some of the other information on the row. I cannot seem to figure out how to do this. I have it where the grid shows with the correct information and text box in the column. The user can change the value. Here is where I need help. Once the textbox loses focus I would like to do some javascript on the new value and other values associated to the row the textbox is on. Below is my code to create the columns.

Page_Init

Private Sub Page_Init(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Init
    'CODEGEN: This method call is required by the Web Form Designer
    'Do not modify it using the code editor.
    InitializeComponent()
    defineGridStructure()
End Sub

defineGridStructure

Private Sub defineGridStructure()
    RadGrid1.ID = "RadGrid1"
    RadGrid1.Width = Unit.Pixel(1500)
    RadGrid1.MasterTableView.EditMode = GridEditMode.InPlace
    RadGrid1.AllowPaging = True
    RadGrid1.PagerStyle.Mode = GridPagerMode.NextPrevAndNumeric
    RadGrid1.AutoGenerateColumns = False
    RadGrid1.ShowStatusBar = True
    RadGrid1.AllowSorting = True
    RadGrid1.AllowFilteringByColumn = True
    RadGrid1.Skin = "WebBlue"
    RadGrid1.ClientSettings.ClientEvents.OnGridCreated = "GetGridObject"
    RadGrid1.ClientSettings.Scrolling.FrozenColumnsCount = 2
    RadGrid1.ClientSettings.AllowColumnsReorder = True
    RadGrid1.ClientSettings.ColumnsReorderMethod = GridClientSettings.GridColumnsReorderMethod.Swap
    RadGrid1.ClientSettings.Selecting.AllowRowSelect = True
    RadGrid1.ClientSettings.Resizing.AllowColumnResize = True
    RadGrid1.ClientSettings.Scrolling.AllowScroll = True
    RadGrid1.ClientSettings.Scrolling.UseStaticHeaders = True
    RadGrid1.ClientSettings.Scrolling.SaveScrollPosition = True
    RadGrid1.ClientSettings.Selecting.AllowRowSelect = True
    RadGrid1.ClientSettings.ClientEvents.OnRowSelected = "rowSelected"
    RadGrid1.MasterTableView.PageSize = 100
    RadGrid1.MasterTableView.AllowMultiColumnSorting = True
    RadGrid1.MasterTableView.DataKeyNames = New String() {"VendorListID"}
    columnCreation("Geography", "Geography", RadGrid1)
    columnCreation("Circ Type", "CirculationTypeDescription", RadGrid1)
    columnCreation("Household", "HouseHold_Count", RadGrid1)
    columnCreation("Total Cov", "TotalCoverage", RadGrid1)
    columnCreation("Day", "Day", RadGrid1)
    columnCreation("Selected", "Selected", RadGrid1)
    columnCreation("Circ", "Circ", RadGrid1)
    columnCreation("Coverage", "Coverage", RadGrid1)
    Me.PlaceHolder1.Controls.Add(RadGrid1)
End Sub

columnCreation

Private Sub columnCreation(ByVal colName As String, ByVal fieldName As String, ByVal oRadGrid As RadGrid)
    If colName = "Circ" Then
        Dim numericColumn = New GridTemplateColumn
        numericColumn.ItemTemplate = New MyEditTemplate(fieldName)
        numericColumn.DataField = fieldName
        numericColumn.HeaderText = colName
        numericColumn.UniqueName = fieldName
        numericColumn.FilterControlWidth = Unit.Pixel(60)
        oRadGrid.MasterTableView.Columns.Add(numericColumn)
   End If
End Sub

MyEditTemplate

Public Class MyEditTemplate
    Implements ITemplate
    Protected textBox As TextBox
    Private colname As String
    Public Sub New(ByVal cName As String)
        colname = cName
    End Sub
    Public Sub InstantiateIn(ByVal container As System.Web.UI.Control) Implements ITemplate.InstantiateIn
        textBox = New TextBox()
        textBox.ID = colname
        AddHandler textBox.DataBinding, _
                   AddressOf textBox_DataBinding

        container.Controls.Add(textBox)
    End Sub
    Sub textBox_DataBinding(ByVal sender As Object, ByVal e As EventArgs)
        Dim cTextBox As TextBox = DirectCast(sender, TextBox)
        Dim container As GridDataItem = DirectCast(cTextBox.NamingContainer, GridDataItem)
        cTextBox.Text = (DirectCast(container.DataItem, DataRowView))(colname).ToString()
    End Sub
End Class

I use the RadGrid1_NeedDataSource to acquire the information from the database, and then use the RadGrid1_ItemDataBound to set the information up correctly.

RadGrid1_ItemDataBound

Public Sub RadGrid1_ItemDataBound(sender As Object, e As Telerik.Web.UI.GridItemEventArgs) Handles RadGrid1.ItemDataBound
    If (TypeOf (e.Item) Is GridDataItem) Then
        Dim dataBoundItem As GridDataItem = e.Item
        Dim dataRow As DataRowView = dataBoundItem.DataItem
        Dim index As Integer = dataBoundItem.ItemIndex
        dataBoundItem("Geography").Text = dataBoundItem("Geography").Text.Trim
    End If
End Sub

So, again, what I would like to do is have the user be able to change the value in my textbox. Validate that it is filled in and an integer. Then display an alert() to the user that the information has changed and give them the Geography, Circ Type and Day on the message.

I kind of do something like it with a checkbox template column.

MyTemplate

Public Class MyTemplate
    Implements ITemplate
    Protected boolValue As CheckBox
    Private colname As String
    Public Sub New(ByVal cName As String)
        colname = cName
    End Sub
    Public Sub InstantiateIn(ByVal container As System.Web.UI.Control) Implements ITemplate.InstantiateIn
        boolValue = New CheckBox()
        boolValue.ID = colname
        AddHandler boolValue.DataBinding, _
                   AddressOf boolValue_DataBinding
        boolValue.Enabled = True
        container.Controls.Add(boolValue)
    End Sub
    Sub boolValue_DataBinding(ByVal sender As Object, ByVal e As EventArgs)
        Dim cBox As CheckBox = DirectCast(sender, CheckBox)
        Dim container As GridDataItem = DirectCast(cBox.NamingContainer, GridDataItem)
        If ((DirectCast(container.DataItem, DataRowView))(colname)) = 1 Or ((DirectCast(container.DataItem, DataRowView))(colname)) = True Then
            cBox.Checked = True
        Else
            cBox.Checked = False
        End If
    End Sub
End Class

 and then in the RadGrid1_ItemDataBound

dataBoundItem("Selected").Attributes.Add("onClick", "javascript:return fnSelectDayForTelerik(" & index & "," & mode & "," & mintEventID & "," & circType & "," & day & "," & ddlCircSet.SelectedItem.Value & ",'" & mstrSessionID & "'," & Request("PARID") & ",'" & Trim(UCase(Request("TargetGeo"))) & "',0);")
dataBoundItem("Forced").Attributes.Add("onClick", "javascript:return fnSelectDayForTelerik(" & index & "," & mode & "," & mintEventID & "," & circType & "," & day & "," & ddlCircSet.SelectedItem.Value & ",'" & mstrSessionID & "'," & Request("PARID") & ",'" & Trim(UCase(Request("TargetGeo"))) & "',1);")

But if I try the same logic on my Circ dataBoundItem with a onChange or onBlur, nothing fires.

[Princy]

HI,

Please try attaching the Client Side event at ItemCreated event of Radgrid.

Thanks,
Princy.

[David Kucharski]

Princy,

I have added the following code to my project.

Private Sub RadGrid1_ItemCreated(sender As Object, e As Telerik.Web.UI.GridItemEventArgs) Handles RadGrid1.ItemCreated

        If e.Item.ItemType = GridItemType.AlternatingItem Or e.Item.ItemType = GridItemType.Item Then

            Dim dataBoundItem As GridDataItem = e.Item

            Dim dataRow As DataRowView = dataBoundItem.DataItem

            Dim index As Integer = dataBoundItem.ItemIndex


            dataBoundItem("Circ").Attributes.Add("onChange", "javascript:validateCirc(" & index & ");")

        End If

    End Sub

But when I run my application, change the value in the text box and tab off, I get no javascript call. I look at the html created and see the onChange is attached to the <td> tag of my cell instead of the <input> tag of the text box. Could that be the reason and if so, what do I do to change this.

<td onChange="javascript:validateCirc(5);"><input name="RadGrid1$ctl00$ctl14$Circ" type="text" value="536" id="RadGrid1_ctl00_ctl14_Circ" /></td>

When I leave the code as part of the MyEditTemplate class the html created does put the onChange in the <input> tag.

<td><input name="RadGrid1$ctl00$ctl14$Circ" type="text" value="536" id="RadGrid1_ctl00_ctl14_Circ" onChange="javascript:validateCirc(5);" /></td><

[David Kucharski]

Private Sub RadGrid1_ItemCreated(sender As Object, e As Telerik.Web.UI.GridItemEventArgs) Handles RadGrid1.ItemCreated
        If e.Item.ItemType = GridItemType.AlternatingItem Or e.Item.ItemType = GridItemType.Item Then
            Dim dataBoundItem As GridDataItem = e.Item
            Dim dataRow As DataRowView = dataBoundItem.DataItem
            Dim index As Integer = dataBoundItem.ItemIndex

            Dim textBox1 As TextBox

            textBox1 = dataBoundItem("Circ").FindControl("Circ")
            textBox1.Attributes.Add("onChange", "javascript:validateCirc(" & index & ");")
        End If
    End Sub

I think I might have it now.

I put the following code in and it seems to work