This is a migrated thread and some comments may be shown as answers.

Rad Grid Get Inserted Item Cell Client Side

12 Answers 244 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Tracy
Top achievements
Rank 1
Tracy asked on 28 Feb 2013, 05:09 PM
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;
       }


12 Answers, 1 is accepted

Sort by
0
Jayesh Goyani
Top achievements
Rank 2
answered on 01 Mar 2013, 06:18 AM
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
0
Tracy
Top achievements
Rank 1
answered on 01 Mar 2013, 05:00 PM
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

 

 

 

0
Princy
Top achievements
Rank 2
answered on 02 Mar 2013, 06:25 AM
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
0
Jayesh Goyani
Top achievements
Rank 2
answered on 02 Mar 2013, 06:25 AM
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
0
Tracy
Top achievements
Rank 1
answered on 04 Mar 2013, 03:27 AM
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

0
Shinu
Top achievements
Rank 2
answered on 04 Mar 2013, 05:13 AM
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
0
Tracy
Top achievements
Rank 1
answered on 04 Mar 2013, 03:54 PM
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>
0
Shinu
Top achievements
Rank 2
answered on 05 Mar 2013, 04:19 AM
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
0
Tracy
Top achievements
Rank 1
answered on 05 Mar 2013, 04:35 AM
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 

0
Jayesh Goyani
Top achievements
Rank 2
answered on 05 Mar 2013, 05:00 AM
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
0
Sergiu
Top achievements
Rank 1
answered on 18 Sep 2015, 06:55 AM

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!

0
Jayesh Goyani
Top achievements
Rank 2
answered on 22 Sep 2015, 05:08 PM

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

Tags
Grid
Asked by
Tracy
Top achievements
Rank 1
Answers by
Jayesh Goyani
Top achievements
Rank 2
Tracy
Top achievements
Rank 1
Princy
Top achievements
Rank 2
Shinu
Top achievements
Rank 2
Sergiu
Top achievements
Rank 1
Share this question
or