I am using jQuery UI Autocomplete in jqGrid, but the autocomplete list is displayed behind the add / edit form. I am using the latest jQuery UI and jqGrid. Here is the code snippet:
colModel : [
{
name: "birthPlaceId",
index: "birthPlaceId",
editable: true,
edittype: "text",
hidden: true
}, {
name: "birthPlaceName",
index: "birthPlaceName",
editable: true,
editoptions: {
size: 75,
dataInit: function (e) {
$(e).autocomplete({
source: "${ajaxPlacesUrl}",
minLength: 1,
focus: function (event, ui) {
$(e).val(ui.item.label);
},
select: function (event, ui) {
$(e).val(ui.item.label);
$("input#birthPlaceId").val(ui.item.value);
}
});
}
},
editrules: {
edithidden: true,
required: false
},
edittype: "text",
hidden: true,
width: 75
}
]
Here is the JSON data getting from the server for "W":
[{"value":30,"label":"Washington, DC, USA"},
{"value":31,"label":"Windsor, Ontario, Canada"},
{"value":111,"label":"Wylie, Texas, USA"}]
I searched and couldn't find a fix for this. Appreciate any help. Thanks.
The problems with displaying of jQuery UI Autocomplete menu behind the Add/Edit form can be solved typically in one from two ways. The first way will be the usage of appendTo option of jQuery UI Autocomplete. The option van change place of Autocomplete menu on the page. Another way will be to change z-index of Add/Edit form. You can use zIndex property to reduce the default 950 value to some less value. See the answer for the code example.
Related
I am creating a kendo grid that is built out by calling an remote data source. I have enabled grouping, which works as expected, but I would like to default grouping and leave the user the option of adding/changing the groupings. I added the group parameter to the data source and this adds the desired group by default, but it also causes all column headers to disappear which prevents the end user from having the ability to add/change the groupings and also makes it a bit harder to read the displayed data. Google has failed me, so I submit myself to the mercy of stack overflow.
<div id="grid"></div>
<script>
var remoteDataSource = new kendo.data.DataSource({
transport: {
read: {
url: "https://localhost:44387/api/values",
dataType: "json"
}
},
pageSize: 8
,group: { field: "State" }
});
$("#grid").kendoGrid({
toolbar: ["excel", "pdf"],
groupable: true,
sortable: true,
pageable: {
pageSize: 5,
buttonCount: 10,
pageSizes: true
},
excel: {
allPages: true
},
pdf: {
allPages: true,
landscape: true
},
selectable: {
mode: "multiple, row"
},
reorderable: {
columns: true
},
dataSource: remoteDataSource,
height: 800,
width: 2000
});
</script>
Without default grouping:No Default Group
With default grouping: With Default Group
The reason is because you're allowing the grid to implicitly create the columns. If you explicitly define them, then they will show up.
See this example with the implicit column definition: https://dojo.telerik.com/AMucoVav versus this example with the explicit column definitions: https://dojo.telerik.com/EjeGeHAJ
I am using the twitter bootstrap typeahead and Guriddo jqgrid Version 5.2.1 form editing. I'd prefer to do this with key value pair rather then just value. All the code below works as far as it goes, the only thing missing is when the edit form opens for an existing record it shows the key (a number) instead of the value (the name of a company). The grid columns are all created on the fly. I think if inside editoptions, if I could specify a value: of the name of the company, it might be a good hack-around, but that doesn't work.
label: svf.fieldLabel,
name: svf.tf[0].nativename,
width: 150,
editable: true,
edittype: "text",
formatter: 'select',
formatoptions:
{
value: getEditOptionsValue(svf.relatedItemId)
},
editoptions: {
dataInit: function (element) {
var data = JSON.parse(getSelects(svf.relatedItemId));
$(element).attr("autocomplete", "off").typeahead({
appendTo: "body",
dataType: "json",
displayText: function (item) { return item.name; },
source: function (query, process) {
return process(data);
}
});
} //end datainit
}//end edit options
In order to solve your problem you will need to use a custom unformat function.
The predefined unformat function return the key and not the value.
More you can see in our documentation here
You can use the following code:
label: svf.fieldLabel,
name: svf.tf[0].nativename,
width: 150,
editable: true,
edittype: "text",
formatter: 'select',
unformat : function(value, options, cellObject) {
return value;
},
I am looking for option to support auto-complete type input field on free-jqgrid inline-edit mode. It works great if small 5-10 values into drop-down. I have need to either value need to be searched or needs auto-complete option on the grid.
Let me know if this is possible? if it is please provide some direction or example.
UPDATE 1
Screenshot displays inline input text field needs Auto-Complete
UPDATE 2
I have following order in which files are imported:
jquery-ui-min.css
bootstrap.min.css
bootstrap-grid.min.css
ui.jqgrid.min.css
font-awesome.min.css
select2.min.css
jquery.min.js
jquery-ui.min.js
select2.min.js
jquery.jqgrid.min.js
tether.min.js
bootstrap.min.js
You can use the code like
{ name: "name", align: "justify", width: 80, editrules: { required: true },
autoResizing: { minColWidth: 80 },
createColumnIndex: true,
editoptions: {
dataInit: function (elem) {
initAutocomplete.call(this, elem, "name");
}
},
searchoptions: {
dataInit: function (elem) {
initAutocomplete.call(this, elem, "name");
},
sopt: [ "cn", "eq", "bw", "ew", "bn", "nc", "en" ],
clearSearch: true
} }
where initAutocomplete function is declared as
var initAutocomplete = function (elem, cmName) {
$(elem).autocomplete({
source: $(this).jqGrid("getUniqueValueFromColumnIndex", cmName),
delay: 0,
minLength: 0
});
};
See https://jsfiddle.net/OlegKi/ugxvr75q/
in jqgrid for inline editing when we click the save icon, ** internally it calls the saveRow method, but i want to call my custom method where i will implement my save logic as well calling to controller method.**
i used below code for grid.
var grid = jQuery("#list5").jqGrid({
url: '/home1/GetUserData',
datatype: "json",
mtype: "POST",
colNames: ['Code', 'LoginID', 'Emailid', 'CreateDate', 'PostalCode', 'Mobile'],
colModel: [
{name: 'Code', index: 'Code', width: '16%', editable: true, sortable: true },
{ name: 'LoginID', index: 'LoginID', width: '16%', editable: true, sortable: true },
{ name: 'Emailid', index: 'Emailid', width: '16%', editable: true,
sortable: true },
],
rowNum: 10,
height: '100%',
scrollOffset: 0,
rowList: 10,
shrinkToFit: true,
pager: $("#pager2"),
editurl: "/home1/EditUserData",
caption: "Simple data manipulation"
});
jQuery("#list5").jqGrid('navGrid', '#pager2', { edit: false, add: false, del: true, search: false, refresh: false }, {}, {}, { url: '/home1/DeleteUserData' });
jQuery('#list5').jqGrid('inlineNav', '#pager2', { edit: true, add: true},
});
});
so please anyone let me know how to implement it.
I don't really understand your requirements. saveRow has a lot of customization possibilities. You can rename all parameters which will be sent to the server using prmNames option of jqGrid. Using extraparam parameter of saveRow you can specify additional information which can be sent to the server. The callback serializeRowData can be used to implement your custom serialization. For example you can convert the data to JSON. Using aftersavefunc you can make some custom actions after the data will be successfully saved on the server. So I recommend you use the features instead of implementing your custom saveRow method.
UPDATED: If you want to have navigator icon which uses your custom saveRow you should don't add "Save" button by inlineNav. You can use save: false option of inlineNav. Then you can just use navButtonAdd and add your custom icon which look exactly like original "Save" button and make call of your "custom saveRow" in the onClickButton callback.
I'm using jqGrid with mvc 2 like this:
jQuery("#extension_grid").jqGrid({
url: '/Extension/Report',
datatype: "json",
direction: "rtl",
height: "auto",
jsonReader: { root: "rows", page: "page", total: "total", records: "records", repeatitems: false, userdata: "UserData" },
colModel:
[
{ name: 'id', label: 'داخلی', key: true, search: true, width: 55 },
{ name: 'assigned_user', label: 'کاربر', width: 90, editable: true },
{ name: 'creation_date', label: 'تاریخ ایجاد', width: 100, formatter: 'date', formatoptions: { newformat: 'Y-m-d H:i:s'} }
],
rowNum: -1,
pager: '#extension_pager',
sortname: 'id',
viewrecords: true,
sortorder: "asc",
caption: "داخلیها",
editurl: '/Extension/MyEdit'
});
jQuery("#extension_grid").jqGrid('navGrid', '#extension_pager', { edit: true, add: true, del: true }, {}, {}, {}, { multipleSearch: true });
when I select a row and click the edit button a dialog appears and I can edit the row. after submit, data is posted to the editurl successfully. but changes are not saved to grid client side. should I save the changes client side manually?
I tried with datatype local and it works!!! what should I do? is there any problem with using json data and form editing?
The situation which you described seems me very strange. There are default setting reloadAfterSubmit:true for "Add" and "Edit" forms. It means that after submitting of the "Edit" form for example the grid contain will be reloaded. You can verify with respect of Fiddler or Firebug that the grid reloading take place. So either your server part '/Extension/MyEdit' not save the data or another the server '/Extension/Report' don't get the refreshed data. Do you have some kind of data caching on the server?
So you should analyse the problem which you have more exctly. If you would not solve the problem yourself you should update/append your question with more additional information.