I have a aspx file which consist of inner ascx files. I use ascx files as a user control file. There is a menu bar on the left side of aspx file(outer file). if a grid file is empty in user control files; I want to set the color of the menu of it blue. I want to do it with js because of lag problems.
aspx outer file Default.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="Ozgecmis.Default" MaintainScrollPositionOnPostback="true" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7" />
<title>Özgeçmiş</title>
<script>
$(document).ready(function () {
var gridView = document.getElementById("<%=gridTecrube.ClientID %>");
var rows = gridView.getElementsByTagName("tr")
if (rows.length == 1) {
document.getElementById('ozgecmis-nav').children[5].style.color = 'blue';
}
});
</script>
</head>
<body data-spy="scroll" data-target=".ozgecmis-sidebar">
<form id="formOzgecmis" runat="server">
<section id="top" class="section-start" style="position: absolute;"></section>
<asp:PlaceHolder ID="ctlTemplatePlaceHolder" runat="server"></asp:PlaceHolder>
<asp:Panel ID="ctlContentPanel" CssClass="SectionPanel" runat="server" Width="100%">
<link href="/Assets/csspages/ozgecmis-default.css?v=20160307" rel="stylesheet" />
<div class="row">
<div class="span3 ozgecmis-sidebar">
<ul class="nav nav-list ozgecmis-sidenav" id="ozgecmis-nav">
<li><a href="#ogrenim" class="section-link">Öğrenim Bilgileri</a></li>
<li><a href="#meslek" class="section-link">Meslek Bilgileri</a></li>
<li id="tecrubeMenu" runat="server" Visible ="true"><a href="#tecrube" class="section-link">İş Tecrübesi</a></li>
</ul>
<br />
</div>
<div class="span9">
<div style="min-height: 60px; padding-top: 10px;">
<table class="pull-right">
<tr>
<td><span style="font-size: calc(30px + 1vw); font-weight: bold;">Özgeçmiş</span></td>
<td style="padding-left: 20px;">
<ozgecmisUserControl:OzgecmisDolulukOran runat="server" ID="ucOzgecmisDolulukOran" />
</td>
</tr>
</table>
</div>
<div id="divTecrube" runat="server">
<section id="tecrube">
<div class="section-header warning" style="background-color:pink;" id="isTecrubesiBos" runat="server" ClientIDMode="Static" >
İş Tecrübesi
</div>
<div class="section-body">
<ozgecmisUserControl:OzgecmisTecrube
runat="server" ID="ucOzgecmisTecrube" />
</div>
</section>
</div>
<section id="end" class="section-end"></section>
</div>
</div>
<script src="/Assets/jspages/ozgecmis-default.js?v=20210620" type="text/javascript"> </script>
</asp:Panel>
</form>
ascx (inner) file: OzgecmisTecrube.ascx
<%@ Control Language="C#" AutoEventWireup="true" CodeFile="OzgecmisTecrube.ascx.cs" Inherits="Ozgecmis.UserControls.OzgecmisTecrube" %>
<asp:UpdatePanel runat="server" ID="upOzgecmisTecrube" UpdateMode="Conditional">
<ContentTemplate>
<div id="divYardimOzgecmisTecrube" class="hide">
<iskurControls:IskurPortalTableHeader ID="headerOzgecmisTecrube" runat="server">
</iskurControls:IskurPortalTableHeader>
</div>
<asp:GridView ID="gridTecrube" runat="server" AutoGenerateColumns="false" ShowHeader="false" ShowFooter="false"
CssClass="table table-bordered table-condensed"
EmptyDataText="Kayıtlı İş Tecrübesi Bilgisi Bulunmamaktadır."
OnRowDataBound="OnGridRowDataBound" OnRowCommand="OnGridRowCommand" OnRowCreated="OnGridRowCreated"
DataKeyNames="KAYITNO"
RowStyle-CssClass="ozgecmis-grid-row" AlternatingRowStyle-CssClass="ozgecmis-grid-row- alternate" SelectedRowStyle-CssClass="ozgecmis-grid-row-selected">
<Columns>
<asp:TemplateField ItemStyle-CssClass="ozgecmis-data-key">
<ItemTemplate>
<asp:Button runat="server" ID="dataKeyButton" CommandArgument='<%#DataBinder.Eval(Container.DataItem,"KAYITNO") %>' Visible="false" />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField ItemStyle-CssClass="ozgecmis-data-command" ItemStyle-VerticalAlign="Middle">
<ItemTemplate>
<a href="#" class="btn btn-small btn-info">Seç</a>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</ContentTemplate>
</asp:UpdatePanel>
Ok, you have several problems and issues here.
First up, do you REALLY use "*" in a id for a control? Don't do that, I mean jQuery and many selectors use a * or some type of wild card character, and THEN using a "*" in a id is a really bad idea.
Next up: What happens if you drop 1 or 4 of those user controls on a given page? Then what happens to the gridview id you have in that user control?
It turns out to prevent collusions for user controls (since you are allowed to drop in multiple instances of a user control) then the control names are prefixed with the user control name!
So, you need to use UserControlID_GridViewName
So this:
And keep in mind if you using a master page, then a 3rd prefix is added! So, OFTEN you wind up with a "hierarchy" of prefix(s) in front of those control names.
And you have even a greater issue. In that user control, you also introduced a update panel. This is presumably to limit post-backs. However, since you using a update panel, then the JavaScript on-ready page event now will NOT fire anymore! (so you digging even a deeper hole here!!!).
If that user control ONLY ever loads at page load time the you would be fine (and thus would not need to nest the GV in that update panel).
However, I suspect you using a update panel since some kind of actions occurs inside of that update panel.
As a result, with a update panel, then your JavaScript page-load event does not fire anymore, since you not posting back the whole page anymore, are you?
So, you are creating a real mess here.
I would actually have the user control get/grab/use the control you want to update, and do that in the user control code behind. This would not only be the most simple approach, but also would be the most reliable. However, this means you would have to warp you left side menu system into another update panel. (keep in mind that if you have multiple update panels, then they ALL GO UP TO the server on a single post-back. This thus would allow the code in the user control that loads the gv to ALSO set/change and do whatever you want (such as change color).
The other road? Well, you need to wire up some JavaScript code that runs AFTER the update panel has made its round trip and is done updating. This idea is quite workable, and thus you need BOTH a page on-ready JavaScript code as you have now, and ALSO an additional routine that gets called AFTER the update panel has done its work.
In fact, you can probably use JUST the routine that runs after the update panel, since it should fire in both cases (first page load, after update panel done), and also when just the update panel does it's post-back and round trip).
So, you can add this code to the aspx page:
(place this code below, or after the update panel, and thus you can quite much place this code as the last lines of code right before the closing form tag. (or even right after the form tag)
Thus, this code:
Above is "air code", but you need to add code that runs after the update panel runs.