I want to create a custom based on the number of dates in a month, is it possible to make thead in
$(document).ready(function() {
//datatables
table = $('#table').DataTable({
});
DataTable provide a headerCallback hook to modify the header of your table.
For example if you want to show some information on the first header column, you could try it like :
table = $('#table').DataTable({
headerCallback: function headerCallback(thead, data, start, end, display) {
$(thead)
.find('th')
.first()
.html('Sometext here');
}
});
Related
I am using a custom formatter to create hyperlinks in one of the columns of my grid.
In my code, there are cases when I need to disable the selected row. The row disabling works as I want it to, but the hyperlink for that row is not disabled. I can not select the row and all the other column values are displayed as grey colored to indicate that the row is disabled. The only column whose content does not change color is the one having links.
Any ideas on how to disable links?
This is my loadComplete function:
loadComplete: function (data) {
var ids =jQuery("#list").jqGrid('getDataIDs');
for(var i=0;i < ids.length;i++){
var rowId = ids[i];
var mod = jQuery("#list").jqGrid('getCell',ids[i],'mod');
if(mod=='y'){
jQuery("#jqg_list_"+rowId).attr("disabled", true);
$("#list").jqGrid('setRowData',ids[i],false, {weightfont:'bold',color:'silver'});
var iCol = getColumnIndexByName.call(this, 'adate');
$(this).jqGrid('doInEachRow', function (row, rowId, localRowData) {
$(row.cells[iCol]).children("a").click(function (e) {
e.preventDefault();
// any your code here
alert("No Good");
return false;
});
});
}
}
}
I want the links disabled in all the rows where the value of the column mod=y
You can try to use onClick callback of dynamicLink formatter described here, here and here. It gives you maximum flexibility. Inside of onClick callback you can test something like $(e.target).closest("tr.jqgrow").hasClass("not-editable-row") and just do nothing in the case.
I am trying to change the columns collection of my Kendo grid in the below way.
var grid = $("#grid").data("kendoGrid");
$http.get('/api/GetGridColumns')
.success(function (data) {
grid.columns = data;
})
.error(function (data) {
console.log(data);
});
This is changing the column collection but not reflecting immediately in my grid. But when I try to perform some actions in the grid (like grouping), then my new column set is appearing.
Please let me know how can I achieve this.
Regards,
Dilip Kumar
You can do it by setting the KendoUI datasource, destroy the grid, and rebuild it
$("#load").click(function () {
var grid = $("#grid").data("kendoGrid");
var dataSource = grid.dataSource;
$.ajax({
url: "/Home/Load",
success: function (state) {
state = JSON.parse(state);
var options = grid.options;
options.columns = state.columns;
options.dataSource.page = state.page;
options.dataSource.pageSize = state.pageSize;
options.dataSource.sort = state.sort;
options.dataSource.filter = state.filter;
options.dataSource.group = state.group;
grid.destroy();
$("#grid")
.empty()
.kendoGrid(options);
}
});
});
here you can just do this :
var options = grid.options;
options.columns = state.columns;
where you can retrieve the columns in a session or in a db
This jsfiddle - Kendo UI grid dynamic columns can help you - using kendo.observable.
var columns = data;
var configuration = {
editable: true,
sortable: true,
scrollable: false,
columns: columns //set the columns here
};
var grid = $("#grid").kendoGrid(configuration).data("kendoGrid");
kendo.bind($('#example'), viewModel); //viewModel will be data as in jsfiddle
For the ones who are using Kendo and Angular together, here is a solution that worked for me:
The idea is to use the k-rebind directive. From the docs:
Widget Update upon Option Changes
You can update a widget from controller. Use the special k-rebind attribute to create a widget which automatically updates when some scope variable changes. This option will destroy the original widget and will recreate it using the changed options.
Apart from setting the array of columns in the GridOptions as we normally do, we have to hold a reference to it:
vm.gridOptions = { ... };
vm.gridColumns = [{...}, ... ,{...}];
vm.gridOptions.columns = vm.gridColumns;
and then pass that variable to the k-rebind directive:
<div kendo-grid="vm.grid" options="vm.gridOptions" k-rebind="vm.gridColumns">
</div>
And that's it when you are binding the grid to remote data (OData in my case). Now you can add or remove elements to/from the array of columns. The grid is going to query for the data again after it is recreated.
When binding the Grid to local data (local array of objects), we have to somehow postpone the binding of the data until the widget is recreated. What worked for me (maybe there is a cleaner solution to this) is to use the $timeout service:
vm.gridColumns.push({ ... });
vm.$timeout(function () {
vm.gridOptions.dataSource.data(vm.myArrayOfObjects);
}, 0);
This has been tested using AngularJS v1.5.0 and Kendo UI v2016.1.226.
I'm use this code for change columns dynamic:
kendo.data.binders.widget.columns = kendo.data.Binder.extend({
refresh: function () {
var value = this.bindings["columns"].get();
this.element.setOptions({ columns: value.toJSON });
this.element._columns(value.toJSON());
this.element._templates();
this.element.thead.empty();
this.element._thead();
this.element._renderContent(this.element.dataSource.view());
}
});
Weddin
Refresh your grid
.success(function (data) {
grid.columns = data;
grid.refresh();
})
Here is what i use
var columns = [];//add the columns here
var grid = $('#grid').data('kendoGrid');
grid.setOptions({ columns: columns });
grid._columns(columns);
grid._templates();
grid.thead.empty();
grid._thead();
grid._renderContent(grid.dataSource.view());
I think a solution for what you are asking is to call the equivalent remote DataSource.read() method inside of the function. This is what I used to change the number of columns dynamically for local js data.
$("#numOfValues").change(function () {
var columnsConfig = [];
columnsConfig.push({ field: "item", title: "Metric" });
// Dynamically assign number of value columns
for (var i = 1; i <= $(this).val(); i++) {
columnsConfig.push({ field: ("value" + i), title: ("201" + i) });
}
columnsConfig.push({ field: "target", title: "Target" });
columnsConfig.push({ command: "destroy", title: "" });
$("#grid").data("kendoGrid").setOptions({
columns: columnsConfig
});
columnDataSource.read(); // This is what reloads the data
});
Refresh the grid
$('#GridName').data('kendoGrid').dataSource.read();
$('#GridName').data('kendoGrid').refresh();
Instead of looping through all the elements. we can remove all the data in the grid by using a single statement
$("#Grid").data('kendoGrid').dataSource.data([]);
If your grid is simple and you don't need to configure special column-specific settings, then you can simply omit the columns argument, as suggested in the API reference.
Use autogenerated columns (i.e. do not set any column settings)
... and ....
If this [column] setting is not specified the grid will create a column for every field of the data item.
var newDataSource = new kendo.data.DataSource({data: dataSource}); $("#grid").data("kendoGrid").setDataSource(newDataSource);
$("#grid").data("kendoGrid").dataSource.read();
After fighting this for a day and seeing hints in this thread that Kendo had simplified this problem, I discovered you can just use setOptions with a single property.
.success(function (data) {
grid.setOptions({
columns: data,
});
})
Grid Set Options
Whenever we select rows the in jqGrid and perform search operation at the end search reloads the grid and all the user checked rows are unchecked .... I want the selected rows to be selected even after search perform or we go to next page.
Does anyone have solution on this?????? I need it URGENT
You should remember the selected rows before search and select them again after. For example, you define onSearch event:
var selected_rows = [];
onSearch: function(){
selected_rows = $('#your_grid').jqGrid('getGridParam', 'selarrrow');
}
Then you define gridComplete event, so that it would select the rows if any:
gridComplete: function(){
$.each(selected_rows, function(_, row_id){
$("#your_grid").jqGrid('setSelection', row_id, false);
});
selected_rows = [];
}
You can use onPaging event in similar way to deal with paging.
I need to have a nice transition where I remove the first row and append to a table new item.
$.getJSON('/Home/GetRecentPosts/', { count:1 }, function(data) {
$('#recentPosts tr:first').fadeOut(2000);
$('#recentPosts').append($('<tr><td>'+data[0].SchoolName+'</td></tr>').hide().fadeIn(2000));
});
this works the first time i execute getJson only. Please help.
thanks
I've tried to separate each item of functionality you want onto a separate line. If this isn't what you are after, then hopefully it shouldn't be to hard to adjust the below code to suit your needs.
$.getJSON(
'/Home/GetRecentPosts/',
{ count:1 },
removeFirstRowAndAppendNewItem(data)
);
function removeFirstRowAndAppendNewItem(data)
{
console.log("in callback"); // to confirm we have reached here
$('#recentPosts tr:first').fadeOut(2000, function() {
$('#recentPosts tr:first').remove();
newRow = $('<tr><td>'+data[0].SchoolName+'</td></tr>').hide();
$('#recentPosts').append(newRow)
newRow.fadeIn(2000));
});
}
Basically:
Fade out the first row
Remove the first row from the DOM
Create a new element, with styling that hides it
Append the new element to the table
Fade in the new element
(Note: it's possible to combine these steps together)
Try this.
$('#recentPosts tr:visible:first').fadeOut(2000);
Because
$('#recentPosts tr:first').fadeOut(2000);
would have hidden the first element at the first JSON call. Now you are trying again to fadeOut the invisible first element. So you could use a :visible filter to achieve the expected result.
Alternatively, if you wanna remove the element from DOM, try this
$('#recentPosts tr:first').fadeOut(2000, function(){
$(this).remove();
});
Try this:
$.ajax({
beforeSend: function(){
// Handle the beforeSend event
},
complete: function(){
// Handle the complete event
}
// ......
});
I am using jqgrid drag and drop , i have two tables TABLE A and TABLE B, i am draging one row from TABLE A and Droping into TABLE B, i Want to capture new row id and data received in table, is there any receive event in jqGrid ?
You can define ondrop event function (see this Link ) like following
jQuery("#table2").jqGrid('gridDnD', {
ondrop: function (ev, ui, getdata) {
// var acceptId = $(ui.draggable).attr("id");
// getdata is the data from $('#table1').jqGrid('getRowData',acceptId);
// so you have full information about dropped row
}
});
inside of ondrop's parameters you will find all information which you need.
$("#gbox_destinationTable tr td").droppable({
drop : function(event, ui) {
var draggedHtml = ui.draggable.html();
$(this).append(draggedHtml);
deleteFromSource(ui.draggable.parent());
}
});
function deleteFromSource(draggedObj) {
$('#sourceTable').jqGrid('delRowData', draggedObj.attr('id'));
}
You may see the complete sample for jqgrid specific implementation here : http://jsfiddle.net/pragya91/fzkqxdxm/