bind

Suite and Optimus Suite 5
#1

I am trying to bind data to a form from a grid and nothing happens (grid is working fine)

this is the code:

var base_layout = new dhtmlXLayoutObject(document.body, ‘4I’);
var cellInfo = ‘a’;
var cellHotel = ‘b’;
var cellForm = ‘c’;
var cellTab = ‘d’;

base_layout.cells(cellInfo).setHeight(‘100’);
base_layout.cells(cellInfo).setText(‘Event’);
base_layout.cells(cellHotel).setText(‘Hotels’);
base_layout.cells(cellForm).setText(‘Hotel Information’);
base_layout.cells(cellTab).setText(‘Room Information’);

var defcombo = {
parent: “listEvent”,
label: “select event”,
width: 200,
readonly: true
}

var cmbEvent = new dhtmlXCombo(defcombo);
cmbEvent.loadXML(“handler/GetEventList.ashx”);
cmbEvent.attachEvent(“onSelectionChange”, onSelectionChangeFunc);
base_layout.cells(cellInfo).attachObject(“comboEvent”);

cmbEvent.attachEvent(“onXLE”, onComboLoaded);
function onComboLoaded() {
cmbEvent.selectOption(0, false, true);
document.getElementById(‘comboEvent’).style.display = “block”;

}

function onSelectionChangeFunc() {
if (cmbEvent.getSelectedValue() == ‘’) { return; }
base_layout.cells(cellHotel).progressOn();
// grid.clearAll();
// grid.loadXML(“handler/GetEventHotelList.ashx?eventid=” + cmbEvent.getSelectedValue());

}

var str = [
{ type: “input”, name: “NAME”, label: “Name”, validate: “NotEmpty”, maxLength: 100, inputWidth: 100 },
{ type: “input”, name: “NICKNAME”, label: “Nickname”, maxLength: 100, validate: “NotEmpty”, inputWidth: 100 }
];
var formhotel = base_layout.cells(cellForm).attachForm(str);

var grid = base_layout.cells(cellHotel).attachGrid();

grid.selMultiRows = false;
grid.enableMultiselect(false);
grid.enableMultiline(true);
grid.setHeader(“Nickname,Name,From,To,Official”);
grid.setInitWidths(“100,200,50,50,50”);
grid.setColAlign(“left,left,center,center,center”);
grid.setColumnIds(“NICKNAME, NAME,FROM,TO,OFFICIAL”);
grid.setColTypes(“txt,txt,dhxCalendar,dhxCalendar,ch”);
grid.setColSorting(“str,str,date,date,na”);
grid.dragAndDrop = “false”;
grid.setEditable(false);

grid.init();
formhotel.bind(grid);

#2

I made a mistake when I send the sample code
the lines
// grid.clearAll();
// grid.loadXML(“handler/GetEventHotelList.ashx?eventid=” + cmbEvent.getSelectedValue());
should be uncommented

#3

Unfortunately we cannot reproduce this issue locally. Can you please provide complete demo where we can reproduce it? You can find tutorial how to create complete demo here docs.dhtmlx.com/doku.php?id=othe … leted_demo

Also, try to follow this tutorial docs.dhtmlx.com/doku.php?id=tuto … htmlxstart

#4

Attached is a demo. Try to select something in the combo (it always return the same grid). The form is bind to the grid but it is not working
demo.zip (509 KB)

#5

If you want to bind form and grid, you should use data store. Please check tutorial here docs.dhtmlx.com/doku.php?id=binding#grid

#6

I made it work finally.

I have a question. I use the form to edit the fields, so I select an item of the grid, it automatically fills the fields in the form. Thats works fine.

Now when I press the button cancel in the form, I want to reset the values in the form with the values of the item selected in the grid. I did not find a way of doing this but manually clicking in other item and then clicking again in the first item.

Is there a way to refresh the fields bind in the form? (I tried selecting the row already selected but i didn’t work)

#7

Just in case I tried form.reset but it resets the values to the original ones assigned to the inputs (in this case blank)

#8

for the record, I also tried grid.setCursor(idRow) it didnt work

#9

Before you ask, here you have a demo :slight_smile:

1.Select an event
2.Select a row in the grid
3.Click on edit
4.Change the name in the form
5.Click on cancel

I want to reset the values of the form with the current values of the row selected, grid.setcursos is not working

please help

#10

demo
demo_form.zip (522 KB)

#11

Hello,

Correct, reset() works together with load(), but you’re using DataStore.

So, you can try to add event for “cancel” button and call:
formhotel.setFormData(dataHotel.data.pull[grid.getSelectedId()]);

By the way: form have lock() and unlock() methods (maybe will useful).

#12

did you try lock and unlock? because they do not work with a form binded to a grid (they should but it seems that the form unlocks automatically when I select an item in the grid)