We Keep Coding

Automatically scroll detailsview alongside chosen gridview row

I have an ASP.NET gridview that has a couple of associated detailsviews and a secondary gridview. When a user clicks on a row in the gridview, the detailsviews pop up on the right side of the gridview. This is fine, but as the number of gridview rows has grown, the detailsviews get pushed lower and lower on the page making them difficult and frustrating for users to locate.
What I want to do is when the user selects a row they're interested in, align the top of the detailsview with the chosen row.
I've tried setting the CSS with:
[id$="ContentPlaceHolder1_dvProductionReport"],
[id$="ContentPlaceHolder1_dvOraclePartDetails"],
[id$="ContentPlaceHolder1_gvReceipts"]
{
position: fixed;
}
This didn't work. I've also tried to position it (in this example using only the first selector) with JavaScript using this example:
<script type="text/javascript" src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript">
$().ready(function () {
//var $scrollingDiv = [id$ = "ContentPlaceHolder1_dvProductionReport"];
var elements = document.querySelector('[id$="ContentPlaceHolder1_dvProductionReport"]');
console.log(elements);
$(window).scroll(function () {
elements
.stop()
.animate({ "marginTop": ($(window).scrollTop() + 30) + "px" }, "slow");
});
});
</script>
But this didn't work in Chrome since apparently "animate" is a keyword in Chrome, but the example works in Firefox.
The Question:
How can I keep a detailsview in view while the user scrolls, or at least pop up the details view aligned with the row in the gridview they've chosen?
Edit:
In response to #rexroxm 's suggestion:
I've added:
<div style="position: absolute"><td>...</td></div> around the first detailsview. This has made no difference, so I've added this to the .CSS file:
[id$="ContentPlaceHolder1_dvProductionReport"],
[id$="ContentPlaceHolder1_dvOraclePartDetails"],
[id$="ContentPlaceHolder1_gvReceipts"]
{
position: absolute;
}
I can see that the CSS for position: absolute; is showing up on all three of the dependent detailsviews (2) and gridview (1). If I check the style in Chrome > Inspect > Developer tools, I see position: absolute; shows up for all three, in the first view, but it's lined through in the second view (not sure what these are called, but they show you the CSS styles for the element you've chosen). I've also tried using:
[id$="ContentPlaceHolder1_dvProductionReport"],
[id$="ContentPlaceHolder1_dvOraclePartDetails"],
[id$="ContentPlaceHolder1_gvReceipts"]
{
position: absolute !important;
}
Which also shows up as lined through.
Here is the entire <td>...</td>, sorry it's long, but it might be helpful:
<td>
<div style="position: absolute">
<asp:DetailsView ID="dvProductionReport" runat="server" Height="50px"
Width="125px"
EnableModelValidation="True" AutoGenerateRows="False"
DataKeyNames="PartNumber" Caption="Part Details" >
<AlternatingRowStyle BackColor="#66FF66" ForeColor="Black" />
<Fields>
<asp:BoundField DataField="PartNumber" HeaderText="Part Number:"
SortExpression="PartNumber" >
<HeaderStyle Font-Bold="True" HorizontalAlign="Center" VerticalAlign="Middle"
Wrap="False" />
<ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" Wrap="False" />
</asp:BoundField>
<asp:BoundField DataField="AssemblyPartNumber"
HeaderText="Assembly Part Number:" SortExpression="AssemblyPartNumber" >
<HeaderStyle Font-Bold="True" HorizontalAlign="Center" VerticalAlign="Middle"
Wrap="False" />
<ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" Wrap="False" />
</asp:BoundField>
<asp:TemplateField HeaderText="Line Down:" SortExpression="LineDown">
<EditItemTemplate>
<asp:CheckBox ID="CheckBox1" runat="server" Checked='<%# Convert.ToBoolean(Eval("LineDown")) %>' />
</EditItemTemplate>
<InsertItemTemplate>
<asp:CheckBox ID="CheckBox1" runat="server" Checked='<%# Convert.ToBoolean(Eval("LineDown")) %>' />
</InsertItemTemplate>
<ItemTemplate>
<asp:CheckBox ID="CheckBox1" runat="server" Checked='<%# Convert.ToBoolean(Eval("LineDown")) %>'
Enabled="false" />
</ItemTemplate>
<HeaderStyle Font-Bold="True" HorizontalAlign="Center" VerticalAlign="Middle" Wrap="False" />
<ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" Wrap="False" />
</asp:TemplateField>
<asp:BoundField DataField="Product" HeaderText="Product:"
SortExpression="Product" >
<HeaderStyle Font-Bold="True" HorizontalAlign="Center" VerticalAlign="Middle" Wrap="False" />
<ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" Wrap="False" />
</asp:BoundField>
<asp:BoundField DataField="Assembly" HeaderText="Assembly:"
SortExpression="Assembly" >
<HeaderStyle Font-Bold="True" HorizontalAlign="Center" VerticalAlign="Middle" Wrap="False" />
<ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" Wrap="False" />
</asp:BoundField>
<asp:BoundField DataField="OrderNumber" HeaderText="Order Number:"
SortExpression="OrderNumber" >
<HeaderStyle Font-Bold="True" HorizontalAlign="Center" VerticalAlign="Middle" Wrap="False" />
<ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" Wrap="False" />
</asp:BoundField>
<asp:BoundField DataField="Department" HeaderText="Department:"
SortExpression="Department" >
<HeaderStyle Font-Bold="True" HorizontalAlign="Center" VerticalAlign="Middle" Wrap="False" />
<ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" Wrap="False" />
</asp:BoundField>
<asp:BoundField DataField="DateAdded" HeaderText="Date Added:"
SortExpression="DateAdded" DataFormatString="{0:d}" >
<HeaderStyle Font-Bold="True" HorizontalAlign="Center" VerticalAlign="Middle" Wrap="False" />
<ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" Wrap="False" />
</asp:BoundField>
<asp:BoundField DataField="DateRequired" HeaderText="Date Required:"
SortExpression="DateRequired" DataFormatString="{0:d}" >
<HeaderStyle Font-Bold="True" HorizontalAlign="Center" VerticalAlign="Middle" Wrap="False" />
<ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" Wrap="False" />
</asp:BoundField>
<asp:BoundField DataField="QuantityRequired" HeaderText="Quantity Required:"
SortExpression="QuantityRequired" >
<HeaderStyle Font-Bold="True" HorizontalAlign="Center" VerticalAlign="Middle" Wrap="False" />
<ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" Wrap="False" />
</asp:BoundField>
<asp:TemplateField HeaderText="Filled:" SortExpression="Filled">
<EditItemTemplate>
<asp:CheckBox ID="CheckBox2" runat="server" Checked='<%# Convert.ToBoolean(Eval("Filled")) %>' />
</EditItemTemplate>
<InsertItemTemplate>
<asp:CheckBox ID="CheckBox2" runat="server" Checked='<%# Convert.ToBoolean(Eval("Filled")) %>' />
</InsertItemTemplate>
<ItemTemplate>
<asp:CheckBox ID="CheckBox2" runat="server" Checked='<%# Convert.ToBoolean(Eval("Filled")) %>'
Enabled="false" />
</ItemTemplate>
<HeaderStyle Font-Bold="True" HorizontalAlign="Center" VerticalAlign="Middle" Wrap="False" />
<ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" Wrap="False" />
</asp:TemplateField>
<asp:TemplateField HeaderText="Closed:" SortExpression="Closed">
<EditItemTemplate>
<asp:CheckBox ID="CheckBox3" runat="server" Checked='<%# Convert.ToBoolean(Eval("Closed")) %>' />
</EditItemTemplate>
<InsertItemTemplate>
<asp:CheckBox ID="CheckBox3" runat="server" Checked='<%# Convert.ToBoolean(Eval("Closed")) %>' />
</InsertItemTemplate>
<ItemTemplate>
<asp:CheckBox ID="CheckBox3" runat="server" Checked='<%# Convert.ToBoolean(Eval("Closed")) %>'
Enabled="false" />
</ItemTemplate>
<HeaderStyle Font-Bold="True" HorizontalAlign="Center" VerticalAlign="Middle" Wrap="False" />
<ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" Wrap="False" />
</asp:TemplateField>
<asp:BoundField DataField="ProductionCell" HeaderText="Production Cell:"
SortExpression="ProductionCell" >
<HeaderStyle Font-Bold="True" HorizontalAlign="Center" VerticalAlign="Middle" Wrap="False" />
<ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" Wrap="False" />
</asp:BoundField>
<asp:BoundField DataField="ProductionReason" HeaderText="Production Reason:"
SortExpression="ProductionReason" >
<HeaderStyle Font-Bold="True" HorizontalAlign="Center" VerticalAlign="Middle" Wrap="False" />
<ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" Wrap="True" />
</asp:BoundField>
<asp:BoundField DataField="ProductionComments"
HeaderText="Production Comments:" SortExpression="ProductionComments" >
<HeaderStyle Font-Bold="True" HorizontalAlign="Center" VerticalAlign="Middle" Wrap="False" />
<ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" Wrap="True" />
</asp:BoundField>
<asp:BoundField DataField="ReportingAssociate"
HeaderText="Reporting Associate:" SortExpression="ReportingAssociate" >
<HeaderStyle Font-Bold="True" HorizontalAlign="Center" VerticalAlign="Middle" Wrap="False" />
<ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" Wrap="False" />
</asp:BoundField>
<asp:HyperLinkField DataTextField="EmailAddress" HeaderText="Email Address:"
SortExpression="EmailAddress" >
<HeaderStyle Font-Bold="True" HorizontalAlign="Center" VerticalAlign="Middle" Wrap="False" />
<ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" Wrap="False" />
</asp:HyperLinkField>
<asp:BoundField DataField="RootCause" HeaderText="Root Cause:"
SortExpression="RootCause" >
<HeaderStyle Font-Bold="True" HorizontalAlign="Center" VerticalAlign="Middle" Wrap="False" />
<ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" Wrap="False" />
</asp:BoundField>
<asp:BoundField DataField="BuyerComments" HeaderText="Buyer Comments:"
SortExpression="BuyerComments" >
<HeaderStyle Font-Bold="True" HorizontalAlign="Center" VerticalAlign="Middle" Wrap="False" />
<ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" Wrap="True" />
</asp:BoundField>
</Fields>
</asp:DetailsView>
</div>
</td>

You can keep detailsview's position:absolute that way it will stay on your page/view. When someone clicks on a user in primary gridview you probably bind it's data to the secondary gridview and then show it. Setting it position to absolute in style of the container div/table will keep it in the view. You may also put a cross button on the upper right side of the div containing the secondary Gridview which sets display:none with the event onclick.

How to Stretch Gridview width inside a Div or a Panel in ASP.Net

Based on the image above. I have a gridview that I like to be stretched, fixed containing the whole div that it is paneled inside. The problem is when it automatically adjust based on the contents width.
The gridview is incorporated with javascript commands that make the header fixed. I can actually make the desired output by putting a width=100% property in the gridview. However since it has jquery command injectedl, when I include the width property it is resulting to this
here are the codes
<div class="GridviewPanelBody">
<asp:GridView ID="GridView1" runat="server" BackColor="White" BorderColor="#DEDFDE" BorderStyle="None" BorderWidth="1px" CellPadding="4" ForeColor="Black" GridLines="Vertical" Font-Size="Smaller" EmptyDataText="No Records Found" ShowHeaderWhenEmpty="True" AutoGenerateColumns="false" >
<emptydatarowstyle backcolor="white" forecolor="black"/>
<AlternatingRowStyle BackColor="White" />
<Columns>
<asp:BoundField HeaderText="Location" DataField="locationd" />
<asp:BoundField HeaderText="Retail Partner" DataField="name" />
<asp:BoundField HeaderText="FL Area" DataField="sqm" />
<asp:BoundField HeaderText="Previous Month" DataField="PreviousMonth" DataFormatString="{0:#,##0.00;(#,##0.00);0}" />
<asp:BoundField HeaderText="Current Month" DataField="CurrentMonth" DataFormatString="{0:#,##0.00;(#,##0.00);0}" />
<asp:BoundField HeaderText="Last Year Month" DataField="LastYearMonth" DataFormatString="{0:#,##0.00;(#,##0.00);0}" />
<asp:BoundField HeaderText="Sales/SQM" DataField="SALES/SQM" DataFormatString="{0:#,##0.00;(#,##0.00);0}"/>
<asp:BoundField HeaderText="Inc/Dec%" DataField="INC/DEC%" DataFormatString="{0:#,##0.00;}" />
</Columns>
<FooterStyle BackColor="#CCCC99" />
<HeaderStyle BackColor="#6B696B" Font-Bold="True" ForeColor="White" Height="25px"/>
<PagerStyle BackColor="#F7F7DE" ForeColor="Black" HorizontalAlign="Right" />
<RowStyle BackColor="#F7F7DE" />
<SelectedRowStyle BackColor="#CE5D5A" Font-Bold="True" ForeColor="White" />
<SortedAscendingCellStyle BackColor="#FBFBF2" />
<SortedAscendingHeaderStyle BackColor="#848384" />
<SortedDescendingCellStyle BackColor="#EAEAD3" />
<SortedDescendingHeaderStyle BackColor="#575357" />
</asp:GridView>
</div>
part of the css
.GridviewPanelBody
{
background-color: #FaFaFa;
margin-left: auto;
margin-right: auto;
overflow: auto;
height: auto;
}

put width attribut for your gridview object:
<asp:GridView ID="gvPersons" runat="server" AutoGenerateColumns="False" Width="100px">
And, Set AutoSizeMode property of the column to AllCells.

Javascript get values to gridpanel

I am trying to add values from my textboxes and combos as "history" to by GridPanel. The script looks ok, and my website should return my filled grid, but it doesn't happen.
<script>
var addRecord = function (form, grid) {
if (!form.getForm().isValid()) {
Ext.net.Notification.show({
iconCls: "icon-exclamation",
html: "Form is invalid",
title: "Error"
});
return false;
}
grid.store.insert(0, new MyModel(form.getForm().getFieldValues()));
form.getForm().reset();
};
</script>
<ext:Store
ID="Store1"
runat="server"
AutoSync="true"
ShowWarningOnFailure="false">
<Model>
<ext:Model ID="Model1" runat="server" IDProperty="Id" Name="MyModel">
<Fields>
<ext:ModelField Name="Id" Type="Int" />
<ext:ModelField Name="A" />
<ext:ModelField Name="Operator1" />
<ext:ModelField Name="B" />
<ext:ModelField Name="Operator2" />
<ext:ModelField Name="C" />
<ext:ModelField Name="Wynik" />
<ext:ModelField Name="Data" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
<form id="form1" runat="server">
<div>
<ext:ResourceManager ID="ResourceManager1" runat="server">
</ext:ResourceManager>
<ext:Panel ID="UserForm" runat="server" Layout="HBoxLayout" Title="Kalkulator">
<Items>
<ext:Panel ID="Panel6" Layout="VBoxLayout" runat="server">
<Items>
<ext:Label ID="Label4" Margin="10" Text="A" runat="server">
</ext:Label>
<ext:TextField Name="A" Margin="10" MaskRe="[1-9]" ID="txtA" runat="server">
</ext:TextField>
</Items>
</ext:Panel>
<ext:Panel ID="Panel7" Layout="VBoxLayout" runat="server">
<Items>
<ext:Label ID="Label1" Margin="10" Text="Operator" runat="server">
</ext:Label>
<ext:ComboBox Name="Operator1" Margin="10" ID="cbox1" runat="server"></ext:ComboBox>
</Items>
</ext:Panel>
<ext:Panel ID="Panel8" runat="server" Layout="VBoxLayout">
<Items>
<ext:Label ID="Label5" Margin="10" Text="B" runat="server">
</ext:Label>
<ext:TextField Name="B" Margin="10" MaskRe="[1-9]" ID="txtB" runat="server">
</ext:TextField>
</Items>
</ext:Panel>
<ext:Panel ID="Panel9" runat="server" Layout="VBoxLayout">
<Items>
<ext:Label ID="Label2" Margin="10" Text="Operator" runat="server">
</ext:Label>
<ext:ComboBox Name="Operator2" Margin="10" ID="cbox2" runat="server"></ext:ComboBox>
</Items>
</ext:Panel>
<ext:Panel ID="Panel10" runat="server" Layout="VBoxLayout">
<Items>
<ext:Label ID="Label6" Margin="10" Text="C" runat="server">
</ext:Label>
<ext:TextField Name="C" Margin="10" MaskRe="[1-9]" ID="txtC" runat="server">
</ext:TextField>
</Items>
</ext:Panel>
<ext:Panel ID="Panel11" runat="server" Layout="VBoxLayout">
<Items>
<ext:Button ID="btnhelp" Margin="6" OnDirectClick="helpclick" runat="server" Width="70" Text="=?">
</ext:Button>
<ext:Button ID="btneq" Margin="6" OnDirectClick="equalclick" runat="server" Width="70" Text="Oblicz">
<Listeners>
<Click Handler="addRecord(#{UserForm}, #{GridPanel1});" />
</Listeners>
</ext:Button>
</Items>
</ext:Panel>
<ext:Panel ID="Panel12" runat="server" Layout="VBoxLayout">
<Items>
<ext:Label ID="Label3" Margin="14" Text="Wynik" runat="server">
</ext:Label>
<ext:Label Name="Wynik" Margin="14" ID="lblsc" Text="Wynik" runat="server">
</ext:Label>
</Items>
</ext:Panel>
</Items>
</ext:Panel>
<br />
<ext:GridPanel
ID="GridPanel1"
runat="server"
Title="Historia"
Width="1100"
Height="350">
<ColumnModel>
<Columns>
<ext:Column ID="Column1" runat="server" Text="Lp" DataIndex="Lp" />
<ext:Column ID="Column2" runat="server" Text="A" DataIndex="A" />
<ext:Column ID="Column3" runat="server" Text="Operator" DataIndex="Operator1" />
<ext:Column ID="Column4" runat="server" Text="B" DataIndex="B" />
<ext:Column ID="Column5" runat="server" Text="Operator" DataIndex="Operator2" />
<ext:Column ID="Column6" runat="server" Text="C" DataIndex="C" />
<ext:Column ID="Column7" runat="server" Text="Wynik" DataIndex="Wynik" />
<ext:Column ID="Column8" runat="server" Text="Data" DataIndex="Data" />
</Columns>
</ColumnModel>
</ext:GridPanel>
When I click on button it doesn't work. What is an issue?

Loop through GridView using JQuery or Javascript

I am developing a form on which i have a GridView.In each row of GridView,i have one DropDownList with values Present & Absent and some TextBoxes and one submit button.
If i select Present then all the TextBoxes get enabled and enters values.
If i select Absent then all the TextBoxes get disabled.
On submit button i want to write a JQuery Or Javascript Code to check if user has selected Present and do not enter marks and want to show an alert.
I've tried following JQuery Code but i don't understand what i'm doing wrong in that code.
$("#<%=grdOJTResult.ClientID%> tr").each(function () {
var Value = $(this).closest("tr").find("select[id*=ddlStatus]").val();
if (Value == 0) {
if ($(this).closest("tr").find("input[id*=txtAttendance]").val() == "") {
alert("Please Enter Attendance.");
$(this).closest("tr").find("input[id*=txtAttendance]").focus();
return false;
}
else if ($(this).closest("tr").find("input[id*=txtWritten]").val() == "") {
alert("Please Enter Written Marks.");
$(this).closest("tr").find("input[id*=txtWritten]").focus();
return false;
}
else if ($(this).closest("tr").find("input[id*=txtTurnOut]").val() == "") {
alert("Please Enter TurnOut Marks.");
$(this).closest("tr").find("input[id*=txtTurnOut]").focus();
return false;
}
else if ($(this).closest("tr").find("input[id*=txtSmartness]").val() == "") {
alert("Please Enter Smartness Marks.");
$(this).closest("tr").find("input[id*=txtSmartness]").focus();
return false;
}
else if ($(this).closest("tr").find("input[id*=txtKnowledge]").val() == "") {
alert("Please Enter Knowledge Marks.");
$(this).closest("tr").find("input[id*=txtKnowledge]").focus();
return false;
}
else if ($(this).closest("tr").find("input[id*=txtLanguage]").val() == "") {
alert("Please Enter Language Marks.");
$(this).closest("tr").find("input[id*=txtLanguage]").focus();
return false;
}
else if ($(this).closest("tr").find("input[id*=txtAttitude]").val() == "") {
alert("Please Enter Attitude Marks.");
$(this).closest("tr").find("input[id*=txtAttitude]").focus();
return false;
}
}
});
Below is my GridView.
<asp:GridView ID="grdOJTResult" runat="server" AutoGenerateColumns="false" Width="98%"
CssClass="mGrid" DataKeyNames="EmpId,BatchId" HorizontalAlign="Center">
<Columns>
<asp:BoundField DataField="EmpCode" HeaderText="Employee Code" ItemStyle-HorizontalAlign="Center">
<ItemStyle HorizontalAlign="Center" />
</asp:BoundField>
<asp:BoundField DataField="EmpFullName" HeaderText="Employee Name" ItemStyle-HorizontalAlign="Center">
<ItemStyle HorizontalAlign="Center" />
</asp:BoundField>
<asp:TemplateField HeaderText="ATTENDANCE (16)" ItemStyle-HorizontalAlign="Center">
<ItemTemplate>
<asp:TextBox ID="txtAttendance" Width="50px" MaxLength="4" runat="server" ></asp:TextBox>
<Cc1:FilteredTextBoxExtender ID="FilteredTextBoxExtender1" runat="server" Enabled="True"
FilterType="Custom,Numbers" TargetControlID="txtAttendance" ValidChars=".">
</Cc1:FilteredTextBoxExtender>
</ItemTemplate>
<ItemStyle HorizontalAlign="Center" />
</asp:TemplateField>
<asp:TemplateField HeaderText="WRITTEN MARKS (34)" ItemStyle-HorizontalAlign="Center">
<ItemTemplate>
<asp:TextBox ID="txtWritten" Width="50px" MaxLength="3" runat="server" ></asp:TextBox>
<Cc1:FilteredTextBoxExtender ID="FilteredTextBoxExtender2" runat="server" Enabled="True"
FilterType="Custom,Numbers" TargetControlID="txtWritten" ValidChars=".">
</Cc1:FilteredTextBoxExtender>
</ItemTemplate>
<ItemStyle HorizontalAlign="Center" />
</asp:TemplateField>
<asp:TemplateField HeaderText="TURN OUT (10)" ItemStyle-HorizontalAlign="Center">
<ItemTemplate>
<asp:TextBox ID="txtTurnOut" Width="50px" MaxLength="3" runat="server" ></asp:TextBox>
<Cc1:FilteredTextBoxExtender ID="FilteredTextBoxExtender3" runat="server" Enabled="True"
FilterType="Custom,Numbers" TargetControlID="txtTurnOut" ValidChars=".">
</Cc1:FilteredTextBoxExtender>
</ItemTemplate>
<ItemStyle HorizontalAlign="Center" />
</asp:TemplateField>
<asp:TemplateField HeaderText="SMARTNESS (10)" ItemStyle-HorizontalAlign="Center">
<ItemTemplate>
<asp:TextBox ID="txtSmartness" Width="50px" MaxLength="3" runat="server" ></asp:TextBox>
<Cc1:FilteredTextBoxExtender ID="FilteredTextBoxExtender4" runat="server" Enabled="True"
FilterType="Custom,Numbers" TargetControlID="txtSmartness" ValidChars=".">
</Cc1:FilteredTextBoxExtender>
</ItemTemplate>
<ItemStyle HorizontalAlign="Center" />
</asp:TemplateField>
<asp:TemplateField HeaderText="KNOWLEDGE (10)" ItemStyle-HorizontalAlign="Center">
<ItemTemplate>
<asp:TextBox ID="txtKnowledge" Width="50px" MaxLength="3" runat="server" ></asp:TextBox>
<Cc1:FilteredTextBoxExtender ID="FilteredTextBoxExtender5" runat="server" Enabled="True"
FilterType="Custom,Numbers" TargetControlID="txtKnowledge" ValidChars=".">
</Cc1:FilteredTextBoxExtender>
</ItemTemplate>
<ItemStyle HorizontalAlign="Center" />
</asp:TemplateField>
<asp:TemplateField HeaderText="LANGUAGE (10)" ItemStyle-HorizontalAlign="Center">
<ItemTemplate>
<asp:TextBox ID="txtLanguage" Width="50px" MaxLength="3" runat="server" ></asp:TextBox>
<Cc1:FilteredTextBoxExtender ID="FilteredTextBoxExtender6" runat="server" Enabled="True"
FilterType="Custom,Numbers" TargetControlID="txtLanguage" ValidChars=".">
</Cc1:FilteredTextBoxExtender>
</ItemTemplate>
<ItemStyle HorizontalAlign="Center" />
</asp:TemplateField>
<asp:TemplateField HeaderText="ATTITUDE (10)" ItemStyle-HorizontalAlign="Center">
<ItemTemplate>
<asp:TextBox ID="txtAttitude" Width="50px" MaxLength="3" runat="server" ></asp:TextBox>
<Cc1:FilteredTextBoxExtender ID="FilteredTextBoxExtender7" runat="server" Enabled="True"
FilterType="Custom,Numbers" TargetControlID="txtAttitude" ValidChars=".">
</Cc1:FilteredTextBoxExtender>
</ItemTemplate>
<ItemStyle HorizontalAlign="Center" />
</asp:TemplateField>
<asp:TemplateField HeaderText="TOTAL MARKS (100)" ItemStyle-HorizontalAlign="Center">
<ItemTemplate>
<asp:TextBox ID="txtTotal" Width="50px" MaxLength="3" runat="server" ReadOnly="true"></asp:TextBox>
</ItemTemplate>
<ItemStyle HorizontalAlign="Center" />
</asp:TemplateField>
<asp:TemplateField HeaderText="STATUS" ItemStyle-HorizontalAlign="Center">
<ItemTemplate>
<asp:DropDownList ID="ddlStatus" Width="50px" runat="server" CssClass="ddlRes">
<asp:ListItem Text="Present" Value="0"></asp:ListItem>
<asp:ListItem Text="Absent" Value="1"></asp:ListItem>
</asp:DropDownList>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>

Try:
$("#<%=grdOJTResult.ClientID%> tr").each(function () {
var Value = $(this).find('select[id$="ddlStatus"]').val();
});
Demo:
http://jsfiddle.net/v9cqwrfm/2/

How to find Control inside EditFormSettings of RadTree List using javascript

I have been using RadTreeList in one of my project, I have used RadUpload Control which lies inside the EditFormSettings of the RadTreeList. I have used javascript for validating RadUpload control (i.e. where user has selected any file or not), now the problem here is that I'm not able to find/get the RadUpload control inside the RadTreeList in my javascript, though I'm getting the RadTreeList control.
Below is my code :-
function IsFilesSelected(source, args) {
debugger;
args.IsValid = true;
var treeList = $find("<%= FAQRadTreeList.ClientID %>");
var RadUpload = treeList._findChildControl.getName("UploadDocumentRadUpload");
var UploadLabel = treeList.selectItem(ImageExtensionLabel);
var FileInputs = RadUpload.getFileInputs();
for (var i = 0; i < FileInputs.length; i++) {
if (FileInputs[i].value && FileInputs[i].value.length > 0) {
args.IsValid = true;
}
else {
if (UploadLabel == null || UploadLabel.innerHTML == '')
args.IsValid = false;
else
args.IsValid = true;
}
}
}
While my RadTreeList is shown as :--
<telerik:RadTreeList ID="FAQRadTreeList" runat="server" AllowPaging="True" DataSourceID="FAQSqlDataSource"
PageSize="20" DataKeyNames="FAQ_ID" ParentDataKeyNames="FAQ_Parent_ID" AutoGenerateColumns="False"
Width="100%" OnInsertCommand="FAQRadTreeList_InsertCommand" OnItemCommand="FAQRadTreeList_ItemCommand"
OnItemDataBound="FAQRadTreeList_ItemDataBound" OnUpdateCommand="FAQRadTreeList_UpdateCommand"
OnItemDrop="FAQRadTreeList_ItemDrop">
<PagerStyle Mode="NextPrevNumericAndAdvanced" />
<Columns>
<telerik:TreeListEditCommandColumn UniqueName="InsertCommandColumn" ButtonType="ImageButton"
AddRecordText="Add" ShowEditButton="true" ItemStyle-CssClass="MyImageButton">
<ItemStyle HorizontalAlign="Left" VerticalAlign="Top" Width="60px" />
<HeaderStyle VerticalAlign="Top" HorizontalAlign="Left" Width="60px" />
</telerik:TreeListEditCommandColumn>
<telerik:TreeListTemplateColumn DataField="FAQ_Title" UniqueName="FAQ_Title" HeaderText="Title">
<ItemTemplate>
<asp:Label ID="FAQTitleLabel" runat="server" Text='<%# Bind("FAQ_Title") %>'></asp:Label>
</ItemTemplate>
<ItemStyle HorizontalAlign="Left" VerticalAlign="Top" Width="120px" />
<HeaderStyle HorizontalAlign="Left" VerticalAlign="Top" Width="120px" />
</telerik:TreeListTemplateColumn>
<telerik:TreeListTemplateColumn DataField="FAQ_Description" UniqueName="FAQ_Description"
HeaderText="Description">
<ItemTemplate>
<asp:Label ID="FAQDescriptionLabel" runat="server" Text='<%# ( Eval("FAQ_Description").ToString().Length > 150)? string.Concat(Eval("FAQ_Description").ToString().Substring(0, 150), ".....") : Eval("FAQ_Description") %>'></asp:Label>
<telerik:RadToolTip ID="FAQDescriptionRadToolTip" TargetControlID='<%# ( Eval("FAQ_Description").ToString().Length > 150)? "FAQDescriptionLabel" : "" %>'
Width="400px" Height="300px" ContentScrolling="Y" runat="server" HideDelay="1000"
Position="TopCenter" RelativeTo="Element" ShowDelay="1000">
<%# Eval("FAQ_Description")%>
</telerik:RadToolTip>
</ItemTemplate>
<ItemStyle HorizontalAlign="Left" VerticalAlign="Top" />
<HeaderStyle HorizontalAlign="Left" VerticalAlign="Top" />
</telerik:TreeListTemplateColumn>
<telerik:TreeListTemplateColumn DataField="ParentName" UniqueName="ParentName" HeaderText="Parent Item">
<ItemTemplate>
<asp:Label ID="ParentTitleLabel" runat="server" Text='<%# Bind("ParentName") %>'></asp:Label>
</ItemTemplate>
<ItemStyle HorizontalAlign="Left" VerticalAlign="Top" Width="100px" />
<HeaderStyle HorizontalAlign="Left" VerticalAlign="Top" Width="100px" />
</telerik:TreeListTemplateColumn>
<telerik:TreeListTemplateColumn DataField="FAQ_Order" UniqueName="FAQ_Order" HeaderText="Order">
<ItemTemplate>
<telerik:RadNumericTextBox ID="FAQOrderRadNumericTextBox" MinValue="1" NumberFormat-DecimalDigits="0"
Enabled="false" runat="server" Width="50px" Text='<%# Bind("FAQ_Order") %>'>
<EnabledStyle Font-Names="Verdana" HorizontalAlign="Right" />
</telerik:RadNumericTextBox>
</ItemTemplate>
<ItemStyle HorizontalAlign="Center" VerticalAlign="Top" Width="60px" />
<HeaderStyle HorizontalAlign="Center" VerticalAlign="Top" Width="60px" />
</telerik:TreeListTemplateColumn>
<telerik:TreeListTemplateColumn HeaderText="Status" DataField="FAQ_ActiveStatus"
UniqueName="FAQ_ActiveStatus">
<ItemTemplate>
<asp:Label ID="ActiveStatusLabel" runat="server" CssClass='<%# (Convert.ToBoolean(Eval("FAQ_ActiveStatus"))) ? "active" : "inactive" %>'
ToolTip='<%# (Convert.ToBoolean(Eval("FAQ_ActiveStatus"))) ? "Active" : "Inactive" %>'
Text=" "></asp:Label>
</ItemTemplate>
<ItemStyle HorizontalAlign="Center" VerticalAlign="Top" Width="60px" />
<HeaderStyle HorizontalAlign="Center" VerticalAlign="Top" Width="60px" />
</telerik:TreeListTemplateColumn>
<telerik:TreeListTemplateColumn DataField="FAQ_ActiveStatus" HeaderText="Action"
UniqueName="ActiveStatus">
<ItemTemplate>
<asp:ImageButton ID="ActiveInactiveButton" runat="server" ToolTip='<%# (Convert.ToBoolean(Eval("FAQ_ActiveStatus"))) ? "Make inactive" : "Make active" %>'
Width="14px" Height="14px" CommandName="ActiveInactive" ImageUrl='<%# (Convert.ToBoolean(Eval("FAQ_ActiveStatus"))) ? "../App_Themes/ELPISCMS/images/inactive.png" : "../App_Themes/ELPISCMS/images/active.png" %>' />
</ItemTemplate>
<ItemStyle HorizontalAlign="Center" VerticalAlign="Top" Width="60px" />
<HeaderStyle HorizontalAlign="Center" VerticalAlign="Top" Width="60px" />
</telerik:TreeListTemplateColumn>
</Columns>
<EditFormSettings EditFormType="Template" PopUpSettings-Width="100%">
<FormTemplate>
<asp:Panel ID="DetailsPanel" runat="server" DefaultButton="SaveRadButton">
<table border="0" cellpadding="0" cellspacing="5" class="innertable">
<tr>
<td class="td18">
Title : <span class="mandatorymark">*</span>
</td>
<td class="td82">
<telerik:RadTextBox ID="FAQTitleRadTextBox" runat="server" SkinID="FAQTitleRadTextBox">
</telerik:RadTextBox>
<asp:RequiredFieldValidator ID="ReferenceTitleRequiredFieldValidator" runat="server"
ValidationGroup="FAQValidationGroup" Display="Dynamic" SetFocusOnError="true"
ControlToValidate="FAQTitleRadTextBox" CssClass="requiredfield" ErrorMessage="Required!"></asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td class="td18">
Description : <span class="mandatorymark">*</span>
</td>
<td class="td82">
<telerik:RadTextBox ID="FAQDescriptionRadTextBox" runat="server" TextMode="MultiLine"
Rows="8" SkinID="FAQDescriptionRadTextBox">
</telerik:RadTextBox>
<%-- <telerik:RadEditor ID="ReferenceDescriptionRadEditor" runat="server" AutoResizeHeight="false"
EnableResize="false" OnClientLoad="OnClientLoad" EditModes="Design, Html" AllowScripts="false"
ContentFilters="RemoveScripts,MakeUrlsAbsolute,FixUlBoldItalic,FixEnclosingP,IECleanAnchors,MozEmStrong,ConvertFontToSpan,ConvertToXhtml,IndentHTMLContent"
NewLineBr="true" StripFormattingOptions="AllExceptNewLines" StripFormattingOnPaste="AllExceptNewLines"
Height="600px" Width="700px">
<ImageManager ViewPaths="~/uploads/editoruploadimages" UploadPaths="~/uploads/editoruploadimages"
DeletePaths="~/uploads/editoruploadimages" />
<CssFiles>
<telerik:EditorCssFile Value="" />
</CssFiles>
<ContextMenus>
<telerik:EditorContextMenu Enabled="true">
<telerik:EditorTool Name="Cut" />
<telerik:EditorTool Name="Copy" />
<telerik:EditorTool Name="Paste" />
</telerik:EditorContextMenu>
</ContextMenus>
<Tools>
<telerik:EditorToolGroup>
<telerik:EditorTool Name="AjaxSpellCheck" />
<telerik:EditorTool Name="FindAndReplace" />
<telerik:EditorTool Name="SelectAll" />
<telerik:EditorTool Name="Cut" />
<telerik:EditorTool Name="Copy" />
<telerik:EditorTool Name="Paste" />
<telerik:EditorTool Name="Redo" />
<telerik:EditorTool Name="Undo" />
<telerik:EditorTool Name="InsertLink" />
</telerik:EditorToolGroup>
<telerik:EditorToolGroup>
<telerik:EditorTool Name="Bold" />
<telerik:EditorTool Name="Italic" />
<telerik:EditorTool Name="Underline" />
</telerik:EditorToolGroup>
<telerik:EditorToolGroup>
<telerik:EditorTool Name="FontName" />
<telerik:EditorTool Name="RealFontSize" />
<telerik:EditorTool Name="ApplyClass" />
</telerik:EditorToolGroup>
<telerik:EditorToolGroup>
<telerik:EditorTool Name="ForeColor" />
<telerik:EditorTool Name="BackColor" />
<telerik:EditorTool Name="FormatStripper" />
</telerik:EditorToolGroup>
<telerik:EditorToolGroup>
<telerik:EditorTool Name="InsertAnchor" />
<telerik:EditorTool Name="InsertCustomLink" />
<telerik:EditorTool Name="InsertDate" />
<telerik:EditorTool Name="InsertGroupbox" />
<telerik:EditorTool Name="InsertHorizontalRule" />
<telerik:EditorTool Name="InsertUnorderedList" />
<telerik:EditorTool Name="InsertOrderedList" />
<telerik:EditorTool Name="Paragraph" />
<telerik:EditorTool Name="InsertTable" />
<telerik:EditorTool Name="InsertSnippet" />
</telerik:EditorToolGroup>
<telerik:EditorToolGroup>
<telerik:EditorTool Name="Indent" />
<telerik:EditorTool Name="Outdent" />
<telerik:EditorTool Name="JustifyRight" />
<telerik:EditorTool Name="JustifyLeft" />
<telerik:EditorTool Name="JustifyCenter" />
</telerik:EditorToolGroup>
<telerik:EditorToolGroup>
<telerik:EditorTool Name="LinkManager" />
<telerik:EditorTool Name="ImageManager" />
<telerik:EditorTool Name="ImageMapDialog" />
<telerik:EditorTool Name="DocumentManager" />
<telerik:EditorTool Name="ConvertToLower" />
<telerik:EditorTool Name="ConvertToUpper" />
<telerik:EditorTool Name="ToggleScreenMode" />
</telerik:EditorToolGroup>
</Tools>
</telerik:RadEditor>
<div style="float: right;">
<span id="counter" style="text-align: right;"></span>
</div>--%>
<asp:RequiredFieldValidator ID="FAQDescriptionRequiredFieldValidator" runat="server"
ValidationGroup="FAQValidationGroup" Display="Dynamic" SetFocusOnError="true"
ControlToValidate="FAQDescriptionRadTextBox" CssClass="requiredfield" ErrorMessage="Required!"></asp:RequiredFieldValidator>
</td>
</tr>
<td class="td18">
Upload Document : <span class="mandatorymark">*</span>
</td>
<td class="td82">
<telerik:RadUpload ID="UploadDocumentRadUpload" runat="server" ControlObjectsVisibility="AddButton,RemoveButtons"
InputSize="50" AllowedFileExtensions=".png,.jpg,.jpeg,.gif" oncontextmenu="return false;"
onpaste="return false;" ReadOnlyFileInputs="true"/>
<span style="line-height: 15px; vertical-align: top;">
<asp:Label ID="ImageExtensionLabel" runat="server" Text="<br/>(Only .PNG,.JPG,.JPEG,.GIF images allowed)" />
<br />
<asp:Label runat="server" ID="ImageNameLabel" Visible="false" />
</span>
<br />
<telerik:RadProgressArea ID="UploadDocumentRadProgressArea" runat="server" ProgressIndicators="CurrentFileName">
</telerik:RadProgressArea>
<asp:CustomValidator ID="IsFilesSelectedCustomValidator" runat="server" ClientValidationFunction="IsFilesSelected"
Display="Dynamic" SetFocusOnError="true" CssClass="requiredfield" ValidationGroup="FAQValidationGroup"
ErrorMessage="Required!"></asp:CustomValidator>
<asp:CustomValidator ID="ValidateExtensionCustomValidator" runat="server" ClientValidationFunction="validateImageRadUpload"
Display="Dynamic" SetFocusOnError="true" CssClass="requiredfield" ValidationGroup="FAQValidationGroup"
ErrorMessage="<br/>(Only .PNG,.JPG,.JPEG,.GIF images allowed)"></asp:CustomValidator>
</td>
<tr>
<td>
</td>
<td class="td82">
<telerik:RadGrid ID="FilesRadGrid" runat="server" AllowFilteringByColumn="True" AllowPaging="True"
AllowSorting="True" AutoGenerateColumns="False" CellSpacing="0" DataSourceID="FilesSqlDataSource"
GridLines="None" Width="530px" Visible="false" OnItemCommand="FilesRadGrid_ItemCommand">
<MasterTableView DataKeyNames="FAQ_Uploads_ID" DataSourceID="FilesSqlDataSource">
<RowIndicatorColumn FilterControlAltText="Filter RowIndicator column">
<HeaderStyle Width="20px" />
</RowIndicatorColumn>
<ExpandCollapseColumn FilterControlAltText="Filter ExpandColumn column">
<HeaderStyle Width="20px" />
</ExpandCollapseColumn>
<Columns>
<telerik:GridBoundColumn DataField="FileName" FilterControlAltText="Filter FileName column"
HeaderText="File Name" SortExpression="FileName" UniqueName="FileName" FilterControlWidth="80%">
<HeaderStyle HorizontalAlign="Center" VerticalAlign="Middle" />
<ItemStyle HorizontalAlign="Left" Font-Size="11px" Font-Names="Arial" VerticalAlign="Middle" />
</telerik:GridBoundColumn>
<telerik:GridTemplateColumn HeaderText="Action" AllowFiltering="false">
<ItemTemplate>
<asp:ImageButton ID="DeleteImageButton" runat="server" ToolTip="Delete" CommandName="Del"
ImageUrl="~/App_Themes/ELPISCMS/images/delete.png" OnClientClick="if (!confirm('Are you sure, you want to delete this record?')) {return false;}"
CommandArgument='<%# Eval("FAQ_Uploads_ID") +":"+ Eval("FAQ_Uploads_ID") %>' />
</ItemTemplate>
<ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" Width="50px" />
<HeaderStyle HorizontalAlign="Center" VerticalAlign="Middle" Width="50px" />
</telerik:GridTemplateColumn>
</Columns>
<EditFormSettings>
<EditColumn FilterControlAltText="Filter EditCommandColumn column" />
</EditFormSettings>
</MasterTableView>
<FilterMenu EnableImageSprites="False" />
<HeaderContextMenu CssClass="GridContextMenu GridContextMenu_Default" />
</telerik:RadGrid>
<asp:SqlDataSource ID="FilesSqlDataSource" runat="server" ConnectionString="<%$ ConnectionStrings:elpis_cmsConnectionString %>"
SelectCommand="Usp_FAQ_Uploads_Select" SelectCommandType="StoredProcedure">
<SelectParameters>
<asp:ControlParameter ConvertEmptyStringToNull="true" ControlID="FAQIDHiddenField"
DbType="Int32" Name="FAQ_ID" PropertyName="Value" />
</SelectParameters>
</asp:SqlDataSource>
</td>
</tr>
<tr>
<td class="td18">
Status :
</td>
<td class="td82">
<asp:RadioButton ID="ActiveRadioButton" runat="server" CssClass="radiobutton" Checked="true"
GroupName="ActiveInactive" />Active
<asp:RadioButton ID="InactiveRadioButton" runat="server" CssClass="radiobutton" GroupName="ActiveInactive" />Inactive
</td>
</tr>
<tr>
<td>
</td>
<td class="td82">
<telerik:RadButton ID="SaveRadButton" runat="server" Text='<%# (Container is TreeListEditFormInsertItem) ? "Save" : "Update" %>'
CausesValidation="true" CommandName='<%# (Container is TreeListEditFormInsertItem) ? "PerformInsert" : "Update" %>'
ValidationGroup="FAQValidationGroup" Width="80px">
<Icon PrimaryIconUrl="~/App_Themes/ELPISCMS/images/save2.png" PrimaryIconLeft="5"
PrimaryIconTop="3" />
</telerik:RadButton>
<telerik:RadButton ID="CancelRadButton" runat="server" Text="Cancel" CommandName="Cancel"
CausesValidation="false" Width="80px">
<Icon PrimaryIconUrl="~/App_Themes/ELPISCMS/images/cancel2.png" PrimaryIconLeft="5"
PrimaryIconTop="3" />
</telerik:RadButton>
</td>
</tr>
</table>
</asp:Panel>
</FormTemplate>
</EditFormSettings>
<ClientSettings AllowItemsDragDrop="true">
<Selecting AllowItemSelection="True" />
</ClientSettings>
</telerik:RadTreeList>
<asp:SqlDataSource ID="FAQSqlDataSource" runat="server" ConnectionString="<%$ ConnectionStrings:elpis_cmsConnectionString %>"
SelectCommand="Usp_FAQ_Select" SelectCommandType="StoredProcedure"></asp:SqlDataSource>
Can anyone help me ?
Thanks