TreeGrid and NumberInput

[Klaus HParticipant]

Hello,

the TreeGrid does not seem to support columnType: “numberinput” like the normal grid for editing a number in a cell. All your examples given on the website use the normal jqxInput for number editing (allowing characters to get in the mix). I assume I’d have to use it as a custom editor. Could you please provide a quick example just to be sure? Thank you in advance.

Kind Regards
Klaus

[Peter StoevKeymaster]

Hi Klaus,

Here’s what the Documentation says about the TreeGrid’s columnType:

columnType – string property which determines the column’s type.
Possible values:
“template” – sets a custom editor as a default editor for the column. The editor should be created in the createEditor callback function. The editor should be synchronized with the cell’s value in the initEditor callback. The editor’s value should be retrieved in the getEditorValue callback function.
“custom” – sets a custom editor as a default editor for a cell. That setting enables you to have different cell editors in the column. The editors should be created in the createEditor callback function which is called for each row when the columnType property is set to “custom”. The editors should be synchronized with the cell’s value in the initEditor callback. The editor’s value should be retrieved in the getEditorValue callback function

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[Klaus HParticipant]

Hello Peter,

yes, thank you. I just was wondering if there’s a reason why you did not use numberinput in any of your examples where suitable.

Using custom with just initeditor works, but it sticks the number in the bottom right corner, in one case even cutting some minor part of the number off. Is there a better way using template? Maybe just like jqxInput but using div instead of input tag? Is that the way to go there?

Kind Regards
Klaus

[Peter StoevKeymaster]

Hi Klaus,

There isn’t a reason why we did not use it in a sample. We already have samples about using custom editors in the TreeGrid and do not find it necessary to add more. jqxNumberInput requires a DIV tag. It cannot be initialized from INPUT tag.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[Klaus HParticipant]

Hello Peter,

let’s agree to disagree, I would have found a sample with jqxNumberInput usefull, especially if you use number types and then use jqxInput as editor, I find this odd, but I guess it’s okay.

But, I encountered a problem using jqxNumberInput as editor, as mentioned above, part of the number is cut off – a bottom part. And now I know why: Using jqxNumberInput generates an input tag in the div with the css classes jqx-input-content jqx-widget-content (and the corresponding classes if you employ a theme). It further generates a style attribute for the input tag: padding: 18px 0px; border-width: 0px; text-align: right; height: 17px; width: 98px;

The width I guess is calculated from the width of the column, but the padding of 18px causes the problem. I do not use a rowheigt and I do not see property for that, just autoRowHeight. But those 18px are the cause for the number being cut off.

Here’s how I fixed that, if anybody else encounters that problem:

{text: 'Headline', datafield: 'myvalue', width: 100, columnType: "template",
  createEditor: function (rowKey, cellvalue, editor, cellText, width, height) {
	  var div = $("<div class='numberinput' style='border: none;'/>").appendTo(editor);
	  div.jqxNumberInput({ digits: 3, decimal: 0, theme: 'mytheme' });
  },
  initeditor: function (rowKey, cellvalue, editor, celltext, width, height) {

	  $(editor.find('.numberinput')).jqxNumberInput('val', cellvalue);
	  $(editor.find('.jqx-input-content-mytheme')).addClass('mynumberinput');
  },
  getEditorValue: function (rowKey , cellvalue, editor) {
	  return $(editor.find('.numberinput')).jqxNumberInput('val');
  }
}

In combination with this css snippet:

.mynumberinput
{
	padding: 5px 0px!important;
}

For some reason overriding the css property did not work and I did not want to spend any more time solving it that way, so maybe there’s a leaner solution out there.

Regards
Klaus

[Author]

Posts