GridView Styles get lost when click on Edit Command Control - c#

I have a nearly perfect GridView until Edit Command Control is clicked. Then the columns' widths get wider and extremely out of alignment. What is causing this behaviour?
Before Edit
After Edit
EDIT to Question:
When Click on Edit, the editable columns are wired up with a TextBox control as per the following code snippet:
(TextBox)GridView2.Rows[e.RowIndex].Cells[7].Controls[0]
Based on this question, I sort of figure out that perhaps the styling isn't being fired when Row_Editing event is fired. But I am not sure if above TextBox control also a culprit behind it...

Instead of adding generic Edit/Update , why don't you try to assign images and later add a command to them.
<asp:TemplateField HeaderText="">
<HeaderStyle CssClass="gvProvFooterStyle" />
<ItemStyle CssClass="gvProvFooterStyle" />
<FooterStyle CssClass="gvProvFooterStyle footerRow" />
<EditItemTemplate>
<asp:ImageButton ID="ibtnUpdate" runat="server" CommandName="Update" CausesValidation="true" OnClientClick="ValidateEdt();" ValidationGroup="onUpdate" ImageUrl="~/images/abc.png" CssClass="imagebuttons ibtnStyle" />
<asp:ImageButton ID="ibtnCancel" runat="server" CommandName="Cancel" CausesValidation="false" ImageUrl="~/images/abc.png" CssClass="imagebuttons" />
</EditItemTemplate>
<ItemTemplate>
<asp:ImageButton ID="ibtnEdit" runat="server" CommandName="Edit" CausesValidation="false" ImageUrl="~/Content/Images/black-edit-24.ico" CssClass="imagebuttons ibtnStyle" />
<asp:ImageButton ID="ibtnDelete" runat="server" CommandName="Delete" CausesValidation="false" ImageUrl="~/images/abc.png" CssClass="imagebuttons" />
</ItemTemplate>
</asp:TemplateField>
Then assign them width as per your needs. To answer your question, you haven't applied styles to your edit item template, just the item template.

Related

Set image and hover image to <asp:CommandField ButtonType="Button" .../asp>

i have this
<asp:CommandField ButtonType="Button" CancelImageUrl="~/img/annulla_grigio.png" EditImageUrl="~/img/modifica_grigio.png"
ShowEditButton="True" UpdateText="" UpdateImageUrl="~/img/salva_grigio.png" ItemStyle-HorizontalAlign="center"
ItemStyle-CssClass="tabella_p_modifica" ControlStyle-CssClass="modifica_hover" EditText=""/>
And it works when i hover on it change with other image, for example change gray pencil into red pencil. But when i click on Edit button it's show two buttons as Update and Cancel. But with same image of edit.
The first thing to try is to switch ButtonType="Button" to ButtonType="Image". The reason is that your ImageUrl properties won't appear unless you set that to Image
I suspect you are setting the pencil image inside of your CSS class modifica_hover. This class will apply to both the Edit and Cancel buttons. That's probably why you see the pencil for both of them.
An alternative that you may want to try is to create this field as a TemplateField which gives you more control. Just make sure to pass the correct CommandName for the event to trigger the GridView event.
<asp:TemplateField>
<ItemTemplate>
<asp:ImageButton ID="ibEdit" runat="server" CommandName="Edit" ImageUrl="~/img/modifica_grigio.png" />
</ItemTemplate>
<EditItemTemplate>
<asp:ImageButton ID="ibUpdate" runat="server" CommandName="Update" ImageUrl="~/img/salva_grigio.png" />
<asp:ImageButton ID="ibCancel" runat="server" CommandName="Cancel" ImageUrl="~/img/annulla_grigio.png" />
</EditItemTemplate>
</asp:TemplateField>

CommandName = Insert in EditTemplate of ASP.NET ListView throws "Insert can only be called on an insert item"

I am supporting a web application. In that, there are two tables - TaxCode and TaxRate. TaxCode has 1 to many relationship with TaxRate.
The UI has a ListView with LayoutTemplate, ItemTemplate and EditTemplate to show TaxCode. When the users selects a tax code in EditTemplate it shows a CutomGridView that allows the user to create or edit tax rates for that particular tax code. This CustomGridView has 3 rows each has 4 template fields as shown below.
<asp:TemplateField HeaderStyle-CssClass="highlightTitlebar" HeaderStyle-Width="5%" HeaderStyle-Height="30px">
<HeaderTemplate>
<custom:CustomImageButton ID="imgAdd" runat="server" ImageUrl="image/add_round.gif" OnClick="imgAddTaxRateDetail_Click" CausesValidation="False"/>
</HeaderTemplate>
<ItemTemplate>
<custom:CustomImageButton ID="imgEdit" runat="server" ImageUrl="image/edit.gif" CommandName="Edit" />
</ItemTemplate>
<EditItemTemplate>
<asp:ImageButton ID="imgUpdate" runat="server" ImageUrl="image/update.gif" CommandName="Update" />
<asp:HiddenField runat="server" ID="hfId" Value='<%# Bind("Id") %>' />
</EditItemTemplate>
<FooterTemplate>
<asp:ImageButton ID="imgInsert" runat="server" ImageUrl="image/insert.gif" CommandName="Insert" OnClick="imgInsert_Click" />
</FooterTemplate>
Each row in the CustomGridView is a template field. In, below image EffectiveOn section is CustomGridView,
When I try to save TaxRate with proper EffectiveOn and Rate, it throws "Insert can only be called on an insert item. Ensure only the InsertTemplate has a button with CommandName=Insert." error as the ListView doesn't have InsertTemplate. But the record gets inserted into the DB.
Please let me know if there is any way to resolve this issue?
The error is self explanatory.
Take a look at this: https://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.listview.insertitemtemplate(v=vs.110).aspx
So you can do either of these things.
Create an InsertItemplate and insert using the ItemInserted event of the listview
Change the CommandName to CommandName="InsertData" and catch that event on the ItemCommand

How To change Command Text and ImageButton of ItemTemplate in TemplateField

I have a column that has an ImageButton. my database field has bit data type. I want when my record has true value in that column show True.jpg and my command become MakeFalse and when it has false value show False.jpg and my command become MakeTrue. How I can do this?Is it possible to do it with one TemplateField?
thanks
You could include two ImageButtons in a TemplateField and evaluate Visible from your bit_field
<asp:TemplateField HeaderText="YourField">
<ItemTemplate>
<asp:ImageButton runat="server" ImageUrl="True.jpg" Visible='<%# (bool)Eval("bit_field") %>' />
<asp:ImageButton runat="server" ImageUrl="False.jpg" Visible='<%# !(bool)Eval("bit_field") %>' />
</ItemTemplate>
</asp:TemplateField>
I'm not sure how you'd want your Command to tie in.
This is the remaining part of the above Brissles code
<asp:TemplateField ShowHeader="False">
<ItemTemplate>
<asp:LinkButton ID="LinkButton1" runat="server" CausesValidation="False"
CommandName="Select" Text='<%#(bool)Eval("bit_field")? "Make False":"Make True" %>'>
</asp:LinkButton>
</ItemTemplate>
</asp:TemplateField>

GridView edit command button with jquery

I want to use the gridview command button (edit) with the jquery not postback. Please help me.
Place an asp button in another item template and set its CommandName property to edit. This will work simillar to default edit button in grid view. Then you can call javascript function and perform your logic.
See the code below:
Remove the following line to avoid default edit button:
<asp:CommandField ShowEditButton="true" ShowCancelButton="true"/>
Add the following instead:
<asp:TemplateField HeaderText="headerName" >
<ItemTemplate>
<asp:Button ID="Button1" CommandName="edit" runat="server" Text="Button" />
</ItemTemplate>
</asp:TemplateField>
Hope this helps you..
I think you can do it in a gridview.What you need is to columns with textbox and display the data in the textbox and needs a button at the end .
<asp:TemplateField >
<HeaderTemplate>
Values
</HeaderTemplate>
<ItemTemplate>
<asp:textbox ID"txt" runat="server" cssclass="abc" />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Spares">
<HeaderTemplate>
Edit column
</HeaderTemplate>
<ItemTemplate>
<asp:button id="abc" runat="server" text="save" cssclass="pqr" />
<input type="hidden" runat="server" value="" />
</ItemTemplate>
</asp:TemplateField>
Store the Id in a hidden field and it is possible to get the value of text box and hidden feild via jquery.
gridview will be rendered as html table and using parent() we can able to find the clicked row and after finding the row u can use find() to find the values in the txtbox and hidden feild. Use $ajax() or $post() to send data to server.

Conformation window on delete in gridview?

how to make a conformation on boundfield in gridview in delete ....event
As far as I understand you want to add confirmation on deleting in your grid, correct?
Here is a simple example of grid:
<asp:GridView runat="server"
<Columns>
<asp:TemplateField ShowHeader="False">
<ItemTemplate>
<asp:LinkButton runat="server"
CommandName="Delete"
OnClientClick='return confirm("Are you sure?");'
Text="Delete" />
</ItemTemplate>
</asp:TemplateField>
<!-- your bound fields here -->
</Columns>
</asp:GridView>
The trick is in adding client-side confirm to the OnClientClick property of the delete button.
Can you do something like this?
<asp:linkbutton id="btnDelete" runat="server" commandname="Delete" onclientclick="return confirm('Are you sure you want to delete this item?');"
text="Delete" />

Categories

Resources