Binding data to grid (or anytyhing!) BASIC question.

Discontinued products DHTMLX Touch
#1

I can display MySQL data in a grid or a list with no problem, but I can’t get the data to bind to other display objects. I’ve spent a lot of time, trying every variation I can think of, but I am clearly just not understanding the basics. I also use the non-Touch version for desktop sites, and have no trouble displaying data however I want–it works.

But the Touch app is different. There is no active sample on-line or with the downloaded samples and demos that demonstrates this. There are a few examples in the tutorials, but the code they display is unclear, and since it is not a live example, I can’t see what’s going on.

One example of something that I don’t understand is this code, in an on-line tutorial:

$$(“grid”).attachEvent(“onAfterSelect”, fill_form);

function fill_form(id){
$$(“topForm”).setValues( $$(“grid”).item(id) );
}

First of all, I don’t see that the form has the ID “topForm” assigned. However, assigning it still doesn’t help me. Still won’t work.

Also, in the function where “.item(id)” is in the code, it is not clear if this is literal, and should be left exactly as on the page, or if I am supposed to substitute and id from elsewhere–like a row id or similar.

Most of my code works. I can test the onAfterSelect by placing another action there–and it works. It’s the filling the form that doesn’t work.

Many times, I want to just display some detail fields on the same page as a grid. These are not really “form” items, in that they are for display only, so I understand that I should also be able to bind labels and similar items to the grid. Is that true?

Thanks. I would not trouble everyone here if I had not already spent way too many hours trying to get this working.

JS

#2

This is how I bind lists and forms …

First layout your list and your form, usually within cells of a multiview because you’re likely to only want to show one of them at a time

view:"multiview", cells:[
  {
    view:"grid", id:"my_list", fields:[
      { label:"Field 1", template:"#field1#", sort:{ by:"#field1#" } },
      { label:"Field 2", template:"#field2#", sort:{ by:"#field2#" } },
      { label:"Field 3", template:"#field3#", sort:{ by:"#field3#" } },
      { label:"Field 4", template:"#field4#", sort:{ by:"#field4#" } }
    ]
  },
  {
    id:"form_view", rows:[
      {
        view:"toolbar", elements:[
          { view:"button", value:"Close", click:function(){ $$('my_list').show(); } }
        ]
      },
      {
        view:"form", id:"my_form", type:"clean", elements:[
          { view:"text", name:"field1", label:"Field 1" },
          { view:"text", name:"field2", label:"Field 2" },
          { view:"text", name:"field3", label:"Field 3" },
          { view:"text", name:"field4", label:"Field 4" }
        ]
      }
    ]
  }
]

The key here is that assuming the data contains fields named “field1”, “field2” etc., these are used as the values of the “template” property in the grid and the “name” property in the form.

Then bind the list to the form

$$('my_form').bind('my_list');

Then when you select an item in the list, display the form

$$('my_list').attachEvent('onItemClick',function(id)
{
  $$('form_view').show();
});

You don’t need to worry about the “id” passed to the function, or setting values in the form, by “binding” them DHTMLX takes care of it auto-magically.

#3

Hello,

When you bind form or template view to multi-data component like grid or list via bind() method, form will take data of active item in list. To make an item active you can either click on this item or call setCursor(id) method for list.

Please check the following samples in Touch package:

dhtmlxTouch/samples/06_grid/03_edit.html
dhtmlxTouch/samples/10_server/01_loading/03_list_form_manual.htm
dhtmlxTouch/samples/10_server/01_loading/04_list_form_auto.html
dhtmlxTouch/samples/10_server/01_loading/05_list_list_client.html

#4

Ah, thank you VERY much. This is much more clear.

I still can’t make the form_view display, and wonder what I may be doing wrong. Here is my code, that works except for calling the detail view when an item is selected:

dhx.ready(function(){
dhx.ui({
view:“multiview”, cells:
[

		        {
			    view:"grid",
			    id:"my_list",
			    select:"multiselect",
			    fields:
				[
				    { label:"Language", template:"#Language#", sort:{ by:"#Language#" } },
				    { label:"Text", template:"#name_display#", sort:{ by:"#name_display#" } }
				],
				url:"data.php"
			},

			{
			    id:"form_view", rows:
			    [	
				{
				    view:"toolbar", elements:
				    [
					{ view:"button", value:"Close", click:function(){ $$('my_list').show(); } }
				    ]
				},
			        {
				    view:"form", id:"my_form", type:"clean", elements:
				    [
				        { view:"text", name:"Language", label:"Language" },
				        { view:"text", name:"name_display", label:"Text" }
				    ]
				}	
			    ] 		
			}
		    ]	// END multiview
		    
            }); 		// END dhx.ui
        }); 		// END dhx.ready function
#5

Oops. Left off the bottom part of the code, which is one part I’m unsure of because I don’t know if it should go inside the script logic or not:

Here’s the code that follows the previous post:

}); // END dhx.ready function

    $$('my_form').bind('my_list');

    $$('my_list').attachEvent('onItemClick',function(id)
	{
	  $$('form_view').show();
	});
    
    
        function next()
    {
            //$$('mylist').loadNext(10);
            $$('my_list').loadNext(10)
        }

    </script>
</body>
#6

Hello,

You initialize multiview with list and form inside ready handler. Therefore, you should call bind and attachEvent methods in this handler too:

dhx.ready(function(){ dhx.ui({...}); $$('my_form').bind('my_list'); $$('my_list').attachEvent('onItemClick',function(id){ $$('form_view').show(); }); });