I'm working with Kendo UI and Knockout JS libraries and have a strange problem.
I'm trying to display kendo grid within kendo window, but the rows inside the grid get duplicated.
Here's a piece of code:
JS:
$(document).ready(function () {
var clients = { FilteredClients: [{ ClientName: '1', ClientCode: 'Value 1' }, { ClientName: '2', ClientCode: 'Value 2'}], Header: 'TEST' };
var viewModel = ko.mapping.fromJS(clients);
ko.applyBindings(viewModel);
var showClientLookupWindow = function () {
var window = $("#clientLookupWindow").data("kendoWindow");
window.center();
window.open();
}
$('#btnClientLookup').bind('click', showClientLookupWindow);
});
HTML:
<div>
<a id="btnClientLookup" href="#" class="k-button k-button-icontext k-grid-search"><span
class="k-icon k-search"></span>Client Lookup</a>
<span data-bind="text: Header"></span>
<div id="clientLookupWindow" data-bind="kendoWindow: { isOpen: false, visible: false, width: '600px', height: '230px', modal: true, resizable: false, title: 'Client Lookup'}">
<div id="gridClients" data-bind="kendoGrid: { data: FilteredClients, columns: [ { field: 'ClientName', title : 'Client Name' }, { field: 'ClientCode', title: 'Client Code' } ], scrollable: false, sortable: true, pageable: false }">
</div>
</div>
<div id="gridClientsOutside" data-bind="kendoGrid: { data: FilteredClients, columns: [ { field: 'ClientName', title : 'Client Name' }, { field: 'ClientCode', title: 'Client Code' } ], scrollable: false, sortable: true, pageable: false }">
</div>
</div>
Running it in the browser, we see that there are 2 rows in gridClientsOutside, but after clicking btnClientLookup, the window pops up with the gridClients, which consists of 4 rows.
Did anyone encounter this issue or have a workaround for this?
Thanks in advance,
Ihor
At a quick glance, it looks like the bindings inside the kendoWindow section are getting bound twice, which is causing the issue.
There bindings can run in an async mode and that is probably how kendoWindow should be set in the knockout-kendo library.
For the moment, you can do this:
<div id="clientLookupWindow" data-bind="kendoWindow: { async: true, isOpen: false, visible: false, width: '600px', height: '230px', modal: true, resizable: false, title: 'Client Lookup'}">
This adds async: true in the kendoWindow binding options. Otherwise, you could do ko.bindingHandlers.kendoWindow.options.async = true; to set it globally, before calling applyBindings.
Here is a sample: http://jsfiddle.net/rniemeyer/2MexC/
Related
I am using bootstrap-table and data is loading from URL. In the table I have setup checkboxes for ID column. My problem is that the all checkboxes are checked when the page is load. I found this question here, but its not help me to fix my issue.
This is my JS:
var $_bsTable = $('#table')
$_bsTable.bootstrapTable({
toggle: "table",
url: "./includes/view_suppliers.inc.php",
columns: [{
field: 'sid',
checkbox: true,
printIgnore: true,
//width: 64
},
{
field: 'image',
title: 'Image',
sortable: false,
align: 'center'
},
{
field: 'name',
title: 'Supplier Name',
sortable: true
},
{
field: 'address',
title: 'Address',
sortable: true
}
],
icons: {
columns: 'fa-th-list text-orange-d1',
detailOpen: 'fa-plus text-blue',
detailClose: 'fa-minus text-blue',
export: 'fa-download text-blue',
print: 'fa-print text-purple-d1',
fullscreen: 'fa fa-expand',
search: 'fa-search text-blue'
},
toolbar: "#table-toolbar",
theadClasses: "bgc-white text-grey text-uppercase text-80",
//clickToSelect: true,
checkboxHeader: true,
search: true,
searchAlign: "left",
//showSearchButton: true,
sortable: true,
//detailView: true,
//detailFormatter: "detailFormatter",
pagination: true,
sidePagination: 'client',
// serverSort: false,
paginationLoop: false,
showExport: true,
showPrint: true,
showColumns: true,
showFullscreen: true,
mobileResponsive: true,
//checkOnInit: true,
})
Hope somebody may help me out.
Are you maybe giving a value to checkboxes in your HTML?
From official documentation:
If a value is given the Checkbox is automatically checked. Its also possible to check/uncheck the checkbox by use an formatter (return true to check, return false to uncheck).
Here you can see an example: https://examples.bootstrap-table.com/#column-options/checkbox.html
I am working on w2ui grid and I need to hide and show it based on certain condition. Grid is not showing back even though visibility:visible property is applied after it is hidden. It is just showing a line.
Please have a look at my code below:
HTML:
<div id="LastMileGrid" class="col-lg-6 col-sm-12 col-md-6" style="width: 100%; height: 150px"></div>
Javascript:
$('#LastMileGrid').w2grid({
name: 'LastMile',
show: {
toolbar: true,
footer: true,
toolbarReload: false,
toolbarColumns: false,
lineNumbers: true,
},
columns: [
{ field: 'recid', caption: 'ID', size: '10%', sortable: true },
//{ field: 'Header', caption: 'Header', size: '20%', editable: { type: 'text' }, sortable: true },
{ field: 'Description', caption: 'Description', size: '50%', editable: { type: 'text' }, sortable: true }
],
toolbar: {
items: [
{ id: 'add', type: 'button', caption: 'Add Record', icon: 'w2ui-icon-plus' },
{ id: 'remove', type: 'button', caption: 'Remove Record', icon: 'w2ui-icon-cross' }
],
onClick: function (event) {
if (event.target == 'add') {
var Index = w2ui['LastMile'].records.length;
w2ui['LastMile'].add({ recid: w2ui['LastMile'].records.length + 1 });
}
if (event.target == 'remove') {
var grid = w2ui["LastMile"];
grid.method = 'DELETE';
grid.delete();
}
}
},
//records: [{ recid: 'AAA' }, { recid: 'BBB' }, { recid: 'CCC' }]
});
And when opening the pop up I call the function,
$('#popup').w2popup('open', {
onOpen: function () {
if ($("#ddlMode").val() == "AIR" && ($("#drpServiceScope").val() == "D2D" || $("#drpServiceScope").val() == "A2D")) {
$('#LastMileGrid').attr("style", "visibility:visible;height:160px:")
}
else {
$('#LastMileGrid').attr("style", "visibility:collapse;")
}
},
modal: true,
});
You can try to call w2ui["LastMile"].refresh() after hiding or showing.
Answering to help others as I am late :D.
After spending a lot of time to resolve the issue,I have formulize below 2 solutions for w2ui grid show hide issue or column size issue :
1.Change the size of columns to px instead of %.
ie. use
{ field: 'lname', caption: 'Last Name', size: '30px' }
instead of
{ field: 'lname', caption: 'Last Name', size: '30%' },
2. If you wish to keep column size in % due to some requirement:
Depending on where you are rendering grid,you need to handle the resizing.
Calling refresh on grid will send data request again to server.
I don't wanted grid to make call to server each time I show/hide grid, hence written the resize of my own.
To help understand the function please note that in my application,
I have followed naming convention as follows:
If I create a grid then it will be id+"_grid",
If create a form that it will be id+"_form",
same for layout id+"_layout".
So I can get the associated component to a id and establish relation between them.
Call resize() function after you call show().
If below function doesn't help, try adding some milli seconds delay between show and my function resize().
function resize(id){
var grid=id+"_grid";
var layout=id+"_layout";
var form=id+"_form";
if(w2ui[layout]){
if($(w2ui[layout].el("main")).hasClass("w2ui-grid")){ /*means in w2ui layouts main has grid hence call resize. Calling refresh on layout "main" will make grid to reload data again ,hence grid resizing is handled in next case */
w2ui[layout].resize();
}else{
w2ui[layout].refresh();/*means main has element other than grid so refresh */
}
}
if(w2ui[form])
w2ui[form].resize();
if(w2ui[grid])
w2ui[grid].resize(); //if grid is directly rendered without a layout resize helps
}
I am trying to use Kendo UI Grid with angular js. I need to expand the grid to further level when user clicks a link given in one of the columns of the grid.
I used following code to expand the grid on click of an tag inside a kendo grid column.
$scope.mainGridOptions = {
dataSource: {
data: $scope.data,
schema: {
model: {
fields: {
fieldA: { type: "string" },
fieldB: { type: "string" },
fieldC: { type: "string" },
fieldT: { type: "numeric" }
}
}
},
pageSize: 10
},
filterable: true,
sortable: true,
resizable: true,
pageable: true,
scrollable: true,
columns: [
{ field: "fieldA", title: "FieldA", width: 90},
{ field: "fieldB", title: "FieldB", width: 90},
{ field: "fieldC", title: "FieldC", width: 90},
{ field: "fieldT", title: "FieldT", width: 90, template: "<a onclick='expand(this)'href='\\#'>#=mydata#</a>"}
]
};
But on running the code it just gives me an error in the browser console window.
Uncaught ReferenceError: expand is not defined at
HTMLAnchorElement.onclick
I researched and found that Kendo doesn't supports onclick event inside an tag. Therfore tried to use tag instead of tag. But it still does not work.
{ field: "fieldT", title: "FieldT", width: 90, template: "<span ng-click='showFileLevel(this)>{{mydata}}</span>"}
Can anyone please guide me in the right direction or let me know how can I expand a Kendo grid to further levels on clicking text inside a certain column of the grid using Angular JS.
you write expand(this) method out of the controller in your js.
I'm using Quasar Framework with VueJS. I have a Data Table component that allows single item selection. The Data Table data is automatically updated every 5 seconds through websockets events. If I have an item selected, every time the Data Table data is updated, that item gets deselected, and I would like to persist the item selection after the data is updated.
Is there a way to accomplish this? I was thinking in two different approachs, but I have no idea how to do it, at least not from the documentation:
access directly the Data Table selected item
handle an event fired when an item is selected
In both cases the main idea would be to save the selection in a store, an restore the selection when the Data Table items update is done.
<template>
<q-layout>
<!-- Main block start-->
<div class="scroll" style="width: 100%">
<div class="layout-padding">
<div class="row" style="margin-top: 30px;">
<q-data-table :data="dataTableData" :config="config" :columns="columns" #refresh="refresh">
</q-data-table>
</div>
</div>
</div>
<!-- Man block end-->
</q-layout>
</template>
<script>
export default {
sockets:{
connect: function(){
console.log('socket connected')
},
info: function(data){
console.log('sockets: info',data)
//This is where I should get the current selected item if exists
this.dataTableData = data;
//This is where I should restore the selected item
}
},
methods: {
getInfo: function(val){
this.$socket.emit('getInfo', val);
},
refresh (done) {
this.$socket.emit('getInfo');
done();
}
},
created: function(){
this.getInfo()
},
data: function () {
return {
dataTableData: [],
config: {
title: 'My Data Table',
refresh: true,
columnPicker: false,
leftStickyColumns: 0,
rightStickyColumns: 0,
rowHeight: '50px',
responsive: true,
selection: 'single',
messages: {
noData: '<i>warning</i> No data available to show.'
}
},
columns: [
{ label: 'Name', field: 'name', width: '200px', sort: true },
{ label: 'Size', field: 'size', width: '50px', sort: true },
{ label: 'Status', field: 'status', width: '50px', sort: true },
{ label: 'Progress', field: 'progress', width: '150px', sort: false },
{ label: 'Speed', field: 'speed', width: '50px', sort: false },
{ label: 'ETA', field: 'eta', width: '50px', sort: false }
],
pagination: false,
rowHeight: 50,
bodyHeightProp: 'auto',
bodyHeight: 'auto'
}
},
watch: {
}
}
</script>
UPDATE
As far as I can see, they're already working in this enenhancement for the Quasar-Framework v0.14 =)
Hi I have a Kendo Grid created in jquery with following code:
Kendo Grid:
$('#divFolderNotes').kendoGrid({
dataSource: data
batch: true,
columns: [
{ field: "Text", title: "Note Text" },
{ field: "CreatedByDisplayName", width: '190px', title: "Created By" },
{ field: "CreatedDateTime", width: '190px', title: "Created Datetime" },
],
scrollable: true,
sortable: true,
reorderable: true,
resizable: true,
height: 250,
selectable: "row",
autoSync: true,
editable: true,// "inline",
navigatable: true,
columnMenu: true,
pageable: {
refresh: true,
pageSizes: true,
buttonCount: 5
},
})
The problem:
First column Note Text will be having values which will be containing HTML formatted data.
For a better idea below is an example:
Right Now the data is displayed as :
First Name : Nitin <br/> Second Name : Rawat
But I want the data to be displayed as :
First Name : Nitin
Second Name : Rawat
Also , Note Text column will be edited through inline editing so during editing mode also I want the data to be displayed as :
First Name : Nitin
Second Name : Rawat
Any help will be highly appreciated.
Set the encoded attribute of the column to false to disable automatic HTML encoding.
From the doc page:
If set to true the column value will be HTML-encoded before it is
displayed. If set to false the column value will be displayed as is.
By default the column value is HTML-encoded.
Changed code:
$('#divFolderNotes').kendoGrid({
dataSource: data
batch: true,
columns: [
{ field: "Text", title: "Note Text", encoded: false }, #<------ Edit Here
{ field: "CreatedByDisplayName", width: '190px', title: "Created By" },
{ field: "CreatedDateTime", width: '190px', title: "Created Datetime" },
],
scrollable: true,
sortable: true,
reorderable: true,
resizable: true,
height: 250,
selectable: "row",
autoSync: true,
editable: true,// "inline",
navigatable: true,
columnMenu: true,
pageable: {
refresh: true,
pageSizes: true,
buttonCount: 5
},
})
EDIT: Since the line break should be preserved when editing, maybe you should just replace the <br /> tags with a line break character. That way it will show as an actual line break in form fields. Here is an example: jQuery javascript regex Replace <br> with \n
It might be better to do this when the user submits the data initially, but, if that isn't an option you can replace it in JS when displaying the data.
You can try kendo template.
for these Please Try Following links
http://docs.telerik.com/kendo-ui/api/web/grid#configuration-columns.template
http://docs.telerik.com/kendo-ui/api/web/grid
hope this will help.