In Grid Editor

[humi]

How to hack in a custom in-grid editor.
I am attaching an Auto Suggest feature to the editor and it uses the element ID to find the field. I got the ID of the editor to be assigned this way. The developers have already made a way for this.

This is a custom Editor type that I added to the EDITORS object in Sigma.Editor.
autoSuggestText:function($){    $=new Sigma.Editor($);    $.valueDom=Sigma.$e("input",{       type:"text",       value:$.defaultValue||"",       className:"gt-editor-text",       id:$.type,       suggestions:$.suggestionList    });    $.dom.appendChild($.valueDom);    return $; },

Will some kind of custom in-grid editors be in SigmaGrid 2.2?

-humi

[asherw]

Hi Humi,

I also need to add autocomplete to my grid cells. I have autocomplete scripts that works with forms (text box, etc.) and I want to use it on grid cells. It uses id. I have not make any attempt to try it and ran into your post, perhaps I will try it tonight and see if it works.

Asher

[asherw]

Thank you. I am sure a lot of folks want this (autosuggests) feature. It really helps users with editing the grid.

[humi]

Ok. Problem Solved. (for SigmaGrid 2.1.02)

Next I need to add a Grid Event to trigger the creation of the autoSuggest object to the editor. The editor is created on a "which cell is being edited" basis. So each time you edit a cell, a new editor is created and the old one deleted.

The editor is created and made active in the df4 function. Find it by doing a search in the grid_all.js for the following:
df4:function(B,$){

You create a Grid Event as the following at the end of the df4 function.
Sigma.$invoke(this,"onEditorCreate",[    this.activeEditor.type,  // will be autoSuggest as example    this.activeEditor.suggestionList  // will be suggestionListArray as example ]);

Now in your grid file, use the following to create the autoSuggest object for the editor.
var colsOption=[    ect...ect...    // addressList is an array is separate from grid created with a SQL query    // example:    // var addressList = new Array();    // var addressList[0] = "first address";    // var addressList[1] = "second address";    // var addressList[2] = ect...ect...    {id: 'address', width:250, editor:{type:"autoSuggestText",suggestionList:"addressList"} },    // for christian ***    // could also be something like this:    // {id: 'address', width:250, editor:{type:"limitLenText",maxLen:"12"} },    // then in the editor itself (from the first post) make an    // attribute for the length based on maxLen from above.    // like this: maxlength: $.maxLen, var gridOption={    loadURL : '/sigmagrid/Controller.php',    ect... ect...    onEditorCreate : function(editorType,suggestionListArray){       if((editorType=="autoSuggestText"){          // binds new autoSuggest object to our custom editor field          // autoSuggest script is separate from grid.          new AutoSuggest(document.getElementById(editorType),window[suggestionListArray]);       }       // if you have more custom editors:       if (editorType=="limitLenText"){          // this editor type doesn't require any          // special handling... so this isn't needed!       }    } };

This code works for me. Only need to create the editor like in my previous post.

Notes: You may need to have z-index for the autoSuggest div to be "1" or more. I could attach the autoSuggest.js that I am using with this if someone would like.

[zaheer]

hi,

i need complete code for autoSuggest with autoSuggest.js
please send me.

Thanks

[prabhuraj]

can u post the complete code for auto complete

[prabhuraj]

i cant find the code , i have searched in js file..... plz give me a complte js file and code..its urgent

[humi]

You may use whatever polling JavaScript you wish...
Attached are the files I use for Auto Suggest editor. They can be used with the example a few posts above.

[humi]

parabhuraj,

What you have posted looks correct... however, this grid editor is for SigmaGrid version 2.1.02... I think they have re-made the grid.js file and renamed the functions.

You may use this link to download the version I made this for:
http://www.sigmawidgets.com/download/sigma_grid2.1.02_release.zip

Or... you can try to find the renamed function in the newest version.

[prabhuraj]

After a long time....I got the code working. Thank you humi.

So here i post the working code for "Auto Suggest" Feature. Auto Suggest feature for Sigmagrid

I think it will be usefull for many people.

Plz look at the attachment below. you will find the files.

Once again i thank you "Humi". Thk u friend.

[humi]

prabhuraj,

Thanks for making working demo to download... Now I don't have to.

[prabhuraj]

hai humi,

We have another "2 more" issues with the style in auto suggest feature div...

1. even we dont have matching records to display in suggest div , the empty div loads.

2. and when clicking the selected element it works fine but in IE it gives an page error:

"Can't move focus to the control because it is invisible, not enabled, or of a type that does not accept the focus."

Do you have fixed this...if u have solution plz post it here.

thank you.

[humi]

It sounds like you didn't change the Z-index in the CSS file - needs to be more than 1 for layer on top of the SigmaGrid.

Let me know if it is something else.

[prabhuraj]

hai humi,

the problem is the empty div appears when we have "no matching" suggestion.

BUt now i find out a solution for that. now it is fixed. i will attach the modified autosuggest.js and autosuggest.css have a look.

the 2nd issue remains unfixed

when clicking the higlighted element in suggestion list , it works fine, but in IE it gives an page error:

"Can't move focus to the control because it is invisible, not enabled, or of a type that does not accept the focus."

any ideas, help me yar

thank u.