I have some problems here.
How to begin to write GridView and insert data from the database manually one by one based on the GridView header?
I want to create GridView but the structure is not same in the database. So, I want to enter value from the database based on the GridView header. Is it possible?
Because, before this I only retrieved from the database all at once in the GridView. I did not know on how to retrieve based on the header GridView. I am a beginner in the C# language and hope you can give me some example on this? Thank you.
The following what I have done so far:
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false">
<Columns>
<asp:TemplateField HeaderText="Request Date">
<ItemTemplate>
<asp:Label ID="lblReqDate" runat="server" Text='<%# Eval("request_date") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="A01"></asp:TemplateField>
<asp:TemplateField HeaderText="A02"></asp:TemplateField>
</Columns>
</asp:GridView>
</div>
</form>
</body>
</html>
Consider data your column has a semi-colon(;) as separator. Then do as below
Add template column with labels in them.
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:GridView ID="GridView3" runat="server" OnRowDataBound="GridView3_RowDataBound" AutoGenerateColumns="false">
<Columns>
<asp:TemplateField HeaderText="Request Date">
<ItemTemplate>
<asp:Label ID="lblReqDate" runat="server" Text='<%# Eval("request_date") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="A01">
<asp:Label ID="lblA01" runat="server" ></asp:Label>
</asp:TemplateField>
<asp:TemplateField HeaderText="A02">
<asp:Label ID="lblA02" runat="server" ></asp:Label>
</asp:TemplateField>
</Columns>
</asp:GridView>
</div>
</form>
</body>
</html>
Now in data grid row bound split data and bind
protected void GridView3_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
Label lblA01 = (Label)e.Row.FindControl("lblA01");
Label lblA02 = (Label)e.Row.FindControl("lblA02");
string val = DataBinder.Eval(e.Row.DataItem, "product").ToString();
string[] splittedData = val.Split(';');
if (splittedData.Length > 0)
lblA01.Text = splittedData[0];
if (splittedData.Length > 1)
lblA01.Text = splittedData[1];
}
}
}
Hope this helps
Related
Hi I am developing one application. I have one multiselect dropdownlist box. Whenever i select one value in dropdownlistbox corresponding value in gridview will be having checkbox in below gridview. I want to disable that checkbox. I am basically mvc developer and finding hard times to fix this. I am trying my level best to fix this. For example, whever i select some value in dropdown I am getting ID using jquery as below.
<script>
$(function() {
$('.limitedNumbSelect2').change(function (e) {
var selected = $(e.target).val();
});
});
This is my gridview.
<asp:GridView ID="gdvRegretletter" CssClass="tableform" runat="server" AutoGenerateColumns="False" DataKeyNames="Vendor_ID"
EmptyDataText="No records found !" ShowHeaderWhenEmpty="true" AllowPaging="true" OnPageIndexChanging="gdvRegretletter_PageIndexChanging">
<Columns>
<asp:TemplateField ShowHeader="true" HeaderText="Select All">
<HeaderTemplate>
<asp:CheckBox ID="checkAll" runat="server" Text="Check All" onclick="checkAll(this);" />
</HeaderTemplate>
<ItemTemplate>
<asp:CheckBox ID="chkselect" runat="server" onclick="Check_Click(this)" />
<asp:HiddenField ID="id" runat="server" Value='<%#Eval("Vendor_ID")%>' />
</ItemTemplate>
<HeaderStyle Width="8%" />
<ItemStyle VerticalAlign="Top" Width="8%" />
</asp:TemplateField>
<asp:TemplateField HeaderText="Username">
<ItemTemplate>
<asp:Label ID="lblUsername" runat="server" Text='<%#Eval("Username") %>' />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Name">
<ItemTemplate>
<asp:Label ID="lblName" runat="server" Text='<%#Eval("Name") %>' />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Email Id">
<ItemTemplate>
<asp:Label ID="lblEmail" runat="server" Text='<%#Eval("Email") %>' />
</ItemTemplate>
</asp:TemplateField>
</asp:GridView>
Whenecer i select some value from multiselect dropdownlist box I get id in a variable selected. As soon as I get ID in a variable selected i want to disable that checkbox in gridview. May i have some suggestions on this! Thank you all
Furthur i tried as below.
This is jquery code to hide checkbox
$('.limitedNumbSelect2').change(function (e) {
selected = $(e.target).val();
`$(".disablechk[Text='selected']").prop("disabled", true);`
This is my checkbox code inside gridview.
<asp:CheckBox ID="chkselect" runat="server" onclick="Check_Click(this)" Text='<%#Eval("Vendor_ID")%>' class="disablechk"/>
I am trying to do whenever i get some value from dropdown slected i want to disable that particular checkbox.
If you are getting comma separated string then split it and make an array
var temp = new Array();
temp = selected.split(",");
then loop through it
$.each(temp, function( index, value ) {
$(".disablechk[Text='" + value + "']").prop("disabled", true);
});
You can loop the GridView HiddenField values and disable the checkbox accordingly.
<script type="text/javascript">
$(function() {
$('.limitedNumbSelect2').change(function (e) {
checkGridView($(e.target).val());
});
});
function checkGridView(selected) {
$('#<%= gdvRegretletter.ClientID %> input[type="hidden"]').each(function () {
if ($(this).val() == selected) {
var checkbox = $(this).prev();
checkbox.prop("disabled", true);
}
});
}
</script>
I am working on creating a nested gridview. I am using an example from: http://www.aspsnippets.com/Articles/ASPNet-Nested-GridViews-GridView-inside-GridView-with-Expand-and-Collapse-feature.aspx
The problem is the "minus" of the script does not remove the nested gridview. What seems to be happen is the "plus" function seems to trigger again and again.
<script type = "text/javascript">
$(document).ready(function () {
$("[src*=plus]").on("click", function () {
$(this).closest("tr").after("<tr><td></td><td colspan = '999'>" + $(this).next().html() + "</td></tr>")
$(this).attr("src", "images/minus.png");
});
$("[src*=minus]").on("click", function () {
$(this).attr("src", "images/plus.png");
$(this).closest("tr").next().remove();
});
});
I am using an UpdatePanel (The 2 gridviews are Inside).
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<script type="text/javascript">
Sys.Application.add_load(BindEvents);
</script>
<asp:GridView ID="GridView1" runat="server" Width = "100%" AutoGenerateColumns = "False" Font-Names = "Arial" CssClass="table table-hover table-bordered"
Font-Size = "11pt" AlternatingRowStyle-BackColor = "#F18903" HeaderStyle-BackColor = "#F18A07" AllowPaging ="True"
DataKeyNames="Rut" OnPageIndexChanging = "OnPaging" onrowediting="EditCustomer" OnRowDataBound="OnRowDataBound" onrowupdating="UpdateCustomer" onrowcancelingedit="CancelEdit" >
<Columns>
<asp:TemplateField>
<ItemTemplate>
<img alt = "" style="cursor: pointer" src="images/plus.png" />
<asp:Panel ID="pnlOrders" runat="server" Style="display: none">
<asp:GridView ID="gvOrders" runat="server" AutoGenerateColumns="false" CssClass = "ChildGrid">
<Columns>
<asp:BoundField ItemStyle-Width="150px" DataField="Nombre" HeaderText="Order Id" />
<asp:BoundField ItemStyle-Width="150px" DataField="Rut" HeaderText="Date" />
</Columns>
</asp:GridView>
</asp:Panel>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText = "Nombre" >
<ItemTemplate>
<asp:Label ID="lblNombre" runat="server" Text='<%# Eval("Nombre")%>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText = "Rut">
<ItemTemplate >
<asp:Label ID="lblRut" DataField="Rut" runat="server" Text='<%# Eval("Rut")%>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText = "Fecha de Nacimiento">
<ItemTemplate>
<asp:Label ID="lblFecha_Nac" runat="server" Text='<%# Eval("Fecha_Nac")%>'></asp:Label>
</ItemTemplate>
<EditItemTemplate>
<div class='input-group date' id='datetimepicker1'>
<asp:TextBox ID="txtFecha_Nac" runat="server" Text='<%# Eval("Fecha_Nac")%>'></asp:TextBox>
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
</div>
</EditItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText = "Celular">
<ItemTemplate>
<asp:Label ID="lblCelular" runat="server" Text='<%# Eval("Celular")%>'></asp:Label>
</ItemTemplate>
<EditItemTemplate>
<asp:DropDownList ID="txtCelular" runat="server" >
<asp:ListItem Text="SI" Value="1" />
<asp:ListItem Text="NO" Value="0" />
</asp:DropDownList>
</EditItemTemplate>
</asp:TemplateField>
<asp:CommandField EditText="Editar" ShowEditButton="True" />
<asp:TemplateField HeaderText="Informacion Adicional" >
<ItemTemplate>
<asp:Button ID="Btn1" runat="server"
Text="Ver Mas" CommandArgument="Button1"
OnClick="Btn1_Click"/>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Cambio Final" >
<ItemTemplate>
<asp:Button ID="BtnCambio" runat="server"
Text="Check" CommandArgument="Button1"
OnClick="Btn1_ClickCambioFinal"/>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Image">
<EditItemTemplate>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</EditItemTemplate>
<ItemTemplate>
<asp:Image ID="Image1" runat="server" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
<AlternatingRowStyle BackColor="#FBEDBB" />
<HeaderStyle BackColor="#F18A07" />
</asp:GridView>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID = "GridView1" />
</Triggers>
</asp:UpdatePanel>
This is an issue with what event is bound when the document is ready.
If you want to "toggle" between two function calls, there are many addon that can help you with that (see this SO question).
An easy way to implement it would be to use jquery one function as mentionned by Tushar Gupta.
function plus() {
$(this).closest("tr").after("<tr><td></td><td colspan = '999'>" + $(this).next().html() + "</td></tr>");
$(this).attr("src", "images/minus.png");
$(this).one("click", minus);
}
function minus() {
$(this).attr("src", "images/plus.png");
$(this).closest("tr").next().remove();
$(this).one("click", plus);
}
$(document).ready(function(){
$("[src*=plus]").one("click", plus);
//You might want to change the selector with a class
// to your img so you don't have to worry about
// opened or closed by default
});
Hope this helps!
Explanations :
The on function bind the event to the DOM element when it is called. In your case, when the document is ready.
When the document is loaded, all your table lines are showing the expand image. Therefore, the "plus click" function is bound to all the img tags.
On the other hand, there are no element showing the minus sign (yet). So no "minus click" function is bound.
The on function doesn't care if you change your element attributes. Remember that your selector selects the elements, even though you filter through the attribute.
In the link you provided, the author used the live function. This function is now deprecated, but it was basically a on function, that would work on the selector now and in the future. This is not the case anymore with the on function.
I would assume that you need to re-subscribe to the events. JavaScript is executed top-down which means that after you have subscribed to the event, elements created later will not trigger that event.
Like the following example:
function myEventHandler () {
// In here you perform your event-specific code
eventSubscription();
}
var eventSubscription = function () {
// Make sure to unsubscribe to prevent event to fire multiple times
$('.myClass').unbind('click');
// Re-subscribe to event
$('.myClass').on('click', myEventHandler);
}
// Call the eventSubscription to hook your events
eventSubscription();
As noMad17 said, you need to re-subscribe to your js methods after a postback, even though you're using an updatePanel. Here is my code:
//js file:
$(document).ready(function () {
loadConfiguration();
});
function loadConfiguration()
{
//add your configuration here
}
//aspx file
<asp:UpdatePanel runat="server" ID="upnl1" UpdateMode="Conditional" >
<ContentTemplate>
<script type="text/javascript">
Sys.Application.add_load(loadConfiguration);
</script>
<!--More code here...-->
</asp:UpdatePanel>
After postback, UpdatePanel is build and all the content inside it as well, so it will load the js code inside add_load again.
Hope it helps
I have an issue with having a asp.net Grid View loaded into a div tag on a page (UI/Host.aspx). The Grid View itself is on a seperate page (GridViews/GridView1.aspx) and I'm using the jQuery load() function to load this page into the div tag.
My problem is when sorting the grid view it tries to postback to the page that's hosting it, and comes back with the error "Unable to find page UI/GridView1.aspx", is there a way to override this so that it post backs to itself, (which I assumed it would but doesn't) or is there an easier way to do the sorting.
Is there any other way of doing this, even if it means getting rid of the GridView altogether and using a repeater and table?
Below is the code:
UI/Hosts.aspx
//jQuery to load the div with the page UI/Hosts.aspx
$(document).ready(function() {
StartRefresh();
});
function startRefresh()
{
refreshID = setInterval(function() {
DisplayDate();
$("#divDests").load("../GridViews/Gridview1.aspx?ConfigID=" + $("#ctl00_MainContent_dlConfiguration").val() + "&ModuleID=" + $("#ctl00_MainContent_ddlModule").val());
}, $("#ctl00_MainContent_ddlRefresh :selected").val());
}
GridViews/Gridview1.aspx;
//Markup for GridViews/Gridview1.aspx
<html>
<head><title></title></head>
<body>
<form runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:UpdatePanel ID="up1" runat="server">
<ContentTemplate>
<br />
<asp:GridView Font-Size="8.7pt" ID="gvLiveDest" runat="server" AutoGenerateColumns="False"
EmptyDataText="No Records Found" AllowSorting="true"
onsorting="gvLiveDest_Sorting" onrowcreated="gvLiveDest_RowCreated" OnRowDataBound="gvLiveDest_RowDataBound">
<Columns>
<asp:TemplateField HeaderText="Name" SortExpression="DestinationName" HeaderStyle-CssClass="centralalignment">
<ItemTemplate>
<asp:Label ID="lblDescription" runat="server" Text='<%# WebHelper.HTMLSafe(Eval("Description")) %>' ToolTip='<%# WebHelper.HTMLSafe(Eval("Description")) %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Logged <br /> In" HeaderStyle-CssClass="centralalignment" SortExpression="LoggedIn" >
<ItemStyle CssClass="centralalignment" />
<ItemTemplate>
<asp:Label ID="lblLoggedIn" runat="server" Text='<%# SetLoggedIn(Convert.ToBoolean(Eval("Active"))) %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Current<br />Status" HeaderStyle-CssClass="centralalignment" SortExpression="LastStatus" >
<ItemStyle CssClass="centralalignment" />
<ItemTemplate>
<asp:Label ID="lblCurrentStatus" runat="server" Text='<%# WebHelper.HTMLSafe(Eval("LastStatus")) %>' ToolTip='<%#Eval("LastStatus") %>' />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Time in<br />Current<br />Status" HeaderStyle-CssClass="centralalignment" SortExpression="CurrentDuration">
<ItemStyle CssClass="RightAlignment" />
<ItemTemplate>
<asp:Label ID="lblCurrentTime" runat="server" Text='<%# ICT.DAL.Reporting.CallDurFormat(Eval("CurrentDuration")) %>' />
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="Lines" HeaderText="Lines" HeaderStyle-CssClass="centralalignment" SortExpression="Lines"
ItemStyle-CssClass="centralalignment" />
<asp:BoundField DataField="LinesBusy" HeaderText="Lines <br /> Busy" HeaderStyle-CssClass="centralalignment"
ItemStyle-CssClass="centralalignment" ReadOnly="True" HtmlEncode="False" SortExpression="LinesBusy" />
<asp:BoundField DataField="LinesAvailable" HeaderStyle-CssClass="centralalignment"
ItemStyle-CssClass="centralalignment" SortExpression="LinesAvailable"
HeaderText="Lines <br /> Available" HtmlEncode="false" ReadOnly="True" />
<asp:TemplateField HeaderText="Last Call Time" SortExpression="Timestamp" HeaderStyle-CssClass="centralalignment">
<ItemTemplate>
<asp:Label ID="lblLastCallTime" runat="server" Text='<%# WebHelper.HTMLSafe(Eval("LastCallTime")) %>' ToolTip='<%# WebHelper.HTMLSafe(Eval("LastCallTime")) %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</ContentTemplate>
</asp:UpdatePanel>
</form>
</body>
</html>
And the onSort Event Code (However it never hits this)
protected void gvLiveDest_Sorting(object sender, GridViewSortEventArgs e)
{
if (string.Compare(e.SortExpression, ViewState["SortField"].ToString(), true) == 0)
{
_sortDir = (_sortDir == "ASC") ? "DESC" : "ASC";
}
else
_sortDir = "ASC";
_SortField = e.SortExpression;
ViewState["SortField"] = e.SortExpression;
ViewState["sortDir"] = _sortDir;
BindLiveDestination();
}
I switched over to client-side paging/sorting a while ago and haven't been happier. Of course, you would need to set AllowSorting="false" and AllowPaging="false" in your GridView.
You could put it into an iframe...
I'm using repeater control from asp.net for data binding. And for designing i used the div & span for data representation. I have 4 fields to my table & i want to show the images on the each span depending on the field value. Images are stored in my project path itself.
How to do this?
Use this
<asp:Repeater ID="RepeaterImages" runat="server">
<ItemTemplate>
<img src='<%#GetImage(Databinder.Eval(Container.DataItem, "ImageID"))%>' alt="" width="" height="" />
</ItemTemplate>
</asp:Repeater>
Now we need to create a function to retrieve the image using that ID.
public string GetImage(object ImadeID)
{
if(ImageID!=null)
{
//do something with the ImageID to return the image path as string
}
else
{
return "";
}
}
<asp:Repeater ID="RepeaterImages" runat="server">
<ItemTemplate>
<asp:Image ID="Image" runat="server" ImageUrl='<%# Container.DataItem %>' />
</ItemTemplate>
</asp:Repeater>
<asp:Repeater ID="RepeaterImages" runat="server">
<ItemTemplate>
<asp:Image ID="Image" runat="server" ImageUrl='<%# Container.DataItem %>'
Visible ='<%# Container.DataItem.ToString() == "0" ? true : false %>' />
</ItemTemplate>
</asp:Repeater>
hai pupils
I am doing a project on online education. In my project i display the trainees/trainers in in a gridview. If i select any data from the gridview it has to be dispalyed in the label kept below. How can i do this?
Thanks in advance for those who answers.
Use asp:LinkButton to show data in each column. Set commandArgument as the data. set same comandname and handle rowcommand in gridview rowcommand event.
try the following:
in aspx page:
<asp:GridView ID="GridView1" OnRowCommand="GridView1_RowCommand" runat="server">
<Columns>
<asp:TemplateField HeaderText="CategoryID">
<ItemTemplate>
<asp:LinkButton ID="lnkID" runat="server" CommandName="sel" CommandArgument='<%# DataBinder.Eval(Container,"DataItem.CategoryID") %>'
Text='<%# DataBinder.Eval(Container,"DataItem.CategoryID") %>'></asp:LinkButton>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="CategoryName">
<ItemTemplate>
<asp:LinkButton ID="lnkName" runat="server" CommandName="sel" CommandArgument='<%# DataBinder.Eval(Container,"DataItem.CategoryName") %>'
Text='<%# DataBinder.Eval(Container,"DataItem.CategoryName") %>'></asp:LinkButton>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
<asp:Label ID="lblCat" runat="server"></asp:Label>
in aspx.cs page:
protected void GridView1_RowCommand(object sender, GridViewCommandEventArgs e)
{
if (e.CommandName == "sel")
{
lblCat.Text = e.CommandArgument;
}
}