rendering dropdownbutton and dataGrid in editable datagrid columns

[yusufmendesMember]

I want to add dropdownButton and datagrid to skill column of datagrid
component. I generate LaborRequirement Data Grid’s skill column at
renderSkillListDropDownButton function. Later at createSkillDataGrid
function I am using following lines of code
for (var row=0; labRequirementListLength;row++) {
….
}
to create a dropDownButton and a SkilDataGrid for each skill cells of
laborrequirement grid. As could be seen on attached screenshots, the
problem is at the beginning a dropdown and data grid is displayed on
skills columns but when I click on another editable columns(personnel# and Duration) dropdown
and datagrid disappears.but when I look firebug , each dropdownbutton and datagrid dom elemnts available

[yusufmendesMember]

Sorry I forgot attaching other screenshots,

[yusufmendesMember]

[Peter StoevKeymaster]

Hi yusufmendes,

jqxGrid cannot have a DropDownButton column. Such editor is not supported.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[yusufmendesMember]

I know jqxGrid dont support editable dropdownbutton,but As it could be seen on attached codes,My goal is not to create editable skill columns with dropdwon and datagrid,First,I created dropdownbutton and datagrid dom elemnts in renderSkillListDropDownButton cellsrenderer funtion (could be seen in attached code),then While I creating SkillDataGrid in createSkillDataGrid ,I ‘m trying to create drop downs and datagrids in loop using dropdown and datagrid dom elemnent for each skill columns of LaborRequirementDataGrid .I m developing this project using jqxWidgets and Knockout since one month and I must solve this problem ,thanks in advance .

Screenshots

[Peter StoevKeymaster]

Hi yusufmendes,

The idea of the cellsrenderer function is to allow you to replace the default content of a cell with custom HTML elements(not widgets). Its purpose is different from creating dynamically DOM elements and creating widgets from the DOM elements. It should not work for widgets and we cannot suggest you a work around.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[yusufmendesMember]

But I can create dropdownbutton and datagrid using following codes.I dont create this widgets in cellsrenderer function,I just only create this widgets div element with specified ids ,codes are following

/*LaborRequirementGrid skill cell renderer*/
var renderSkillListDropDownButton=function(row,….){

var dropDownButtonDivs=’

“;
return dropDownbuttonDivs;

}

Then I use dropDownButtonDivs to create dropdownButton and SkillDatagrid for each laborRequirementgrid skill cells after creating LaborRequirementGrid using following code snippet

for(var row=0;row<laborRequirementDatagridSize;row++)
{
inbox.uiCreater.createDropDownButton("#dropDownButtonForSkillGrid_'+row+'");
datagridCreate.createDataGrid("skillDataGrid_'+row'");
}

That is,I dont create dropDownButton and SkillDataGrid widgets in cellsrenderer

[yusufmendesMember]

sorry following statement are corrected
var dropDownButtonDivs=”div id=”#dropDownButtonForSkillGrid_’+row+'”>

[yusufmendesMember]

sorry following statement are corrected
var dropDownButtonDivs=”div id=”dropDownButtonForSkillGrid_’+row+'”> div id=”skillDataGrid_’+row'”/>

[Peter StoevKeymaster]

Hi yusufmendes,

Ok, but the cells content is updated dynamically by the Grid and even if you put a widget inside a cell, the widget will be replaced next time the cell is rendered with the HTML returned by the cellsrenderer function. I.e when you enter into edit mode, scroll the Grid, change a page, sort, filter or do any other operation, the Grid cells will be rendered and the widgets that you put dynamically will be cleared. Unfortunately, the scenario that you have is not supported by our widget.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[yusufmendesMember]

Hmm I got in,thanks for your help,
unfortunately I have no idea what I should now for this scenario .My boss wants me to implement this scenario .I ‘m efforting nearly one month on this project .Do you have any other idea for this scenario?

[Peter StoevKeymaster]

You can try the following:

Bind to the cellvaluechanged event and update your cells in the event handler i.e init the widgets again.
Other events which you may find useful in your scenario are cellbeginedit and cellendedit. cellbeginedit is raised when a cell enters into edit mode. cellendedit is raised when a cell leaves edit mode.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[karimyafiMember]

Did you face the problem of only having the first row affected and not the others?
I want to render a combo box in all the cells of a column. I’m doing this:

1- The function used for cells rendering:

var cellRenderer = function (row, columnfield, value, defaulthtml, columnproperties){
  var result = '<div id="listingridcell"></div>';
  fillCell("#listingridcell");
  return result;
 }

2- Filling the cell with the combo:

function fillCell(divName){
  var source = [
		"Affogato",
                "Americano",
                "Bicerin",
                "Breve",
                "Café Bombón",
                "Café au lait",
                "Caffé Corretto",
                "Café Crema",
                "Caffé Latte",
  ];
  // Create a jqxComboBox
  $(divName).jqxComboBox({ source: source, selectedIndex: 0, width: '200px', height: '25px' });
}

3- Finally, the grid (somewhere in the $(document).ready(function(){…}):

$("#grid").jqxGrid({
  source: dataSource,
  theme: 'energyblue',
  width: 920,
  columns: [
		{ text: 'Name', datafield: 'name', width: 250, cellsrenderer: cellRenderer},
		{ text: 'Beverage Type', datafield: 'type', width: 250 },
		{ text: 'Calories', datafield: 'calories', width: 180 },
		{ text: 'Total Fat', datafield: 'totalfat', width: 120 },
		{ text: 'Protein', datafield: 'protein', width: 120 }
  ]
});

The problem is that I only get the first row rendered properly with the. I tried to change the div id in cell renderer function by dynamically creating id’s, something like the following but no success..

// row is the row number parameter in the rendering function..
var result = '<div id="listingridcell_' + row + '"></div>';

[5203013123036357125256Participant]

This was something I myself wanted to do – cellrender a jqxMenu inside a jqxGrid cell. As Peter Stoev states, the jqxMenu showed and worked fine at startup, but when the grid was re-rendered (column ordering changed, scrollbar position changed etc…), only the HTML part showed – destroying my nice looking grid.

Peter, what is the reason for not supporting such a case like this? Why is there no ‘doneRendering’ event which we could hook up to?

Best regards,
Per Eivind

[Peter StoevKeymaster]

That’s what we have. Our Grid is capable to render only built-in types of widgets or custom HTML in the grid cells.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[Author]

Posts