0

I am trying to find a good "jqGrid-friendly" way of changing the text area in the form edit to include a character counter letting users know how much they can enter.

This example shows how to define a text area with a character counter. Character countdown like on twitter

What I'm trying to figure out is the best way to modify the form edit to include this content. Specifically, I need to insert the span element so I can set the remaining characters text after the text area column in the edit form.

From what I can tell, it looks like the jqGrid API allows for manually inserting new rows in the form:

jQuery("#grid_id").jqGrid('editGridRow', "new", properties );

What isn't clear to me is the best way to control where I add that element in. Any suggestions?

Community
  • 1
  • 1
Raevik
  • 1,945
  • 9
  • 32
  • 53

1 Answers1

1

You use on keyup of javascript to create the function. Then, you hack into the ids and classes of the form using jQuery.

Function 

function updateCounter() {
  var pVal = document.getElementById(your_id).value
  var pCount = pVal.length;
  document.getElementById("counter").firstChild.data = pCount;
}

Target the input to add attributes using its id

$("#"+your_id ).attr("onkeyup","updateCounter()");

Append the span by targetting the td container of the input

$("#tr_" + your_id + ".CaptionTD .DataTD").append("<span id='counter'></span>");
Franz Noel
  • 1,820
  • 2
  • 23
  • 50
  • Perhaps I'm making it too complex, but the catch was figuring out how to get the code you added attached to the form edit dialog when it is built behind the scenes. Your example is side-stepping that task by showing it in a simple html body, right? – Raevik Jan 02 '13 at 19:49
  • No. I know what I'm doing. Here is the answer. Use firebug or on chrome use Ctrl+Shift+C to look at the dynamic changes on the classes and IDs. Then, hack your spans to add the counter. It's a javascript/jQuery hack. Since jqGrid is using jquery, might as well use it. – Franz Noel Jan 02 '13 at 21:24
  • This code actually took me more than 1 hour to solve. I checked the attributes of jqgrid. Then, found out it was impossible. Since you have to revise the whole jqgrid main code `frmgr`. Finally found that you just need to insert it using jQuery. – Franz Noel Jan 03 '13 at 20:23