[Apeksha SinghParticipant]

Hi Peter Stoev,

I have implemented your showtoolbar in my code but it is not working.
I am adding my code below :

var source =
{
    datatype: "json",
    localdata: all_invoice_data,
    datafields:
    [
	{ name: 'id', type: 'number' },
	{ name: 'number', type: 'string' },
	{ name: 'reference', type: 'string' },
	{ name: 'contact_name', type: 'string' },
	{ name: 'contact_id', type: 'number' },
	{ name: 'date', type: 'string' },
	{ name: 'due_date', type: 'string' },
	{ name: 'paid', type: 'float' },
	{ name: 'due', type: 'float' },
	{ name: 'workflow_status_id', type: 'number' },
	{ name: 'workflow_status_status', type: 'string' },
	{ name: 'transaction_type_id', type: 'number' },
    ],
};
var dataAdapter = new $.jqx.dataAdapter(source, {
		formatData: function (localdata) {
			localdata.contact_name_startsWith = $("#searchField").val();
			return localdata;
		}
});
var columnCheckBox = null;
var updatingCheckState = false;
// initialize jqxGrid
$("#all_invoicetable").jqxGrid(
	{
   	      width: '97.7%', 
	      autoheight:true,
	      source: dataAdapter,
	      enabletooltips: true,
	      altrows: true,
	      pageable: true,
	      showtoolbar: true,
	      pagesizeoptions: ['10', '20','30','40','50'],
	      editable:false,
	      selectionmode: 'none',
	      rendertoolbar: function (toolbar) {
		var me = this;
		var container = $("<div style='margin: 5px;'></div>");
		var span = $("<span style='float: left; margin-top: 5px; margin-right: 4px;'>Search City: </span>");
		var input = $("<input class='jqx-input jqx-widget-content jqx-rc-all' id='searchField' type='text' style='height: 23px; float: left; width: 223px;' />");
		toolbar.append(container);
		container.append(span);
		container.append(input);
		input.on('keydown', function (event) {
		if (input.val().length >= 2) {
		    if (me.timer) clearTimeout(me.timer);
		    me.timer = setTimeout(function () {
		      dataAdapter.dataBind();
		    }, 300);
		}
		});
	      },
	      theme: 'metro',
	      columns: [
		        { text: 'Id',datafield: 'id', width: '12%', hidden:true },
			{ text: 'Number',datafield: 'number', width: '12%' },
			{ text: 'Ref',datafield: 'reference',width: '12%' },
			{ text: 'To_id',datafield: 'contact_id',width: '12%', hidden:true },
			{ text: 'To',datafield: 'contact_name',width: '12%' },
			{ text: 'Date',datafield: 'date', width: '15%' },
			{ text: 'Due Date',datafield: 'due_date',width: '15%' },
			{ text: 'Paid',datafield: 'paid', width: '8%' },
			{ text: 'Due',datafield: 'due',width: '8%' },
			{ text: 'Status_id',datafield: 'workflow_status_id', width: '18%', hidden:true },
			{ text: 'Status',datafield: 'workflow_status_status', width: '18%' },
			{ text: 'transaction Type',datafield: 'transaction_type_id', width: '18%', hidden:true }
		]	
}); 

Please guide me what am I doing wrong.

Thanks & Regards,
Apeksha

[Apeksha SinghParticipant]

Hi Peter Stoev,

Is it possible to have one toolbar to search items from two different column of grids.

Thanks & Regards,
Apeksha

[Apeksha SinghParticipant]

Hi Peter ,

I am using jquery-1.8.2.min.js and jQWidgets v2.6.1 Release for my project is it possible to apply your Toolbar demo of grid in my code.

Thanks and Regards,
Apeksha

[Apeksha SinghParticipant]

Hi,

Is it possible to have only one search box for all the columns of a grid.
I am adding my code below , where I have a search jqxinput filed and a jqxtab which contain 5 different grids.I want to implement search for all the grids.

$(".search").jqxInput({width: '100px',height: '20px',theme: 'ui-start',scrollPosition: 'left'});
				/*START :Function to display grid for all account*/
				var all_initGrid = function () {
						 gridid = "#all_invoicetable";//update gridid...
						var source =
						{
							datatype: "json",
							localdata: all_invoice_data,
							datafields:
							[
								
								{ name: 'id', type: 'number' },
								{ name: 'number', type: 'string' },
								{ name: 'reference', type: 'string' },
								{ name: 'contact_name', type: 'string' },
								{ name: 'contact_id', type: 'number' },
								{ name: 'date', type: 'string' },
								{ name: 'due_date', type: 'string' },
								{ name: 'paid', type: 'float' },
								{ name: 'due', type: 'float' },
								{ name: 'workflow_status_id', type: 'number' },
								{ name: 'workflow_status_status', type: 'string' },
								{ name: 'transaction_type_id', type: 'number' },
							],
						};
						var dataAdapter = new $.jqx.dataAdapter(source, { async: false, loadError: function (xhr, status, error) { alert('Error loading "' + source.url + '" : ' + error); } });
						// initialize jqxGrid
						$("#all_invoicetable").jqxGrid(
						{
							width: '97.7%', 
							autoheight:true,
							source: dataAdapter,
							enabletooltips: true,
							altrows: true,
							pageable: true,
							pagesizeoptions: ['10', '20','30','40','50'],
							editable:false,
							selectionmode: 'none',
							
							theme: 'metro',
							columns: [
		
							  { text: 'Id',datafield: 'id', width: '12%', hidden:true },
							  { text: 'Number',datafield: 'number', width: '12%' },
							  { text: 'Ref',datafield: 'reference',width: '12%' },
							  { text: 'To_id',datafield: 'contact_id',width: '12%', hidden:true },
							  { text: 'To',datafield: 'contact_name',width: '12%' },
							  { text: 'Date',datafield: 'date', width: '15%' },
							  { text: 'Due Date',datafield: 'due_date',width: '15%' },
							  { text: 'Paid',datafield: 'paid', width: '8%' },
							  { text: 'Due',datafield: 'due',width: '8%' },
							  { text: 'Status_id',datafield: 'workflow_status_id', width: '18%', hidden:true },
							  { text: 'Status',datafield: 'workflow_status_status', width: '18%' },
							  { text: 'transaction Type',datafield: 'transaction_type_id', width: '18%', hidden:true }
							]	
						}); 
				   } 
	/*END :Function to display grid for all account*/			   		   
	/*START :Function to display grid for draft*/
				var draft_initGrid = function () {
					gridid = "#draft_invoicetable";//update gridid...
						var source =
						{
							localdata: draft_invoice_data,
							datatype: "json",
							datafields:
							[   
							    { name: 'item', type: 'bool' },
								{ name: 'id', type: 'number' },
								{ name: 'number', type: 'string' },
								{ name: 'reference', type: 'string' },
								{ name: 'contact_name', type: 'string' },
								{ name: 'contact_id', type: 'number' },
								{ name: 'date', type: 'string' },
								{ name: 'due_date', type: 'string' },
								{ name: 'due', type: 'float' },
								{ name: 'workflow_status_id', type: 'number' },
								{ name: 'workflow_status_status', type: 'string' },
								{ name: 'transaction_type_id', type: 'number' },
							],
						};
						var dataAdapter = new $.jqx.dataAdapter(source, { async: false, loadError: function (xhr, status, error) { alert('Error loading "' + source.url + '" : ' + error); } });
						var columnCheckBox = null;
						var updatingCheckState = false;
						// initialize jqxGrid
						$("#draft_invoicetable").jqxGrid(
						{
							width: '97.7%', 
							autoheight:true,
							source: dataAdapter,
							enabletooltips: true,
							altrows: true,
							pageable: true,
							pagesizeoptions: ['10', '20','30','40','50'],
							editable:true,
							selectionmode: 'none',		
							theme: 'metro',
					columns: [
					 { text: '', columntype: 'checkbox', datafield: 'item', width: '8%', renderer: function () {
					      return '<div style="float:left;margin-left: 33.5%; margin-top: 5px;"></div>';
					   },
					    rendered: function (element) {
					    $(element).jqxCheckBox({ theme: 'metro', width: 16, height: 16, animationShowDelay: 0, animationHideDelay: 0 });
					   },
					   { text: 'Id',datafield: 'id', width: '12%',editable:false, hidden:true },
					   { text: 'Number',datafield: 'number', editable:false,width: '12%' },
					   { text: 'Ref',datafield: 'reference',editable:false,width: '12%' },
					   { text: 'To_id',datafield: 'contact_id',editable:false,width: '12%', hidden:true },
					   { text: 'To',datafield: 'contact_name',editable:false,width: '12%' },
					   { text: 'Date',datafield: 'date',editable:false, width: '15%' },
					   { text: 'Due Date',datafield: 'due_date',editable:false,width: '15%' },
					   { text: 'Due',datafield: 'due',editable:false,width: '8%' },
					   { text: 'Status_id',datafield: 'workflow_status_id',editable:false, width: '18%', hidden:true },
					   { text: 'Status',datafield: 'workflow_status_status',editable:false, width: '18%' },
					   { text: 'transaction Type',datafield: 'transaction_type_id',editable:false, width: '18%', hidden:true }
					  ]	
				      }); 
				   } 	
	/*END :Function to display grid for draft*/
	/*START :Function to display grid for awaiting approval*/	   
				var awaiting_approval_initGrid = function () {
					gridid = "#awaiting_approval_invoicetable";//update gridid...
						var source =
						{
							localdata: awaiting_approval_invoice_data,
							datatype: "json",
							datafields:
							[   { name: 'item', type: 'bool' },
								{ name: 'id', type: 'number' },
								{ name: 'number', type: 'string' },
								{ name: 'reference', type: 'string' },
								{ name: 'contact_name', type: 'string' },
								{ name: 'contact_id', type: 'number' },
								{ name: 'date', type: 'string' },
								{ name: 'due_date', type: 'string' },
								{ name: 'due', type: 'float' },
								{ name: 'workflow_status_id', type: 'number' },
								{ name: 'workflow_status_status', type: 'string' },
								{ name: 'transaction_type_id', type: 'number' },
							],
						};
						var dataAdapter = new $.jqx.dataAdapter(source, { async: false, loadError: function (xhr, status, error) { alert('Error loading "' + source.url + '" : ' + error); } });
						var columnCheckBox = null;
						var updatingCheckState = false;
						// initialize jqxGrid
						$("#awaiting_approval_invoicetable").jqxGrid(
						{
							width: '97.7%', 
							autoheight:true,
							source: dataAdapter,
							enabletooltips: true,
							altrows: true,
							editable:true,
							pageable: true,
							pagesizeoptions: ['10', '20','30','40','50'],
							selectionmode: 'none',
							theme: 'metro',
							columns: [
					{ text: '', columntype: 'checkbox', datafield: 'item', width: '8%', renderer: function () {
	   				      return '<div style="float:left;margin-left: 33.5%; margin-top: 5px;"></div>';
					  },
					   rendered: function (element) {
					   $(element).jqxCheckBox({ theme: 'metro', width: 16, height: 16, animationShowDelay: 0, animationHideDelay: 0 });
					 },
					 { text: 'Id',datafield: 'id', width: '12%',editable:false, hidden:true },
					 { text: 'Number',datafield: 'number',editable:false, width: '12%' },
					 { text: 'Ref',datafield: 'reference',editable:false,width: '12%' },
					 { text: 'To_id',datafield: 'contact_id',width: '12%',editable:false, hidden:true },
					 { text: 'To',datafield: 'contact_name',editable:false,width: '12%' },
					 { text: 'Date',datafield: 'date',editable:false, width: '15%' },
					 { text: 'Due Date',datafield: 'due_date',editable:false,width: '15%' },
					 { text: 'Due',datafield: 'due',editable:false,width: '8%' },
					 { text: 'Status_id',datafield: 'workflow_status_id',editable:false, width: '18%', hidden:true },
					 { text: 'Status',datafield: 'workflow_status_status',editable:false, width: '18%' },
					 { text: 'transaction Type',datafield: 'transaction_type_id',editable:false, width: '18%', hidden:true }
				        ]	
				      });
				   }
	/*END :Function to display grid for awaiting approval*/	
	/*START :Function to display grid for awaiting payment*/			   
				var awaiting_payment_initGrid = function () {
					gridid = "#awaiting_payment_invoicetable";//update gridid...
						var source =
						{
							localdata: awaiting_payment_grid_data,
							datatype: "json",
							datafields:
							[   { name: 'item', type: 'bool' },
								{ name: 'id', type: 'number' },
								{ name: 'number', type: 'string' },
								{ name: 'reference', type: 'string' },
								{ name: 'contact_name', type: 'string' },
								{ name: 'contact_id', type: 'number' },
								{ name: 'date', type: 'string' },
								{ name: 'due_date', type: 'string' },
								{ name: 'paid', type: 'float' },
								{ name: 'due', type: 'float' },
								{ name: 'workflow_status_id', type: 'number' },
								{ name: 'workflow_status_status', type: 'string' },
								{ name: 'transaction_type_id', type: 'number' },
							],
						};
						var dataAdapter = new $.jqx.dataAdapter(source, { async: false, loadError: function (xhr, status, error) { alert('Error loading "' + source.url + '" : ' + error); } });
						var columnCheckBox = null;
						var updatingCheckState = false;
						$("#awaiting_payment_invoicetable").jqxGrid(
						{
							width: '97.7%', 
							autoheight:true,
							source: dataAdapter,
							enabletooltips: true,
							altrows: true,
							pageable: true,
							pagesizeoptions: ['10', '20','30','40','50'],
							editable:true,
							selectionmode: 'none',
							theme: 'metro',
							columns: [
					  { text: '', columntype: 'checkbox', datafield: 'item', width: '7.5%', renderer: function () {
	    				        return '<div style="float:left;margin-left: 33.5%; margin-top: 5px;"></div>';
					    },
					    rendered: function (element) {
					    $(element).jqxCheckBox({ theme: 'metro', width: 16, height: 16, animationShowDelay: 0, animationHideDelay: 0 });
					   },
					  { text: 'Id',datafield: 'id', width: '12%',editable:false, hidden:true },
					  { text: 'Number',datafield: 'number',editable:false, width: '10%' },
					  { text: 'Ref',datafield: 'reference',editable:false,width: '12%' },
					  { text: 'To_id',datafield: 'contact_id',editable:false,width: '12%', hidden:true },
					  { text: 'To',datafield: 'contact_name',editable:false,width: '12%' },
					  { text: 'Date',datafield: 'date', editable:false,width: '12%' },
					  { text: 'Due Date',datafield: 'due_date',editable:false,width: '12%' },
					  { text: 'Paid',datafield: 'paid',editable:false, width: '8%' },
					  { text: 'Due',datafield: 'due',editable:false,width: '9%' },
					  { text: 'Status_id',datafield: 'workflow_status_id',editable:false, width: '18%', hidden:true },
					  { text: 'Status',datafield: 'workflow_status_status',editable:false, width: '18%' },
					  { text: 'transaction Type',datafield: 'transaction_type_id',editable:false, width: '18%', hidden:true }
							]	
						});  
				   } 	
	/*END :Function to display grid for awaiting payment*/	
	/*START :Function to display grid for paid*/		   
				var paid_initGrid = function () {
					gridid = "#paid_invoicetable";//update gridid...
						var source =
						{
							localdata: paid_invoice_data,
							datatype: "json",
							datafields:
							[   { name: 'item', type: 'bool' },
								{ name: 'id', type: 'number' },
								{ name: 'number', type: 'string' },
								{ name: 'reference', type: 'string' },
								{ name: 'contact_name', type: 'string' },
								{ name: 'contact_id', type: 'number' },
								{ name: 'date', type: 'string' },
								{ name: 'workflow_status_id', type: 'number' },
								{ name: 'workflow_status_status', type: 'string' },
								{ name: 'transaction_type_id', type: 'number' },		
							],
						};
                                                var dataAdapter = new $.jqx.dataAdapter(source, { async: false, loadError: function (xhr, status, error) { alert('Error loading "' + source.url + '" : ' + error); } });
						var columnCheckBox = null;
						var updatingCheckState = false;
						// initialize jqxGrid
						$("#paid_invoicetable").jqxGrid(
						{
							width: '97.7%', 
							autoheight:true,
							source: dataAdapter,
							enabletooltips: true,
							altrows: true,
							pageable: true,
							pagesizeoptions: ['10', '20','30','40','50'],
							editable:true,
							selectionmode: 'none',
							theme: 'metro',
							columns: [
							  { text: '', columntype: 'checkbox', datafield: 'item', width: '8%', renderer: function () {
							    return '<div style="float:left;margin-left: 33.5%; margin-top: 5px;"></div>';},
							     rendered: function (element) {
							     $(element).jqxCheckBox({ theme: 'metro', width: 16, height: 16, animationShowDelay: 0, animationHideDelay: 0 });
							  },
						          { text: 'Id',datafield: 'id', width: '12%',editable:false, hidden:true },
							  { text: 'Number',datafield: 'number',editable:false, width: '15%' },
							  { text: 'Ref',datafield: 'reference',editable:false,width: '22%' },
							  { text: 'To_id',datafield: 'contact_id',editable:false,width: '12%', hidden:true },
							  { text: 'To',datafield: 'contact_name',editable:false,width: '22%' },
							  { text: 'Date',datafield: 'date',editable:false, width: '15%' },
							  { text: 'Status_id',datafield: 'workflow_status_id',editable:false, width: '18%', hidden:true },
							  { text: 'Status',datafield: 'workflow_status_status',editable:false, width: '18%' },
							  { text: 'transaction Type',datafield: 'transaction_type_id',editable:false, width: '18%', hidden:true }
							] 	
						});
				   }

Please guide me regarding this as soon as possible.

Thanks & Regards,

Apeksha

[Apeksha SinghParticipant]

Hi Mariya,

But my requirement is to fire the same event again as I have two options “Approve” and “Approve & add another”. For second one I want to fire the same event any number of time ,then what should I do.

And also please provide me the code that close the dropdown when the content is clicked.

Thanks & Regards,
Apeksha

[Apeksha SinghParticipant]

Hi Mariya,

This is a simple code for jqxdropdownbutton that I am using :-

// Create a approvedropDownButton
$("#approve_dropdown").jqxDropDownButton({ width: 120, height: 25, theme: 'ui-redmond' });
$('#approvejqxTree').bind('select', function (event) {
	var args = event.args;
	var item = $('#approvejqxTree').jqxTree('getItem', args.element);
	var dropDownContent = '<div style="position: relative; margin-left: 3px; margin-top: 5px;">' + item.label + '</div>';
	$("#approve_dropdown").jqxDropDownButton('setContent', dropDownContent);
});
$("#approvejqxTree").jqxTree({ width: 200,height: 85,  theme: 'ui-start'});

And the HTML part is :-

<div id="approve_dropdown" style="float:right;width:14%;margin-right:3%;">
   <div id='approvejqxTree'>
      <ul>
	   <li item-selected='true'>Approve</li>
	   <li>Approve & add another</li>
      </ul>
  </div>
</div>

Whenever I click on the button the dropdown gets open ,but after selecting any item from it I want the dropdown should close by itself.
Also if one item is selected I open the dropdown and I found it selected ,if I click on it again not able to fire any event again.

Please guide me as soon as possible.

Thanks & Regards,
Apeksha

[Apeksha SinghParticipant]

Hi Peter Stoev,

Is it possible to have only one search box for all the columns of a grid.
I am adding my code below , where I have a search jqxinput filed and a jqxtab which contain 5 different grids.

$(".search").jqxInput({width: '100px',height: '20px',theme: 'ui-start',scrollPosition: 'left'});
				/*START :Function to display grid for all account*/
				var all_initGrid = function () {
						 gridid = "#all_invoicetable";//update gridid...
						var source =
						{
							datatype: "json",
							localdata: all_invoice_data,
							datafields:
							[
								
								{ name: 'id', type: 'number' },
								{ name: 'number', type: 'string' },
								{ name: 'reference', type: 'string' },
								{ name: 'contact_name', type: 'string' },
								{ name: 'contact_id', type: 'number' },
								{ name: 'date', type: 'string' },
								{ name: 'due_date', type: 'string' },
								{ name: 'paid', type: 'float' },
								{ name: 'due', type: 'float' },
								{ name: 'workflow_status_id', type: 'number' },
								{ name: 'workflow_status_status', type: 'string' },
								{ name: 'transaction_type_id', type: 'number' },
							],
						};
						var dataAdapter = new $.jqx.dataAdapter(source, { async: false, loadError: function (xhr, status, error) { alert('Error loading "' + source.url + '" : ' + error); } });
						// initialize jqxGrid
						$("#all_invoicetable").jqxGrid(
						{
							width: '97.7%', 
							autoheight:true,
							source: dataAdapter,
							enabletooltips: true,
							altrows: true,
							pageable: true,
							pagesizeoptions: ['10', '20','30','40','50'],
							editable:false,
							selectionmode: 'none',
							
							theme: 'metro',
							columns: [
		
							  { text: 'Id',datafield: 'id', width: '12%', hidden:true },
							  { text: 'Number',datafield: 'number', width: '12%' },
							  { text: 'Ref',datafield: 'reference',width: '12%' },
							  { text: 'To_id',datafield: 'contact_id',width: '12%', hidden:true },
							  { text: 'To',datafield: 'contact_name',width: '12%' },
							  { text: 'Date',datafield: 'date', width: '15%' },
							  { text: 'Due Date',datafield: 'due_date',width: '15%' },
							  { text: 'Paid',datafield: 'paid', width: '8%' },
							  { text: 'Due',datafield: 'due',width: '8%' },
							  { text: 'Status_id',datafield: 'workflow_status_id', width: '18%', hidden:true },
							  { text: 'Status',datafield: 'workflow_status_status', width: '18%' },
							  { text: 'transaction Type',datafield: 'transaction_type_id', width: '18%', hidden:true }
							]	
						}); 
				   } 
	/*END :Function to display grid for all account*/			   		   
	/*START :Function to display grid for draft*/
				var draft_initGrid = function () {
					gridid = "#draft_invoicetable";//update gridid...
						var source =
						{
							localdata: draft_invoice_data,
							datatype: "json",
							datafields:
							[   
							    { name: 'item', type: 'bool' },
								{ name: 'id', type: 'number' },
								{ name: 'number', type: 'string' },
								{ name: 'reference', type: 'string' },
								{ name: 'contact_name', type: 'string' },
								{ name: 'contact_id', type: 'number' },
								{ name: 'date', type: 'string' },
								{ name: 'due_date', type: 'string' },
								{ name: 'due', type: 'float' },
								{ name: 'workflow_status_id', type: 'number' },
								{ name: 'workflow_status_status', type: 'string' },
								{ name: 'transaction_type_id', type: 'number' },
							],
						};
						var dataAdapter = new $.jqx.dataAdapter(source, { async: false, loadError: function (xhr, status, error) { alert('Error loading "' + source.url + '" : ' + error); } });
						var columnCheckBox = null;
						var updatingCheckState = false;
						// initialize jqxGrid
						$("#draft_invoicetable").jqxGrid(
						{
							width: '97.7%', 
							autoheight:true,
							source: dataAdapter,
							enabletooltips: true,
							altrows: true,
							pageable: true,
							pagesizeoptions: ['10', '20','30','40','50'],
							editable:true,
							selectionmode: 'none',		
							theme: 'metro',
					columns: [
					 { text: '', columntype: 'checkbox', datafield: 'item', width: '8%', renderer: function () {
					      return '<div style="float:left;margin-left: 33.5%; margin-top: 5px;"></div>';
					   },
					    rendered: function (element) {
					    $(element).jqxCheckBox({ theme: 'metro', width: 16, height: 16, animationShowDelay: 0, animationHideDelay: 0 });
					   },
					   { text: 'Id',datafield: 'id', width: '12%',editable:false, hidden:true },
					   { text: 'Number',datafield: 'number', editable:false,width: '12%' },
					   { text: 'Ref',datafield: 'reference',editable:false,width: '12%' },
					   { text: 'To_id',datafield: 'contact_id',editable:false,width: '12%', hidden:true },
					   { text: 'To',datafield: 'contact_name',editable:false,width: '12%' },
					   { text: 'Date',datafield: 'date',editable:false, width: '15%' },
					   { text: 'Due Date',datafield: 'due_date',editable:false,width: '15%' },
					   { text: 'Due',datafield: 'due',editable:false,width: '8%' },
					   { text: 'Status_id',datafield: 'workflow_status_id',editable:false, width: '18%', hidden:true },
					   { text: 'Status',datafield: 'workflow_status_status',editable:false, width: '18%' },
					   { text: 'transaction Type',datafield: 'transaction_type_id',editable:false, width: '18%', hidden:true }
					  ]	
				      }); 
				   } 	
	/*END :Function to display grid for draft*/
	/*START :Function to display grid for awaiting approval*/	   
				var awaiting_approval_initGrid = function () {
					gridid = "#awaiting_approval_invoicetable";//update gridid...
						var source =
						{
							localdata: awaiting_approval_invoice_data,
							datatype: "json",
							datafields:
							[   { name: 'item', type: 'bool' },
								{ name: 'id', type: 'number' },
								{ name: 'number', type: 'string' },
								{ name: 'reference', type: 'string' },
								{ name: 'contact_name', type: 'string' },
								{ name: 'contact_id', type: 'number' },
								{ name: 'date', type: 'string' },
								{ name: 'due_date', type: 'string' },
								{ name: 'due', type: 'float' },
								{ name: 'workflow_status_id', type: 'number' },
								{ name: 'workflow_status_status', type: 'string' },
								{ name: 'transaction_type_id', type: 'number' },
							],
						};
						var dataAdapter = new $.jqx.dataAdapter(source, { async: false, loadError: function (xhr, status, error) { alert('Error loading "' + source.url + '" : ' + error); } });
						var columnCheckBox = null;
						var updatingCheckState = false;
						// initialize jqxGrid
						$("#awaiting_approval_invoicetable").jqxGrid(
						{
							width: '97.7%', 
							autoheight:true,
							source: dataAdapter,
							enabletooltips: true,
							altrows: true,
							editable:true,
							pageable: true,
							pagesizeoptions: ['10', '20','30','40','50'],
							selectionmode: 'none',
							theme: 'metro',
							columns: [
					{ text: '', columntype: 'checkbox', datafield: 'item', width: '8%', renderer: function () {
	   				      return '<div style="float:left;margin-left: 33.5%; margin-top: 5px;"></div>';
					  },
					   rendered: function (element) {
					   $(element).jqxCheckBox({ theme: 'metro', width: 16, height: 16, animationShowDelay: 0, animationHideDelay: 0 });
					 },
					 { text: 'Id',datafield: 'id', width: '12%',editable:false, hidden:true },
					 { text: 'Number',datafield: 'number',editable:false, width: '12%' },
					 { text: 'Ref',datafield: 'reference',editable:false,width: '12%' },
					 { text: 'To_id',datafield: 'contact_id',width: '12%',editable:false, hidden:true },
					 { text: 'To',datafield: 'contact_name',editable:false,width: '12%' },
					 { text: 'Date',datafield: 'date',editable:false, width: '15%' },
					 { text: 'Due Date',datafield: 'due_date',editable:false,width: '15%' },
					 { text: 'Due',datafield: 'due',editable:false,width: '8%' },
					 { text: 'Status_id',datafield: 'workflow_status_id',editable:false, width: '18%', hidden:true },
					 { text: 'Status',datafield: 'workflow_status_status',editable:false, width: '18%' },
					 { text: 'transaction Type',datafield: 'transaction_type_id',editable:false, width: '18%', hidden:true }
				        ]	
				      });
				   }
	/*END :Function to display grid for awaiting approval*/	
	/*START :Function to display grid for awaiting payment*/			   
				var awaiting_payment_initGrid = function () {
					gridid = "#awaiting_payment_invoicetable";//update gridid...
						var source =
						{
							localdata: awaiting_payment_grid_data,
							datatype: "json",
							datafields:
							[   { name: 'item', type: 'bool' },
								{ name: 'id', type: 'number' },
								{ name: 'number', type: 'string' },
								{ name: 'reference', type: 'string' },
								{ name: 'contact_name', type: 'string' },
								{ name: 'contact_id', type: 'number' },
								{ name: 'date', type: 'string' },
								{ name: 'due_date', type: 'string' },
								{ name: 'paid', type: 'float' },
								{ name: 'due', type: 'float' },
								{ name: 'workflow_status_id', type: 'number' },
								{ name: 'workflow_status_status', type: 'string' },
								{ name: 'transaction_type_id', type: 'number' },
							],
						};
						var dataAdapter = new $.jqx.dataAdapter(source, { async: false, loadError: function (xhr, status, error) { alert('Error loading "' + source.url + '" : ' + error); } });
						var columnCheckBox = null;
						var updatingCheckState = false;
						$("#awaiting_payment_invoicetable").jqxGrid(
						{
							width: '97.7%', 
							autoheight:true,
							source: dataAdapter,
							enabletooltips: true,
							altrows: true,
							pageable: true,
							pagesizeoptions: ['10', '20','30','40','50'],
							editable:true,
							selectionmode: 'none',
							theme: 'metro',
							columns: [
					  { text: '', columntype: 'checkbox', datafield: 'item', width: '7.5%', renderer: function () {
	    				        return '<div style="float:left;margin-left: 33.5%; margin-top: 5px;"></div>';
					    },
					    rendered: function (element) {
					    $(element).jqxCheckBox({ theme: 'metro', width: 16, height: 16, animationShowDelay: 0, animationHideDelay: 0 });
					   },
					  { text: 'Id',datafield: 'id', width: '12%',editable:false, hidden:true },
					  { text: 'Number',datafield: 'number',editable:false, width: '10%' },
					  { text: 'Ref',datafield: 'reference',editable:false,width: '12%' },
					  { text: 'To_id',datafield: 'contact_id',editable:false,width: '12%', hidden:true },
					  { text: 'To',datafield: 'contact_name',editable:false,width: '12%' },
					  { text: 'Date',datafield: 'date', editable:false,width: '12%' },
					  { text: 'Due Date',datafield: 'due_date',editable:false,width: '12%' },
					  { text: 'Paid',datafield: 'paid',editable:false, width: '8%' },
					  { text: 'Due',datafield: 'due',editable:false,width: '9%' },
					  { text: 'Status_id',datafield: 'workflow_status_id',editable:false, width: '18%', hidden:true },
					  { text: 'Status',datafield: 'workflow_status_status',editable:false, width: '18%' },
					  { text: 'transaction Type',datafield: 'transaction_type_id',editable:false, width: '18%', hidden:true }
							]	
						});  
				   } 	
	/*END :Function to display grid for awaiting payment*/	
	/*START :Function to display grid for paid*/		   
				var paid_initGrid = function () {
					gridid = "#paid_invoicetable";//update gridid...
						var source =
						{
							localdata: paid_invoice_data,
							datatype: "json",
							datafields:
							[   { name: 'item', type: 'bool' },
								{ name: 'id', type: 'number' },
								{ name: 'number', type: 'string' },
								{ name: 'reference', type: 'string' },
								{ name: 'contact_name', type: 'string' },
								{ name: 'contact_id', type: 'number' },
								{ name: 'date', type: 'string' },
								{ name: 'workflow_status_id', type: 'number' },
								{ name: 'workflow_status_status', type: 'string' },
								{ name: 'transaction_type_id', type: 'number' },		
							],
						};
                                                var dataAdapter = new $.jqx.dataAdapter(source, { async: false, loadError: function (xhr, status, error) { alert('Error loading "' + source.url + '" : ' + error); } });
						var columnCheckBox = null;
						var updatingCheckState = false;
						// initialize jqxGrid
						$("#paid_invoicetable").jqxGrid(
						{
							width: '97.7%', 
							autoheight:true,
							source: dataAdapter,
							enabletooltips: true,
							altrows: true,
							pageable: true,
							pagesizeoptions: ['10', '20','30','40','50'],
							editable:true,
							selectionmode: 'none',
							theme: 'metro',
							columns: [
							  { text: '', columntype: 'checkbox', datafield: 'item', width: '8%', renderer: function () {
							    return '<div style="float:left;margin-left: 33.5%; margin-top: 5px;"></div>';},
							     rendered: function (element) {
							     $(element).jqxCheckBox({ theme: 'metro', width: 16, height: 16, animationShowDelay: 0, animationHideDelay: 0 });
							  },
						          { text: 'Id',datafield: 'id', width: '12%',editable:false, hidden:true },
							  { text: 'Number',datafield: 'number',editable:false, width: '15%' },
							  { text: 'Ref',datafield: 'reference',editable:false,width: '22%' },
							  { text: 'To_id',datafield: 'contact_id',editable:false,width: '12%', hidden:true },
							  { text: 'To',datafield: 'contact_name',editable:false,width: '22%' },
							  { text: 'Date',datafield: 'date',editable:false, width: '15%' },
							  { text: 'Status_id',datafield: 'workflow_status_id',editable:false, width: '18%', hidden:true },
							  { text: 'Status',datafield: 'workflow_status_status',editable:false, width: '18%' },
							  { text: 'transaction Type',datafield: 'transaction_type_id',editable:false, width: '18%', hidden:true }
							] 	
						});
				   }
				   var initWidgets = function (tab) {
						switch (tab) {
							case 0:
								all_initGrid();
								break;
							case 1:
								draft_initGrid();		
								break;
							case 2:
								awaiting_approval_initGrid();				
								break;
							case 3:
								awaiting_payment_initGrid();				
								break;
							case 4:
								paid_initGrid();							
								break;
						}
				   }

Please reply me as soon as possible.

Thanks & Regrads,
Apeksha

[Apeksha SinghParticipant]

Hi Dimitar,

Thanks for your reply it helps.
I also want to set the value for this column to zero and this column contains combobox.
Please guide me regarding this as soon as possible.

Thanks & Regards,
Apeksha

[Apeksha SinghParticipant]

Hi Peter Stoev,

Thanks for your reply.

Regards,
Apeksha

[Apeksha SinghParticipant]

Hi Mariya,

Actually I want the look exactly like combobox.
So is it possible to make it non-ediatble?

Thanks & Regards,
Apeksha

[Apeksha SinghParticipant]

Hi Dimitar,

Thanks for you reply.

Regards,
Apeksha

[Apeksha SinghParticipant]

Hi Dimitar ,

Can you please guide me how I can make the dynamic tabs with grid remain on the page even after refreshing the page.

Please reply as soon as possible.

Thanks & Regards,
Apeksha

[Apeksha SinghParticipant]

Hi Peter Stoev,

This is my code for the grid that is having a image column and checkboxes column :-

 var source =
              {
                localdata: tax_rate_data,
                datatype: "json",
                datafields:
                [   
                { name: 'item', type: 'bool' },
                { name: 'name', type: 'string' },
                { name: 'tax_value', type: 'number' },
                { name: 'total_tax_rate', type: 'string' },
                { name: 'effective_tax_rate', type: 'string' },
                { name: 'tax_count', type: 'number' },
                { name: 'tax_rate_id', type: 'number' },
                { name: 'component_1', type: 'string' },
                { name: 'component_2', type: 'string' },
                { name: 'component_3', type: 'string' },
                { name: 'component_4', type: 'string' },
                { name: 'component_5', type: 'string' },
                { name: 'component_6', type: 'string' },
                { name: 'tax_component_id', type: 'number' },
                { name: 'rate_1', type: 'float' },
                { name: 'rate_2', type: 'float' },
                { name: 'rate_3', type: 'float' },
                { name: 'rate_4', type: 'float' },
                { name: 'rate_5', type: 'float' },
                { name: 'rate_6', type: 'float' }, 
                { name: 'compound_1', type: 'string' },
                { name: 'compound_2', type: 'string' },
                { name: 'compound_3', type: 'string' },
                { name: 'compound_4', type: 'string' },
                { name: 'compound_5', type: 'string' },
                { name: 'compound_6', type: 'string' },
                ],
                id: 'id',
                root: 'data',           
              };
              // Code to display image column
			  var imagerenderer = function (row, datafield, value) {
				 if (row == 0 || row == 2 || row == 5) 
				 return '<img style="margin-left: 15px;" height="20" width="20" src="images/stock_lock.png"/>';
			  }
              var dataAdapter = new $.jqx.dataAdapter(source);
              var columnCheckBox = null;
              var updatingCheckState = false;
          // initialize jqxGrid
          $("#tax_rate_table").jqxGrid(
          {
            width: '97.7%',
            source: dataAdapter,
            theme:'metro' ,
            autoheight: true,
            sortable: true,
            altrows: true,
            enabletooltips: true,
            editable:true,
            pageable: true,
            pagesizeoptions: ['10', '20','30','40','50'],
            selectionmode: 'none',
            columns: [
            { text: 'Locked', datafield: 'image', width: '6%', editable:false, cellsrenderer: imagerenderer },
            { text: '', columntype: 'checkbox', datafield: 'item', width: '8%', renderer: function () {
              return '<div style="margin-left: 21px; margin-top: 5px;"></div>';
            },
            rendered: function (element) { 
              $(element).jqxCheckBox({ theme: 'metro', width: 16, height: 16, animationShowDelay: 0, animationHideDelay: 0 });
              columnCheckBox = $(element);
              $(element).on('change', function (event) {
                  var paginginformation = $("#tax_rate_table").jqxGrid('getpaginginformation');
				  var pagenum = paginginformation.pagenum;
				  var pagesize = paginginformation.pagesize;
				  var pagescount = paginginformation.pagescount;
				  var k = 1;
				  var pageArray = new Array();
				  for (var i = pagenum * pagesize; i < (pagenum + 1) * pagesize; i++) {
					  pageArray.push(i);
				  };
				  var checked = event.args.checked;
				  if (checked == null || updatingCheckState) return;
				  var rowscount = $("#tax_rate_table").jqxGrid('getdatainformation').rowscount;
				  $("#tax_rate_table").jqxGrid('beginupdate');
				  if (checked) {
					  $("#tax_rate_table").jqxGrid({ selectedrowindexes: pageArray });
					  // $("div.item_label label").text(pagesize);
					  for (m = pagenum * pagesize; m < (pagenum + 1) * pagesize; m++) {
					  var value = $('#tax_rate_table').jqxGrid('getcellvalue', m, "item"); 
					  if (value != null) {
						  k = k * 1;
					  } else {
						  k = k * 0;
						  break;
						  
					  };
				  };
				  if (k != 1) {
					  $(element).jqxCheckBox('uncheck');
					  
				  };   
					 $("div.item_label label").text(m);
			    	 x=m;
				  }
				  else if (checked == false) {
					  $("#tax_rate_table").jqxGrid('clearselection');
					   $("div.item_label label").text(0);
				  }
				  for (var j = (pagenum) * pagesize; j < (pagenum + 1) * pagesize; j++) {
					  $("#tax_rate_table").jqxGrid('setcellvalue', j, 'item', event.args.checked);
				  }
                $("#tax_rate_table").jqxGrid('endupdate'); 
              });
            }},
            { text:'Name',datafield:'name', width:'23%',editable:false},
            { text:'Tax Value',datafield:'tax_value', width:'14%',editable:false},
            { text: 'Tax Rate', datafield: 'total_tax_rate', width:'15%',editable:false },
            { text: 'Effective Tax Rate', datafield: 'effective_tax_rate', width:'18%',editable:false },
            { text: 'Account Using', datafield: 'tax_count',  width: '16%',editable:false},
            { text: 'Row Id', datafield: 'tax_rate_id', hidden:true,editable:false},
            { text: 'comp id', datafield: 'tax_component_id', hidden:true,editable:false},
            { text: 'Comp1', datafield: 'component_1', hidden:true,editable:false},
            { text: 'Comp2', datafield: 'component_2', hidden:true,editable:false},
            { text: 'Comp3', datafield: 'component_3', hidden:true,editable:false},
            { text: 'Comp4', datafield: 'component_4', hidden:true,editable:false},
            { text: 'Comp5', datafield: 'component_5', hidden:true,editable:false},
            { text: 'Comp6', datafield: 'component_6', hidden:true,editable:false},
            { text: 'Rate1', datafield: 'rate_1', hidden:true,editable:false},
            { text: 'Rate2', datafield: 'rate_2', hidden:true,editable:false},
            { text: 'Rate3', datafield: 'rate_3', hidden:true,editable:false},
            { text: 'Rate4', datafield: 'rate_4', hidden:true,editable:false},
            { text: 'Rate5', datafield: 'rate_5', hidden:true,editable:false},
            { text: 'Rate6', datafield: 'rate_6', hidden:true,editable:false},
            ]
          }); 

Can you please tell me how can I add images in the column in respect of datafield like “name” .
As you can see right now I am using row to display images.
Also I want to make all the rows that has an image non-editable.

Thanks & Regards,
Apeksha

[Apeksha SinghParticipant]

Hi Peter Stoev,

I have idea of getcellvalue by your jqwidgets document.
Please tell me how I can check using it that how many rows , image columns are having image in it and how many are empty.
In the above syntax what if I don’t enter the row id.Will it save the whole grid value in this variable.

Thanks & Regards,
Apeksha

[Apeksha SinghParticipant]

Hi Dimitar,

Thanks for your reply it resolved my issue.

Regards,
Apeksha

[Author]

Posts