I am working with the Kendo UI Grid. This is my code:
<body>
<div id="myGrid"></div>
<script type="text/javascript">
$(function(){
var rows = [
{name: "name001", id: "001", group: "G1"},
{name: "name002", id: "002", group: "G1"},
{name: "name003", id: "003", group: "G2"},
{name: "name004", id: "004", group: "G2"},
];
var myDataSource =
new kendo.data.DataSource({
data: rows,
pageSize: 3,
});
myDataSource.read();
$("#myGrid").kendoGrid({
dataSource: myDataSource,
columns: [
{field:"name", title:"The Name"},
{field:"id", title:"The Id"},
{field:"group"},
{command:["edit", "destroy"]}
],
scrollable: false,
pageable: true,
sortable: true,
groupable: true,
filterable: true,
editable: "inline"
});
});
</Script>
</body>
But the edit is not working. Opening this grid in a browser gives me a grid that looks as expected with an Edit and a Delete button. I can delete rows with the Delete button. But clicking Edit changes the row into edit mode (with input fields in cells) but changing a value and pressing the Update button does nothing. The row remains in edit mode and the Update button doesn't switch back to "Edit" as it's supposed to.
Can you tell me what's missing? Do I have to configure my datasource somehow?
Yes you missed to configure your Grid's dataSource to know how to update the records. I assume that you want to edit the records only locally (on the client) - without sending them to the server. To actually close the Grid and apply the changes you can use the save event of the Grid and the refresh method.
Here is a jsbin with your case.
If you want to save these changes to the server I suggest you to start with the demos.
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 am adding new item in kendo multiselect dropdown which is a very big text.On typing that text it goes on making the width of kendo wider.I want the kendo width to be fixed and the cursor should be positioned next to the new skill after the skill is added.Please suggest a solution.
CODE:
$("#selects").kendoMultiSelect({
placeholder: "Skills",
dataTextField: 'text',
dataValueField: 'value',
dataSource: data,
dataBound: onDataBound,
filtering: onFiltering,
deselect: onDeselect,
select: onSelect,
change: onChange,
close: onClose,
open: onOpen,
filter: "startswith"
});
I am struggling to get a custom edit command link working for kendo ui grid. Say I have following grid
<div id="request-grid" style="height: 400px;"></div>
<script type="text/javascript">
$("#request-grid").kendoGrid({
dataSource: dataSource,
columns: [{
field: "Id", title: "Id", width: 20
}, {
field: "FromName", title: "Req Name", width: 150
....
}, {
command: [{ name: "edit", template: kendo.template('#Html.ActionLink("Edit","_SoftwareRequestEdit","SoftwareRequest",new {id = "#= Id #"}, null)') }]
}],
});
</script>
I have used the code above for the edit link, but I don't remember the specifics. I have been scratching my head for the correct syntax for 2 hours now and still couldn't figure out. The above edit command template generates following link
Edit
whereas I was expecting this
Edit
for grid row with Id equal to 3
Any ideas how to correctly generate edit links with correct Id values
Remove kendo.template() from the definition of the template, KendoUI already knows that it has to be a template so it expects a string and not a kendo.template` object. See documentation and examples in their documentation here.
Example:
<div id="grid"></div>
<script>
$("#grid").kendoGrid({
columns: [ {
field: "name",
template: "<strong>#: name # </strong>"
}],
dataSource: [ { name: "Jane Doe" }, { name: "John Doe" } ]
});
</script>
This is the grid view showing all records on grid here, but i don't want show in the grid all records?
When ever i click events like add,edit,view,in that time shows the all records...
Suppose showing' Total' in my grid ,,Total is showing only when i click add ,edit ,view
Not in the grid view
colModel:[
{name:'empId',index:'empId',width:3,editable:true,editoptions:{readonly:false,view:true},editrules:{required:false},key:true,formoptions:{rowpos:2,elmprefix:" " }},
{name:'empName',index:'empName',width:3,editable:true,editrules:{required:true},formoptions:{rowpos:3,elmprefix:" " }}]
jQuery("#taskDetails").jqGrid('navGrid','#pagernavTask',{add:true,edit:true,del:true,refresh:true,view:true,search:false})
This is my code...suppose if i add id,name (editable:true) it show dialogue box 2 feilds ..and also it shows in grid view also ,,but and don't want to display in the grid view displays ,it show only when i click edit,add,view (show in dialogue boxes)..Is it possible ????Please reply for this answer
Please any one give me the answer
Thanks in adavance
hiding a column can be done by using hidden: true in your colModel. Moreover by using beforeshowform in your add ,edit ,view u can customize ur own way of showing / hiding a column. For advance details Hidden Columns in jqGrid.
UPDATE
here i hide EmpId by using hidden:true in my colmodel. it can be shown in Add dialog by using beforeshowform event. Same way i have shown empName in Grid but hidden in edit dialog. hope u can understand now.
$(function() {
var grid = $('#MyJqGrid');
var mydata = [
{empId:"1",empName:"alpha",notes:"NA"},
{empId:"2",empName:"beta",notes:"Null"},
{empId:"3",empName:"gamma",notes:"N/A"},
{empId:"4",empName:"delta",notes:"Null"},
{empId:"5",empName:"theta",notes:"aaaa"},
];
grid.jqGrid({
data: mydata,
datatype: "local",
colNames:['empId','empName', 'Notes'],
colModel:[
{name:'empId',index:'empId',sortable:true, editable:true, hidden: true,}, // here field is hidden in grid
{name:'empName',index:'empName',editable:true, sortable: true, hidden: false,}, // here field is shown in grid
{name:'notes',index:'notes',editable:true, sortable: true,},
],
height: "auto",
width : "auto",
pager:'#Mypager',
viewrecords : true,
rowNum: 5,
sortname: "empId",
sortorder :"asc",
rowList:[2,3,5],
caption : "My JqGrid Test",
}).jqGrid('navGrid','#Mypager',{
edit: true,
add: true,
del: false,
search: false,
view: false,
},
{
//Edit Form
beforeShowForm: function(form){
$('#tr_empName',form).hide(); //In Edit form empName is Hidden, initially shown
}
},
{
//Add Form
beforeShowForm: function(form){
$('#tr_empId',form).show(); //In add form EmpId is shown, initially hidden
//$('#tr_empName',form).hide();
},
});
});
I have a checkbox for each row within a kendo grid. If the user sorts or filters the grid, the checkmarks are cleared from the checkboxes. How can I prevent the checkboxes from unchecking or re-check them after the sort or filter occurs? Please refer to the following js fiddle to observe the behavior during sorting:
http://jsfiddle.net/e6shF/33/
Here's the code on the jsfiddle for reference (...needed to ask this question):
$('#grid').kendoGrid({
dataSource: { data: [{id:3, test:'row check box will unchecked upon sorting'}]},
sortable: true,
columns:[
{
field:'<input id="masterCheck" class="check" type="checkbox" /><label for="masterCheck"></label>',
template: '<input id="${id}" type="checkbox" />',
filterable: false,
width: 33,
sortable: false // may want to make this sortable later. will need to build a custom sorter.
},
{field: 'test',
sortable: true}
]});
basically the selection is cleared each time because the Grid is redrawn. You can store the check items in an array or object and when the Grid is redrawn (dataBound event) you can mark them again as checked.
To simplify things here is an updated version of you code. Also use the headerTemplate option to set header template - do not name your field like template instead.
var array = {};
$('#grid').kendoGrid({
dataSource: { data: [{id:3, test:'row check box will unchecked upon sorting'}]},
sortable: true,
dataBound:function(){
for(f in array){
if(array[f]){
$('#'+f).attr('checked','checked');
}
}
},
columns:[
{
headerTemplate:'<input id="masterCheck" class="check" type="checkbox" /><label for="masterCheck"></label>',
template: '<input id="${id}" type="checkbox" />',
filterable: false,
width: 33,
sortable: false // may want to make this sortable later. will need to build a custom sorter.
},
{field: 'test',
sortable: true}
]});
var grid = $('#grid').data().kendoGrid;
$('#grid tbody').on('click',':checkbox',function(){
var id = grid.dataItem($(this).closest('tr')).id;
if($(this).is(':checked')){
array[id] = true;
}else{
array[id] = false;
}
})
Link to the fiddle
If you are not too concerned about old browsers HTML5 storage might work for you
http://www.w3schools.com/html/html5_webstorage.asp
And of course jQuery comes with its own data storage capability.