hkalbertl / jquery.appendGrid

The dynamic table input JavaScript plugin
https://appendgrid.azurewebsites.net
MIT License
148 stars 77 forks source link

Can we have id formatter, like name formatter ? #127

Closed hmshafeeq closed 5 years ago

hmshafeeq commented 5 years ago

Hey hkalbertl,

I have been using your plugin from last four years in my various projects. It offers great extensibility and features, thanks for developing and maintaining this wonderful library.

Can we have id formatter (like we do have for name)?
idFormatter: function (idPrefix, name, uniqueIndex) { return name + '_' + uniqueIndex; }

Thanks

hkalbertl commented 5 years ago

Hi hmshafeeq,

Good to know that appendGrid can fit your projects need!

For your question about id formatter, appendGrid will generate input id for each control internally. This input id is unique and able to let appendGrid look for correct input element accurately. Also, appendGrid offered idPrefix that allow developers to customize the first part of the above input id. In order to prevent the input id duplicated, I tend to not making such changes.

As classic HTML form are using name instead of id and AJAX can fully customize the submit parameter name, may I ask why you need a custom id for the input controls?

hmshafeeq commented 5 years ago

For example, if add following column in the grid,

{
   name: 'material[]', display: 'Material', type: 'select', ctrlClass: "form-control selectpicker",
   ctrlAttr: {required: true, onchange: 'onChangeMaterial(this)'},
   ctrlCss: {'min-width': '250px'}
}

Generated id for this field in first row will be tblAppendGrid_material[]_2.

Now, if i try to access the field like $("#tblAppendGrid_quantity[]_2") i will get Error: Syntax error, unrecognized expression: #tblAppendGrid_quantity[]_2. Doing the same with javascript works fine.

Also it will look cleaner to have id like tblAppendGrid_quantity_2, tblAppendGrid_quantity_3

idFormatter: function (idPrefix, name, uniqueIndex)
 {   
      return  idPrefix +'_' + name.replace('[]','') + '_' + uniqueIndex;
 }

Thanks

hkalbertl commented 5 years ago

Hi, I got your problem now. As you know that the name of each column definition will be used for id and name of generated input control, putting non-alphanumeric may cause unexpected behaviors.

In your case, bracket [] were used as name of a column. I tested that it is fine to use in HTML id / name but it has special meaning in jQuery selector.

Although appendGrid can work fine (such as insert / append / load / getAllValue) in your case, but I recommend not to use bracket in name. If you really want to use in that way, you may try one of the following alternative:

You may try my test case here. Hope it can help!

hmshafeeq commented 5 years ago

Hey @hkalbertl

Yes, it helped. Thanks for providing detailed alternatives.