Sudarsan Dash's Blogs on C, C++,C# , .Net , Azure, .Net Core & Jquery

Tuesday, 23 April 2013

How to check all the check box when All check-box is checked and uncheck All check-box, if one of the check-box from the group is unchecked

<form name="frmChkForm" id="frmChkForm">
<input type="checkbox" name="chkcc9" id="chkAll">Check Me
<input type="checkbox" name="Bowler" class="chkGroup">Bowler
<input type="checkbox" name="Batsman" class="chkGroup">Batsman
<input type="checkbox" name="AllRounder" class="chkGroup">AllRounder
</form>

$("#chkAll").click(function() {
$(".chkGroup").attr("checked", this.checked);
});

With added functionality to ensure the check all checkbox gets checked/dechecked if all individual checkboxes are checked:

$(".chkGroup").click(function() {
$("#chkAll")[0].checked = $(".chkGroup:checked").length == $(".chkGroup").length;
});

Happy Coding!

Blank out a form/ reset a form with jQuery

First method:
<form id="form">
<input type="text" value="Here is some data" id="data" />
<input type="button" value="Clear Input" id="button" />
</form>

$(function(){

$('#button').click(function(){
$(':input','#form').not(':button, :submit, :reset, :hidden').val('').removeAttr('checked,selected');
});
});

Second method:
function clearForms()
{
var i;
for (i = 0; (i < document.forms.length); i++) {
document.forms[i].reset();
}
}

Happy Coding!

Monday, 22 April 2013

Ajax method of calling Action method of a controller:

I need to call a action method in order to save the uploaded image file using Jquery or the Ajax method. So below is the code for it.

$.ajax({
url: "/Image/UploadTest", // Image is the controller & UploadTest is Action Method
type: "POST",
data: $("#frmTest").serialize(), // Here provide the form Id
async: false,
cache: false, // Don't keep the cache
beforeSend: function () { // This Executes before calling the Ajax Request
$("#uploadProgress").show(); // Here I am showing Uploader image
},
complete: function () {
$("#uploadProgress").html("Upload completed");
// Executes on Ajax request complete
},
success: function (msg) {

if (msg == "ok")
$("#uploadProgress").hide(); // hiding the uploader image on successs
else
alert("Error while uploading");

}
});

Reading a CSV file with Linq

A simple single line of code to read the CSV file in Linq:

rawFile = (from line in File.ReadAllLines(fileName).AsParallel()

select line.Split(',')).ToList();

Happy Coding!

Kendo Grid with Search Functionality

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</body>

</html>

$("#grid").kendoGrid({

dataSource:[ {

foo: "Foo 1",

bar: "Bar 1"

} , {

foo: "Foo 2",

bar: "Bar 2"

}

]

});

var grid = $("#grid").data("kendoGrid");

$("<tr><th class='k-header' data-field='foo'><input /></th><th data-field='bar' class='k-header' ><input /></th></tr>").appendTo($("#grid thead")).find("input").keyup(function() {

grid.dataSource.filter({

operator: "contains",

value: $(this).val(),

field: $(this).parent("th").data("field")

});

</script>

Happy Coding!

Monday, 15 April 2013

Kendo UI Grid Page size showing NaN of NaN.

In kendo grid, sometimes you will get the page size of the grid as NaN of NaN.

The reason behind it was that the kendo grid is telling that the page size is not define, although you have define it and on clicking the page size or selected page the NaN of NaN goes.

Solution:

To fix the above solution , just redefine the page-size in the dataSource and the above issue will go.

Happy Coding!

Kendo Grid- Binding the JSON Data after getting response from the Ajax Call.

In Kendo UI while you are getting the data as a JSON object and you want to bind into a grid, so follow the method below :
<script type= "text/javascript">
$(document).ready(
function( )
{
InitializeGrid( );
}

function InitializeGrid() {
$.ajax({
async: false,
type: "POST",
url: "/Employee/GetEmployeeByFilter",
data: $('#frmSearch').serialize(),
}).success(function (result) {
grid = $("#grid").kendoGrid({
dataSource: { data: result.Data, total: result.Total, pageSize: 30 },
schema: { data: "Data", total: "Total" },
type: "POST",
serverPaging: false,
serverFiltering: false,
serverSorting: false,
height: gridHeight,
toolbar: kendo.template($("#template").html()),
change: function () {
var selectedRows = this.select();
selectedElement = this.dataItem(selectedRows[0]);
},
selectable: "single",
filterable: true,
sortable: true,
pageable: true,
resizable: true,
columns: [
{ field: "Name", title: "Name", width: 65 },
{ field: "Emp_No", title: "Emp No", type: 'string', width: 62 },
{ field: "Salary", title: "Salary", type: 'string', width: 78 },
]
});
});
}
</script>

View:

<div id="EmployeeReport">
<h1 id="employeeReport">EmployeeReport</h1>
<div id="grid"></div>
</div>

In the controller side:

public ActionResult GetEmployeeByFilter( Receive the Parameters from the client side )
{
// Do the processing......
return Json(new { Data =List of object you want to Pass to client side,
Total = List's Count }, JsonRequestBehavior.AllowGet);
}

Happy coding!

Tuesday, 9 April 2013

Kendo UI Sorting Date field in a grid having empty spaces and dates

Today i came to an issue that the date field are not sorted properly in the kendo grid if it has empty or Null spaces in it. the sorting occurs fine for descending order but fails when it is ascending order.

To fix the above issue a small trick will work for it. Just use this line of code in the grid filtration.

{field: "DateJoined", title: "Deployed", width: 50, template: '#=(DateJoined==null)?"":kendo.toString(kendo.parseDate(DateJoined,"MM/dd/yyyy"),"MM/dd/yyyy") #', format: "{0:M/d/yyyy}", type: "date" },

Happy coding!

How to fix the non-breaking of a sentence in HTML which has a hyphen(-) in it ?

Some times if you provide data inside a span or a column as : abcdef-test@gmail.com, you will notice that in IE it will be displayed as :
abcedf-
test@gmail.com
To fix the above issue, i will provide you two solutions.

Solution -1: Use <nobr> Tag

You can use <nobr> tag to represent your data as <nobr>abcdef-test@gmail.com</nobr>

Solution -2: Use CSS

You can use CSS to fix the above issue as:

<span style="white-space: nowrap;">abcdef-test@gmail.com</span>

Cheers!

Wednesday, 6 March 2013

Getting the Error: "Templates Can be used only with field access,property access, single dimension, or Single-parameter Custom Indexer Expression" in Asp.Net MVC3/MVC4

While working on an MVC3 project I need to Show the short date & time in the display for HTML helper, but when I used it is throwing the above error, the reason behind it was that the HTML helper DisplayFor and EditorFor takes directly the properties of the model rather than the functions which are associated with it.
@Html.DisplayFor(model => model.DateStart.Value.ToShortDateString( ))

To fix the above situation you can simply remove the DisplayFor and use as :

@if(Model.DateStart!=null)
{
Model.DateStart.ToShortDate( )
}

However, the best method to fix this situation is create a partial class with the above field and use the DisplayFormat properties to it with the one you wants.

    [DisplayName("Start Date")]
    [DisplayFormat(DataFormatString="{0:MM/dd/yyyy}", ApplyFormatInEditMode=true)]
    public System.Nullable<System.DateTime> ModifiedStartDate
    {
        get
        {
            return this.StartDate.ToShortDateString( );
        }
        set
        {
            this.StartDate = value;
        }
    }

How to use it:
@Html.DisplayFor(model => model.ModifiedStartDate)