iam using Ext.form.combobox to perform an autocomplete search, my data is stored in array store :ext.data.arraystore, actually the data in the array store is loaded via an ajax request, here is my arraystore code:
var ds = new Ext.data.ArrayStore({
fields: ['description','lat','lng'],
data: xmlarray
});
where xmlarray is a data array which is loaded from php server using ajax request
here is my combobox code:
var timePanel = {
xtype: 'panel',
border: false,
width: 600,
bodyPadding: 10,
layout: 'anchor',
items: [{
xtype:'combo' ,
displayField:'displayValue',
valueField: 'id',
store: ds,
mode: 'local',
typeAhead: true,
triggerAction: 'all',
hideTrigger:false,
lazyRender: true,
emptyText: 'select a city',
forceSelection: false,
typeAhead: true,
selectOnFocus: true,
enableKeyEvents:true,
listConfig: {
loadingText: 'Searching...',
emptyText: 'No matching posts found.',
// Custom rendering template for each item
getInnerTpl: function() {
return '<div class="search-item">' +
'<h3><span>{[Ext.Date.format(values.lastPost, "M j, Y")]}<br />by {author}</span>{title}</h3>' +
'{excerpt}' +
'</div>';
}
},
pageSize: 10,
//listeners: {select: this.GeocoderRequest};
}
]
};
my main problem is that the combobox shows me the a set of empty selection rows, while each selection row should show a name from my data but its empty instead..is there any problem in my arrastore or in combobox configurations ?
fields: ['description','lat','lng'],
...
displayField:'displayValue',
valueField: 'id',
There is no field named displayValue in the store, therefore combobox can't find values it is looking for.
Same goes for valueField.
Related
I have an invoices table, which uses the Yajra Laravel data table. I want to filter data using 'created_at' column, which does exists in invoices table in the database but not in the table view.
Here is my datatable image:
And the code which take start and end dates:
$(function() {
$('#invoices_daterange').daterangepicker({
opens: 'left'
}, function(start, end, label) {
console.log("A new date selection was made: " + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD'));
});
});
Here is my datatabe JS code
$(function () {
let invoicedatatable = $('#invoicesdatable-table').DataTable({
pageLength: 100,
processing: true,
serverSide: true,
ajax: '{{ route('invoices.datatable') }}',
columns: [
{data: 'invoice_number', name: 'invoice_number'},
{data: 'partner', name: 'partner.full_name'},
{data: 'start', name: 'start'},
{data: 'end', name: 'end'},
{data: 'due', name: 'due'},
{data: 'actual_invoice_amount', name: 'actual_invoice_amount'},
{data: 'action', name: 'action', sortable: false, searchable: false},
],
lengthMenu: [
[10, 50, 100, 250, 3000, 5000],
[10, 50, 100, 250, 3000, 5000]
],
buttons: [{
extend: 'colvis',
text: '<i class="icon-three-bars"></i>',
className: 'btn bg-blue btn-icon dropdown-toggle'
}]
});
});
I did search and read most of the topics about it, but couldn't find anything to implement this.
What I want to do:
is to filter data using the 'created_at' column which is not in the view, but exists in my invoices table in the database.
How to do it?
I am not familiar with your datepicker widget, so I cannot use that in my example. But I think you should be able to adapt the following to use your datepicker.
In my example, I have two separate date fields ("from" and "to") in a form, with a "submit" button:
<div>
<form id="filter-form">
From:<input type="date" id="min-date" name="min-date">
To:<input type="date" id="max-date" name="max-date">
<input type="submit" value="Submit">
</form>
</div>
You don't need to use a form (I used a form here, because it is a simple demo).
In the page's script (the same place where the DataTable is defined), I add a "submit" function:
var url = '{{ route('invoices.datatable') }}';
$( "#filter-form" ).submit(function( event ) {
event.preventDefault();
invoicedatatable.ajax.url( url ).load();
});
I don't actually need to submit the form, so I disable the default submission using event.preventDefault();.
The line invoicedatatable.ajax.url( url ).load(); is explained below.
In my DataTable I change the basic Ajax call from this:
ajax: '{{ route('invoices.datatable') }}',
to this:
ajax: {
url: url,
type: "POST", // or 'GET' if you prefer
data: function (data) {
data.mindate = $('#min-date').val();
data.maxdate = $('#max-date').val();
}
},
This uses a DataTables function to manipulate the data option. This is the data which we will send to the server, as part of our server-side request.
I simply append two new variables to the existing data - mindate and maxdate. These contain the date range you need to use in the server, for filtering.
Note that the data variable passed into the function already contains some data, provided by DataTables for server-side processing. So, I am adding these two extra fields to that existing data.
The request sent from the browser to the server now looks like this. You can see mindate and maxdate at the bottom of the list:
{
"draw": "2",
"columns[0][data]": "id",
"columns[0][name]": "",
"columns[0][searchable]": "true",
"columns[0][orderable]": "true",
"columns[0][search][value]": "",
"columns[0][search][regex]": "false",
"columns[1][data]": "name",
"columns[1][name]": "",
"columns[1][searchable]": "true",
"columns[1][orderable]": "true",
"columns[1][search][value]": "",
"columns[1][search][regex]": "false",
... not all details shown
"order[0][column]": "0",
"order[0][dir]": "asc",
"start": "0",
"length": "10",
"search[value]": "",
"search[regex]": "false",
"mindate": "2021-06-08", // <--- mindate
"maxdate": "2021-06-16" // <--- maxdate
}
In the form submission event, there was this line:
invoicedatatable.ajax.url( url ).load();
This line causes the ajax call in the DataTable to be re-executed, and the table to be re-drawn. This is the trigger which causes the dates to be sent to the server, as part of a standard request. It's the same action as when a user clicks on a column to sort the data, or moves from one page to another page in the DataTable.
The server can process this request and extract the two date fields from the request, in the usual way. It can then use these values to filter the data, before building its response, to send back to the DataTable.
I have an issue that I use a dropdown list for my foreignkey field like demo : http://demos.kendoui.com/web/grid/foreignkeycolumn.html
The difference is that the foreignkey field in my model which can be null some time if it is not related to anyone else. Then the issue for me is when I try to editRow with this foreignkey field's original value is null, and I want to change to another value, this field will always get the value '[object object]'. I don't know why.
See the floor field in the following code:
<script>
$(document).ready(function() {
var template = kendo.template($("#detail_template").html());
function show_menu_details(menuObj) {
var tg = $("#details");
tg.fadeOut(function(){
tg.html(template(menuObj));
tw = tg.find(".k-window");
tw.css({width:tg.innerWidth()-30, height:tg.innerHeight()-55, "margin-top": 20, "margin-left":15});
});
tg.fadeIn();
}
$("#horizontal").kendoSplitter({
panes: [{collapsible: true, size: "180px"},
{ collapsible: true} ],
height: 690
});
function onChange(e){
e.preventDefault();
selectedObj = this.dataSource.getByUid(this.select().data('uid'))
//console.log(selectedObj);//(this.dataSource.data());
show_menu_details(selectedObj);
}
var statuses = [
{value:'', text:'--'},
{value:'Available', text:'Available'},
{value:'Locked', text:'Locked'},
{value:'Reserved', text:'Reserved'},
{value:'Occupied', text:'Occupied'}];
var floors = new Array();
floors[0]={text:'--',value:''};
_DS_Floor.fetch(function(data){
$.each(data.items,function(index,obj){
floors[index+1] = {text: obj.name, value: obj.id};
});
var grid = $("#list").kendoGrid({
dataSource: _DS_Room,
selectable: "row",
filterable: true,
columnMenu: true,
pageable: {refresh:true},
editable: {mode:"popup",confirmation:"Sure to delete?"},
height: 688,
scrollable: {
virtual: true
},
sortable: true,
toolbar: kendo.template($("#toolbar_template").html()),
columns: [//{field:'id',title:' ',width:40,template: '<input type="checkbox" id="#= id #" />'},
{field:'name',title:'Name'},
{field:'floor',title:'Floor',values:floors},
{field:'position',title:'Position'},
{field:'status',title:'Status',width:80,values:statuses}],//_Columns_Menu,//{ command: ['edit','destroy'], title: "", width: "200px" }
//change: onChange
});
grid.find("#btn-add").click(function(e){
e.preventDefault();
grid.data("kendoGrid").addRow();
});
grid.find("#btn-save").click(function(e){
e.preventDefault();
grid.data("kendoGrid").saveChanges();//editRow(grid.data("kendoGrid").select());
});
grid.find("#btn-remove").click(function(e){
e.preventDefault();
grid.data("kendoGrid").removeRow(grid.data("kendoGrid").select());
});
grid.find("#btn-cancel").click(function(e){
e.preventDefault();
grid.data("kendoGrid").cancelChanges();//removeRow(grid.data("kendoGrid").select());
});
});
});
</script>
Thanks.
Nullable values are not supported. Here is question from the KendoUI forums to which Vladimir Iliev provided explanation and solution. I hope this helps.
I have added a button to each row of the subgrid of a jqGrid. I just followed the documentation of inline_editing for this.
I want to call the server side code on click of the button. But when I see the firebug it shows no request been made (not showing any url request) on click of the button.
Below is my code,
subGridRowExpanded: function (subgrid_id, row_id) {
var subgrid_table_id, pager_id;
subgrid_table_id = subgrid_id + "_t";
pager_id = "p_" + subgrid_table_id;
$("#" + subgrid_id)
.html("<table id='" + subgrid_table_id + "' class='scroll'></table><div id='" + pager_id + "' class='scroll'></div>");
$mysubgrid = jQuery("#" + subgrid_table_id);
$mysubgrid.jqGrid({
url: "serversub.php",
datatype: "json",
colNames: ['Product Id', 'Product Name', 'status', ''],
width: 700,
colModel: [{
name: 'productid',
index: 'productid',
width: 55
}, {
name: 'productname',
index: 'productname',
width: 90
}, {
name: 'status',
index: 'status',
width: 80,
search: false
}, {
name: 'link',
index: 'link',
width: 80,
search: false
}],
rowNum: 20,
sortname: 'num',
sortorder: "asc",
gridComplete: function () {
var ids = $mysubgrid.jqGrid('getDataIDs');
for (var i = 0; i < ids.length; i++) {
var cl = ids[i];
se = "<input style='height:22px;width:20px;'
type='button' value='Update' onclick=\"$mysubgrid.saveRow('" + cl + "');\" />";
$mysubgrid.jqGrid('setRowData', ids[i], {
link: se
});
}
},
editurl: "saveserversub.php"
});
Am I missing something here?
Thanks
The function which you call in onclick have contains only global variables. You can't use local $mysubgrid variable.
I would recommend you to create buttons which you need inside of custom formatter and to use (like in all other your grids) the option gridview: true. It will improve performance of the grid.
Additionally I think that you don't need to set any onclick on the buttons which you insert in the grid column. If the click event is fire and there are no event handler for the click the bubbling take place. So you can just use onCellSelect callback. If you need have the original DOM object of the clicked button you find it in e.target.
I have a JQGrid column with edittype:'Select' using dataUrl to return a list of Accounts with groups for the different Account groups.
My issue: when saving the row no value is passed to the editurl for my Select column. If i remove the 's a value is passed to editurl for my Select column.
Description: For my column data I return the Account Name, not the value, so when the grid loads the name is displayed.
When a line is edited (in-line editing), the dataUrl is called and the select list is displayed and my Account is selected for the rows data.
I then select a new Account from the Select list and press enter to save. The selected Account value is not passed to the editurl function for the column. if i remove the 's from the the Account value is passed to the editurl function.
I'm not sure if I'm doing something wrong, ie not setting a grid parameter,
Hoping you can help me out.
Thanks in advance,
Chris
My Grid code:
$(document).ready(
function () {
var lastSelection;
var grid = jQuery("#BankTransactions");
grid.jqGrid({
url: '/DropDown/GridData/',
datatype: 'json',
mtype: 'GET',
colNames: ['TransactionLineId', 'TransactionId', 'BankTransactionId', 'Number', 'Amount', 'Category'],
colModel: [
{ name: 'transactionLineId', index: 'transactionLineId', editable: true, editrules: { edithidden: true }, hidden: true, width: 40, align: 'left' },
{ name: 'transactionId', index: 'transactionId', editable: true, editrules: { edithidden: true }, hidden: true, width: 40, align: 'left' },
{ name: 'bankTransactionId', index: 'bankTransactionId', editable: true, editrules: { edithidden: true }, hidden: true, width: 40, align: 'left' },
{ name: 'Number', index: 'Number', width: 100, align: 'left', sortable: false },
{ name: 'Amount', index: 'SubAmount', editable: true, width: 100, align: 'right', sortable: false, cellattr: function (rowId, tv, rawObject, cm, rdata) { return 'class="BankTranEdit"' }, formatter: 'currency', formatoptions: { decimalSeparator: '.', thousandsSeparator: ',', decimalPlaces: 2, defaultValue: ' '} },
{ name: 'CategoryIdURL', index: 'CategoryIdURL',
editable: true,
edittype: 'select',
//formatter: 'select',
editoptions: { dataUrl: "/DropDown/CategorySelectList" },
width: 220,
align: 'left'
},
],
pager: jQuery('#pager'),
rowNum: 100,
rowList: [25, 50, 100],
editurl: "/Dropdown/GridSave",
sortname: 'Number',
sortorder: "desc",
viewrecords: true,
width: 1250,
height: 450,
onCellSelect: function (rowid, iCol, cellContent, e) {
grid.restoreRow(lastSelection);
grid.editRow(rowid, true, null, null, null, null, null);
lastSelection = rowid;
}
});
});
Output of /Dropdown/GridData:
{"total":1,
"page":1,
"records":6,
"rows":[
{"id":165,"cell":["165","249","125","DM000249","1500.00","Sales"]},
{"id":145,"cell":["145","229","105","SM000229","100.00","Rent"]},
{"id":153,"cell":["153","237","113","SM000237","38.07","Bank Fees"]},
{"id":185,"cell":["185","269","145","SM000269","750.00","Cash Discounts"]},
{"id":194,"cell":["194","278","154","SM000278","13.29","Rent"]},
{"id":211,"cell":["211","295","171","SM000295","100.00","Rent"]}]
}
Output of /Dropdown/CategorySelectList
<select>
<optgroup label='Expenses'>
<option value='42'>Accounting Fees</option>
<option value='60'>Bank Fees</option>
<option value='23'>Bank Service Charges</option>
<option value='24'>Books and Publications</option>
<option value='25'>Cash Discounts</option>
<option value='43'>Rent</option>
</optgroup>
<optgroup label='Income'>
<option value='19'>Sales</option>
<option value='20'>Services</option>
<option value='21'>Interest Income</option>
<option value='22'>Other Income</option>
</optgroup>
</select>
The current version of jqGrid don't works with <optgroup> inside of <select>.
I find that the usage of <optgroup> could be helpful in some cases. So I debugged the jqGrid code a little and found out that one need to change only two lines of code of jqGrid (the lines 143-144 of the grid.inlinedit.js or the lines 8262-8263 of the jquery.jqGrid.src.js from jqGrid 4.1.1) from
tmp[nm] = $("select>option:selected",this).val();
tmp2[nm] = $("select>option:selected", this).text();
to
tmp[nm] = $("select>option:selected,select>optgroup>option:selected",this).val();
tmp2[nm] = $("select>option:selected,select>optgroup>option:selected",this).text();
or just to
tmp[nm] = $("select option:selected",this).val();
tmp2[nm] = $("select option:selected",this).text();
to fix the problem.
If one need have support of selects having multiple: true attribute:
one should modify in the same way as above one more line (line 149) of the grid.inlinedit.js having the "select>option:selected". To make jqGrid with multiple: true attribute working with dataUrl property one have to fix one more line (the line 67) of the grid.inlinedit.js. One need change
if(cm[i].edittype == "select" && cm[i].editoptions.multiple===true && $.browser.msie){
$(elc).width($(elc).width());
}
to for example the following
if(cm[i].edittype === "select" && typeof(cm[i].editoptions)!=="undefined" &&
cm[i].editoptions.multiple===true &&
typeof(cm[i].editoptions.dataUrl)==="undefined" && $.browser.msie) {
$(elc).width($(elc).width());
}
This change will prevent setting of the very small width of the select before it is loaded by the $.ajax request from dataUrl. Probably one should place the same fix of the width inside of success event handler of the corresponding $.ajax call from grid.common.js where the data for dataUrl will be loaded. I tested my demos in IE9 and it is not needed to make the fix for IE9.
You can see the demos with the fixed jqGrid code here: the single select demo, the multiselect demo. You should take in the consideration, that there are no code for the "/Dropdown/GridSave" on the server which will be used in the editurl. Nevertheless you will see in Fiddeler of Firebug that the posted data, which will be send to the server, do contain the information about the selected item. If you want make the demo working locally you should modify the editurl to 'clientArray' and probably set additionally loadonce:true.
I have a jqGrid constructed as it follows in the code below:
function radio(value, options, rowObject){
var radio = '<input type="radio" value=' + value + ' name="radioid" />';
return radio;
}
function reloadOnEnter(){
jQuery(':input[name=field1]').keyup(function(e){
if(e.keyCode == 13){
var fieldValue = jQuery(':input[name=field1]').attr('value');
jQuery(':input[name=field1]').attr('value', fieldValue);
jQuery("#listTable").jqGrid().trigger("reloadGrid");
}
});
}
jQuery(function(){
jQuery("#listTable").jqGrid({
url: '$content.getURI("myURI")' + '?userId=$userId&pageNo=0&locale=' + '$locale',
datatype: 'json',
mtype: 'POST',
colNames:['column1', 'column2', 'column3', 'column4', 'column5'],
colModel :[
{name:'name', index:'field', width:'8%', search:false, align:'center', formatter: radio, editable:false, sortable: false, resizable:false},
{name:'name1', index:'field1', width:'23%', sortable: false, resizable:false},
{name:'name2', index:'field2', width:'23%', sortable: false, resizable:false},
{name:'name3', index:'field3', width:'23%', sortable: false, resizable:false},
{name:'name4', index:'field4', width:'23%', sortable: false, resizable:false}
],
width:'768',
height: 500,
pager: '#pagerDiv',
gridview: true,
rowNum: $rowNr,
rowTotal: 500,
sortorder: 'desc',
viewrecords: true,
loadComplete: loadCompleteHandler,
ignoreCase: true
});
});
jQuery(function(){
jQuery("#listTable").jqGrid('filterToolbar',{
stringResult: true,
searchOnEnter: false });
});
I start typing 'he' and the autocomplete window shows me 'hello' (because I previously typed hello). I select 'hello' and hit enter, and still 'he' is submitted in the ajax request.
My reloadOnEnter function is called by the loadCompleteHandler. The interesting thing is that when I query the search field (field1) value is the selected value, but only the typed value is being sent in the request. I would like to send the selected value. How can i achieve this?
EDIT:
The loadCompleteHandler looks like this:
function loadCompleteHandler(){
reloadOnEnter();
jQuery("#listTable").jqGrid('setGridHeight', Math.min(500,parseInt(jQuery(".ui-jqgrid-btable").css('height'))));
}
(I use Apache Velocity as a template engine! That is why I have variables like $variable in the javascript code!)
To your main question: you should use jQuery.val function instead of jQuery.attr('value').
Many other things in your code seams me strange or unclear. It is not clear for me how you use reloadOnEnter in the loadCompleteHandler. If would be good if you include the corresponding code fragment. The value for the url seems me also very strange. You use additionally searchOnEnter: false option of filterToolbar but in the reloadOnEnter you wait for the 'Enter' key. Inside of the body of if(e.keyCode == 13) you get jQuery(':input[name=field1]').attr('value') and then set the same value back. Why?
Probably you could describe in the text of your question a little more what you want to archive with the code?