When we’re working with long strings in application user interfaces
it distracts the user interfaces. Here is the example
In the above example there is paging grid with 10 rows per page.
The better way to represent the data, we can show first 250 characters for much
better user experience.
Solution for overcome of this sort of problems is provided some
of the data to get the idea.(or else without showing it J) , we can provide a link with
having two options. Showing more or less link with the paragraph (default less)
and user can toggle it.
Ok , now let come to development in angular. In angular we
can use pipes for that but their some limitation to do that. In this example I’m
going to component for that and reuse it. We can use Parent and Child component with
@Input for this.
ParentComponent.html
ChildComponent.html
ChildComponent.ts ("app-show-more" selector)
How to use it using npm package Step 1 :Install npm package npm install show-less-more-string Step 2 : import module import { ShowLessMoreStringModule} from 'show-less-more-string';
imports: [
BrowserModule,
AppRoutingModule,
ShowLessMoreStringModule
]
Step 3 :How to use <app-show-more[_longString]='YourString'[_length]=25> </app-show-more>
In production normally used lot of master data with separate
user interface for adding them. As an example if user goes to edit the employee
with remarks which is a dropdown to select the particular remark of the
control. What if the suggested remarks isn’t in the controller then user has to
go the particular screen to add the remark and then has to refresh the current
page for getting updated remarks.
In the above case what if it’s there any option for adding
remark to the control itself without refreshing the page. As a common solution
we can give common reusable interface for adding remark or whatever in to the control
with adding few properties.
What we have to it just double click the dropdown and add
items and it will updated the database and control itself with new data.
<selectid="cmbResignReasonCategory"
class="
addDropDown"
data-NatTableName="hrm.ResignReasonCategory"
data-NatColName="ResignReasonCategoryName">
</select>
Explanation
·class=" addDropDown"
This is
the key class for fire the double click event in the control
·data-NatTableName="hrm.ResignReasonCategory"
this is html5 data attribute for getting table name which is used to
populate the dropdown
·data-NatColName="ResignReasonCategoryName
oThis the table column name which is related to
the table.
This is the only configuration is needed for getting this
feature.
Technical
Explanation:
The entire idea is very simple, when double click the
control it is triggered the event which is used the following java script.
<script>
var NatDropDownAdd = function () {
this.NatTableName = '';
this.NatColName = '';
this.NatValue = '';
this.NatSavedID = 0;
}
var optionModl = function () {
this.text = '';
}
$(document).ready(function (e) {
$(document).on("dblclick", ".addDropDown", function (ee) {
debugger;
$("#CustomAddItem").modal();
$("#NatSave").removeAttr("data-NatControlID");
$("#NatSave").attr("data-NatControlID", $(this).attr('id'));
var name = [];
var input = $("#" + $(this).attr('id')).find("option").each(function (i) {
debugger;
if ($(this).val() != '0') {
var obj = new optionModl();
obj.text = $(this).text();
name.push(obj);
}
});
$("#NatGet").html('');
$("#NatGet").append(BindTable(name));
});
$(document).on("click", ".NatSave", function (ee) {
debugger;
var obj = new NatDropDownAdd();
Serverside [HttpPost]
public JsonResult SavedDropDownItemAdd(NatDropDownModel obj)
{
string s=" Insert into " + obj.NatTableName + " (" + obj.NatColName + ",EnteredBy,EnteredOn) values('" + obj.NatValue.ToUpper() + "'" ); SELECT CAST(scope_identity() AS int)";
int newID;
using (SqlConnection con = new SqlConnection("YOURCONNECTIONSTRING"))
{
using (SqlCommand insertCommand = new SqlCommand(s, con))
{
con.Open();
newID = (int)insertCommand.ExecuteScalar();
if (con.State == System.Data.ConnectionState.Open) con.Close();
Last few months I couldn’t blog any post; here is the first
one in 2015
When we are developing database driven application, INSERT,UPDATE
and DELETE operations are frequently used.in early we develop (write) entire
code to against the database eg. (create sqlconnection,command,Tansaction
object etc.).
Then ORM introduced by Microsoft which is Entity Framework
(other ORM tool also available Subsonic,nhibernate etc), It provides more flexibility
way to accessing data base. It also has some drawbacks (multiple database,
memory consumption etc).
This post is about the INSERT,UPDATE and DELETE with
SqlTransaction using common method to reduce code duplication and coding less
method to saving data in database.
Common Class:
public class Tra : IDisposable
{
SqlTransaction tra;
SqlConnection connection = null;
public Tra()
{
if (connection == null)
{
connection = new SqlConnection(sqlConnection);
}
}
public long Save(string query,bool isIdentity,CommandType cmdType, params SqlParameter[] paras)
Asp.net Data binding that provides much easy way to manipulate
data to the control eg.gridview,dropdownlist etc
I’ve notice when we are binding there are some unnecessary codes
Dropdownlist1.DataTextField
= "JObName";
Dropdownlist1.DataValueField
= "JobID"
Dropdownlist1.DataSource
= lstJobs;
Dropdownlist1.DataBind();
We’re calling DataBind() method to asking to binding.totaly
4 lines of codes is required to bind dropdownlist.what is if we have common
method to call to binding.
to find a way to overcome this issue in mind, I thought to
create common method to bind it .oh no situation getting will be worsen , have
to be specified to each of the control
to bind. Generic is there to solve my issue.
I wrote generic extension method to bind all controls…..
hi guys, today I’m going to demonstrate working with grid
view with different situations.asp.net provides much more flexible way to (tabular)
to represent data .keep it mind what
every server tags finally converted to the classical html code (GRIDview to
html table).
What is the easiest way to bind grid view?
1)Using Automaically Genarated columns
This method directly bind all the data source columns into
grid.(good for only display data)
2)BoundField
If you’re not working data key fields in bound filed
then you can’t able to get the selected cell value using column name , have to
work with index?
Working with index like calling to
trouble????????????????????
Above code snippet shows in yellow color, to mark the column
name as data key names. Then we can access the columns using data key names.
Eg. Int empID=(int)GridView1.DataKeys[0]["EmpNo"];
3)Template Filed
If we are using totally template fieds like lable,textbox it
also very secure (can access data via its id) way to working with data, but it
take times to develop. In exceptional scenario like add dropdown list then you’ll
have to use it.
Here with I’ve attached code which contained working with
selected dropdown item in grid view and events.
Happy coding.
(thre're more alternative way can find on internet)
Hi guys, today I’m going to demonstrate jquery alert box.
Recently I was received a project by manager and that is invoicing and payment system and i pointed out sometimes I also bit difficultly to entering the prices. , Because sometime I enter values incoreclty.to avoid the same issue to users, I decided to build the alert box to display the value in the text box.
easy configuration , just need to add the class="WordToNum" to textbox
<script src="https://code.jquery.com/jquery-git1.min.js"></script>
<script type="text/javascript">
var th = ['', 'thousand', 'million', 'billion', 'trillion'];
// uncomment this line for English Number System
// var th = ['','thousand','million', 'milliard','billion'];
var dg = ['zero', 'one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine']; var tn = ['ten', 'eleven', 'twelve', 'thirteen', 'fourteen', 'fifteen', 'sixteen', 'seventeen', 'eighteen', 'nineteen']; var tw = ['twenty', 'thirty', 'forty', 'fifty', 'sixty', 'seventy', 'eighty', 'ninety']; function toWords(s) { s = s.toString(); s = s.replace(/[\, ]/g, ''); if (s != parseFloat(s)) return 'not a number'; var x = s.indexOf('.'); if (x == -1) x = s.length; if (x > 15) return 'too big'; var n = s.split(''); var str = ''; var sk = 0; for (var i = 0; i < x; i++) { if ((x - i) % 3 == 2) { if (n[i] == '1') { str += tn[Number(n[i + 1])] + ' '; i++; sk = 1; } else if (n[i] != 0) { str += tw[n[i] - 2] + ' '; sk = 1; } } else if (n[i] != 0) { str += dg[n[i]] + ' '; if ((x - i) % 3 == 0) str += 'hundred '; sk = 1; } if ((x - i) % 3 == 1) { if (sk) str += th[(x - i - 1) / 3] + ' '; sk = 0; } } if (x != s.length) { var y = s.length; str += 'point '; for (var i = x + 1; i < y; i++) str += dg[n[i]] + ' '; } return str.replace(/\s+/g, ' '); }
function JqueryAlertJS(message, id) {
$('#ff').remove();
var position = $('#' + id).position();
var top = position.top;
var l = position.left + $('#' + id).width() + 20;
// alert(l);
div = $("<div id='ff' class='ui-corner-all bubble me towords' style='color:white;z-index:500500; background-color:#e14f1c;position:absolute;top:" + position.top + "px;left:" + l + "px;'>").html(message);
//$("#numm").prepend(div);
$( "#numm" ).append(div );
