I have a dataset that I summarize using ng-grid. Some of the data contains default values -10 that capture the state for that variable.
Instead of showing -10 in the cell, I'd like the input cell to display "Enter Value". I tried accomplishing this with "placeholder", but this only inserts a value when there is no underlying data.
$scope.myData = [
{id:"First", value:-10},
{id:"Second", value:10},
{id:"Third", value:-10},
{id:"Fourth", value:10},
{id:"Fifth", value:-10}];
$scope.gridOptions = {
data: 'myData',
columnDefs: [{field: 'id', displayName: 'ID'},
{field: 'value', displayName: 'Value', cellTemplate : '<div><input type="text" placeholder="Enter value" ng-model="row.entity.value"/></div>'},
]};
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 made a table with kendo-grid.This table have two columns.one is item, another is value.
just as
+-----------+-----------+
| item | value |
+-----------+-----------+
| Retry | yes |
| interval | 8 |
+-----------+-----------+
How to customize editor(inline) with value column.if value is [yes], use the dropdownlist editor, if value is [8], use the numeric edior.
Thx.
For your convenience, I prepared a small example demonstrating such customization of kendo-grid.
Here's the example how you can customize the editor option of column based on the value that column contains(for example "yes" in your case):
function DropDownEditor(container, options) {
if(options.model.itemvalue =="yes"){
var input = $('<input required name="' + options.field + '"/>')
input.appendTo(container);
input.kendoDropDownList({
dataSource: {
data: ["yes", "no"]
}
});
}
else{
var input = $('<input type="text" class="k-input k-textbox" name="itemvalue" data-bind="value:itemvalue">');
input.appendTo(container);
}
};
And your grid's configuration may look like:
var grid = $("#grid").kendoGrid({
dataSource: {
data:[{"item":"Retry", "itemvalue":"yes"},{"item":"interval", "itemvalue": 8}]
},
height: 500,
columns: [
{ field: "item", width: "200px"},
{ field: "itemvalue", editor: DropDownEditor }],
editable: "incell"
}).data("kendoGrid");
In above example the column with the editor uses the DropDownEditor function to create the editor based on the value in "itemvalue" column.
Hope this helps.
Please show me the way how to add tooltip for items which have a long length in kendo multi-select.
Add a picture for more specific.
Picture
Thanks.
Use the itemTemplate and/or tagTemplate and add a title attribute with the tooltip text:
$("#multiselect").kendoMultiSelect({
dataSource: [
{ id: 1, name: "Apples", tooltip: "Apples tooltip text" },
{ id: 2, name: "Oranges", tooltip: "Oranges tooltip text" }
],
dataTextField: "name",
dataValueField: "id",
itemTemplate: '<span title="#: tooltip #">#: name #</span>',
tagTemplate: '<span title="#: tooltip #">#: name #</span>'
});
itemTemplate is item while selecting from the dropdown, while tagTemplate is the item once selected.
DEMO
NOTE: you can use the same value for both the text and tooltip.
My case is a search window with around 20 properties, in which the user can choose to specify search criteria. Each property has a corresponding checkbox which toggles if the prop is included in the search result or not. The search result is then displayed in a kendo grid.
Simplified code which should illustrate the issue (kendo ui complete ver. 2012.2.710):
<input type="checkbox" onclick="fnShowHide(1);" name="showSearchColumn" id="checkShowField1" />
<div id="example" class="k-content">
<div id="kendoGridTest"></div>
</div>
<script>
function fnShowHide( iCol )
{
$('#kendoGridTest').data("kendoGrid").options.columns[iCol].hidden = false;
$('#kendoGridTest').data("kendoGrid").refresh();
}
</script>
The MVC3-controller method returns data from search is of type JsonResult (given as jsonResultSearchResult below):
$('#kendoGridTest').kendoGrid({
dataSource: jsonResultSearchResult,
schema: {
model: {
fields: {
FirstName: { type: "string" },
LastName: { type: "string" },
Address: { type: "string" }
}
}
},
sortable: true,
resizable: true,
columns: [{
field: "FirstName",
width: 90,
title: "First name"
},
{
field: "LastName",
width: 120,
hidden: true,
title: "Last name"
},
{
field: "Address",
width: 140,
title: "Adr"
}
]
});
After performing a search, the grid fills with the right data and LastName is indeed hidden. But if the user now checks the checkShowField1 control, I would like the grid to refresh with all three cols visible. It does not. fnShowHide() does not do the job.
I must admit I was looking for anything of a type of Columns collection in a QuickWatch window while debugging in VS. The collection in fnShowHide contains the right data from when the grid was initialized, and I'm able to manipulate the .hidden property, but the grid still does not display the column.
I'm still a bit confused whether dynamic hide/show of cols is supported but this accepted answer from a Telerik employee looked promising.
To hide a column on the client side with JavaScript you should use the hideColumn() and to show it you use the showColumn(). Both methods have several overloads - you either pass the index of the column or you pass the name of the field the column is bound to.
For example:
var grid = $('#GridID').data('kendoGrid');
grid.hideColumn(2);
//or show it
grid.showColumn("OrderDate") // lets say thats the field name of the same column
The post you linked shows how to Hide/Show column with the MVC Wrappers which is slightly different.
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.