Grid - Virtualization - adding Javascript onclick event on itemdatabound

[Calsh]

Problem adding javascript onclick event to gridbuttoncolumn in code behind when using grid virtualization - when virtualisation = false works Ok i.e. when user clicks on the button an image is displayed in a lightbox - when virualisation = true link does not work - attached is code within itemdatabound event from a test project that I setup - thanks

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

        If TypeOf e.Item Is GridDataItem Then

            Dim item As GridDataItem = DirectCast(e.Item, GridDataItem)

            Dim imageTitle As String = ""
            Dim imageDescription As String = ""
            Dim imageName As String = "~/Images/Refresh.gif"

            Dim ImageButton1 As ImageButton = DirectCast(item("Image1").Controls(0), ImageButton)

ImageButton1.Attributes.Add("onclick", "showImage('" & imageTitle & "','" & imageDescription & "','" & imageName & "'); return false;")

        End If

    End Sub

[Milena]

Hello,

We replicated the same issue on our end. We will investigate the problem locally and come back to you with our findings as soon as more information on this matter is available.

Regards,
Milena
Telerik

[Milena]

Hello,

Could you please modify the code in ItemDataBound as clear any client click event handler and then add onclick attribute:

Protected Sub RadGrid1_ItemDataBound(sender As Object, e As Telerik.Web.UI.GridItemEventArgs)
    If TypeOf e.Item Is GridDataItem Then
        Dim dataItem As GridDataItem = TryCast(e.Item, GridDataItem)
        Dim btn As ImageButton = DirectCast(dataItem("ButtonColumn").Controls(0), ImageButton)
        btn.ImageUrl = "~/Images/Refresh.gif"
        btn.OnClientClick = String.Empty
        btn.Attributes("onclick") = "showImage(); return false;"
    End If

End Sub

Regards,
Milena
Telerik

[Calsh]

Your solution works - but got the following 3 x issues (only when virtualization is enabled/true)

Issue 1:

When page first loads the data/fields within each record in the grid are displayed correctly - however there are 2 x vertical scrollbars on the grid - a small scrollbar at the top and a larger scrollbar beneath - the top scrollbar seems to page and the lower scrollbar seems to scroll within the displayed set of records - see attached image - I'm using 'NextPrevNumericAndAdvanced' option for paging.



Issue 2:

Within the itemdatabound event I have set the code to get the image Title, Description and Path from an OpenAccessLinqDataSource and only display a link/ImageButton to the image if the image Path is not 'blank' i.e. an image exists for that record - see code below: - this works as expected when the page first loads - however if I page or scroll an imageButton is displayed in each row i.e. including those rows/records that have no associated image - clicking on a link displays an image in the lightbox



Some imageButtons have a blue border around them (see attached image) - blue border seems to be displayed randomly within recordset - if I click on an image with a blue border the 2 x vertical scrollbars on the grid disappear and a single scrollbar is displayed? - however the image/link is still displayed for each row (even those that should have no associated image).



(In the code I compare imageName <> &nbsp; - the Format Code Block seems to have replaced &nbsp; with 'blank')

If TypeOf e.Item Is GridDataItem Then
    Dim item As GridDataItem = TryCast(e.Item, GridDataItem)
    Dim imageTitle As String = item("ImageTitle").Text
    Dim imageDescription As String = item("ImageDescription").Text
    Dim imageName As String = item("ImageName").Text
    Dim ImageButton1 As ImageButton = DirectCast(item("Image1").Controls(0), ImageButton)

    ImageButton1.OnClientClick = String.Empty

    If imageName <> " " Then
        ImageButton1.Attributes("onclick") = "showImage('" & imageTitle & "','" & imageDescription & "','" & imageName & "'); return false;"
    Else
        ImageButton1.Visible = False
    End If
End If

Below is 'settings part' of grid in case of any use

<telerik:RadGrid ID="RadGrid1" runat="server" AllowFilteringByColumn="True" AllowPaging="True"
    CellSpacing="0" DataSourceID="OpenAccessLinqDataSource1" Width="100%" Height="100%"
    GridLines="None" PageSize="200" GroupingEnabled="False"
AllowSorting="True" AutoGenerateColumns="False">
    <ClientSettings>
        <Virtualization EnableVirtualization="True" InitiallyCachedItemsCount="2000" ItemsPerView="100" />
        <Scrolling AllowScroll="True" UseStaticHeaders="True" />
    </ClientSettings>
    <MasterTableView DataKeyNames="AfmID"
        TableLayout="Fixed" DataSourceID="OpenAccessLinqDataSource1">

Issue 3:

Within the grid I have a DropDownColumn with a FilterTemplate - which in this example displays the company name instead of companyID - see sample code below. When the page first loads the company name is displayed as expected - but when you Page the company name is replaced by the companyID - this happens for other DropDownColumns

<telerik:GridDropDownColumn UniqueName="BrandName" DataSourceID="OpenAccessLinqDataSource2"
    DataField="BrandNameID" HeaderText="Brand Name" SortExpression="CompanyName"
    ListValueField="CompanyID" AllowSorting="true" ListTextField="CompanyName" DropDownControlType="DropDownList">
    <FilterTemplate>
        <telerik:RadSearchBox ID="RadSearchBoxBrandName" runat="server" DataSourceID="OpenAccessLinqDataSource2"
            DataTextField="CompanyName" DataValueField="CompanyID" ShowSearchButton="True"
            OnSearch="RadSearchBoxBrandName_Search" HighlightFirstMatch="True" DropDownSettings-Width="100%"
            DropDownSettings-Height="500px">
        </telerik:RadSearchBox>
    </FilterTemplate>
</telerik:GridDropDownColumn>

(The above 3 x issues occur in my test page - which is a much simpler version of my development page)





Separate Issue or related?

Don't think that this is related to problem but only occurs when virtualisation is True - when I set the paging option to 'slider' - paging works (with above issues) but in design view get error as below:



RadGrid - RadGrid1System.Web.HttpException (0x80004005): Response is not available in this context. at System.Web.UI.Page.get_Response() at Telerik.Web.UI.GridPagerItem.GeneratePageSizeAttributeLink(Int32 pageSize, Boolean replacePageIndexWithInt32MinValue) at Telerik.Web.UI.GridPagerItem.CreateSliderNavigationControls(Control container, Boolean isSeoPaging) at Telerik.Web.UI.GridPagerItem.InitializePagerItem(GridColumn[] columns) at Telerik.Web.UI.GridPagerItem.SetupItem(Boolean dataBind, Object dataItem, GridColumn[] columns, ControlCollection rows) at Telerik.Web.UI.GridTableView.CreateTopPagerItem(Boolean useDataSource, GridColumn[] copiedColumnSet, Boolean isPagingEnabled, GridTHead thead) at Telerik.Web.UI.GridTableView.CreateControlHierarchy(Boolean useDataSource) at Telerik.Web.UI.GridTableView.CreateChildControls(IEnumerable dataSource, Boolean useDataSource) at System.Web.UI.WebControls.CompositeDataBoundControl.PerformDataBinding(IEnumerable data) at System.Web.UI.WebControls.DataBoundControl.OnDataSourceViewSelectCallback(IEnumerable data) at System.Web.UI.DataSourceView.Select(DataSourceSelectArguments arguments, DataSourceViewSelectCallback callback) at System.Web.UI.WebControls.DataBoundControl.PerformSelect() at Telerik.Web.UI.GridTableView.PerformSelect() at Telerik.Web.UI.GridTableView.DataBind() at Telerik.Web.UI.RadGrid.DataBind() at System.Web.UI.Design.WebControls.DataBoundControlDesigner.DataBind(BaseDataBoundControl dataBoundControl) at Telerik.Web.Design.RadGridDesigner.DataBind(BaseDataBoundControl dataBoundControl) at System.Web.UI.Design.WebControls.BaseDataBoundControlDesigner.GetDesignTimeHtml()

[Milena]

Hello,

Issue 1:  We are aware of this issue and there is a fix available for it in our latest official release- Q3 2013 SP2, I would recommend you to download it and verify if the problem still exists.

Issue 2: Please note, the logic that is performed on ItemDataBound event will work only for the items that are initially loaded on the page. Virtualization functionality is using  client side databinding, so in order to achieve the desired functionality it is necessary to execute the logic of ItemDataBound event on the client.                                                     
Issue 3: I am not able to replicate this issue. Could you provide a runnable project with dummy data, which we will use to investigate the problem?

In regard of the last issue(design time error), I replicated the same problem on my end and logged it as a bug in our tracking system. Our developer will ensure a proper fix for it in some of our future releases.

Regards,
Milena
Telerik

[Calsh]

Ok thanks

I will make sure I have the latest version and also try to setup dummy project - please give me a few days to sort out

Thanks

[Calsh]

Hi

Issue 1:
I've downloaded the latest version (Telerik.Web.UI.dll is v2013.3.1324.40, runtime = v4.0.30319) and upgraded OpenAccess etc. - so as far as I know should be up to date

Still getting double scrollbars

Issue 2:
Struggling on how to implement client side equivalent of server ItemDataBound logic i.e. using OnRowDataBound on client side but not sure how to replicate server code as below on client

Thanks

ImageButton1.OnClientClick = String.Empty

If imageName <> " " Then
      ImageButton1.Attributes("onclick") = "showImage('" & imageTitle & "','" & imageDescription & "','" & imageName & "'); return false;"
Else
       ImageButton1.Visible = False
End If

[Antonio Stoilkov]

Hi Colman,

Regarding your first issue: I would suggest assembling a sample project showing the unwanted behavior so we could investigate it and advice you with the best possible solution. You could open a formal ticket and upload the project there.

Regarding your second issue: You could take a look at the "Accessing Cells in Client-Side Code" section in the help article below where it is described how to access cell values and additionally take a look at the other help articles in order to get to know the RadGrid client-side API. If you have any additional questions during implementing the client-side RowDataBound method please do not hesitate to contact us again.

• http://www.telerik.com/help/aspnet-ajax/grid-accessing-cells-and-rows.html
• http://www.telerik.com/help/aspnet-ajax/grid-getting-familiar-with-client-side-api.html
• http://www.telerik.com/help/aspnet-ajax/grid-getting-cell-values-for-selected-rows-client-side.html

Regards,
Antonio Stoilkov
Telerik