Showing posts with label Ajax. Show all posts
Showing posts with label Ajax. Show all posts

Friday, 17 April 2015

How to get / fetch data from GridView and store in DataTable Dynamically in ASP.NET using C#.NET?

How to get / fetch data from GridView and store in DataTable Dynamically in ASP.NET using C#.NET?

In this article I will explain how to fetch / get data from a GridView and how to store it into a DataTable dynamically using C#.NET in ASP.NET

Fallow the below steps:

First, we have to create GridView with required Columns and set its AutoGenerateColumns property to False. If you required footer then show footer is true otherwise false and same as paging also.

Design the GridViewas per your reqirements. Use Templates like Item Template, Edit Item Template, and Footer Templates to Create GridView.

Tuesday, 14 April 2015

How to implement a Multiple Select/Choose (MultiSelect) DropDownList with CheckBoxes in ASP.Net.

In this article I will explain how to implement a Multiple Select/Choose (MultiSelect) DropDownList with CheckBoxes in ASP.Net.

(Or)

Checkbox list in Dropdown using Asp.net Ajax PopupControlExtender control





We may have a requirement to select more than one value from dropdown list but we can’t select/choose the more than one value from asp.net dropdown list control.

It’s an asp.net Ajax control which is used to attach any control to display with popup window and we can add server or html controls to display in popup window. This Popupcontrolextender control needs to be placed inside the update panel as shown below in sample code. In this control there are three important properties we need to use to achieve this functionality such as TargetControlID, PopupControlID and Position

Below is the style CSS code for Ajax Popupcontrolextender .


Tuesday, 8 April 2014

how to implementing Ajax autocompleteextender textbox in GridView using Ajax control toolkit in ASP.NET

In this article I will explain how to implementing Ajax autocompleteextender textbox in Item template and footer template on GridView using Ajax control toolkit in ASP.NET, for this we need to create a web service which calls the method to fetch data from database and display results as suggestions for TextBox. Add a new webservice to the project and name it AutoComplete.asmx or whatever you want, in the code behind of the web service we write methods to get records from database and a web method called GetCompletionListGrid which takes text entered in textbox as parameter to search database, this method is automatically called whenever user types anything in the textbox.

First you need to establish a DataBase connection in web.config file

<connectionStrings>
<add name="connectionString" connectionString="Data Source=LocalHost;uid=sa1;password=Con@123;Initial Catalog=practice"/>
</connectionStrings>

After that you need to design aspx page. Below is the sample code for Page design


Monday, 7 April 2014

How to apply CSS Style to Ajax autocomplete box in ASP.NET


In this article I will explain how to apply CSS Style to Ajax autocomplete box in ASP.NET

Below is the CSS code:

   <style type="text/css">      
        .completionList {
            border: solid 1px #444444;
            margin: 0px;
            padding: 0px;
            height: 150px;
            overflow: auto;
            background-color: #FFFFFF;
        }

        .listItem {
            color: #1C1C1C;
        }

        .itemHighlighted {
            color: white;
            background-color: maroon;
        }
    </style>

Need to add above CSS style code to Autocomplete box

CompletionListCssClass="completionList"                                        CompletionListHighlightedItemCssClass="itemHighlighted"
CompletionListItemCssClass="listItem"

Total code for Ajax autocomplete box.

<ajaxtoolkit:AutoCompleteExtender
                                        runat="server"
                                        ID="autoComplete1"
                                        TargetControlID="txtAccountDescriptionIT"
                                        ServicePath="AutoComplete.asmx"
                                        ServiceMethod="GetCompletionList"
                                        MinimumPrefixLength="1"
                                        CompletionInterval="1"
                                        EnableCaching="true"
                                        CompletionSetCount="1" CompletionListCssClass="completionList"
                                        CompletionListHighlightedItemCssClass="itemHighlighted"

                                        CompletionListItemCssClass="listItem" />

Sunday, 23 February 2014

Ajax FilteredTextBox with Example in ASP.NET


In this article I will explain what is Ajax FilteredTextBox with Example in ASP.NET.

FilteredTextBox is an extender which prevents a user from entering invalid characters into a text box. Note that since this effect can be avoided by deactivating JavaScript, you should use this extender as a convenience for your users, but you must never expect that the data being sent to the server consists of "valid" chars only.

Example 1:

<Ajax:FilteredTextBoxExtender ID="fteSoldDate" runat="server" TargetControlID="txtSoldDate" FilterType="Custom, Numbers" ValidChars="/+-" />

Example 2:

<Ajax:FilteredTextBoxExtender ID="fteInvoiceNo" runat="server" TargetControlID="txtInvoiceNo" FilterType="Custom, Numbers, UppercaseLetters, LowercaseLetters" ValidChars="" /></td>

Ajax CalendarExtender Example, Change date format and show calendar when click on button in ASP.NET


In this article I will explain what is Ajax CalendarExtender with Example, Change date format and show calendar when click on button in ASP.NET.

Ajax CalendarExtender:

Calendar is an ASP.NET AJAX extender that can be attached to any ASP.NET TextBox control. It provides client-side date-picking functionality with customizable date format and UI in a popup control. You can interact with the calendar by clicking on a day to set the date, or the "Today" link to set the current date.

Syntax:

<ajaxToolkit:Calendar runat="server"
    TargetControlID="Date1"
    CssClass="ClassName"
    Format="MMMM d, yyyy"
     />

Example:

<asp:TextBox runat="server" ID="txtInvoiceDate"></asp:TextBox>
<Ajax:CalendarExtender ID="CalendarExtender2" runat="server" Enabled="true" Format="dd/MM/yyyy"

                                                            TargetControlID="txtInvoiceDate">

Ajax AutoCompleteExtender example and sample without using webservice


 
In this article I will explain what Ajax AutoCompleteExtender example and sample without using webservice in asp.net.

We can attach Ajax autocomplete exteneder to any textbox to implement this and after assign autocomplete extender to textbox and type more content than the specified minimum word length, a popup will show words or phrases starting with that value.  So the user can choose exact word from the popup panel. Here we are implementing autoCompleteextender to fetch data from the database without using Webservice.

AutoComplete Extender:

AutoComplete is an ASP.NET AJAX extender that can be attached to any TextBox control, and will associate that control with a popup panel to display words that begin with the prefix typed into the textbox.

The dropdown with candidate words supplied by a web service is positioned on the bottom left of the text box.

Ajax autocompleteextender with example in asp.net



In this article I will explain what Ajax autocompleteextender with Example in asp.net

AutoComplete Extender:

AutoComplete is an ASP.NET AJAX extender that can be attached to any TextBox control, and will associate that control with a popup panel to display words that begin with the prefix typed into the textbox.

The dropdown with candidate words supplied by a web service is positioned on the bottom left of the text box.
Syntax:

<ajax:AutoCompleteExtender ID="AutoCompleteExtender1" runat="server" TargetControlID="TextBox1"
            ServicePath="WebService.asmx" MinimumPrefixLength="1" EnableCaching="true" CompletionSetCount="1"
            CompletionInterval="1000" ServiceMethod="GetCityName" OnClientPopulating="ShowProcessImage"
            OnClientPopulated="HideProcessImage">
        </ajax:AutoCompleteExtender>

What is Ajax autocompleteextender, Syntax and Properties?


In this article i will explain what is Ajax autocompleteextender? what is the syntax and properties? 

AutoComplete Extender:

AutoComplete is an ASP.NET AJAX extender that can be attached to any TextBox control, and will associate that control with a popup panel to display words that begin with the prefix typed into the textbox.
The dropdown with candidate words supplied by a web service is positioned on the bottom left of the text box.

Syntax:

<ajax:AutoCompleteExtender ID="AutoCompleteExtender1" runat="server" TargetControlID="TextBox1"
            ServicePath="WebService.asmx" MinimumPrefixLength="1" EnableCaching="true" CompletionSetCount="1"
            CompletionInterval="1000" ServiceMethod="GetCityName" OnClientPopulating="ShowProcessImage"
            OnClientPopulated="HideProcessImage">
        </ajax:AutoCompleteExtender>


Thursday, 12 December 2013

What is the ASP.NET AJAX Control Toolkit?



           In this article I will explain what is the ASP.NET AJAX Control Toolkit?  The ASP.NET AJAX Control Toolkit is an open-source project built on top of the Microsoft ASP.NET AJAX framework.

           The AJAX Control Toolkit contains more than 30 controls .It is a joint effort between Microsoft and the ASP.NET AJAX community that provides a powerful infrastructure to write reusable, customizable and extensible ASP.NET AJAX extenders and controls, as well as a rich array of controls that can be used out of the box to create an interactive Web experience.

 AJAX Control Toolkit easily creates rich, interactive web pages. The main important controls are. 

1.       AutoComplete
2.       Calendar
3.       FilteredTextBox
4.       ModalPopup
5.       TextBoxWatermark
6.       Tabs

How to use Ajax Tabcontainer in asp.net?



In this article I will explain how to use Ajax Tabcontainer in asp.net.

Every Tab container contains multiple Tab Panels. We can declare our asp controls between the Tab Panels.

One more thing don't hesitate to learn the post completely after seen the length of the post because it's huge for looking but nothing is there just design only the page contains 3 TabPanels that's why code is more and it's very easy to work with TabContainer

Now we can see how we can use ajax tab container in our application First add AjaxControlToolkit reference to your application and add 

<%@ Register Namespace="AjaxControlToolkit" Assembly="AjaxControlToolkit" tagPrefix=" ajaxtoolkit " %>

Thursday, 25 July 2013

TabContainer Example


            In this article I will explain what are ASP.NET AJAX TabContainer and TabPanel with Example?

TabContainer is an ASP.NET AJAX Control which creates a set of Tabs that can be used to organize page content. A TabContainer is a host for a number of TabPanel controls.

Each TabPanel defines its HeaderText or HeaderTemplate as well as a ContentTemplate that defines its content. The most recent tab should remain selected after a postback, and the Enabled state of tabs should remain after a postback as well.

What are TabContainer and TabPanel? What are the Properties of TabContainer and TabPanel?


In this article I will explain what are AJAX TabContainer and TabPanel? What are the Properties of TabContainer and TabPanel?

TabContainer is an ASP.NET AJAX Control which creates a set of Tabs that can be used to organize page content. A TabContainer is a host for a number of TabPanel controls.

Each TabPanel defines its HeaderText or HeaderTemplate as well as a ContentTemplate that defines its content. The most recent tab should remain selected after a postback, and the Enabled state of tabs should remain after a postback as well.