Select2 is not working inside the datatable when i resize the window to mobile view. when i resize datatable is collapsed. When i expand the feild select2 is visible but when i click it is not showing the option.
I have tried fnDrawCallback(),drawCallback() inside the datatable initialisation. But not able to reslove the issue
var DatTable = $('#tblRoleMap').DataTable( {
"autoWidth": true,
"responsive": true,
"processing": true,
"order": [[1, 'asc']],
drawCallback: function() {
$(".js-example-basic-multiple").select2({
placeholder: "Select Role",
allowClear: true
});
}
} );
Related
I have an existing grid creating in Kendo UI for Jquery. I want to put a static drop down/select box in the first field/cell of the grid on each row. When I do it shows up as "undefined".
Most of the examples I see on her and the Telerik site use an editor. In my case the drop down is static. Once they click on an item they will be redirect to another page to do something. At the moment I just want to get the drop down to show up with hard coded options.
jQuery(function($){
"use strict";
var grid = $("#grid").kendoGrid(){
....
columns: [{
field: "my_links",
title: "My Links",
template: "#=getMyLinks(DATA.user_id)#"
},{
....
}_.data("kendoGrid");
function setGridData(){
....
});
grid.setDataSource(dataSource);
}
setGridData();
});
function getMyLinks(user_id){
$('<input id="my_links" name="my_links/>')
.kendoDropDownList{[
dataSource: [
{ id: 1, name: "View" },
{ id: 2, name: "Create },
{ id: 3, name: "Delete"}
],
dataTextField: "name",
dataValueField: "id"
});
}
I would expect a drop down in the
You should provide DOM element for drop down widget in columns.template field and then initialize all widgets in dataBound event.
$("#grid").kendoGrid({
columns: [{
field: "my_links",
title: "My Links",
template: "<input id="my_links" name="my_links/>"
}],
dataBound: function (){
getMyLinks(DATA.user_id);
}
}).data("kendoGrid");
I've used the hierarchical kendo for showing my data, I mean each row has a child which contains a grid of rows' details,my kendo should appear based on the data that user enter in inputs and after click on a button , it works well for the first time but if user change the inputs' data and click the button again, the kendo does not show the grid of details it just show me my parent grid but if the user refresh the page and then change the data and click the button it works fine. after a lot of search I couldn't find the reason.can anyone help me
var grid;
var createGrid = function () {
grid = $("#mygrid").kendoGrid({
dataSource: {
data: schema.PNR_item,
schema: {
hasChildren: true,
model:{
fields:fields,
}
},
pageable: true,
height: 550,
pageSize: 6,
serverPaging: true,
serverSorting: true,
//columns
},
height: 600,
sortable: true,
pageable: true,
scrollable: true,
resizable:true,
columns: columns,
detailTemplate: '<div class="grid" ></div>',
detailInit: function (e) {
e.detailRow.find(".grid").kendoGrid({
dataSource: e.data.Details,
columns: details_columns,
schema:{
model:{
fields: details_fields
}
}
});
},
}).data("kendoGrid");
}//end of createGrid function
createGrid();
I am using free jqgrid 4.15
I have add, delete, edit button in the below pager. When the user selects row and click delete, I want to check one cell value and if its equal to something I want to not show the delete dialog, instead show alert that this cannot be deleted.
Some settings of my grid as below:
{
cmTemplate: { autoResizable: true, editable: true },
guiStyle: "bootstrap",
sortable: true,
pager: true,
formEditing: {
closeOnEscape: true,
closeAfterEdit: true,
closeAfterAdd: true,
closeAfterDelete: true,
savekey: [true, 13],
addCaption: "Add Me",
editCaption: "Edit Me ",
bSubmit: "Submit"
},
formDeleting: {
width: 100,
caption: 'Delete'
},
}).jqGrid("navGrid", { add: true, edit:true, del: true, refresh: true,
view: false },
{
beforeShowForm: function (form) {
}
},
{
beforeShowForm: function (form) {
}
}
)
});
You can hide/show the Delete button of the navigator bar depend on the value of from the cell in the row. You can use onSelectRow callback for that. The ids of the Delete button (like all other) will be built based on the id of the grid. For example if the grid id is "list" then the id of Delete button in the bottom navigator bar will be "del_list" and the id of the same button in the top navigator bar (if you use toppager: true) will be "del_list_top". The code wich shows/hides the button can looks close to the following:
onSelectRow (rowid) {
var item = $(this).jqGrid("getLocalRow", rowid),
$delButton = $("#del_" + this.id + ",#del_" + this.id + "_top");
if (item.closed) {
$delButton.hide();
} else {
$delButton.show();
}
}
One can disable/enable the buttons instead of hiding/showing there alternatively.
I want to include kendo dropdownlist into my grid.
Everything's going to be fine except one thing.
When i want to "Add Record" with default kendo create toolbar, i can't bind first value fetched from dropdownlist datasource.
Datasource works fine. Dropdownlist works fine too.
If I choose anything from dropdownlist manually, everything works fine.
$scope.mainGridOptions = {
dataSource: {
transport: ...
schema: ...
},
batch: false,
...
toolbar: ["create"],
columns: [
...,{
field: "location_id",
title: "Location",
editor: function(container,options){
var input = $('<input/>');
input.attr('name',options.field);
input.appendTo(container);
input.kendoDropDownList({
autoBind: true,
dataTextField: "text",
dataValueField: "value",
dataSource: locationsDataSource,
index: 0,
});
}
},
...
]
};
I tried this too. except "index", i tried to manually select first item from dataSource. Visually it works fine. Even with Third item selected too, but when i click "Update", data isn't bounded.
input.kendoDropDownList({
autoBind: true,
dataTextField: "text",
dataValueField: "value",
dataSource: locationsDataSource,
dataBound: function(e){
this.select(0);
}
});
Anyone?
So, i found the solution.
It's seem to be a bug of Kendo DropDownList.
I'm bounding it manually after dataSource load from dropdown dataBound event.
Here we go:
editor: function(container,options){
var input = $('<input/>');
input.attr('name',options.field);
input.attr('data-bind','value:' + options.field);
input.appendTo(container);
input.kendoDropDownList({
autoBind: true,
dataTextField: "text",
dataValueField: "value",
dataSource: locationsDataSource,
index: 0,
dataBound: function(){
options.model[options.field] = this.dataItem().value;
}//end databound
});//end dropdownlist
}//end editor
is it possible to activate virtual scrolling ListView control instead pageing as in the grid? I try this but don't work
var options = {
autoBind : true,
dataSource : kendoDataSource,
selectable: true,
template: function (record) {
var tmpl = kendo.template(m_DataSet.getReadTemplate(record));
return tmpl(record);
},
filterable: {
field : "ID"
},
scrollable: {
virtual: true
},
serverPaging: true,
edit : function (e) {
$(e.item).find("input:eq(0)").focus();
}
};
$(m_ListViewItemTag).kendoListView(options);
The Kendo UI ListView does not support virtual scrolling.