I am new to html tables in vb.net.
i have an html table with all functionality i need (Expanding and collapsing row on click etc) ,how can i link that table with sql database.
I can show database details in grid view..
But My table have functions such as on click of row ,the row having 4 fields must expand down with 10 text boxes (other than shown on row) must be displayed together with few buttons.Hence i used javascript for expand/collapse row
As told how can i make the rendered grid view row clickable and expandable
You will want to use an asp.net control called a GridView. When rendered, it becomes an HTML table. It can then be manipulated by CSS and Javascript.
http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.gridview.aspx
GridView not being an option, try using a Literal:
<asp:Literal ID="LiteralTable" runat="server"></asp:Literal>
Codebehind:
StringBuilder sb = new StringBuilder();
sb.Append("<table>");
for (int i = 1; i < 15; i++)
{
sb.Append("<tr class=\"clickable\"><td>" + FirstColumn[i] + "</td>" + "<td>" + SecondColumn[i] + "</td></tr>");
sb.Append("<tr class=\"expandable\"><td>Edit</td>" + "<td>More Info</td></tr>");
}
sb.Append("</table>");
LiteralTable.Text = sb.ToString();
And then work your javascript (or jquery) magic:
$(".clickable").click().next().show();
And in this case just load your database into the array before calling the stringbuilder!
If you are using ASP.NET WebForms, it's actually really easy to make GridView to suit your needs.
You can either use Visual Studio's built-in toolkit, and just drag to your WebForm, set your SQLDataSource, and set to selectable, and then to editable. I think VS 2010 and up have a quick code generated one by using toolkit, but here's what the code might look like:
<asp:GridView ID="gvPreview" runat="server" CssClass="gvPreview" AutoGenerateEditButton="true">
</asp:GridView>
I don't have SQL on my machine at the moment so I can't use the GUI Wizard exactly to show you what it would look like, but I can.
Related
Based on testing values of an existing panel/label inside an ItemTemplate (uses Column1), I want to add another panel/label inside the same ItemTemplate (displays Column2).
This is inside a custom control (.ascx) that I want to control the addition of one particular <asp:Panel> based on if it (or another panel) has a particular value or not. If not, I don't want the <asp:Panel> to be created (shouldn't generate the <div> at runtime). If yes, I want to generate the <asp:Panel> inside
the
<asp:DataGrid><Columns><ItemTemplate>
Example: Assuming we are getting Column2 value as expected, I want to render this value only if it's not '0', if not I don't want to CREATE the extra tag inside the given <ItemTemplate> . I will control when it's rendered based on another tag.
If(Column2!='0')
//Adding some condition for Column1 ...
Create the `<div>` tag i.e Add the `<asp:Panel>`
How should I call this code also?
That means, the html generated will have the additional div/span tags on some cases and should not have the tags generated on other cases.
Can this be done avoiding Javascript.
One could use the <asp:PlaceHolder> control to place the control at a certain place in the .ascx, say:
<asp:PlaceHolder id="placeHere" runat="server /> and determine based on the other control whether this should be added.
Example:
If(Column1 condition)
{
Label addToGrid = new Label();
addToGrid.Text = column1;
addToGrid.Visible = true;
placeHere.Controls.Add(addToGrid);
}
I need to have a grid on one of my webpages that will be used to enter budget information. I was planning on using a gridview, but I am open to other ideas if something else will fit my needs better. I need the following functionality in my grid:
All cells are in edit mode as soon as the page loads
Need a footer row at the bottom to
calculate totals for particular columns
I looked around for this functionality in the gridview for a bit but didn't have any luck. Any links or suggestions on how to do the two items above in a gridview would be greatly appreciated.
NOTE: I'm using Visual Studio 2008
IMO you are going to be much better off coding this yourself using a ListView. You can look into the DataBound() and ItemDataBound() events. The GridView does not come with the functionality built in.
OTOH, Matt Dotson has a blog post describing how to build a GridView with all rows in edit mode.
Totals in the footer can be applied using a combination of javascript executed on each data change and form load AND dynamically adding textboxes or labels to the footer via the GridView's RowDataBound event. For example,
// Create textboxes in footer to hold hours totals
if (e.Row.RowType == DataControlRowType.Footer)
{
e.Row.CssClass = "wgv-ft";
for (int i = 0; i < NumHoursTextBoxes; ++i)
{
var tb = new TextBox();
tb.ID = String.Format("Hours{0}TotalTextBox", i);
tb.CssClass = "total";
tb.Enabled = false;
e.Row.Cells[FirstHoursTextBoxIndex + i].Controls.Add(tb);
}
}
Rather than using the built-in edit functionality (EditItemTemplates) which the GridView offers, you might want to just use the ItemTemplates and always show an editable textboxes or other controls. I've used this technique. You can still take advantage of validators and the core ASP.NET control set, but you do have to write quite a bit of javascript to manage updates to the totals.
I hope this helps. Best of luck.
I dynamically add rows to divStaff using jquery:
$("span[id$='lblAddStaff']").click(function() {
//$(".staff_tpl").find("input[id$='txtRate']").val("0,00");
var staff_row = $(".staff_tpl");
staff_row.find(".staff_row").attr("id", "Emp" + counter);
$("div[id$='divStaff']").append(staff_row.html());
counter += 1;
});
the row that I'm adding is inside the hidden div with class=".staff_tpl"
I append the contents of this div to divStaff
When I submit the page (postback), the resulting divStaff is always empty if I try to display it like this:
lblTest.Text = divStaff.innerHtml.ToString
basically, I'm manipulating a div client side, and I want to access it server side via the code-behind of my aspx page. I think I'm missing a basic principle here.
This cannot be done.
If you want to access data you've created pn the page, you have to place it inside input fields (possibly hidden), and access it after it was posted using Request.Form["MyHiddenFieldName"].
<div>s aren't posted to the server. runat="server" elements are enechoded in the ViewState (a big string, really - you can see it in the source of your page), giving the abstraction of continuity (or the illusion of it). However, that sting isn't aware of changes you make in the DOM.
When dealing with runat="server" elements, you will see the last changes you've made on the server side, but client side changes are gone.
Only <input> (and text area, option, etc) values are posted to the server on submit, so changing these on the client will be seen on the server, after the page was posted.
I'm generating a table of content in an ASP.NET page and I want to add client side OnClick actions to each cell (the action should be to set the value of a named TextBox control to the text in the clicked cell). If I could directly add stuff to the HTML output, I think I could do this with a single line of JavaScript in each cell.
Given that I'me not now using JQuery (and never have before), what is the simplest solution to adding this (including the time spent learning stuff)?
Edit: this seems to work
If you are creating your table programmatically, using HtmlControls, you can set the onclick client attribute of the HtmlTableCell:
HtmlTableCell cell = new HtmlTableCell();
cell.Attributes.Add("onclick", "someFunction();");
However, if you're using jQuery you can do something like this:
$('td').click(function(){ // Select all the table cells on the document.
$(this).html($('#textboxId').val()); // When clicked, change the innerHTML
}); // with a textbox value.
it depends how you're generating that table of content.
If bulding up using a table control, you can add JavaScript to TableCell controls using the Attributes.Add() method.
If building up with the GridView, you can add JavaScript when the RowDataBound event is raised
You should give each cell a css class... class="contentsCell"
You can then add the following script to your head tag (along with a jquery include)
$(document).ready(function(){
$(".contentsCell").click(function(){
CallYourFunction();
})
})
Where CallYourFunction() is you own function...
This will basically attach an
onclick=" CallYourFunction();"
to each td cell (or any other element) with the class "contentsCell"
Also, if you want to grab the text inside the cell, something like:
$(document).ready(function(){
$(".contentsCell").click(function(){
var mytext = $(this).text();
CallYourFunction(mytext);
});
});
Check out visualjquery.com for a great reference for jquery
Well, your question is kind of difficult to follow, but I'll give you a few pointers.
Each control has a ClientID property. This is useful for injecting into your javascript so you know the client side id of the control.
jQuery syntax for putting text into a textbox would be like the following:
$("#" + clientId).attr("value", theValue);
and the jQuery syntax for getting text from a cell would be:
$("#" + cellId).html()
Does anyone know how i can get the grid to select a row by clicking on any cell in the row?
The only way i can do this at the moment is by setting the AutoGenerateSelectButton property to True, but this adds a column to the grid with a crude "select" hyperlink and only selects the row if the word "Select" is cliked on.
Surely there has to be a better way!?!?
NOTE - I do not use C#
You need to add some javascript to the row in RowDataBound
e.Row.Attributes["onclick"] =
ClientScript.GetPostBackClientHyperlink
(this.GridView1, "Select$" + e.Row.RowIndex);
There's a CodeProject article about it here, which goes into much more detail.
This is ancient, but here is the VB.NET equivalent:
Dim cs As ClientScriptManager = Page.ClientScript
Dim postbacklink As String = cs.GetPostBackClientHyperlink(lbtnSelectRow, "")
And if do not want to write any code check out the client-side selection of the Telerik grid. I am pretty content with it when using it during my web development.