GridView edit command button with jquery - c#

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.

Related

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

GridView Styles get lost when click on Edit Command Control

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.

HtmlInputCheckbox onselect event not getting invoked

I have a web application which has a gridview with first column as checkbox.
<asp:TemplateField HeaderText="Select" >
<HeaderTemplate >
<asp:CheckBox ID="chkboxSelectAll" runat="server" AutoPostBack="true" />
</HeaderTemplate>
<ItemTemplate>
<input id="chkSelect" name="chkboxSelect" runat="server" type="checkbox" onclick='CheckedChanged'/>
</ItemTemplate>
</asp:TemplateField>
And also there is a onselect event for input(checkbox) written in code behind where I will highlight the row based on whether the checkbox is checked or not.
My problem is when I check the input checkbox, the onselect event is not getting invoked. Can anyone know whats causing this issue?
Thanks in advance.
Use asp:checkbox with autopostback=true instead of HTML control
use this code.
replace html input to asp:checkbox on itemtemplate and assign new event OnCheckedChanged instead of onclick event
<asp:TemplateField HeaderText="Select" >
<HeaderTemplate >
<asp:CheckBox ID="chkboxSelectAll" runat="server" AutoPostBack="true" />
</HeaderTemplate>
<ItemTemplate>
<asp:CheckBox ID="chkSelect" runat="server" AutoPostBack="true" OnCheckedChanged='CheckedChanged'/>
</ItemTemplate>

ASP.NET C# checbox select after searching gridview

I have a problem with update panel which contains gridview (dynamically generated). Every row in gridview contains checbox, name of person and surname of person.
When user click on close button then every value (name) of selected row is saved in cookie (using jquery and asp.net-hidden value). That is working all right.
Problem appears here:
I also have possibility to search after name or surname of persons, becuase there are a lot of persons and that should help user to quickly find a right person.
Let say that I have this data:
Checbox1 John Doe
Checkox2 Michael Clark
Checbox1 (John Doe) is already selected.
So when I typed Clark in Surname textbox and click button "Search" gridview is generated again and there is one row (Michael Clark). When user select checbox of Michael Clark and click close button than cookie has only one value (Michael Clark, John Doe is logically missing).
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Panel ID="Panel1" runat="server" DefaultButton="isciPodjetja">
<asp:TextBox ID="namePerson" runat="server" />
<asp:TextBox ID="surnamePerson" runat="server" />
<asp:Button ID="Searchperson" runat="server" Text="Search" OnClick="Serachperson_Click" />
</asp:Panel>
<p />
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False">
<Columns>
<asp:TemplateField HeaderText="SelectALL">
<HeaderTemplate>
<asp:CheckBox ID="chkBxHeader" runat="server" onclick="javascript:SelectAllCheckboxes1(this);" />
</HeaderTemplate>
<ItemTemplate>
<asp:CheckBox ID="chkSelected" runat="server" OnCheckedChanged="chkSelected_CheckedChanged"/>
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="NAME" HeaderText="Name of person"></asp:BoundField>
<asp:BoundField DataField="SURNAME" HeaderText="Surname of person" </asp:BoundField>
</Columns>
</asp:GridView>
</ContentTemplate>
</asp:UpdatePanel>
Any Idea how can I implement that searching more easily? I tried with adding OnCheckedChanged to checbox, but autopostback does not work fine (when I clicked on checbox it is checked for a second, then is unchecked again).
Best solution for me would be, that when user click on search button than just hover appear on a correct row. Is it possible?
You have to develop two function in javascript begin request and end request.You have to write your javascript or jquery function in onbeginrequest() and onendrequest(), then only it will be fired. Please check it.
I solved my problem. I used javascript quicksearch plugin from https://github.com/riklomas/quicksearch.

how to give required field validator to textbox in gridview?

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" Height="146px"
Width="308px">
<Columns>
<asp:TemplateField HeaderText="Original Price" ControlStyle-Width="100px">
<ItemTemplate>
<asp:TextBox ID="txtOriginalPrice" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator ID="rfv" runat="server" ControlToValidate="txtOriginalPrice"
ValidationGroup="GridView1" Display="Static" ErrorMessage="" Text="*"></asp:RequiredFieldValidator>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
I am using above code but its not working though I have put requirefield validator it does not show me the '*'
Yes, your requiredfieldvalidator is certainly there, and it knows which control to validate.What is missing is "when to validate that control".And to answer this question you need to add your textbox the same ValidationGroup with your requiredfieldvalidator and also the control(this can be a button for example) causes to do a validation.So your code will be like
<%--<asp:Button ID="Button1" runat="server" ValidationGroup="GridView1" Text="Benjamin"...Somewhere in your code--%>
<asp:TextBox ID="txtOriginalPrice" runat="server" ValidationGroup="GridView1"></asp:TextBox>
So don't forget these question
What to validate?(a textbox)
When to validate?(after a button click)
After what action try to validate?(a button click)
With what to validate?(a requiredfieldvalidator)
All of these controls must have the same ValidationGroup.
In case you need the validation to be performed then check for something like this
<asp:Button ID="btnAdd" runat='server' ValidationGroup='GridView1' CausesValidation='true'.....
So now when you click the add button it will validate for those controls falling under the validation group you mentioned else the default value is "" hence you won't find any validation triggered.
Add ValidationGroup to TextBox (txtOriginalPrice), Button and other controls.

Categories

Resources