[supun151515Participant]

Hello Hristo, I really appreciate your reply.

Here you can see all the images;
1. https://pasteboard.co/GL2L94I.png
2. https://pasteboard.co/GKmR9mb.png
2. https://pasteboard.co/GKmQVu4.png

Why it is automatically changing the selected row when I click on the form,
Here is the code;

var source_bc_list;
var dataAdapter_bc_list; 
var theme = "";
$(document).ready(function () {

           var url = "receipt_list.php";
            source_bc_list =
            {
                
                datafields:
                [
                    { name: 'ID', type: 'number' },
                    { name: 'receipt_no', type: 'string' },
                    { name: 'receipt_date', type: 'date', format: "yyyy-MM-dd" },
                    { name: 'des', type: 'string' },
                    { name: 'arrival_notice', type: 'string' },
                    { name: 'invoice', type: 'string' },
                    { name: 'detention', type: 'string' },
                    { name: 'client_code', type: 'string' },
                    { name: 'Company', type: 'string' },
                    { name: 'current_bal', type: 'string' },
                    { name: 'paying_amount', type: 'string' },
                    { name: 'pay_type', type: 'string' },
                    { name: 'cheque_no', type: 'string' },
                    { name: 'cheque_date', type: 'date', format: "yyyy-MM-dd" },
                    { name: 'agent_code', type: 'string' },
                    { name: 'created_by', type: 'string' }

                ],
                 datatype: 'json',
                 url: url,
                 type:'POST',
                 async: false,
                 updaterow: function (rowid, rowdata) {
                    // synchronize with the server - send update command   
                }
            };
            dataAdapter_bc_list = new $.jqx.dataAdapter(source_bc_list);
            // initialize jqxGrid
            $("#receipt_search_button").jqxDropDownButton({ width: 245, height: 25, theme: theme });

            $("#receipt_search_grid").jqxGrid(
            {
                width: 580,
                source: dataAdapter_bc_list,
                theme: theme,
                pageable: false,
                groupable: true,
                showfilterrow: true,
                filterable: true,
                sortable: true,
                columnsresize: true,
                columns: [
                  { text: 'ID', datafield: 'ID', width: 50 },
                  { text: 'Receipt No', columntype: 'textbox', datafield: 'receipt_no', width: 150 },
                  { text: 'Receipt Date', datafield: 'receipt_date', columntype: 'textbox', cellsformat:'yyyy-MM-dd', width: 100 },
                  { text: 'Client Code', datafield: 'client_code', width: 90, cellsalign: 'left' },
                  { text: 'Paid Amount', datafield: 'paying_amount', width: 90, cellsalign: 'left' },
                  { text: 'Pay Mode', datafield: 'pay_type', width: 90, cellsalign: 'left' },
                  { text: 'Arrival Notice', datafield: 'arrival_notice', width: 150, cellsalign: 'left' },
                  { text: 'Invoice', datafield: 'invoice', width: 150, cellsalign: 'left' },
                  { text: 'Detention', datafield: 'detention', width: 150, cellsalign: 'left' }

                ]
            });

$("#receipt_search_grid").on('rowselect', function (event) {

var args = event.args;
var row = $("#receipt_search_grid").jqxGrid('getrowdata', args.rowindex);
var dropDownContent = '<div style="position: relative; margin-left: 3px; margin-top: 5px;">' + row['receipt_no'] + '  ' + moment(row['receipt_date']).format("YYYY-MM-DD") + '  ' + row['client_code'] + '</div>';
$("#receipt_search_button").jqxDropDownButton('close');
$("#receipt_search_button").jqxDropDownButton('setContent', dropDownContent);

    var dropDownContent = '<div style="position: relative; margin-left: 3px; margin-top: 5px;">' + row['Company']  + '  ' + row['client_code'] + '</div>';
    $("#client_button").jqxDropDownButton('setContent', dropDownContent);
    $('#client_button').jqxGrid('clearselection');
    $("#client_code").val(row['client_code']);
    Arrival_List(row['client_code']);
    DetentionList(row['client_code']);
    InvoiceList(row['client_code']);
    $.post("client_avl_bal.php", {client_code:row['client_code']}, function(data){
        $("#cur_bal").val(data);
    });
    var arrival_list = row['arrival_notice'];
    $("#arrival_list_data").text(arrival_list);
    if (arrival_list != ''){    
    arrival_list = arrival_list.split(',');
    $.each(arrival_list, function(val, lbl){
        $("#arrival_list").jqxComboBox('checkItem',lbl);
    });
    }

}); //end of row select

});//doc.ready

Please help me to solve this issue

[supun151515Participant]

Thank you for your reply.
I got the answer by investigating for 3 days.

Full.done(function(){
    source_shipper_list.localdata = All_Data;
    dataAdapter_shipper_list.dataBind();

    var dataAdapter_X = new $.jqx.dataAdapter(source_shipper_list);
    $("#client_grid, #notify_grid").jqxGrid({ source: dataAdapter_X });
    $('#client_grid, #notify_grid').jqxGrid('refresh');
    $('#client_grid, #notify_grid').jqxGrid('clearselection');
    });

[supun151515Participant]

It doesn’t work for me. I know how to update data in grid. But this is not direct JSON or array. Data source is loading separate and update grid separate. Please read above code carefully. then you will understand
pay attention on codes

                datatype: 'json',
                 localdata: All_Data,
                 async: false,
                 type: 'POST',
                 root: 'clients',

All_Data comes from below function;

function Drop_Down_Data(){
LockPage();

	Full = $.ajax({url:"../common_data/clients-vendors_get_all.php", type:"POST", async:false, success:function(data){
			All_Data = data;
	}});

}

[supun151515Participant]

Hi Peter,
When I hide these scrollbars, it will disappear the JQXgrid scrollbar as well

Thanks,
Supun

[supun151515Participant]

Hi Peter,
I wonder that we can’t edit server calls, My grid calls the server for every 1 or 2 clicks on scroll down button. This is really a big issue.

Hope you will find a solution

Thanks,
Supun

[supun151515Participant]

Hi Peter,
I don’t want paging. Datagrid virtual scrolling gets 18 rows at a time. I want to make it 50 at a time. So it will not call the server everytime I scroll I hope.

Thank You,
Supun

[supun151515Participant]

Hi Peter,
Can you post serverpaging_data.php code for the above demo?

Thank You,
Supun

[supun151515Participant]

Hi Peter, As you mentioned, There is no error in this Fiddle. But please follow the steps as below;
1. Search something in the filter box (Ex: type ‘000’ inside First Name filter box).
2. You will see ‘Do Data to Display’.
3. But still has the same grid height with big empty white box.

I want to adjust grid height according to record count.

Hope you will get my point.

Thank You,
Supun

[supun151515Participant]

Hello Nadezhda,
i really thankful for your help. It is working perfect as I expected.
I have small question regarding your above code;
What is the use of dataAdapter.dataBind();? Because of this code line, server data is requesting two times. Then I have removed this line. it is still working fine without any problem.
Am I supposed to keep this code?

I really appreciate your answer…

Thank You,
Supun

[supun151515Participant]

Hi Nadezhda,
As you see, I am generating jqxlistbox according to input text. I am calling Get_Default_Values(input_text) function. Then mysql query search for input_text and generate data.
You can see my code has url in defaults.js –> var url = “css/default_values.php?value=” + data_value; this data_value(input_text) change in every getdata button click.
But in your example, url is fixed and not changing.

Bottom line is I want to filter mysql data with user input value and retrieve data to jqxlistbox.

Hope you understand,
Thank You,
Supun

[supun151515Participant]

Hi Peter,
Maybe you are correct.
Lets try again in below line;
If you see this… try to answer this like question

Thank You,
Supun

[supun151515Participant]

Here is my try;

I am using Firefox 35 and windows 7. Maybe it is an browser compatibility issue

Thank You,
Supun

[supun151515Participant]

Hi Peter,
I mean your editor link tag button not working. I have tried to insert a link with above link button. but it didn’t show up.

[supun151515Participant]

Hi Nadezhda,
Thank you for your respond. below you can find complete code including php.
When I click Get Data button for the first time, it is working. but after that it returns above error.

index.php

<!doctype html>
<?php require_once("../lib/Main_menu.php"); ?>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Default Inputs</title>
<link href="css/index.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="../lib/css/jquery-ui.css" />
<link href="../lib/bootstrap-3.3.2-dist/css/bootstrap.css" rel="stylesheet">
<link rel="stylesheet" href="../lib/css/jqx/jqx.base.css" />

<script src="../lib/java/jquery-2.1.3.js"></script>  
<script src="../lib/bootstrap-3.3.2-dist/js/bootstrap.js">
<script src="../lib/java/jquery-ui.min.js"></script>
<script src="../lib/java/jqx-all.js"></script>
<script src="css/defaults.js"></script>

<script>
$(document).ready(function(){

$("#getdata").click(function(){
Get_Default_Values($("#d_text").val());
});

});

</head>
<body>
<input type="text" id="d_text" />
<input type="button" id="getdata" value="Get Data" />
<div class="abs" style="left:170px; top:40px;" id="default_values">
</div>
<input type="text" id="default_text" />
</body>
</html>
'

defaults.js

function Get_Default_Values(data_value){
var url = “css/default_values.php?value=” + data_value;
// prepare the data
var source =
{
datatype: “json”,
datafields: [
{ name: ‘auto_no’ },
{ name: ‘c_value’ },
{ name: ‘c_val’ }
],
id: ‘id’,
url: url,
type:’POST’
};
var dataAdapter = new $.jqx.dataAdapter(source);
// Create a jqxListBox
$(“#default_values”).jqxListBox({ source: dataAdapter,
displayMember: “c_value”,
valueMember: “c_value”,
width: 150,
height: 230,
renderer: function (index, label, value) {
var datarecord = this.source.records[index];
var table = ‘<table style=”min-width: 150px;” title=’ + datarecord.auto_no + ‘><tr><td>’ + datarecord.c_value + “, ” + datarecord.c_val + ‘</td></tr></table>’;
return table;
}
});

$(“#default_values”).on(‘select’, function (event) {
if (event.args) {
var item = event.args.item;
if (item) {
var valueelement = $(“<div></div>”);
valueelement.text(“Value: ” + item.value);
var labelelement = $(“<div></div>”);
labelelement.text(“Label: ” + item.label);
$(“#default_text”).val(item.label);
}
}
});
}`

css/default_values.php

<?php
include('../../lib/php/db.php');
if(!isset($_GET['value'])){
	echo "Error";
	return false;
}
$data_value = $_GET['value'];
$result = mysqli_query($con, "SELECT SUBSTRING_INDEX(c_value, ',', 1) as c_val, SUBSTRING_INDEX(c_value, ',', -1) as c_value, auto_no as auto_no FROM <code>default_values</code> where category = '" .$data_value. "' order by c_value");
 
//Add all records to an array
$rows = array();
while($row = mysqli_fetch_array($result))
{
    $rows[] = $row;
}
 
//Return result to jTable
$jTableResult = array();
//$jTableResult['Result'] = "OK";
$jTableResult = $rows;
print json_encode($jTableResult);

?>

Best Regards,
Supun

[supun151515Participant]

Why is this link not showing in my post??
http://www.jqwidgets.com/community/topic/create-tooltip-for-each-item/

[Author]

Posts