Grid Toolbar

[hardcodeMember]

Hello I have a problem with the toolbar

1. when you use the 2.4.2 there is an error. the error is that, with previous version we use the tag that breaks lengthy column titles but when this is applied in the 2.4.2 the rest of the column titles after the tag does not appear. Please take a look at if it has gone unnoticed

2. Secondly below is my code… the grid is work and seems fine but I fine it difficult to understand a little concept that is applied to toolbar example that have give in the demo.
a). Question is that how do we bind a particular column to the search string that the person is typing. I will be glad if comments are attached to demos to explain this basics to some of us
Please take a look at the following codes and help me correct the mistake why my search for tripNumber is not working in the toolbar

/*The grid begins here*/
		var url = "../php/grid.php?populate=true";
		var preserveSource;
       	var source =
            {
                datatype: "json",
                datafields: [
                    { name: 'tripNumber' },
                    { name: 'BRVNumber'},
                    { name: 'loadingDate'},
                    { name: 'loadingDepot'},
                    { name: 'OMC'},
                    { name: 'productLoaded'},
					{ name: 'roadExpenses'},
					{ name: 'kilometers'},
					{ name: 'wayBillNumber'},
					{ name: 'customer'},
					{ name: 'destination'},
					{ name: 'quantityShipped', type: 'float'},
					{ name: 'remark'},
					{ name: 'returnDate'},
					{ name: 'topUp'},
					{ name: 'meterLosses'},
					{ name: 'whoFirstCreated'},
					{ name: 'whoLastEdited'},
					{ name: 'fuelQuantityGiven'},
					{ name: 'BVO'}
					
                ],
                id: 'wayBillNumber',
                url: url,
                root: 'data',
				cache: false,
				data: {
                    featureClass: "P",
                    style: "full",
                    maxRows: 20
                }
            };
            var dataAdapter = new $.jqx.dataAdapter(source, 
				{
                    formatData: function (data) {
                        data.tripNumber_startsWith = $("#searchTripNumber").val();
                        return data;
                    }
                }
			);
            $("#tripGrid").jqxGrid(
            {
			  	width: '100%',
				autoheight: true,
                source: dataAdapter,
				sortable:true,
				editable: true,
				pageable: true,
				pagesize:20,
				altrows:true,
				pagesizeoptions:['20', '40', '60'],
				selectionmode: 'singlerow',
                columnsresize: true,
				columnsheight:50,
                theme: theme,
				showtoolbar:true,
				toolbarheight:50,
                columns: [
				  { text: 'BVO', dataField: 'BVO', width: 150, editable:false},
                  { text: 'Trip<br/>Number', columntype: 'textbox',dataField: 'tripNumber', width: 80, editable:false},
				  { text: 'Waybill<br/>Number', dataField: 'wayBillNumber', width: 100, editable:false,  columntype: 'textbox'},
                  { text: 'BRV<br/>Number', columntype: 'textbox', dataField: 'BRVNumber', width: 90, editable:false},
                  { text: 'Loading<br/>Date',columntype:'datetimeinput', dataField: 'loadingDate', width: 85, cellsformat:'dd/MM/yyyy', editable:false},
                  { text: 'Loading<br/>Depot', dataField: 'loadingDepot', width: 70, editable:false},
                  { text: 'OMC', dataField: 'OMC', width: 100, editable:false},
                  { text: 'Product<br/>Loaded', dataField: 'productLoaded',width: 70, editable:false},
				  { text: 'Kilometers', dataField: 'kilometers', width: 80, editable:false},
				  { text: 'Customer', dataField: 'customer', width: 120, editable:false},
				  { text: 'Destination', dataField: 'destination', width: 110, editable:false},
				  { text: 'Quantity', dataField: 'quantityShipped', width: 80, editable:false, cellsformat: 'f1'},
				  { text: 'Fuel<br/>Given', dataField: 'fuelQuantityGiven', width: 50, editable:false, cellsformat: 'f1',},
				  { text: 'Road<br/>Exp', dataField: 'roadExpenses', width: 50, editable:false},
				  { text: 'Return<br/>Date', columntype:'datetimeinput', dataField: 'returnDate', width: 85, editable:true, cellsformat:'dd/MM/yyyy'},
				  { text: 'TopUp', dataField: 'topUp', width: 50, editable:true},
				  { text: 'Meter<br/>Losses', dataField: 'meterLosses', width: 55, editable:true},
				  { text: 'Remarks', dataField: 'remark', width: 70, editable:true},
				  { text: 'Created By', dataField: 'whoFirstCreated', width: 100, editable:false},
				  { text: 'Last<br/>Edited By', dataField: 'whoLastEdited', width: 100, editable:false}
                ],
				
				rendertoolbar: function (toolbar) {
                    var me = this;
                    var container = $("<div style='margin:5px;'></div>");
					
                    var tripSpan = $("<span style='float: left; margin-top: 0px; margin-left: 145px;'>Trip:</span>");
                    var tripNumberInput = $("<input class='jqx-input jqx-widget-content jqx-rc-all' id='searchTripNumber' type='text' style='height: 23px; float: left; width: 79px;margin-top: 1px;margin-left:145px;' />");
                   
                    toolbar.append(container);
                    container.append(tripSpan);
                    container.append(tripNumberInput);
                    tripNumberInput.bind('keydown', function (event) {
                        if (tripNumberInput.val().length >= 2) {
                            if (me.timer) clearTimeout(me.timer);
                            me.timer = setTimeout(function () {
                                dataAdapter.dataBind();
                            }, 300);
                        }
                    });
                }
				
            });
	/*grid ends*/

[Peter StoevKeymaster]

Hi hardcode,

1. The built-in rendering of the Columns is changed in the latest version because we added support for ellipsis by default. That’s why a custom html string which you have used by now as a column title, may work differently in the new version. To customize the built-in rendering, you can use the columns renderer function that is called when a column is rendered. See the second sample in this help topic: jquery-grid-cellsrendering.htm.

2. The toolbar allows you to add widgets or any html content in it. The implementation of how that widget will work and what it should do depends on your business logic, implementation and application scenario. As far as I see, you added an Input tag in the toolbar and you call a server script when end-user types in the input. You also have a field called tripNumber_startsWith i.e you should have a server code which works with that field and returns something depending on the entered value.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[hardcodeMember]

Peter I understan the column rendering and have looked at the sample however, i cannot understand the second problem I have reported. I followed the example supplied in the demo http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/index.htm#demos/jqxgrid/toolbar.htm and i can see only one url which feeds the grid. does that mean there is some php code in the url that processes what the user enters. please point a resource that demonstrate this or you could as well just add a comment to my code as to where i should do the amendments please

When i type into the input box all my keystrokes do not appear. I have tried using the newer version 2.4.2 yet the problem persist. However when i click on a row in the gird and start typing then the input box also picks it up and an editable cell in the grid also gets edited..

[Peter StoevKeymaster]

Hi hardcode,

The sample uses a Web service which has specific parameters and we just apply them in the demo depending on the entered string. If you want to implement something like that with your data, you will need to implement on your own the server script that depends on the input string.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[Author]

Posts