HTML 5 Video in Edit Form in RadGrid

[Ed Lance]

This part of our app allows users to have video file associated with a case.  The video file is on disk, and a database record has the metadata for the video.  When they edit the record in the RadGrid, the edit template contains a video tag so they can view the video.  This works well in the basic sense, the path is pulled from the database and put in the video tag when you edit the record.

Then I tried to get clever.  I found this: http://videojs.com/ which adds some functionality.  If you read their directions, if you have an ajax situation, you need to call a js function to configure your video tag.  So I added that in a RadScriptBlock in the Edit template.  The problem is, the script only works some of the time.  It always works on the first record you edit, but then may or may not if you open other records to edit.  I've tried various things, but I don't really know what to do to get that _V_ function to be called every time the grid edits.

Any suggestions?  If nothing else, here's a good sample of how to show a video with html 5 inside a RadGrid.

All this below is inside of an update panel.

At the top of the page, the video.js reference:

<telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">
    <script src="http://vjs.zencdn.net/c/video.js" type="text/javascript"></script>
</telerik:RadScriptBlock>

And the grid:

<telerik:RadGrid ID="CaseVideosRadGrid" runat="server" AllowPaging="True" AllowSorting="True" AutoGenerateColumns="False" CellSpacing="0" DataSourceID="VideosSqlDataSource" GridLines="None">
<MasterTableView DataKeyNames="VideoID" DataSourceID="VideosSqlDataSource"  AllowAutomaticDeletes="True" AllowAutomaticUpdates="True" EditMode="PopUp">
<CommandItemSettings ExportToPdfText="Export to PDF"></CommandItemSettings>

<RowIndicatorColumn Visible="True" FilterControlAltText="Filter RowIndicator column">
<HeaderStyle Width="20px"></HeaderStyle>
</RowIndicatorColumn>

<ExpandCollapseColumn Visible="True" FilterControlAltText="Filter ExpandColumn column">
<HeaderStyle Width="20px"></HeaderStyle>
</ExpandCollapseColumn>

    <Columns>
        <telerik:GridEditCommandColumn FilterControlAltText="Filter EditCommandColumn column" ItemStyle-Width="50px" HeaderStyle-Width="50px">
            <HeaderStyle Width="50px"></HeaderStyle>
            <ItemStyle Width="50px"></ItemStyle>
        </telerik:GridEditCommandColumn>
        <telerik:GridButtonColumn ConfirmText="Delete this Video? This cannot be undone." ConfirmDialogType="RadWindow"
            ConfirmTitle="Delete" ButtonType="ImageButton" CommandName="Delete" Text="Delete" UniqueName="DeleteColumn">
            <ItemStyle HorizontalAlign="Center" CssClass="MyImageButton" Width="50" />
        </telerik:GridButtonColumn>
        <telerik:GridBoundColumn DataField="VideoID" DataType="System.Int32" FilterControlAltText="Filter VideoID column" HeaderText="VideoID" ReadOnly="True" SortExpression="VideoID" UniqueName="VideoID" Visible="false">
        </telerik:GridBoundColumn>
        <telerik:GridBoundColumn DataField="videoAdrIdx" DataType="System.Int32" FilterControlAltText="Filter videoAdrIdx column" HeaderText="Address" SortExpression="videoAdrIdx" UniqueName="videoAdrIdx" Visible="false">
        </telerik:GridBoundColumn>
        <telerik:GridBoundColumn DataField="videoInspectionTypeIdx" DataType="System.Int32" FilterControlAltText="Filter videoInspectionTypeIdx column" HeaderText="Inspection Type" SortExpression="videoInspectionTypeIdx" UniqueName="videoInspectionTypeIdx" Visible="false">
        </telerik:GridBoundColumn>
        <telerik:GridBoundColumn DataField="videoDiskFilename" FilterControlAltText="Filter videoDiskFilename column" HeaderText="Video" SortExpression="videoDiskFilename" UniqueName="videoDiskFilename">
        </telerik:GridBoundColumn>
        <telerik:GridBoundColumn DataField="videoBatch" DataType="System.Int32" FilterControlAltText="Filter videoBatch column" HeaderText="Batch" SortExpression="videoBatch" UniqueName="videoBatch" ReadOnly="True">
            <ItemStyle HorizontalAlign="Center" />
        </telerik:GridBoundColumn>
        <telerik:GridBoundColumn DataField="videoCaption" FilterControlAltText="Filter videoCaption column" HeaderText="Caption" SortExpression="videoCaption" UniqueName="videoCaption">
        </telerik:GridBoundColumn>
        <telerik:GridBoundColumn DataField="videoLocation" FilterControlAltText="Filter videoLocation column" HeaderText="Location" SortExpression="videoLocation" UniqueName="videoLocation">
        </telerik:GridBoundColumn>
        <telerik:GridBoundColumn DataField="videoFieldNotes" FilterControlAltText="Filter videoFieldNotes column" HeaderText="Field Notes" SortExpression="videoFieldNotes" UniqueName="videoFieldNotes" Visible="false">
        </telerik:GridBoundColumn>
        <telerik:GridBoundColumn DataField="videoCreatedOn" DataType="System.DateTime" FilterControlAltText="Filter videoCreatedOn column" HeaderText="Date" SortExpression="videoCreatedOn" UniqueName="videoCreatedOn" DataFormatString="{0:d}" ReadOnly="True">
        </telerik:GridBoundColumn>
   </Columns>

<EditFormSettings CaptionFormatString="Edit Info for Video: {0}" CaptionDataField="videoDiskFilename" EditFormType="Template">
<EditColumn FilterControlAltText="Filter EditCommandColumn column"></EditColumn>
    <FormTemplate>
        <br />
        <table cellspacing="2" border="0" width="100%">
            <tr>
                <td rowspan="5">
                    <video id='example_video_<%# Eval("VideoID") %>' class="video-js vjs-default-skin" controls width="320" height="240" preload="auto">
                        <source type="video/mp4" src='<%# Eval("FullPath") %>'>
                    </video>
                    <telerik:RadScriptBlock runat="server">
                     <script type="text/javascript">

                         var myPlayer = _V_('example_video_<%# Eval("VideoID") %>');

                    </script>
                    </telerik:RadScriptBlock>
                </td>
                <td>
                    <table cellspacing="2" border="0" width="100%">
                        <tr>
                            <td class="formlabel">
                                Inspection:
                            </td>
                            <td>
                                <asp:DropDownList ID="InspectionDropDownList" runat="server" DataSourceID="MiscListSqlDataSource" DataTextField="mscName" DataValueField="mscIdx" SelectedValue='<%# Bind( "videoInspectionTypeIdx") %>' AppendDataBoundItems="True">
                                    <asp:ListItem Value="-1" Text="---"></asp:ListItem>
                                </asp:DropDownList>
                            </td>
                        </tr>
                        <tr>
                            <td class="formlabel">
                                Location:
                            </td>
                            <td>
                                <asp:TextBox ID="LocationTextBox" runat="server" Text='<%# Bind( "videoLocation") %>' MaxLength="255"></asp:TextBox>
                            </td>
                        </tr>
                        <tr>
                            <td class="formlabel">
                                Address:
                            </td>
                            <td>
                                 <asp:DropDownList ID="videoAddressDropDownList" runat="server" DataSourceID="AddressSqlDataSource" DataTextField="adrFullname" DataValueField="adrIdx" AppendDataBoundItems="True"  SelectedValue='<%# Bind( "videoAdrIdx") %>'>
                                    <asp:ListItem Value="-1" Text="---"></asp:ListItem>
                                </asp:DropDownList>
                            </td>
                        </tr>
                    </table>

                </td>
            </tr>
        </table>
        <table cellspacing="2" border="0" width="100%">
             <tr>
                <td class="formlabel">
                    Caption:
                </td>
                <td >
                    <asp:TextBox ID="CaptionTextBox" runat="server" Text='<%# Bind( "videoCaption") %>' Width="500" MaxLength="255"></asp:TextBox>
                </td>
            </tr>
             <tr>
                <td class="formlabel">
                    Field Notes:
                </td>
                <td >
                    <asp:TextBox ID="FieldNotesTextBox" runat="server" Text='<%# Bind( "videoFieldNotes") %>' Width="500" TextMode="MultiLine"></asp:TextBox>
                </td>
            </tr>
       </table>
        <table style="width: 100%">
            <tr>
                <td align="right" colspan="2">
                    <asp:Button ID="Button1" Text='<%# Iif (TypeOf Container is GridEditFormInsertItem, "Insert", "Update") %>'
                        runat="server" CommandName='<%# Iif (TypeOf Container is GridEditFormInsertItem, "PerformInsert", "Update") %>'>
                    </asp:Button>
                    <asp:Button ID="Button2" Text="Cancel" runat="server" CausesValidation="False" CommandName="Cancel">
                    </asp:Button>
                </td>
            </tr>
        </table>
    </FormTemplate>
    <PopUpSettings Width="800" Modal="true"  />
</EditFormSettings>
</MasterTableView>

<FilterMenu EnableImageSprites="False"></FilterMenu>
</telerik:RadGrid>

[Antonio Stoilkov]

Hi Ed,

You could try resolving your issue by wrapping the code in a pageLoad function.

<script type="text/javascript">
    function pageLoad()
    {
        var myPlayer = _V_('example_video_<%# Eval("VideoID") %>');
    }
</script>

Additionally, you could try disabling the ajax by setting EnableAjax to false on RadAjaxManager or RadAjaxPanel controls to observe if the issue still persists.

Greetings,
Antonio Stoilkov
the Telerik team