I looked at all the documents and I have not been able to find a option to put a close icon at the far right of the title bar on a datagrid. is there a option to do this? If so I would really appreciate if someone could show me how to do.

Thanks,

Steve

I guess for some reason you need to use the unselectAll that seem to work:

Code:

		function doChapters(){

                     if ($('#c4').is(":visible")){
                       $('#c4').hide();
                     }
                      else{
                       chaptersw=0; //select chapter mode
                       memberid = document.getElementById("m_id").value;
                       $("#mem_id").val(memberid);
                       fname = document.getElementById("fname").value;
                       $("#f_name").val(fname);
                       lname = document.getElementById("lname").value;
                       $("#l_name").val(lname);
                       $('#c4').show();
                       $("#c4").css('zIndex', 9999);
                       $('#ci').datagrid('load');
                       $('#ci').datagrid('unselectAll'); //clear selected 
                      }
   		}

I have tried the following and it does work not sure what I doing wrong.

Code:

                     $('#c1').datagrid('unselectRow');

How do you unselect a row or is there not a way? Left click select but what unselects it? I tried a lot of things but nothing works. If someone could help that would be greatly appreciated.

Found that if the form is hidden you can not add a function. So I made sure the onSelect event was init before.

I added onSelect to the datagrid table and it still did not work:

Code:

	<table id="ci" title="Chapters/Contacts" class="easyui-datagrid" style="width:400px;height:450px"
                     toolbar="#tb" pagination="true" idField="id" onSelect: function(rowIndex, rowData){{alert(rowData);}
			rownumbers="true" fitColumns="true" singleSelect="true">

I having a problem getting onSelect to work. It does not fire when I select the row. I trying to have it to come up with at yes no to save.

Code:

       <div id="c4" class="c3">
	<table id="ci" title="Chapters/Contacts" class="easyui-datagrid" style="width:400px;height:450px"
                     toolbar="#tb" pagination="true" idField="id"
			rownumbers="true" fitColumns="true" singleSelect="true">
		<thead>
			<tr>
				<th data-options="field:'name',width:100">Chapter</th>
				<th field="type" width="60" >Type</th>
				<th field="state" width="70">State</th>
				<th field="id" width="70">id</th>
			</tr>
		</thead>
	</table>

This is how I setup the event:

Code:

		$(function(){
                 $('#ci').datagrid({
                    onSelect: function(rowIndex, rowData)
                     {
                       alert("test");
                     }
                 });
                 });

I found a way that works for hiding on load of the page. Hopefully this helps someone else.

Code:

		$(document).ready(function(){
			$('#c4').hide();
		 });

I see there is a lot about hiding a column or row. But I don't see any about hiding the datagrid. I have a button that will toggle it find but I have to have it load when the page loads. Is there a way to load it and not have it show on start up of the page?

I tried the following:

Code:

       <div id="c4" class="c3">
	<table id="ci" title="Chapters/Contacts" class="easyui-datagrid" style="width:400px;height:450px"
                     toolbar="#tb" pagination="true" idField="id"
			rownumbers="true" fitColumns="false" singleSelect="true">
		<thead>
			<tr>
				<th data-options="field:'name',width:80">Chapter</th>
				<th field="type" width="60" >Type</th>
				<th field="state" width="70">state</th>
			</tr>
		</thead>
	</table>
	<div id="tb" style="height:50px;padding:5px;">
		<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newUser()">New Chapter</a>
		<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editUser()">Edit Chapter</a>
		<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="destroyUser()">Remove Chapter</a>
       </div>
       </div>

      // this works with a button but it has to load before it works.
		function doChapters(){
		     $('#c4').toggle();
                     $("#c4").css('zIndex', 9999);
                     $('#ci').datagrid('reload');
   		}



        //this does not work at all.

         // change the http request parameters before load data from server
         $('#ci').datagrid({
           onLoadSuccess: function(){
          	$('#ci').hide();

          }
        });

Oh my I sure made that difficult... Thank you Thank you Thank you..... That was one think I did not try.

I tried to use the position method to see if it would offset the element but it does not move at all.

Code:

                     <div>
	                      <input id="status" class="easyui-combobox"  name="status" value="name" 
			        data-options="valueField:'id',textField:'text',url:'data/combobox_data.json'">
			</div>


$("#status").position({
  of: $('#status').parent(),
  my: 'left top',
  at: 'left top',
  offset: '160 160'
});

Whew! I cannot figure it out for sure. I cannot believe that there is not a way to set the top or left style. When I use the width this work for width just not for top or left.

I tried this:

Code:

                     <div>
	                      <input class="easyui-combobox"  name="status" value="status"
			        data-options="valueField:'id',textField:'text',url:'data/combobox_data.json',top:'250px;'">
			</div>

I have been trying to place a combobox that I using to a location. I can change the width and height but I can not change the left right bottom or top. How do you place a combobox. I will have more than one combobox and need to place each on so overriding the css is not going to work. Someone's help would be really appreciated. I tried using a class to set the top and left position but it does not work.

Here is the code:

Code:

	               <input class="easyui-combobox test"  name="status" value="name" 
			        data-options="valueField:'id',textField:'text',url:'data/combobox_data.json'">

.test {
  position: absolute;
  top: 139px;
  left:400px;
}

I guess it is the 'textbox combo' class that needs to have the style left and top, but I'm not sure how set it. I have googled that heck of it and I cannot find and example or info on how to place a combobox as far as top and left position. Any help would be appreciated.





Changing the combo css works but that would change all combo boxes.

Code:

.combo {
  position: absolute;
  top: 139px;
  left:400px;
  white-space: nowrap;
  margin: 0;
  padding: 0;
  border-width: 1px;
  border-style: solid;
  overflow: hidden;
  vertical-align: middle;
}

I tried addClass to the combobox span so that is would add the top and left positions but it did not work either. I tried
'span:first' but that did not work at all.

Code:

  $('#cc').combobox({
  	onLoadSuccess: function(){
	$("span").addClass("c1");
	}
  });

.c1 {
  position: absolute;
  top: 139px;
  left:400px;
}

I installed the onError handler and I not getting anything back. The error is on line 114 of the edatagrid and I believe it before it even calls the update_user.php file. Any ideas on what I can do to resolve this problem? I using chrome Inspect and it erring at line 114 of the edatagrid.js.


//server side code
echo json_encode(array(
   'isError' => true,
   'msg' => 'error message.'
));
//client side code
$('#dg').edatagrid({
   onError: function(index,row){
      alert(row.msg);
   }
});

Thanks so much. So what you are saying is that it is on the server end? So would that be the update_users.php then as that would be the change of edit a cell right? I'm using pretty much the demo program so I would think it would not have problems. I did have to change mysql to mysqli calls though. I also don't think it is making it to the update_users.php I believe the error is before that when the cell changes it errors out using Inspect on chrome at line 114 edatagride.js. The get_users.php is working it does get the user data. I will use the onError Event to see if that points to the problem.

This is my update_users.php

$id = intval($_REQUEST['id']);
$name_first = htmlspecialchars($_REQUEST['name_first']);
$name_last = htmlspecialchars($_REQUEST['name_last']);
$phone = htmlspecialchars($_REQUEST['phone']);
$email = htmlspecialchars($_REQUEST['email']);

var_dump($id);

include 'db_connect.php';

$sql = "update bs_members set name_first='$name_first',name_last='$name_last',phone='$phone',email='$email' where id=$id";
$result = $mysqli->query($sq);
   echo json_encode(array(
      'id' => $id,
      'name_first' => $name_first,
      'name_last' => $name_last,
      'phone' => $phone,
      'email' => $email
   ));
} else {
   echo json_encode(array('errorMsg'=>'Some errors occured.'));
}

Hello I am newbie and would really appreciate a point in the right direction. The error is caught on line 114 of the jquery.edatagrid.js. The line reads:

                     if (data.isError){
                        $(target).edatagrid('cancelRow',index);
                        $(target).edatagrid('selectRow',index);
                        $(target).edatagrid('editRow',index);
                        opts.onError.call(target, index, data);
                        return;
                     }

this is my code:

      $(function(){
         $('#dg').edatagrid({
            url: 'get_users.php',
            saveUrl: 'save_user.php',
            updateUrl: 'update_user.php',
            destroyUrl: 'destroy_user.php'
         });
      });



   <table id="dg" title="Members" class="easyui-datagrid" style="width:1300px;height:450px"
                     toolbar="#toolbar" pagination="true" idField="id"
         rownumbers="true" fitColumns="true" singleSelect="true">
      <thead>
         <tr>
            <th field="name_last" width="50" editor="text">Last Name</th>
            <th field="name_first" width="60" editor="text">First Name</th>
            <th field="chapter_city" width="70" editor="text">Chapter</th>
            <th field="status" width="35" editor="text">Status</th>
            <th field="email" width="60" editor="text">Email</th>
            <th field="address" width="60" editor="text">Address</th>            
                                <th field="city" width="40" editor="text">City</th>
            <th field="state" width="15" editor="text">State</th>
            <th field="zip" width="25" editor="text">Zip</th>
            <th field="phone" width="45" editor="text">Phone</th>

         </tr>
      </thead>
   </table>