Custom Editor For Grid as Modeldialog Box

[anoopta]

In sigma Grid How to use a dialog box. When this dialog box is opened user must not do any action on the grid. so grid should be like disabled.

Can we use custom editors for this. Have anyone done this type of work.

I cannot use inline adding of grid bcz i have about 10 fields to be added. So how can i do this.

Here is the code i have tried.

humi,

  I tried the code but still some js error. Here is the code i am trying

var myDialogEditorCreater = new Sigma.DialogEditor({
      id: "myDialogEditor1",
      gridId : "memberGrid" ,
      width: 250,
      height:150 ,
      title : 'Customer',
      body : ['<input type="text" id="my_name_input" name="my_name_input"/><br/><br/>',
            '<input type="button" value="OK" onclick="Sigma.$grid(\'memberGrid\').activeDialog.confirm()"/>'].join(''),

      getValue : function(){
         return Sigma.$("my_name_input").value;
      },

      setValue : function(value){
         Sigma.$("my_name_input").value=value;
      },
      active : function(){
         Sigma.U.focus(Sigma.$("my_name_input"));
      }


   });

And i have a customized button to call this function


   Sigma.ToolFactroy.register(
   'career',
   {
      cls : 'career-cls',
      toolTip : 'Button Creation Example',
      action : function(event,grid) {

      myDialogEditorCreater.body();
   }
   }
     );


I am getting a error as
"myDialogEditorCreater.body is not a function"
"return not in function"

Can u help me to find the issue behind this error. I have around 10 fields to be displayed in this box and need to save it to database.
On submitting how i will get the data from the textbox.

Also on editing the same need to be filled in each text box and displayed in the dialog box.

How can i do this.

[humi]

A Custom Dialog Editor will disable the grid until the Editor is closed.

Working Custom Dialog Editor for SigmaGrid 2.1
http://sigmawidgets.com/forum/ajax-data-grid-view/custom-data-editor-example/msg572/#msg572

myDialogEditorCreater.body();  --  is not a function of the Custom Dialog Editor. I don't know where you saw that.

How do you want to call the editor?

If you have 10 fields to edit: Are there more than 1 rows?
If there is more than 1 row, but the button in a column, and specify the dialog editor as the column editor.
Then you can modify row data with the editor.

http://sigmawidgets.com/forum/show-case/construction-company-project-managment/
When I click the first column of a row, the Custom Editor Dialog opens and lets me edit hidden columns in the row. I hope that clears it up a little.

[anoopta]

Hi humi,

 Thanks for your reply.

  I have a Employee master with around 10 fields. But i am not showing the whole fileds in grid. Only First name, Last Name, Email, phone are displaying. I have 50 rows in the grid with paging as 10 rows per page. The last column of the grid have a edit button. And in the botton of the grid also have a add button to add these details. I want dialog editor bcz i want to make the grid disable when the dialog editor is opened. I am not using inline adding.

  What i need is on clicking the edit button image it should open a Dialog Editor printing all 10 fields data in the text box and on submit it should save and reload the grid.

  the dialog editor is opened when i give editor: myDialogEditorCreater in the image column.

  Now i need to know is how to display all the fields data in the text boxes. i am not getting it. plz help me


Also can we put a iframe like body : ['<iframe><textarea id="my_name_input" rows="3" cols="20" style="width:99%"></textarea></iframe>  in var myDialogEditorCreater = new Sigma.DialogEditor({ 

 i can`t see the textarea in the dialog editor when i use iframe.

[humi]

Sorry for delay.

What I use:
my dialog box:
var viewMoreInfoDialog = new Sigma.DialogEditor({ id: "viewMoreInfoDialog_id", gridId : "uninvoicedmaterialGrid" , width: 450, height:300 , title : 'More Information...', currentRecordInfo : null, rownumber : null, body : "not rendering correctly!" });

my colsOption
var colsOption = [ {id : 'id_charge', hidden:true }, {id : 'thecheckbox', isCheckColumn : true }, {id : 'more', width:40, editor: viewMoreInfoDialog, renderer: function(value ,record,colObj,grid,colNo,rowNo){ return '<center><img src="images/edit_icon.png" /></center>'; } },         ect...

my gridOption
  onClickCell:function(value, record , cell, row, colNO, rowNO,columnObj,grid){     // if not rendering. check column number for "more"     if(colNO=="2"){       viewMoreInfoDialog.currentRecordInfo = record;       viewMoreInfoDialog.rownumber = rowNO;       viewMoreInfoDialog.body = function(){         // do ID conversions here         var retval = "<br /><table align=center width=430>" +         "<tr><td>column 1</td><td>" +         "<input type='text' id='editor_column1' value='" +         record['from_invdate'] +         "' style='width:240px'></td></tr>" +         "<tr><td>column 2</td><td>" +         "<input type='text' id='editor_column1' value='" +         record['from_invdate'] +         "' style='width:240px'></td></tr>" +         "var newvalue1 = Sigma.$(\"editor_column1\").value; " +         "var newvalue2 = Sigma.$(\"editor_column2\").value; " +         var retval = retval +         "finishthisdialog(rownum,newvalue1,newvalue2); '></td></tr>" +         "</table>";         return retval;       };       viewMoreInfoDialog.setBody();     }   }


function finishthisdialog(rownum,newvalue1,newvalue2){ uninvoicedmaterialinstance.setColumnValue("column1",rownum,newvalue1); uninvoicedmaterialinstance.setColumnValue("column2",rownum,newvalue2); // update all changed cells. uninvoicedmaterialinstance.updateEditState(); viewMoreInfoDialog.currentRecordInfo = null; viewMoreInfoDialog.rownumber = null; Sigma.$grid('uninvoicedmaterialGrid').activeDialog.confirm(); }


WARNING: This is very sloppy.

You can probably see what you need form this working sample.