JG Vimalan's Blog

It is all about coding!

Shortcut to collapse javascript fuctions in Visual Studio 2012

There are times where you will have lot of functions in your javascript file and you want to collapse them all. Use the following shortcut keys to achieve it,



August 1, 2014 Posted by | JavaScript | Leave a comment

Dynamic columns in jqGrid

In this post we are going to see how to display jqGrid with dynamic columns.
I am using the following plugins and languages for preparing this article,
a. jqGrid 4.5.4 plugin
b. jQuery 1.8.2
c. ASP.NET WebForms
d. C#
e. Visual Studio 2012

Step 1:

I am assuming that you already have an ASP.NET project configured with jqGrid plugin.
The first thing to do is, create a class as shown below to hold the column header names, model names and actual data generated at runtime.

public class Dashboard
private List _model = new List();
//at runtime you will know the column names, set them here.
public List Model
return _model;
_model = value;

private List _headers = new List();
//if you want to give more meaningful names for column, set them here.
//The order of model name should match with header name
public List Headers
return _headers;
_headers = value;
//Store the actual data generated at runtime here.
//I converted datatable generated at runtime in to List<Dictionary<string, object>>
public List<Dictionary<string, object>> DashboardContent { get; set; }


Step 2:

In your ASP.NET page, define table controls as shown below,

<table id=”ReportGrid”></table>
<div id=”ReportGridPager”></div>

Step 3:

In the code behind, write the WebMethod that returns the Dashboard object.

public static Dashboard GetReportDashboard()
//In the ‘GetDailyDashboard’ method, you will get dynamic data from database
//and build the datatable at runtime. Then get the columns, headers from datatable and set it to
//Model and Headers property in Dashboard object. Also convert the datatable to
//List<Dictionary<string, object>> object and set it to DashboardContent property.

return ReportQueryManager.GetDailyDashboard();

Step 4:

In your javascript file, which holds the logic to build jqGrid on table object use the following code,

Basically, in the AJAX success method, get the Dashboard property values and set them to
jqGrid properties and bind the data to jqGrid.

url: methodUrl, //set the method url here
dataType: “json”,
type: ‘POST’,
data: null,
contentType: “application/json; charset=utf-8”,
success: function (data) {
var dataArray = data.d //here you get the Dashboard object

var reportModel = dataArray.Model //Model property in Dashboard object
var header = dataArray.Headers ////Header property in Dashboard object
var dashboardData = dataArray.DashboardContent //Actual data with column

var ColModel = [];
for (index in reportModel ) {
var colName = reportModel[index]
var colWidth = 100
var isFixed = false
var sortTypeValue = “int”
var alignPosition = ‘center’

if (colName == “Name”) {
isFixed = true
colWidth = 300
sortTypeValue = “text”
alignPosition = ‘left’
ColModel.push({ name: colName, index: name, frozen: isFixed, width: colWidth, sorttype: sortTypeValue,
align: alignPosition });

var customButton = function (options) {
ReportGrid.jqGrid(‘navButtonAdd’, pageSelector, options);
ReportGrid.jqGrid(‘navButtonAdd’, ‘#ReportGrid’ + “_toppager”, options);

datatype: “local”,
mtype: “GET”,
cmTemplate: { sortable: true, resizable: true },
height: $(document).height() – reduceGridHeight,
rowNum: 20,
rowList: [],
altRows: true,
altclass: ‘gridAltRowClass’,
gridview: true,
pgbuttons: false,
loadonce: true,
shrinkToFit: false,
autoencode: true,
sortname: null,
width: $(“#SerReportGridWrapper”).width(),
ignoreCase: true,
viewrecords: true,
sortorder: “desc”,
pager: pageSelector,
pgtext: null,
scrollrows: true,
loadui: ‘disable’,
colNames: header, //set the header object here
colModel: SerColModel, //set the model object here
caption: “Dashboard”

ReportGrid.jqGrid(‘navGrid’, ‘#ReportGridPager’, {
view: true, add: false, edit: false, del: false, refresh: false, search: false, viewtext: ‘View Selected Row’
}, {}, {}, {}, {},
{ width: 400 });


caption: “Export To Excel”,
title: “Export To Excel”,
onClickButton: function () {
if (serReportGrid.jqGrid(‘getGridParam’, ‘records’) == 0) {
Block(ReportGridBox, “No record(s) found to export”)
else {

error: function (d) {
if (d.statusText != ‘abort’) {

Thats all. Now, you will be able to display dynamic columns in your jqGrid.

February 23, 2014 Posted by | ASP.NET, C#.NET, JavaScript, jqGrid, JQuery, JSON | , | 2 Comments

Task Scheduler failed to start “\Event Viewer Tasks\” task for user “”. Additional Data: Error Value: 2147943785.

I got the above error when I tried to run an .exe as a task in Task Scheduler. The .exe connects to the database using a ‘Service Account’. So, in order to fix the above error, I added the “service account”in the “log on as a batch job”policy. Refer the snapshot below,

Local Group Policy Editor

December 1, 2013 Posted by | C#.NET, Windows Server 2008R2 | 1 Comment

Editable Select Control in ASP.NET MVC 4 using Coffeescripter

I got a task where I need to display editable ‘select’ control using coffeescript in ASP.NET MVC 4 and twitter bootstrap.

Coffeescripter files are available here,


The steps I followed to create editable “select” control are given below,

In MVC project, add reference to necessary coffeescript and jquery (I used jquery-1.9.1.js) and bootstrap files.

In View, add the following code,
<select id=”user_name_ddl” class=”editable-select”></select>

Open ‘jquery.editable-select.css’ (this file will be available in coffeescript pack) in your project and update the correct image location,

input.editable-select {
background: #FFF url(images/arrow-down.gif) right center no-repeat;
padding-right: 13px;
Note: I copied the arrow-down image into an images folder in my MVC project.

In your custom .js file (if not, create one) add the following lines of code,

$(function () {
$(‘.editable-select’).editableSelect( {
bg_iframe: true, onSelect: function (list_item) {
$(‘#results’).html(‘List item text: ‘ + list_item.text() + ‘\ Input value: ‘+ this.text.val());
} } );

var select = $(‘.editable-select:first’);
var instances = select.editableSelectInstances();

if (instances != null && instances!= undefined && instances.length > 0)
instances[0].addOption(“Item 1”);

That’s it. Now, you will be able to see an editable select as shown below,


November 9, 2013 Posted by | ASP.NET MVC, JQuery | Leave a comment

Cannot find the contract ‘//amalga.com/Parser/MessageContract’, because it does not exist or you do not have permission.

The following error occurred when I was trying to start the parser service I have newly created.

Cannot find the contract ‘//amalga.com/Parser/MessageContract’, because it does not exist or you do not have permission.


If you have a message queue table (MSG201) in a database, it needs service broker tables, message and contract in order to run Amalga parser as a service.

Initially, I created the service broker tables but missed the message type and contracts. That is the reason for parser service to fail and throw this error.

Once I create the Message, Message Contact and re installed the Amalga parser service, it worked fine.

Please see the configuration of service contract and message in the snapshot below,

Service Contract



September 24, 2013 Posted by | Amalga 2.0, SQL Server | Leave a comment

Microsoft JScript runtime error: ‘JSON’ is undefined

I received this error when I tried to run my ASP.NET webpage in IE 8 Compatibility mode. JSON.parse function seems to be not working in IE 8 Compatibility mode.  The snapshot is given below,


In order to fix this issue, add reference to json2.min.js file in your ASP.NET webpage.  This file can be downloaded from NuGet, http://nuget.org/packages/json2/ . This will solve the issue.

April 9, 2013 Posted by | ASP.NET, JQuery, JSON | , , | Leave a comment