Archive for July, 2017
AjaxControlToolkit’s AutoComplete extender is designed to be a single selection control. i.e. When user selects a value the dropdown list will be closed and selected text will be assigned to targeted textbox control.
Recently I got a question on the Asp.net Forums where the user wants to make the AutoCompleteExtender a multi select one. Besides the chosen values should be appended to textbox as comma separated values. This question caught my attention as it was a little tricky.
Here are the details of requirements
- Keep the dropdown list of options on AutoComplete Extender opened
- Allow multiple selection on AutoComplete Extender
- Add the string to target textbox control as comma separated strings
We need to come up with a custom implementation to accomplish this requirement. When I looked at some threads I found the code to keep the list opened. However, I need to customize it to generate comma separated values.
You can find complete implementation details here
Add a behaviorID to AutocompleteExtender control. We will use this id to close the dropdown list after user selecting values
Now we need to add a button to close the dropdown list after selecting values
Now we need to customize the inbuilt function “_setText” and “_hideCompletionList” function in order to accomplish our requirement
Code to populate the list when user type in characters on textbox
In this article I will demonstrate the steps to find the Textbox control from the selected row in repeater using Jquery.
We use a Radiobuttonlist to select each rows. Requirement is to disable and enable the textbox based on the selected radiobutton value for particular row. If user selected Yes then enable the textbox and if user selected No then enable textbox. You can use the below Jquery code to find the selected repeater row and then disable and enable textbox control based on selected value.
You can find complete source code here
This is a continuation of my previous articles in which I demonstrated the procedure to
In this article I will demonstrate how to implement Add new record functionality in Angular UIGrid.
I have used icons from FontAwesome Library, which is a great source for multiple icons. You can download Fontawesome icons from here.
To display message after every operation we used UIBootstrap.
You would already have the Model configured by following my previous article on loading UIGrid with data. We will directly look into the details of Adding new record in UIGrid.
You can see a sample Demo of entire functionality below.
We will add a new button on page which responds to click event and open a modal pop up window. Users can enter the details and on save button click we will save the data to database.
AddCustomer function will take the scope object as input which contains all values as provided by user and then save the data to database. User will also see an alert stating the status of insert operation.
Updated Angular code with Insert new Record functionality
Modal Pop up HTML
WEBAPI AddCustomer Method
You can find complete source code of this demo from github