Separate Draw grid and data binding

[supun151515Participant]

Hello.. Good day!,
I have jqxgrid in my site with two text inputs. When I insert data in to text inputs and click on button with GetData() function, it will genarate grid with data.

But I want it to draw grid when the page loads with hidden. When I enter data and call the GetData() function it should receive data to the grid with visible=true.

You can see my current code with Grid+data loads when call GetData() function.

   function GetData(data){

//jQuery("#grid").html('');
  var theme = "";

if (data == 'All'){
    var data = Joomla_DIR + "media/jui/php/track_order.php?qid=" + jQuery('#qid').val() + "&mobile=" + jQuery('#mobile').val();
}
else
{
  var data = Joomla_DIR + "media/jui/php/track_order.php?tel=" + jQuery("#telephone").val();  
}
            
            
            var source =
            {
                //localdata: data,
                datatype: "json",
                datafields:
                [   { name: 'auto_no' , type: 'number'},
                    { name: 'job_no', type: 'string' },
                    { name: 'emp_no', type: 'string' },
                    { name: 'job_date', type: 'date' },
                    { name: 'time_from', type: 'string'},
                    { name: 'time_to', type: 'string'},
                    { name: 'time_diff', type: 'string'},
                    { name: 'total', type: 'string'},
                    { name: 'payed', type: 'string'},
                    { name: 'status', type: 'string'},
                    { name: 'username', type: 'string'},
                    { name: 'emp_name', type: 'string'},
                    { name: 'client_id', type: 'string'},
                    { name: 'c_name', type: 'string'}
                ],
               id: 'id',
               url: data
            };

            var addfilter = function () {
                var filtergroup = new jQuery.jqx.filter();

                var filter_or_operator = 1;
                var filtervalue = '';
                var filtercondition = 'contains';
                var filter1 = filtergroup.createfilter('stringfilter', filtervalue, filtercondition);

                filtervalue = '';
                filtercondition = 'starts_with';
                var filter2 = filtergroup.createfilter('stringfilter', filtervalue, filtercondition);
 
                filtergroup.addfilter(filter_or_operator, filter1);
                filtergroup.addfilter(filter_or_operator, filter2);
                // add the filters.
                jQuery("#grid").jqxGrid('addfilter', 'telephone', filtergroup);
                // apply the filters.
                jQuery("#grid").jqxGrid('applyfilters');
            }
            var adapter = new jQuery.jqx.dataAdapter(source);

            jQuery("#grid").jqxGrid(
            {
                width: 653,
                height: 250,
                source: adapter,
                theme: theme,
                groupable: true,
                filterable: true,
                columnsresize: true,
                sortable: true,
                autoheight: false,
                columnsreorder: true,
                //autorowheight: true,
                showfilterrow: true,
                ready: function () {
                  //alert("ok");
                },
                autoshowfiltericon: true,
                columns: [
                  { text: 'Job No.', datafield: 'job_no', width: 50, cellsalign: 'center', align: 'center' },
                  { text: 'Job Date', datafield: 'job_date', align: 'center', cellsformat: 'yyyy-MM-dd', width: 95, cellsalign: 'center' },
                  { text: 'Time From', datafield: 'time_from', width: 85, cellsalign: 'center', align: 'center' },
                  { text: 'Time To', datafield: 'time_to', width: 85, cellsalign: 'center', align: 'center' },
                  { text: 'Total QR.', datafield: 'total', width: 60, cellsalign: 'right', align: 'right' },
                  { text: 'Payed QR.', datafield: 'payed', width: 60, cellsalign: 'right', align: 'right' },
                  { text: 'Status', datafield: 'status', width: 60, cellsalign: 'center', align: 'center' },
                  { text: 'Employee Name', datafield: 'emp_name', cellsalign: 'left', width: 140, minwidth: 30 }
                         ]
                 
            });

jQuery('#grid').jqxGrid('unselectrow', 0);
 
}

Thank You,
Supun Silva

[Peter StoevKeymaster]

Hi Supun Silva,

When your page loads, the jQuery’s document.ready function is called as shown in our samples. So inside the document.ready function you can call the GetData function.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

[supun151515Participant]

Hello MR.Peter,
Thank you for your reply. I understand what you said. But when I call GetData() function, its reloading the grid with data.

I want to get massage when the data loads to the grid. I used below code;

$('#grid').on('initialized', function () { alert("data loaded"); });

Above event works on one time, when I recall the function GetData() it doesn’t work.

$("#grid").on("bindingcomplete", function (event) { alert("data loaded"); });
Above event returns (+). it means. Whwn I recall the function, it returns the event two times. If I call the GetData() function again, it returns the event for three times.

Hope you understand my problem. I do want to get alert when data loads.

Thank You,
Supun Silva

[Peter StoevKeymaster]

This means that you most probably bind to the “bindingcomplete” in the function which you call for initializing the Grid. You have 2 options – bind to the event outside that function or unbind and bind to the event in the GetData function.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

[supun151515Participant]

Hi Mr.Peter,
Could you please explain me, how to unbind and bind the event again. I tried to put the event outside the function, but it didn’t work. result is same as before. it gives increase alert boxes for every functin call.

thank you.
Supun Silva

[supun151515Participant]

You can see the example below and try pressing button for few times.
http://jsfiddle.net/74CTB/122/

[supun151515Participant]

Dear Mr.Peter,
I am still waiting to get answer. Hope you will reply me soon.
Thank you,
Supun Silva

[Peter StoevKeymaster]

Hi Supun,

I already wrote you that you bind multiple times to “bindingcomplete” and that is what happend in your code. You bind on every click to that event. The solution is simple: bind to the event outside your function or if you want the binding to be inside your function, make unbind call before you bind call. Example: http://jsfiddle.net/jqwidgets/r2zd50un/

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

[supun151515Participant]

Hi Peter. Thank you very much for your answer. Now I got your point and it is working perfect. I really apologize for any inconvenience.

Thank you,
Supun Silva

[Author]

Posts