I'm trying to have a kendo grid column extremely thin, basically like a line. Reducing the width property below 10px or 10 doesn't seem to have any effect.
Here's what I'm doing:
let mainGridOptions = {
dataSource: myData,
columns: [{
field: "color",
title: " ",
width: '5px' // tried even without px, just 5
}]
};
Anyone know what's happening?
I am not able to reproduce it I please try with the below code snippet or look in this demo.
<div id="grid"></div>
<script>
$(document).ready(function () {
$("#grid").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Customers"
},
pageSize: 20
},
height: 550,
groupable: true,
sortable: true,
pageable: {
refresh: true,
pageSizes: true,
buttonCount: 5
},
columns: [{
field: "ContactTitle",
title: "Contact Title"
}, {
field: "CompanyName",
title: "Company Name"
}, {
field: "Country",
width: '5px'
}]
});
});
</script>
If you will set the column width to '5px' then you could not see anything into column because some default spacing(Margin/padding) applied to the columns.
Related
How can I modify column filter option in kendo grid when grid is loaded? For example
add filter option filterable: { multi: true } or change width width: 120.
More detail, I have this code:
$("#Table").kendoGrid({
dataSource: { data },
pageSize: 30,
pageable: true,
sortable: true,
navigatable: true,
resizable: true,
groupable: true,
filterable: true,
selectable: "multiple, row",
columns:
[{ field: "ID", title: "ID", width: "20px", },
{ field: "Customer.Title", title: "Customer", width: "30px" },
{ field: "Author.Title", title: "Expert", width: "30px" },
{ field: "Body", title: "Body", width: "200px" },
{ field: "RemainderBody", title: "RemainderBody", width: "50px" },
]
}).data("kendoGrid");
I want to modify Customer filterable like filterable: { multi: true }
Going along with #NigelK and suggesting to use setOptions. Here is an example of setting an individual column to use multicheck filtering.
<div id="grid"></div>
<script>
grid = $("#grid").data("kendoGrid");
grid.setOptions({
columns: {
1: {
filterable: {
multi: true
}
}
}
});
</script>
Here is a dojo to test the code above.
You can use the setOptions method to change the grid configuration after it has been created. Check the API reference for the grid:
https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/methods/setoptions
Note that this will destroy and recreate the grid.
I have a grid and when i resize (reduce) any column, there is a white space shows up in the end of the grid. I have checked with the Kendo official samples and it seems like in some samples the shown behavior is in their samples.
I tried setting up width for header, cell content etc.. but its still shows some UI issues and i have multiple grids and i need a generic fix.
If its not an issue and a behavior then somebody please have a look at this and explain how to fix it.
I have added a normal screen shot and resized screenshot.
normal
after resize
For testing it out, i have added a jsfiddle.,
http://jsfiddle.net/49bhz2sk/
html
<div class="panel panel-body">
<div id="fleetInfoGridDisplayDummy" class="" data-bind="autoHeightContainer:true"></div>
</div>
script
$("#fleetInfoGridDisplayDummy").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Customers"
},
pageSize: 20
},
navigatable: true,
selectable: true,
sortable: true,
reorderable: true,
resizable: true,
scrollable: { virtual: true },
columnMenu: true, // Needed to hide and show columns.
pageable: {
refresh: true,
pageSizes: true,
buttonCount: 5
},
columns: [{
template: "<div class='customer-photo'" +
"style='background-image: url(../content/web/Customers/#:data.CustomerID#.jpg);'></div>" +
"<div class='customer-name'>#: ContactName #</div>",
field: "ContactName",
title: "Contact Name",
width: 240
}, {
field: "ContactTitle",
title: "Contact Title"
}, {
field: "CompanyName",
title: "Company Name"
}, {
field: "Country",
width: 150
}]
});
I have posted this in telerik forum and got a reply from the admin, here is how they suggested to resolve the issue. Posted here so that someone else can benefit from this.
Answer proposed by 'Drew B.' also works, i have seen that too in another post. The the code i posted is less cumbersome with minimal coding.
columnResize: function (e) {
// what is thead and tbody: https://docs.telerik.com/kendo-ui/api/javascript/ui/grid#fields
var grid = e.sender,
gridHeaderTable = grid.thead.parent(),
gridBodyTable = grid.tbody.parent();
// what is wrapper: https://docs.telerik.com/kendo-ui/api/javascript/ui/widget/fields/wrapper
// what is scrollbar(): https://docs.telerik.com/kendo-ui/api/javascript/kendo/fields/support
if (gridBodyTable.width() < grid.wrapper.width() - kendo.support.scrollbar()) {
// remove the width style from the last VISIBLE column's col element
gridHeaderTable.find("> colgroup > col").last().width("");
gridBodyTable.find("> colgroup > col").last().width("");
// remove the width property from the last VISIBLE column's object
// https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/fields/columns
grid.columns[grid.columns.length - 1].width = "";
// remove the Grid tables' pixel width
gridHeaderTable.width("");
gridBodyTable.width("");
}
},
According to various kendo sources, this is a mixture of observed normal behavior (2013), and unexpected behavior (2017). Kendo does provide a workaround for this issue, as I suspect it isn't necessarily kendo related but more an HTML/Table feature.
<style>
.k-grid {
width: 700px;
}
</style>
<div id="grid1"></div>
<script>
function getMasterColumnsWidth(tbl) {
var result = 0;
tbl.children("colgroup").find("col").not(":last").each(function (idx, element) {
result += parseInt($(element).outerWidth() || 0, 10);
});
return result;
}
function adjustLastColumn() {
var grid = $("#grid1").data("kendoGrid");
var contentDiv = grid.wrapper.children(".k-grid-content");
var masterHeaderTable = grid.thead.parent();
var masterBodyTable = contentDiv.children("table");
var gridDivWidth = contentDiv.width() - kendo.support.scrollbar();
masterHeaderTable.width("");
masterBodyTable.width("");
var headerWidth = getMasterColumnsWidth(masterHeaderTable),
lastHeaderColElement = grid.thead.parent().find("col").last(),
lastDataColElement = grid.tbody.parent().children("colgroup").find("col").last(),
delta = parseInt(gridDivWidth, 10) - parseInt(headerWidth, 10);
if (delta > 0) {
delta = Math.abs(delta);
lastHeaderColElement.width(delta);
lastDataColElement.width(delta);
} else {
lastHeaderColElement.width(0);
lastDataColElement.width(0);
}
contentDiv.scrollLeft(contentDiv.scrollLeft() - 1);
contentDiv.scrollLeft(contentDiv.scrollLeft() + 1);
}
$("#grid1").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Employees"
},
pageSize: 6,
serverPaging: true,
serverSorting: true
},
height: 430,
pageable: true,
resizable: true,
columnResize: adjustLastColumn,
dataBound: adjustLastColumn,
columns: [{
field: "FirstName",
title: "First Name",
width: "100px"
}, {
field: "LastName",
title: "Last Name",
width: "150px"
}, {
field: "Country",
width: "100px"
}, {
field: "City",
width: "100px"
}, {
field: "Title",
width: "200px"
}, {
template: " "
}]
});
</script>
I am using Kendo UI web in an ASP.NET MVC4 project.
I am trying to create a master/details grids and a detailsTemplate for each. I have some question regarding this situation:
What's the difference between hierarchy and details?
Is it possible to populate the details grid in a separate div on a master row click instead of that little triangle?
This code was my starting point : http://jsfiddle.net/WKSkC/2/
var element = $("#grid").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "http://demos.kendoui.com/service/Northwind.svc/Employees"
},
pageSize: 6,
serverPaging: true,
serverSorting: true
},
height: 430,
sortable: true,
pageable: true,
detailInit: detailInit,
dataBound: function () {
this.expandRow(this.tbody.find("tr.k-master-row").first());
},
columns:
[
{field: "FirstName", title: "First Name", width: "110px" },
{ field: "LastName", title: "Last Name", width: "110px" },
{ field: "Country", width: "110px" },
{ field: "City", width: "110px" },
{ field: "Title" }
]});
function detailInit(e) {
$("<div/>").appendTo(e.detailCell).kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "http://demos.kendoui.com/service/Northwind.svc/Orders"
},
serverPaging: true,
serverSorting: true,
serverFiltering: true,
pageSize: 5,
filter: { field: "EmployeeID", operator: "eq", value: e.data.EmployeeID }
},
scrollable: false,
sortable: false,
selectable: true,
pageable: true,
columns:
[
{ field: "OrderID", width: "70px" },
{ field: "ShipCountry", title: "Ship Country", width: "110px" },
{ field: "ShipAddress", title: "Ship Address" },
{ field: "ShipName", title: "Ship Name", width: "200px" }
]
}).data("kendoGrid");
}
Thank you for your help.
You can use the API of the Grid to expand it programatically.
//you can expand it programatically using the expandRow like this
element.on('click','tr',function(){
$(element).data().kendoGrid.expandRow($(this));
})
Here is updated version.
Or you can use make the Grid selectable and use the select event instead of hooking a click event like shown above.
I am using kendo,
and work on it with grid.
I found this demo from the kendo web page
of kendo grid batch editing.
In this demo I am tring to bind my data source.
It works perfectly but only destroys and does not work on them.
I am also trying this:
$(document).ready(function () {
var dataSource = new kendo.data.DataSource({
transport: {
destory: {
url: "<?php echo site_url('search_result_queue/destory_urls_fields').'/'.$id; ?>",
dataType: "json",
}
},
batch: true,
pageSize: 20,
schema: {
model: {
id: "id",
fields: {
regex_id: "ProductName",
value: "Race",
event_url:"url"
}
}
}
});
$("#grid").kendoGrid({
dataSource: dataSource,
navigatable: true,
pageable: true,
height: 430,
toolbar: ["create","save", "cancel"],
columns: [
{ field: "key", title: "field", width: 110 },
{ field: "value", title: "Units In Stock", width: 110 },
{ field: "event_url", width: 110 },
{ command: "destroy", title: " ", width: "90px" }],
editable: true,
destory:"inline"
});
});
Can anyone please know me how can I do this?
You spelled the dataSource transport function "destory" instead of "destroy".
You need to check the spelling of destroy. In your code it is "destory" it should be "destroy".
I am able to get the selected row in kendo grid ( master grid), But I am unable to get the selected row data in detail grid. Please provide me a code sample.
Thanks,
abhi
It is like for the main grid. Being childgrid the grid corresponding to details, do:
var row = childgrid.select();
var data = childgrid.dataItem(row);
console.log("row", row);
console.log("data", data);
Where I defined master grid as:
$("#grid").kendoGrid({
...
detailInit: detailInit,
...
});
And details grid is created using the following function when a row in master grid is expanded:
function detailInit(e) {
childgrid = $("<div/>").appendTo(e.detailCell).kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "http://demos.kendoui.com/service/Northwind.svc/Orders"
},
serverPaging: true,
serverSorting: true,
serverFiltering: true,
pageSize: 5,
filter: { field: "EmployeeID", operator: "eq", value: e.data.EmployeeID }
},
scrollable: false,
sortable: false,
selectable: true,
pageable: true,
columns:
[
{ field: "OrderID", width: "70px" },
{ field: "ShipCountry", title: "Ship Country", width: "110px" },
{ field: "ShipAddress", title: "Ship Address" },
{ field: "ShipName", title: "Ship Name", width: "200px" }
]
}).data("kendoGrid");
}
Running example here : http://jsfiddle.net/OnaBai/2M86L/ (When you click on Show button, its displays in the console of your browser the selected row and its data).
Here a somewhat simpler example on how to get to the data of the clicked row: http://jsfiddle.net/Corne/AQqMH/5/
This is the code where the magic happens:
change: function (arg) {
var selectedData = this.dataItem(this.select());
// selectedData now points to the selected dataSource item!
alert("Clicked id: " + selectedData.id);
}