I am using Kendo Grid to show my search results.
Below is the code for Kendo Grid.
jQuery
$("#grid").kendoGrid({
dataSource: {
data: gridData,
schema: {
data: "Results"
},
pageSize: 20
},
height: 550,
sortable : true,
pageable: {
refresh: true,
pageSizes: true,
buttonCount: 5
},
columns: gridData.viewFields
});
$("#grid").kendoGrid('refresh');
I am adding data dynamically to gridData.viewFields.
Now i am trying to make rows clickable and navigate to display forms of items dynamically. I am struck here for a while. Any contribution is much appreciated.
Thank you.
First, you'll need to configure the grid to allow the row selection by setting the value for the selectable property:
$("#grid").kendoGrid({
selectable: "row"
//Other configuration value...
});
Then, you have to listen to the change event that will be triggered when the user will change the grid selection:
$("#grid").kendoGrid({
//Other configuration value...
change: function() {
var selectedRow = this.select();
//Insert your dynamic for logic here and user selectedRow to get the selected data
}
});
Related
I created a Kendo UI Grid view and it displays data correctly , now what I am trying to achieve is that ; When i Click on a row I want to get the primary key of that row and use it elsewhere I tried many solution in net but I did not work. does anyone knows how to achieve this.
here is my code :
function FondsGrid() {
var sharedDataSource = new kendo.data.DataSource({
transport: {
read: {
url:
"http://localhost:...........",
dataType: "json"
}
},
pageSize: 20
});
var accountGrid = $("#grid-fonds").kendoGrid({
dataSource: sharedDataSource,
sortable: true,
pageable: false,
columns: [
{
field: "CodIsin",
title: " ",
template: '<span class="categ #= CodIsin #"></span>',
attributes: {
class: "text-center"
},
headerattributes: {
style: "text-align:center"
},
width: 35
},
{
field: "LIBELLEPDT",
title: "Nom du fonds",
template: '<div id="#: IdProduitSP #" class="title-fonds #:
IdProduitSP #" data-toggle="popover" ><span class="desc-
fonds">#: LibClassificationNiv2 #</span>#: LIBELLEPDT #
.
.
.
dataBound: function () {
var widthGrid = $('.k-grid-content').width();
$(".k-grid-header").width(widthGrid);
$(".title-fonds").popover({
trigger: 'hover',
html: true,
template: '<div class="popover HalfBaked" role="tooltip">
<div class="arrow"></div><h3 class="popover-header"></h3><div
class="popover-body"></div></div>',
content: function () {
return $('#popover-content').html();
}
});
}
}).getKendoGrid();
/* Initialisation */
$(document).ready(function ($) {
FondsGrid();
});
Your own answer is perfectly valid and is a good example of how you can use jquery to directly target the dom elements that kendo generates. This approach is always valuable when kendo does not offer the functionality you need.
However in this case, the grid widget offers the change event. You can set the grid to be 'selectable' and subscribe to the 'change' event which fires when one or more rows are selected:
selectable: "multiple, row",
change: function(e) {
var selectedRows = this.select();
var selectedDataItems = [];
for (var i = 0; i < selectedRows.length; i++) {
var dataItem = this.dataItem(selectedRows[i]);
selectedDataItems.push(dataItem);
}
// selectedDataItems contains all selected data items
}
Within the handler function, 'this' refers to the grid widget instance and calling the select() function on it returns the selected rows. From those rows, you can then retrieve the datasource items that are bound to them giving you access to the id and any other properties.
See here for more details: https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/events/change
This how I fixed It.
$("#grid-fonds").on("click", "td", function (e) {
var row = $(this).closest("tr");
var value = row.find("td:first").text();
console.log(value);
});
I'm currently using JQuery UI SelectMenu Widget in my application. The options in the selectMenu are filled at runtime based on some values in sql tables.
Based on the option selected in the selectedMenu a datatable needs to be filtered on a specific column.
.Js snippet
$(document).ready(function() {
var table = $('.tableContent').DataTable({
"columnDefs" : [ {
"className" : "dt-center",
"targets" : "_all"
} ]
});
$("#osFamilySelect1").selectmenu({
change : function(event, ui) {
dropdownSelect = ui.item.value;
table.column(9).search(dropdownSelect, false, true, true).draw();
}
});
});
The above works when something is selected, but does not work when the page is first loaded i.e the table is not filtered when the page is first loaded.
How to achieve the same.
Resolved the problem using below:
$(function() { // Shorthand for $(document).ready(function() {
var table = $('.tableContent').DataTable({...});
$('#osFamilySelect1').selectmenu({...});
table.column(9).search($('#osFamilySelect1').val(), false, true, true).draw();
});
I am very new in ASP.NET MVC and Kendo and need your help.
I need to show the data in both grid and list mode in same page. Please suggest what is the best way/approach to achieve this. Shall i use list and grid view both and make them hide and show when user change this or this can be done via CSS on single, please suggest.
It cannot be done in css because Gridview and Listview are two different js components. I suggest you to use a shared datasource and create two different components Demo
$("#grid").kendoGrid({
dataSource: productsDataSource,
autoBind: false,
pageable: true,
height: 300,
selectable: true,
columns: [
{field: "ProductName", title: "ProductName"},
{ field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: "100px" },
{ field: "UnitsInStock", title:"Units In Stock", width: "100px" },
{ field: "Discontinued", width: "100px" }
]
});
$("#listView").kendoListView({
dataSource: productsDataSource,
template: kendo.template($("#template").html())
});
I want to display a grid with no filters on the header using angular ui grid.Currently with the below code im getting filters at the column header.
app.controller('MainCtrl', ['$scope','$http', function ($scope,$http) {
$scope.gridOptions = {};
$http.get('data/grid1.json')
.success(function(data) {
$scope.gridOptions.data = data;
});
}]);
Below is the HTML where the grid is loaded
<div id="grid1" ui-grid="gridOptions" class="grid"></div>
here is a sample how it looks like
http://ui-grid.info/
Could anybody suggest me how to remove these filters
If you are trying to remove a filter for a single column only, columnDefs should specify
enableFiltering
I often do this with an extra column that I add for actions:
var actionCol = {
name: 'Actions',
width: '90',
cellTemplate: actionTemplate,
enableCellEdit: false,
sortable: false,
enableFiltering: false
};
Reference: UI-Grid API
To remove the filter options, you need to configure the grid with enableFiltering: false .
$scope.gridOptions = {
enableFiltering: false
};
So I was trying to bind a complex object , a list, to the detail grid of the the Kendo grid. I understand that you can not do that, so what I did was grab the data and turn it into a JSON and use that as a data source for this grid I created. The grid is created like this
#(Html.Kendo().Grid(Model).Name("Access")
.Columns(columns =>
{
columns.Bound("ProjId").Width(220).Title("Project #");
})
//I tried
.DetailTemplate("<div id=DetailTemplate'></div>")
// I also tried
.ClientDetailTemplateId("<div id=DetailTemplate'></div>")
.Selectable()
.Events(events => events.DetailInit("initDetailGrid"))
.DataSource(dataSource => dataSource
.Ajax()
.ServerOperation(false)
)
)
I then have this in my script
<script type="text/javascript">
function initDetailGrid(e) {
//Hide the grid header
$(".k-grid tbody .k-grid .k-grid-header").hide();
var grid = e.sender;
//Get the data from the selected record
var currentDataItem = grid.dataItem(grid.select());
var newJsonObject = [];
for (var i = 0; i < currentDataItem.taskId.length; i++) {
var taskId = currentDataItem.taskId[i];
newJsonObject.push({
Id: objId,
Interval: currentDataItem.InternalExternal[taskId],
....
});
}
$("#DetailTemplate").kendoGrid({
columns: [
{field:"taskId", template:..stuff..},
{field: "Interval", template: .. stuff..}
],
dataSource: newJsonObject
});
}
</script>
So basically I want to use the $("#DetailTemplate") as the detail grid for the row but it not working and I do not know how to approach it.
EDIT
What I am trying to do is create a Kendo UI grid, via javascript, to use as the detail template for the parent Grid, which is created using the ASP-MVC helper.
It is not getting clear what you are trying to achieve. Did you check the hierarchy demo here?
Basically all you need to replace inside of it is to fill the dataSource directly instead of using transport configuration.
function detailInit(e) {
$("<div/>").appendTo(e.detailCell).kendoGrid({
dataSource: {
//via the data option of the dataSource
data: e.data.NestedArrayFeild
},
scrollable: false,
sortable: 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" }
]
});
}