dataUrl in jqGrid calls every time

Question

I am using jqGrid with inline editing. In one column there is dropdown list and pulls data from web service.

$("#Freight").jqGrid({
		datatype: 'xmlstring',
		datastr: xmlString,
		mtype: 'GET',
		ajaxGridOptions: { contentType: 'application/json; charset=utf-8' },
		xmlReader: { repeatitems: false, root: "DocumentsAdditionalExpenses", row: 'row' },
		colNames: ['ExpenseCode', 'Feight Name', 'Remarks', 'Tax Code', 'Total Tax Amount', 'Distribution Method', 'Amount'],
		colModel: [
                    { name: 'ExpenseCode', index: 'ExpenseCode', hidden: true, key: true },
                    { name: 'FreightName', index: 'FreightName', width: 100 },
                    { name: 'Remarks', index: 'Remarks', editable: true, edittype: 'text', width: 150 },
                    { name: 'TaxCode', index: 'TaxCode', editable: true,
                    	width: 100,
                    	edittype: 'select',
                    	formatter: 'select',
                    	editoptions: { aysnc: false, dataUrl: clientURL,
                    		buildSelect: function (data) {
                    			var v = data.replace(/&lt;/g, '<').replace(/&gt;/g, '>');
                    			response = $.parseXML(v);
                    			$response = $(response);
                    			var s = '<select>';
                    			$response.find('FreightExpense row').each(function (index) {
                    				var code = $(this).find('Code').text();
                    				var name = $(this).find('Name').text();
                    				s += '<option value="' + code + '">' + name + '</option>';
                    			});
                    			return s + "</select>";
                    		}
                    	},
                    	formoptions: { elmsuffix: ' *', label: 'Name' }
                    },
                    { name: 'TaxSum', index: 'TaxSum', width: 120 },
                    { name: 'DistributionMethod', index: 'DistributionMethod', editable: true,
                    	width: 150,
                    	edittype: "select",
                    	formatter: 'select',
                    	editoptions: {
                    		value: "aedm_Equally:Equally;aedm_None:None;aedm_Quantity:Quantity;aedm_RowTotal:RowTotal;aedm_Volume:Volume;aedm_Weight:Weight"
                    	}
                    },
                    { name: 'LineTotal', index: 'LineTotal', editable: true, edittype: 'text' }
               ],
		viewrecords: true,
		gridview: true,
		onSelectRow: function (id) {
			if (id && id !== lastSelection) {
				var grid = $("#Freight");
				grid.jqGrid('restoreRow', lastSelection);
				grid.jqGrid('editRow', id, true);
				lastSelection = id;
			}
		},
		height: 150,
		width: 650,
		viewrecords: true,
		gridview: true,
		rownumbers: true,
		loadonce: true,
		scrollOffset: 0
	});

I have observed two things which I don't understand.

1. Why the width of dropdown is greater than the column width. I want to fix its width based on the column. If size of the column get increased, width of dropdown should also increase.

Please see below screen shot

2. Whenever I click on grid row to edit it calls web service, I don't understand this, why it is calling everytime when the data is fixed for every row for that perticular column.

Can any body guide me on this two topic?

Answer 1

your first question

Why the width of dropdown is greater than the column width. I want to fix its width based on the column. If size of the column get increased, width of dropdown should also increase.

The width of dropdown is greater because of the option lists .The text part of the options is too wide to come under the column TaxCode.You can do either thing :-

1)-Increase the TaxCode column width .

  { name: 'TaxCode', index: 'TaxCode', editable: true,
                    width: 100,   //change this as per requirement

2)- Get a horizontal scroll inside the option list (which i don't think is a good idea as jqGrid provides you the way to increase column width.)

You change your TaxCode column width depending upon your dropdown width.Then it will solve your this issue "If size of the column get increased, width of dropdown should also increase."

your second question

Whenever I click on grid row to edit it calls web service, I don't understand this, why it is calling everytime when the data is fixed for every row for that perticular column.

This is happening because you must have called your WebService on jqGrid row click event . Check once and if it is so , then move that piece of code(I guess you are doing this by Ajax) to directly under document-ready(if you want this grid on load) .

One more

Width of the dropdown list is higher than the column

Decrease the width of Quantity column as you will be doing for TaxCode column.

Hope it help !