Rad Grid Get Inserted Item Cell Client Side

13 posts, 0 answers
  1. Tracy
    Tracy avatar
    118 posts
    Member since:
    Nov 2010

    Posted 28 Feb 2013 Link to this post

    Hi,

    I have a rad grid that I am using in place editing/inserting.  In the grid I have a rad color picker.  When in edit mode, when I change the 
    color in the rad color picker I change the background color of another column to the color selected.  I am using the OnClientColorChange event of the rad color picker to do this using the following script;
    function ColorChangeEdit(sender, eventArgs) {
                var color = sender.get_selectedColor();
                var RadGrid = $find("rgvMainGrid");
                var MasterTable = RadGrid.get_masterTableView();
                var SelectedRows = RadGrid.get_selectedItems();
                if (SelectedRows.length > 0) {
                    for (var i = 0; i < SelectedRows.length; i++) {
                        var row = SelectedRows[i];
                        var description = row.findElement("txtEditShortDescription");
                        description.style.backgroundColor = color;
                    }
                }
            }

    I am trying to implement the same functionality while in insert mode but am having a problem getting the correct reference to the field whose background color I want to change.  I have the following script but I keep getting the error message
    Error: 'undefined' is null or not an object and it points to the line ...

    var description = row.findElement("txtInsertShortDescription");

    So my question is, how do I reference a particular cell from the insert record.

    Thank you for your help.

    Tracy




    function ColorChangeInsert(sender, eventArgs) {
               var color = sender.get_selectedColor();
               var RadGrid = $find("<%= rgvMainGrid.ClientID %>");
               var MasterTable = RadGrid.get_masterTableView();
               var insertRow = MasterTable.get_insertItem();
               var row = insertRow[0];
               var description = row.findElement("txtInsertShortDescription");
               description.style.backgroundColor = color;
           }


  2. Jayesh Goyani
    Jayesh Goyani avatar
    2732 posts
    Member since:
    May 2010

    Posted 01 Mar 2013 Link to this post

    Hello,


    <Columns>
                       <telerik:GridBoundColumn DataField="ID" UniqueName="ID" HeaderText="ID">
                       </telerik:GridBoundColumn>
                       <telerik:GridBoundColumn DataField="Name" UniqueName="Name" HeaderText="Name">
                       </telerik:GridBoundColumn>
                       <telerik:GridTemplateColumn UniqueName="Color">
                           <EditItemTemplate>
                               <telerik:RadColorPicker ID="RadColorPicker1" Height="500px" Width="500px" runat="server"
                                   OnClientColorChanging="ClientColorChange">
                               </telerik:RadColorPicker>
                           </EditItemTemplate>
                       </telerik:GridTemplateColumn>
                       <telerik:GridTemplateColumn UniqueName="ColorTxt">
                           <EditItemTemplate>
                               <telerik:RadTextBox ID="RadTextBox1" runat="server">
                               </telerik:RadTextBox>
                           </EditItemTemplate>
                       </telerik:GridTemplateColumn>
                       <telerik:GridEditCommandColumn>
                       </telerik:GridEditCommandColumn>
                   </Columns>
    function ClientColorChange(sender, args) {
     
                   var txt = $("#" + sender._element.id.replace('RadColorPicker1', 'RadTextBox1')).get(0);
                   txt.style.backgroundColor = args.get_newColor();
               }


    Thanks,
    Jayesh Goyani
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Tracy
    Tracy avatar
    118 posts
    Member since:
    Nov 2010

    Posted 01 Mar 2013 Link to this post

    Hi Jayesh,

    I tried your solution and I get the error message Object doesn't support this property or method and it highlights the following line 

    var txt = $("#" + sender._element.id.replace('rcpInsertDisplayColor', 'txtInsertShortDescription')).get(0);


    I noticed in your example you are using the edit item template.  If you read my post below, I can get this to work when editing, I am trying to get it to work when inserting.


    Thank You
    Tracy

     

     

     

  5. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 02 Mar 2013 Link to this post

    Hi,

    Try the following code to achieve your scenario.
    C#:
    protected void RadGrid1_ItemDataBound(object sender, Telerik.Web.UI.GridItemEventArgs e)
       {
           if (e.Item is GridDataInsertItem && e.Item.OwnerTableView.IsItemInserted)
           {
               GridDataInsertItem item = (GridDataInsertItem)e.Item;
               RadColorPicker pkr = (RadColorPicker)item.FindControl("RadColorPicker1");
               pkr.OnClientColorChange = "OnClientColorChange";
               TextBox txt = (TextBox)item.FindControl("TextBox1");
               RadGrid1.Controls.Add(new LiteralControl("<script type='text/javascript'>window['txt'] = '" + txt.ClientID + "';</script>"));
           }
       }
    JS:
    function OnClientColorChange(sender,args) {
           var txt = document.getElementById(window['txt']);
           var color = sender.get_selectedColor();
            txt.style.backgroundColor = color;
       }

    Thanks,
    Princy
  6. Jayesh Goyani
    Jayesh Goyani avatar
    2732 posts
    Member since:
    May 2010

    Posted 02 Mar 2013 Link to this post

    Hello,

    i think you are not able to find txtInsertShortDescription using jquery.

    Can you please provide your code, so i can try to resolve your issue?

    Please also check blelow link/demo, may be it will help you

    http://jayeshgoyani.blogspot.in/2012/07/access-another-control-which-was-in.html

    Thanks,
    Jayesh Goyani
  7. Tracy
    Tracy avatar
    118 posts
    Member since:
    Nov 2010

    Posted 03 Mar 2013 Link to this post

    Hi Princy,

    Thank you for your response.  I tried your suggestion but I get the error Object required on the following line.
    description.style.backgroundColor.color;

    Below is the javascript function

    function ColorChangeInsert(sender, eventArgs) {

    var color = sender.get_selectedColor();

    var description = document.getElementById(window['txtShortDescription']);

    description.style.backgroundColor = color;

    }

    The following is the code I added to the grid item databound event.    I checked to make sure that the client id was being retrieved correctly but it doesn't seem to be able to get to it in the javascript.

    If TypeOf e.Item Is GridDataInsertItem And e.Item.OwnerTableView.IsItemInserted Then

    Dim Row As GridDataInsertItem = DirectCast(e.Item, GridDataInsertItem)

    Dim txtShortDescription As TextBox = TryCast(Row.FindControl("txtInsertShortDescription"), TextBox)

    rgvMainGrid.Controls.Add(New LiteralControl("<script type='text/javascript'>window['txtShortDescription'] = '" + txtShortDescription.ClientID + "';</script>"))

    End If

    Thanks for your help.

    Tracy

  8. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 03 Mar 2013 Link to this post

    Hi,

    Unfortunately I cannot replicate the issue at my end. Here is the full code for your reference.
    aspx:
    <telerik:RadGrid AutoGenerateColumns="false" ID="RadGrid1" runat="server" DataSourceID="SqlDataSource2"
    OnItemDataBound="RadGrid1_ItemDataBound">
               <MasterTableView CommandItemDisplay="Top" EditMode="InPlace">
                   <Columns>
                       <telerik:GridTemplateColumn HeaderText="TemplateColumn1">
                           <EditItemTemplate>
                               <telerik:RadColorPicker ID="RadColorPicker1" runat="server">
                               </telerik:RadColorPicker>
                           </EditItemTemplate>
                       </telerik:GridTemplateColumn>
                       <telerik:GridTemplateColumn HeaderText="TemplateColumn2">
                           <EditItemTemplate>
                               <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
                           </EditItemTemplate>
                       </telerik:GridTemplateColumn>
                   </Columns>
               </MasterTableView>
           </telerik:RadGrid>
    VB:
    Protected Sub RadGrid1_ItemDataBound(sender As Object, e As Telerik.Web.UI.GridItemEventArgs)
        If TypeOf e.Item Is GridDataInsertItem AndAlso e.Item.OwnerTableView.IsItemInserted Then
            Dim item As GridDataInsertItem = DirectCast(e.Item, GridDataInsertItem)
            Dim pkr As RadColorPicker = DirectCast(item.FindControl("RadColorPicker1"), RadColorPicker)
            pkr.OnClientColorChange = "OnClientColorChange"
            Dim txt As TextBox = DirectCast(item.FindControl("TextBox1"), TextBox)
            RadGrid1.Controls.Add(New LiteralControl("<script type='text/javascript'>window['txt'] = '" + txt.ClientID + "';</script>"))
        End If
     
    End Sub
    JS:
    function OnClientColorChange(sender,args) {
           var txt = document.getElementById(window['txt']);
           var color = sender.get_selectedColor();
            txt.style.backgroundColor = color;
       }

    Thanks,
    Shinu
  9. Tracy
    Tracy avatar
    118 posts
    Member since:
    Nov 2010

    Posted 04 Mar 2013 Link to this post

    Hi Shinu,

    The difference between your code and my code is that I am using an insert template.  What I am trying to do is when the rcpInsertColorDisplay color is changed during insert, the txtInsertShortDescription backgroundcolor should be changed to the selected color.  I am able to get this to work while in edit but I can't get it to work when in insert.

    Thank You
    Tracy
    If TypeOf e.Item Is GridDataInsertItem And e.Item.OwnerTableView.IsItemInserted Then
              Dim Row As GridDataInsertItem = DirectCast(e.Item, GridDataInsertItem)
              Dim txtShortDescription As TextBox = TryCast(Row.FindControl("txtInsertShortDescription"), TextBox)
              rgvMainGrid.Controls.Add(New LiteralControl("<script type='text/javascript'>window['txtShortDescription'] = '" + txtShortDescription.ClientID + "';</script>"))
          End If

    //This works for edit mode
            function ColorChangeEdit(sender, eventArgs) {
                var color = sender.get_selectedColor();
                var RadGrid = $find("<%= rgvMainGrid.ClientID %>");
                var MasterTable = RadGrid.get_masterTableView();
                var SelectedRows = RadGrid.get_selectedItems();
                if (SelectedRows.length > 0) {
                    for (var i = 0; i < SelectedRows.length; i++) {
                        var row = SelectedRows[i];
                        var description = row.findElement("txtEditShortDescription");
                        description.style.backgroundColor = color;
                    }
                }
            }
     
    //This does not work
            function ColorChangeInsert(sender, eventArgs) {     
                var color = sender.get_selectedColor();
                var description = document.getElementById(window['txtShortDescription']);
                description.style.backgroundColor = color;
               
            }

    <MasterTableView    DataSourceID="SQLDS_MilestoneMaster" Name="MasterGrid"               EnableNoRecordsTemplate="true"   ShowHeadersWhenNoRecords="true"   
                                         EnableViewState="true"               AllowMultiColumnSorting="true"                         
                                         EditMode="InPlace"                   CommandItemDisplay="Top"        DataKeyNames="MilestoneId">
                     <CommandItemTemplate>
                         <asp:Table ID="tblCommandTemplate" runat="server" Width="1230px" CellSpacing="0" CellPadding="0">
                             <asp:TableRow ID="trowCommandTemplate1" Height="25px" runat="server" style="display:block;"  >
                                 <asp:TableCell ID="tcell1" runat="server">
                                     <telerik:RadButton ID="rbtAdd"              runat="server" CommandName="InitInsert"       Skin="Transparent" Text="Add"     Icon-PrimaryIconURL="<%$ Resources:Images,AddRecord16%>"    style="position:absolute;left:10px;font-size:10px;"  ToolTip="Add New Record"     Visible='<%# rgvMainGrid.EditIndexes.Count=0 and Not rgvMainGrid.MasterTableView.IsItemInserted %>'   /> 
                                     <telerik:RadButton ID="rbtEdit"             runat="server" CommandName="EditSelected"     Skin="Transparent" Text="Edit"    Icon-PrimaryIconURL="<%$ Resources:Images,EditRecord16%>"   style="position:absolute;left:70px;font-size:12px;"  ToolTip="Edit Record"        Visible='<%# rgvMainGrid.EditIndexes.Count=0 and Not rgvMainGrid.MasterTableView.IsItemInserted %>' OnClientClicking="EditOnClientClicking"/>  
                                     <telerik:RadButton ID="rbtDelete"           runat="server" CommandName="DeleteSelected"   Skin="Transparent" Text="Delete"  Icon-PrimaryIconURL="<%$ Resources:Images,DeleteRecord16%>" style="position:absolute;left:129px;font-size:12px;" ToolTip="Delete Record"      Visible='<%# rgvMainGrid.EditIndexes.Count=0 and Not rgvMainGrid.MasterTableView.IsItemInserted %>'  OnClientClicking="DeleteOnClientClicking"/>   
                                     <telerik:RadButton ID="rbtCancel"           runat="server" CommandName="CancelAll"        Skin="Transparent" Text="Cancel"  Icon-PrimaryIconURL="<%$ Resources:Images,CancelRecord16%>" style="position:absolute;left:10px;font-size:12px;"  ToolTip="Cancel Add/Edit"    Visible='<%# rgvMainGrid.EditIndexes.Count > 0 Or rgvMainGrid.MasterTableView.IsItemInserted %>'     OnClientClicking="CancelOnClientClicking"/> 
                                     <telerik:RadButton ID="rbtSaveNew"          runat="server" CommandName="PerformInsert"    Skin="Transparent" Text="Save"    Icon-PrimaryIconURL="<%$ Resources:Images,SaveRecord16%>"   style="position:absolute;left:80px;font-size:12px;"  ToolTip="Save New Record"    Visible='<%# rgvMainGrid.MasterTableView.IsItemInserted%>'                                           />  
                                     <telerik:RadButton ID="rbtSave"             runat="server" CommandName="UpdateEdited"     Skin="Transparent" Text="Save"    Icon-PrimaryIconURL="<%$ Resources:Images,SaveRecord16%>"   style="position:absolute;left:80px;font-size:12px;"  ToolTip="Save Edited Record" Visible='<%# rgvMainGrid.EditIndexes.Count > 0 AND Not rgvMainGrid.MasterTableView.IsItemInserted%>'/> 
                                     <telerik:RadButton ID="rbtExportToExcel"    runat="server" CommandName="ExportToExcel"    Skin="Transparent" Text="Export"  Icon-PrimaryIconURL="<%$ Resources:Images,Excel16%>"        style="position:absolute;left:1159px;font-size:12px;"   ToolTip="Export To Excel" />
                                     <asp:Label ID="lblTest" runat="server" Text="test" />
                                    
                                 </asp:TableCell>
                             </asp:TableRow>
                         </asp:Table>
                     </CommandItemTemplate>
                     <NoRecordsTemplate> <div>There are no records to display. </div></NoRecordsTemplate>
                             <Columns>  
                             <telerik:GridBoundColumn        UniqueName="MilestoneId"                    DataField="MilestoneId"         HeaderText="Id"           HeaderStyle-HorizontalAlign="Center" ReadOnly="true"  HeaderStyle-Width="50px" />
                                 <telerik:GridTemplateColumn UniqueName="gtcMilestoneDescription"        DataField="MilestoneDescription"    HeaderText="Description"  HeaderStyle-Width="210px"   ItemStyle-HorizontalAlign="Left" >
                                     <ItemTemplate><asp:Label         ID="lblMilestoneDescription"       runat="server" Width="200px" Text='<%# Bind("MilestoneDescription") %>' /></ItemTemplate>
                                     <EditItemTemplate><asp:TextBox   ID="txtEditMilestoneDescription"   runat="server" Width="190px" CssClass="TextBox_FlatBorder_Thin_Gray TextBox_Medium_Left" Text='<%# Bind("MilestoneDescription") %>'/></EditItemTemplate>
                                     <InsertItemTemplate><asp:TextBox ID="txtInsertMilestoneDescription" runat="server" Width="190px" CssClass="TextBox_FlatBorder_Thin_Gray TextBox_Medium_Left"/></InsertItemTemplate>                                           
                                 </telerik:GridTemplateColumn>
                                 <telerik:GridTemplateColumn UniqueName="gtcShortDescription"            DataField="ShortDescription"      HeaderText="Short Description"  HeaderStyle-Width="150px"   ItemStyle-HorizontalAlign="Left" >
                                     <ItemTemplate><asp:Label         ID="lblShortDescription"           runat="server" Width="140px" Text='<%# Bind("ShortDescription") %>'/></ItemTemplate>
                                     <EditItemTemplate><asp:TextBox   ID="txtEditShortDescription"       runat="server" Width="120px" CssClass="TextBox_FlatBorder_Thin_Gray TextBox_Medium_Left" Text='<%# Bind("ShortDescription") %>'/></EditItemTemplate>
                                     <InsertItemTemplate><asp:TextBox ID="txtInsertShortDescription"     runat="server" Width="120px" CssClass="TextBox_FlatBorder_Thin_Gray TextBox_Medium_Left" /></InsertItemTemplate>
                                </telerik:GridTemplateColumn>
                                 <telerik:GridTemplateColumn UniqueName="gtcDisplayColor"   DataField="DisplayColor"      HeaderStyle-Width="55px"   ItemStyle-HorizontalAlign="Left" Display="true" >
                                     <ItemTemplate></ItemTemplate>
                                     <EditItemTemplate><telerik:RadColorPicker   ID="rcpEditDisplayColor"    runat="server" ShowIcon="true" Skin="Office2010Silver" PaletteModes="HSB" OnClientColorChange="ColorChangeEdit" /></EditItemTemplate>
                                     <InsertItemTemplate><telerik:RadColorPicker ID="rcpInsertDisplayColor"  runat="server" ShowIcon="true" Skin="Office2010Silver" PaletteModes="HSB" OnClientColorChange="ColorChangeInsert"/></InsertItemTemplate>
                                 </telerik:GridTemplateColumn>
                                 <telerik:GridTemplateColumn UniqueName="gtcListOrder"   DataField="ListOrder"      HeaderText="Order"  HeaderStyle-Width="60px"   ItemStyle-HorizontalAlign="Left" >
                                     <ItemTemplate><asp:Label                        ID="lblListOrder"       runat="server"      Text='<%# Bind("ListOrder") %>' Width="50px" /></ItemTemplate>
                                     <EditItemTemplate><Telerik:RadNumericTextBox    ID="rntEditListOrder"   runat="server"      MinValue="1" NumberFormat-DecimalDigits="0" DbValue='<%# Eval("ListOrder") %>'  /></EditItemTemplate>
                                     <InsertItemTemplate><Telerik:RadNumericTextBox  ID="rntInsertListOrder" runat="server"      MinValue="1" NumberFormat-DecimalDigits="0"/></InsertItemTemplate>                                           
                                 </telerik:GridTemplateColumn>
                              <telerik:GridTemplateColumn UniqueName="gtcEmailGroupId"       DataField="EmailGroupid"           HeaderText="Email Group"  HeaderStyle-Width="160px"  HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Left">
                                     <ItemTemplate><asp:Label                        ID="lblEmailGroupId"       runat="server"  Text='<%# Bind("EmailGroup") %>'  /></ItemTemplate>
                                     <EditItemTemplate><telerik:RadComboBox          ID="rcbEditEmailGroupId"   runat="server"  DataSourceID="SQLDS_EmailGroups"   DataValueField="EmailGroupId"   DataTextField="EmailGroup"      SkinId="skn_RadCombo_Silver" Width="140px" /></EditItemTemplate>
                                     <InsertItemTemplate><telerik:RadComboBox        ID="rcbInsertEmailGroupId" runat="server"  DataSourceID="SQLDS_EmailGroups"   DataValueField="EmailGroupId"   DataTextField="EmailGroup"      SkinId="skn_RadCombo_Silver" WIdth="140px" /></InsertItemTemplate>
                                 </telerik:GridTemplateColumn>
                                 <telerik:GridTemplateColumn UniqueName="gtcEmailReminderDays"   DataField="EmailReminderDays"    HeaderText="Rem. Days"  HeaderStyle-Width="60px"   ItemStyle-HorizontalAlign="Left" >
                                     <ItemTemplate><asp:Label                        ID="lblEmailReminderDays"       runat="server"   Text='<%# Bind("EmailReminderDays") %>' Width="50px" /></ItemTemplate>
                                     <EditItemTemplate><Telerik:RadNumericTextBox    ID="rntEditEmailReminderDays"   runat="server"   MinValue="1" NumberFormat-DecimalDigits="0"  DbValue='<%# Eval("EmailReminderDays") %>'  /></EditItemTemplate>
                                     <InsertItemTemplate><Telerik:RadNumericTextBox  ID="rntInsertEmailReminderDays" runat="server"   MinValue="1" NumberFormat-DecimalDigits="0"  Value="1" /></InsertItemTemplate>                                           
                                 </telerik:GridTemplateColumn>
                                  <telerik:GridTemplateColumn UniqueName="gtcActiveFlag"   DataField="ActiveFlag"      HeaderText="Active"  HeaderStyle-Width="60px"   ItemStyle-HorizontalAlign="Left" >
                                     <ItemTemplate><asp:CheckBox                     ID="chkActiveFlag"       runat="server" Checked='<%# Bind("ActiveFlag") %>' Width="50px" /></ItemTemplate>
                                     <EditItemTemplate><asp:CheckBox                 ID="chkEditActiveFlag"   runat="server" Checked='<%# Bind("ActiveFlag") %>' Width="50px" /></EditItemTemplate>
                                     <InsertItemTemplate><asp:CheckBox               ID="chkInsertActiveFlag" runat="server" Checked='true' Width="50px" /></InsertItemTemplate>                                           
                                 </telerik:GridTemplateColumn>
                                     <telerik:GridTemplateColumn UniqueName="gtcColor"   DataField="DisplayColor"  Display="false" >
                                     <ItemTemplate><asp:Label                        ID="lblDisplayColor"       runat="server"   Text='<%# Bind("DisplayColor") %>' /></ItemTemplate>
                                     <EditItemTemplate><asp:Label                    ID="lblEditDisplayColor"       runat="server"   Text='<%# Bind("DisplayColor") %>' /></EditItemTemplate>
                                     <InsertItemTemplate></InsertItemTemplate>                                           
                                 </telerik:GridTemplateColumn>
                                 <telerik:GridBoundColumn UniqueName="CreatedBy"     DataField="CreatedBy"       HeaderText="Created By"      HeaderStyle-Width="100px"   ReadOnly="true" Display="true" />
                                 <telerik:GridBoundColumn UniqueName="CreatedDate"   DataField="CreatedDate"     HeaderText="Created Date"    HeaderStyle-Width="100px"   ReadOnly="true" Display="true" DataType="System.DateTime" DataFormatString="{0:MM/dd/yy}" ItemStyle-HorizontalAlign="Center"/>
                                 <telerik:GridBoundColumn UniqueName="UpdatedBy"     DataField="UpdatedBy"       HeaderText="Updated By"      HeaderStyle-Width="100px"   ReadOnly="true" Display="true" />
                                 <telerik:GridBoundColumn UniqueName="UpdatedDate"   DataField="UpdatedDate"     HeaderText="Updated Date"    HeaderStyle-Width="100px"   ReadOnly="true" Display="true" DataType="System.DateTime" DataFormatString="{0:MM/dd/yy}" ItemStyle-HorizontalAlign="Center"/>
                         </Columns>         
                     </MasterTableView>
  10. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 04 Mar 2013 Link to this post

    Hi,

    Try modifying the code as shown below.
    VB:
    Protected Sub RadGrid1_ItemDataBound(sender As Object, e As Telerik.Web.UI.GridItemEventArgs)
        If TypeOf e.Item Is GridEditFormInsertItem AndAlso e.Item.OwnerTableView.IsItemInserted Then
            Dim item As GridEditFormInsertItem = DirectCast(e.Item, GridEditFormInsertItem)
            Dim pkr As RadColorPicker = DirectCast(item.FindControl("RadColorPicker1"), RadColorPicker)
            pkr.OnClientColorChange = "OnClientColorChange"
            Dim txt As TextBox = DirectCast(item.FindControl("TextBox1"), TextBox)
            RadGrid1.Controls.Add(New LiteralControl("<script type='text/javascript'>window['txt'] = '" + txt.ClientID + "';</script>"))
        End If
    End Sub

    Thanks,
    Shinu
  11. Tracy
    Tracy avatar
    118 posts
    Member since:
    Nov 2010

    Posted 04 Mar 2013 Link to this post

    Hi Shinu,

    I changed my code to the following but I still get the error object required on the line

    description.style.backgroundColor = color;


    If TypeOf e.Item Is GridEditFormInsertItem And e.Item.OwnerTableView.IsItemInserted Then

    Dim Row As GridEditFormInsertItem = DirectCast(e.Item, GridEditFormInsertItem)

    Dim txtShortDescription As TextBox = TryCast(Row.FindControl("txtInsertShortDescription"), TextBox)

    rgvMainGrid.Controls.Add(New LiteralControl("<script type='text/javascript'>window['txtShortDescription'] = '" + txtShortDescription.ClientID + "';</script>"))

    End If

    Thank You
    Tracy 

  12. Jayesh Goyani
    Jayesh Goyani avatar
    2732 posts
    Member since:
    May 2010

    Posted 04 Mar 2013 Link to this post

    Hello,

    Please check below demo.

    I have used below jquery version.

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>

    <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
        </telerik:RadScriptManager>


    <telerik:RadGrid ID="RadGrid1" runat="server" AutoGenerateColumns="False" OnNeedDataSource="RadGrid1_NeedDataSource"
                AllowPaging="true" AllowFilteringByColumn="true" ShowFooter="true" AllowMultiRowSelection="true"
                AllowMultiRowEdit="true" PageSize="10"
    >
               <MasterTableView CommandItemDisplay="Top" EditMode="EditForms"  DataKeyNames="ID"
                    InsertItemPageIndexAction="ShowItemOnCurrentPage" >
                    <CommandItemSettings ShowExportToExcelButton="true" ShowExportToPdfButton="true" />
                    <Columns>
                        <telerik:GridBoundColumn DataField="ID" UniqueName="ID" HeaderText="ID">
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="Name" UniqueName="Name" HeaderText="Name">
                        </telerik:GridBoundColumn>
                        <telerik:GridTemplateColumn UniqueName="Color">
                            <EditItemTemplate>
                                <telerik:RadColorPicker ID="RadColorPicker1" Height="300px" Width="300px" runat="server"
                                    OnClientColorChanging="ClientColorChange">
                                </telerik:RadColorPicker>
                            </EditItemTemplate>
                            <InsertItemTemplate>
                                <telerik:RadColorPicker ID="RadColorPicker1" Height="300px" Width="300px" runat="server"
                                    OnClientColorChanging="ClientColorChange">
                                </telerik:RadColorPicker>
                            </InsertItemTemplate>
                        </telerik:GridTemplateColumn>
                        <telerik:GridTemplateColumn UniqueName="ColorTxt">
                            <EditItemTemplate>
                                <telerik:RadTextBox ID="RadTextBox1" runat="server">
                                </telerik:RadTextBox>
                            </EditItemTemplate>
                            <InsertItemTemplate>
                                <telerik:RadTextBox ID="RadTextBox1" runat="server">
                                </telerik:RadTextBox>
                            </InsertItemTemplate>
                        </telerik:GridTemplateColumn>
                        <telerik:GridEditCommandColumn>
                        </telerik:GridEditCommandColumn>
                    </Columns>
                </MasterTableView>
                <PagerStyle AlwaysVisible="True" />
                       </telerik:RadGrid>

    protected void RadGrid1_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)
       {
           dynamic data = new[] {
               new { ID = 1, Name ="Name1",path="1.jpg",Customedate=DateTime.Now,ReceivedDate=DateTime.Now.AddDays(1)},
               new { ID = 2, Name = "Name2",path="2.jpg",Customedate=DateTime.Now,ReceivedDate=DateTime.Now.AddDays(2)},
               new { ID = 3, Name = "Name3",path="3.jpg",Customedate=DateTime.Now,ReceivedDate=DateTime.Now.AddDays(3)},
                new { ID = 4, Name = "Name4",path="2.jpg",Customedate=DateTime.Now,ReceivedDate=DateTime.Now.AddDays(4)},
               new { ID = 5, Name = "Name5",path="3.jpg",Customedate=DateTime.Now,ReceivedDate=DateTime.Now.AddDays(5)},
                new { ID = 6, Name ="Name1",path="1.jpg",Customedate=DateTime.Now,ReceivedDate=DateTime.Now.AddDays(6)},
               new { ID = 7, Name = "Name2",path="2.jpg",Customedate=DateTime.Now,ReceivedDate=DateTime.Now.AddDays(7)},
               new { ID = 8, Name = "Name3",path="3.jpg",Customedate=DateTime.Now,ReceivedDate=DateTime.Now.AddDays(8)},
                new { ID = 9, Name = "Name4",path="2.jpg",Customedate=DateTime.Now,ReceivedDate=DateTime.Now.AddDays(9)},
               new { ID = 10, Name = "Name5",path="3.jpg",Customedate=DateTime.Now,ReceivedDate=DateTime.Now.AddDays(10)},
                new { ID = 11, Name ="Name1",path="1.jpg",Customedate=DateTime.Now,ReceivedDate=DateTime.Now.AddDays(11)},
               new { ID = 12, Name = "Name2",path="2.jpg",Customedate=DateTime.Now,ReceivedDate=DateTime.Now.AddDays(12)},
               new { ID = 13, Name = "Name3",path="3.jpg",Customedate=DateTime.Now,ReceivedDate=DateTime.Now.AddDays(13)},
                new { ID = 14, Name = "Name4",path="2.jpg",Customedate=DateTime.Now,ReceivedDate=DateTime.Now.AddDays(14)},
               new { ID = 15, Name = "Name5",path="3.jpg",Customedate=DateTime.Now,ReceivedDate=DateTime.Now.AddDays(150)}
                
           };
     
           RadGrid1.DataSource = data;
     
       }



    Thanks,
    Jayesh Goyani
  13. Sergiu
    Sergiu avatar
    1 posts
    Member since:
    May 2015

    Posted 18 Sep 2015 in reply to Jayesh Goyani Link to this post

    Hi Jayesh,

     

    I'm in the same situation as Tracy and although your last example seems to work for both edit and insert, you haven't provided the code to show how you made it work for insert as well. :(

    Could you please provide the JS function you used for fetching the row's items when in insert mode? Pleeease! :(

    In my situation, the row contains a textbox and a radcombobox. When the user enters some text in the textbox when in both insert end edit mode, I need to clear the combobox and disable it. When the user clears the text in the textbox, I need to re-enable the combobox. 

    But again, please try to understand that I need this functionality for both Edit AND Insert mode of the grid.

    Regards!

  14. Jayesh Goyani
    Jayesh Goyani avatar
    2732 posts
    Member since:
    May 2010

    Posted 22 Sep 2015 in reply to Sergiu Link to this post

    Hello,

     Please check the below links it will help you.

    Access Another control which was in same level or in row (on textbox textchanged event and dropdown selected item changed you can get another control easily by using this link)

    How to access the control from itemtemplate in Radgrid on client side (This link will help us to get the rad controls from the container)

    Access RadGrid Row and Column on Client Side

     Let me know if any concern.

    Thanks,

    Jayesh Goyani

Back to Top
UI for ASP.NET Ajax is Ready for VS 2017