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
<
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
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
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>"
));
}
}
function
OnClientColorChange(sender,args) {
var
txt = document.getElementById(window[
'txt'
]);
var
color = sender.get_selectedColor();
txt.style.backgroundColor = color;
}
Thanks,
Princy
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
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
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
>
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
function
OnClientColorChange(sender,args) {
var
txt = document.getElementById(window[
'txt'
]);
var
color = sender.get_selectedColor();
txt.style.backgroundColor = color;
}
Thanks,
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
>
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
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
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
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!
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