I have a gridview data and this gridview have subgrid too.
in the first column of the grid view having + symbol so that i can expand the grid to see subgrid.. but now problem is I need to have a button in the bottom of the grid to expand all the gridview subgrid at a time..
Thanks
Give a class to every button that is used to expand row and then use jQuery trigger:
<table>
<tr>
<td><button class='expand-row-button'>+</button></td><td>other things</td>
</tr>
<tr>
<td><button class='expand-row-button'>+</button></td><td>other things</td>
</tr>
<tr>
<td><button class='expand-row-button'>+</button></td><td>other things</td>
</tr>
</table>
<button onclick="$('.expand-row-button').trigger('click');">Expand all rows</button>
** EDIT **
Because you are using jqGrid, you should look at expandSubgridRow method. This method is used to expand row with specified id. You can iterate through rows in your view and generate code to expand every row.
Related
I have a list of employees (around 500). In a component I want to display this list. I display the list as a table. Each individual row is defined in a component. The user can edit a data row inline on demand. For that purpose I insert an input field when the user wants to edit the data. The following exemplifies my current solution:
<!--Parent Component-->
<table>
<thead>[...]</thead>
<tbody>
<Virtualize Items="employeeData">
<TableRow rowModel="context" />
</Virtualize>
</tbody>
</table>
<!--Child Component-->
#if(IsInEditMode)
{
<tr>
<td><input #bind="#employee.name" /></td>
<td>...</td>
<td><button #onclick="SaveData">Save</button>
</tr>
}
else
{
<tr>
<td>#employee.name</td>
<td>...</td>
<td><button #onclick="EnableEditing">Edit</button>
</tr>
}
I introduced virtualization as I noticed a big delay while typing in the input fields. Using virtualization the typing is working perfectly fine again.
As a result I noticed the following issue though:
When I scroll out of sight, the rows get reset - the inserted data gets lost and the editing mode is turned off. My guess is that is happening because the row gets rerendered and by default
editing is turned off.
How do I keep the state of specific components while using the virtualization feature?
The issue seemed to be that virtualisation had problems rendering the child components. Integrating the child component into the parent component resolved the problems.
I'll try to investigate further whether this was a problem with my component or a problem of blazor's virtualisation.
I want to generate a table in following fashion :
<table>
<tbody>
<tr class="folder" style="-moz-user-select: none;">
<td><div><img src="folder.png"><span>home</span></div></td>
<td class="bytes">Folder</td>
</tr>
<tr class="folder hover" style="-moz-user-select: none;">
<td><div><img src="folder.png"><span>share</span></div></td>
<td class="bytes">Folder</td>
</tr>
</tbody>
</table>​
I want to add the rows from the CS code depending on the number of entries.
Instead of "adding elements to html table" you should consider using Repeater for data display, which would give you clean html (exactly as you want).
Then on each click you would do what you need to do (code behind) and rebind the repeater.
Hope that helps.
I would agree with Sebastian why not use a repeater or datalist to bind the data. What source are you using to get your data from? If your pulling the data from a SQL table here is a pretty good article on how to get you started.
http://msdn.microsoft.com/en-us/library/aa719636(v=vs.71).aspx
I'm trying to add a "panel" with controls dynamicaly. Something like the code below, Clicking "Add" button, displays a "Panel" with the controls(which are within a table), the number of "Education" someone can enter is unlimited. I know how to capture the data, but i can't figure out how to implement/code this,Can anyone please give me some pointers for the same?
Should i be reading about AJAX? I don't know anything about AJAX..
<asp:Panel ID="Panel1" runat="server">
<table>
<tr>
<td><asp:TextBox ID="CollUniv_Name" runat="server"></asp:TextBox></td>
<td><asp:TextBox ID="CollUniv_Location" runat="server"></asp:TextBox></td>
</tr>
<tr>
<td><asp:TextBox ID="StartDateText" runat="server"></asp:TextBox></td>
<td><asp:TextBox ID="EndDateText" runat="server"></asp:TextBox></td>
</tr>
</table>
Seems like this would more naturally handled by a repeating control. Something along the lines of a ListView control.
There's a fairly full example in the MSDN page I linked to so I won't repeat it here. The two parts you'll want to take a look at a bit more closely are the ItemTemplate which lets you define what normal items look like and the InsertItemTemplate which lets you specify what your insert row will look like. You can also specify if the InsertTemplate appears at the top or bottom. In the code-behind you'll subscribe to the ItemInserting even and handle user input from there.
I have an <asp:ListView> but for some reason the LayoutTemplate section does not show when the list is empty, although the <EmptyDataTemplate> section shows. The LayoutTemplate contains the headers for the table, and I want to show an empty table when there are no items in the datasource, not just the content of EmptyDataTemplate.
If there is no choice I will copy the LayoutTemplate into EmptyDataTemplate but it seems stupid to have to do this. Ideas?
From the MSDN:
The empty template is displayed in a
ListView control when the data source
that is bound to the control does not
contain any records and the
InsertItemPosition property is set to
InsertItemPosition.None. The template
is rendered instead of the
LayoutTemplate template. If the
InsertItemPosition property is set to
a value other than
InsertItemPosition.None, the
EmptyDataTemplate template is not
rendered.
the key words here are "...the template is rendered instead of the LayoutTemplate template..."
So I think, you have to copy the LayoutTemplate into the EmptyDataTemplate template.
In a very simple way you can get both your headers and a message saying that there were no data.
You make your LayoutTemplate like the following idea:
<LayoutTemplate>
<table>
<tr>
<td>a header</td>
<td>another header</td>
<td>third header</td>
</tr>
<tr runat="server" id="itemPlaceholder">
<td colspan="3"
There is no data!
</td>
</tr>
</table>
</LayoutTemplate>
Notice that the tr that is the placeholder (marked by id="itemPlaceholder") actually contains something. It contains what should be shown when there is no data. Then, in code behind, you set the <EmptyTemplate> to be equal to the <LayoutTemplate> (so that you have only one such template to maintain). I do it like this:
Private Sub lvwThings_Init(sender As Object, e As EventArgs) Handles lvwThings.Init
lvwThings.EmptyDataTemplate = lvwThings.LayoutTemplate
End Sub
The logic then is as follows:
When there is data, i.e. when the actual <LayoutTemplate> is used, the whole <tr runat="server" id="itemPlaceholder">, with the td and text it contains, will be replaced by the <ItemTemplate>.
But, when there is no data, i.e. when the <EmptyTemplate> is used (instead of the <LayoutTemplate>), nothing inside the <EmptyTemplate>is replaced, so everything is shown as it is.
You can also put your into a User Control (.acsx). Then include it in the layout template and the empty template... and it will feel less stupid since you can still manage it in one spot. I know how you feel about copying the same code...seems like something a 5th grader would do. Using a control is a more grown up approach.
I just solved this problem when you have InsertItemTemplate with EmptyDataTemplate.
Arrcording to MS docs, that's you can't have both. So I decided to create new tag in InsertItemTemplate.
You can preview my example code here.
<InsertItemTemplate>
<% if (CheckEmptyTable())
{ %>
<tr>
<td colspan="6">No data founds。</td>
</tr>
<% } %>
// Your insert template input here
<tr style="">
</tr>
</InsertItemTemplate>
My result image:
Hy,
I am implementing a asp.net web application, and I have two webform files, for example first.aspx and second.aspx.
On first.aspx i have a gridview displaying about 400 entries (400 rows). I've enabled the gridview selection option, and when I click select link on certain gridview row, I am redirected to second.aspx. On that second.aspx page I have some input forms and Update button and I am updating Gridview selected row entries with this.
When I enter updated values in that forms and click Update button, I want to redirect it again on first.aspx and the gridview is displaying again all 400 entries, but previously selected/updated row is now changed.
Because this Gridview does not fit on screen (height is to big because od many Gridviews entries) I want to retain scroll position as it was before entering second.aspx (I want to focus updated row). I know I can order GridView entries by modified_on value, but I have to retain everything as it was, and I don't want to have GridView paging enabled... How to retain scroll position as it was when I've clicked Select link on first.aspx?
Thank you for you help in advance!
I think you want this:
http://weblogs.asp.net/hosamkamel/archive/2007/09/07/maintain-scroll-position-after-postbacks-in-asp-net-2-0.aspx
unfortunately, I don't think this is cross-browser aware but this is based on jQuery and such work with redirects and not only postbacks:
http://elijahmanor.com/webdevdotnet/post/maintain-scroll-position-on-page-refresh-using-aspnet-or-jquery.aspx
You could use the rows id, pass it to the second.aspx and then append it to the url, when directing back to first.aspx:
first.aspx (generated code, simplified):
<table>
<tr id="row1">
<td>some content</td>
...
<td>some content</td>
</tr>
<tr id="row2">
<td>some content</td>
...
<td>some content</td>
</tr>
...
</table>
Navigating to "first.aspx#row1" will now load first.aspx and then jump to the row with the id "row1". It's probably not exactly the same position as before, but you're jumping directly to the edited row.