On Focus Editable Grid in AngularJS – Custom Control

The below article was published on May 21, 2013. You can find my new post for Editable Grid using AngularJS – ngGrid Plugin at :
https://travelcodingnlotsmore.wordpress.com/2013/07/17/on-focus-edita…in-angularjs-2/
Let me know if you have any doubts or queries.

Old post on custom control created to work like OnFocus Editable grid is below :
So this is what was bugging my mind from last week or so , I was working on AngularJs in which I had to prepare an on focus grid. I used ngGrid plugin for the same. Actually it would had been too simple have ngGrid(AngularJs) team not remove the functionality on ‘enableCellFocusedEdit’. I refered to the example mentioned on their website . On this website they have mentioned an example ‘Edit On Focus Cell Selection Example’. I tried out various sources to gather whatever information to implement this functionality but I failed. I went across the issues which I found when I googled it ‘https://github.com/angular-ui/ng-grid/issues/210’ but seems its not resolved till now.

Note: This is not exactly a grid provided by AngularJS team but an customised control created by me.

AngularJS

I came across a which had a div opened in editable mode on focus. So I tried to implement a custom control which can solve my issue as per the requirement for the time being and will hope the ngGrid team fix it as soon as possible.

So following is my implementation :

References used :

GridPOC.aspx

gridPOC.js

var gridPOCapp = angular.module('gridPOC', ['ui.bootstrap', 'ui.utils']);

gridPOCapp.controller(‘MyGridCtrl’, function ($scope) {
$scope.myData = [{ name: “Moroni”, age: 50 },
{ name: “Tiancum”, age: 43 },
{ name: “Jacob”, age: 27 },
{ name: “Nephi”, age: 29 },
{ name: “Enos”, age: 34}];

//This shows hard coded data
//$scope.models = [{ name: “Bob”, age: 25, city: “NewYork”}];

//This bring the data from a WebMethod
$scope.models = getDescription();

$scope.keypressCallback = function () {
alert(‘Enter Pressed’);
};

$scope.keypressTabCallback = function () {
alert(‘Tab is pressed’);
$scope.citModel = getDescription();
$scope.citModel1 = getInfo();
}
});

gridPOCapp.directive(‘contentEditable’, function () {
var celleditable = {
restrict: ‘A’,
link: function (scope, elm, attrs, ctrl) {
// view -> model
elm.bind(‘blur’, function () {
scope.$apply(function () {
ctrl.$setViewValue(elm.html());
});
});

// model -> view
ctrl.render = function (value) {
elm.html(value);
};

// load init value from DOM
ctrl.$setViewValue(elm.html());

elm.bind(‘keypress’, function (e) {
alert(‘someone press esc’);
if (e.charCode === 27) scope.$apply(function () {
ctrl.$setViewValue(elm.html());
});
});
}
};
return celleditable;
// };
});

function getDescription() {
var retData = “”;
$.ajax({
type: “POST”,
url: “GridPOC.aspx/GetDescription”,
data: “{}”,
async: false,
contentType: “application/json; charset=utf-8”,
dataType: “json”,
success: function (jsonData) {
retData = jsonData.d.data;
},
failure: function (jsonData) {
alert(jsonData.d + “Error”);
}
});
return retData;
}

function getInfo() {
var retData = “”;
$.ajax({
type: “POST”,
url: “GridPOC.aspx/GetInfo”,
//data: “{}”,
data: “{}”,
async: false,
contentType: “application/json; charset=utf-8”,
dataType: “json”,
success: function (jsonData) {
debugger;
retData = jsonData.d.cData;
},
failure: function (jsonData) {
alert(jsonData.d + “Error”);
}
});
debugger;
return retData;
}

GridPOC.aspx.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.Services;
using System.Web.Script.Services;
using System.Collections;

namespace AngularJSpoc
{
public partial class GridPOC : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{

}

[WebMethod]
[ScriptMethod]
public static Hashtable GetDescription()
{
ArrayList arr = new ArrayList();
Hashtable ht = new Hashtable();
Dictionary dict = new Dictionary();

dict.Add(“Info”, “PQR”);
dict.Add(“Description”, “ABC”);
arr.Add(dict);
ht.Add(“data”, arr);
return ht;
}

[WebMethod]
[ScriptMethod]
public static Hashtable GetInfo()
{
//Write your code here
}
}
}

Using this customised control I was able to create a grid which can be a makeshift arrangement for onFocusedEditable Gird

I hope this would have helped a few. Will be good if anyone who has used this can share the info about it, and whether it was useful or not.