I have a Kendo grid which is initially rendered as
$("#dataGrid").kendoGrid({
height: 450,
sortable: true,
columns:[
{field: "Status", title: " ", width:35},
{field: "Year", title:" ", width:50},
{field: "Name", title:" ", width:50}
],
dataSource: surveydataSource
});
My requirement is that on some function call, I want to change the template of "Name" column in kendo grid as :
$("#dataGrid").kendoGrid({
height: 450,
sortable: true,
columns:[
{field: "Status", title: " ", width:35},
{field: "Year", title:" ", width:50},
{field: "Name", title:" ", width:50, template: "<strong>#: name # </strong>"}
],
dataSource: surveydataSource
});
Is there any simpler way to do so rather than building entire grid again ? Can I just change/reset the template of a column in kendo grid ?
Try using the Kendo Grid .setOptions() method to set this up.
var grid = $("#dataGrid").data("kendoGrid");
grid.setOptions({
columns: [
{field: "Status", title: " ", width:35},
{field: "Year", title:" ", width:50},
{field: "Name", title:" ", width:50, template: "<strong>#: name # </strong>"}
]
});
Related
I am traversing through jqGrid. When I press row action button it should get current pressed row data, to do this I need to get row id of that row when clicked.
<tr role="row" id="1" tabindex="-1" class="jqgrow ui-row-ltr ui-widget-content">
This is closest tr and I can reach till this tr easily using below code.
$("#rangemaster").children("tr.jqgrow")
But when I try to get id its showing undefined.
$("#rangemaster").children("tr.jqgrow").attr("id")
I want to pic id value of that tr.jqgrow.
You can find tr with class name and catch your attribute id using jQuery object $(this).
$("#grid").find("tr.jqgrow").each(function(index) {
console.log(index + ": " + $(this).attr("id"));
});
Example:
var mydata = [{
id: "1",
label: "No 1",
number: "123",
status: "OPEN",
},
{
id: "6",
label: "No 2a",
number: "222",
status: "Close"
}
];
var grid = $("#grid");
grid.jqGrid({
datatype: "local",
colNames: ['Col-Id', 'Col-Label', 'Col-Number', 'Col-Status'],
colModel: [{
name: 'id',
index: 'id',
width: 60,
sorttype: "int"
},
{
name: 'label',
index: 'label',
width: 180,
sorttype: "string"
},
{
name: 'number',
index: 'number',
width: 120,
sorttype: "float"
},
{
name: 'status',
index: 'status',
width: 120,
sorttype: "string"
}
],
gridview: true,
sortname: 'id',
treeGrid: true,
treedatatype: 'local',
height: 'auto',
pager: "#gridPager"
});
grid[0].addJSONData({
total: 1,
page: 1,
records: mydata.length,
rows: mydata
});
$("#grid").find("tr.jqgrow").each(function(index) {
console.log(index + ": " + $(this).attr("id"));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jqgrid/5.8.0/css/ui.jqgrid.min.css">
<script type="text/javascript" charset="utf8" src="https://cdnjs.cloudflare.com/ajax/libs/jqgrid/5.8.0/js/jquery.jqGrid.min.js"></script>
<table id="grid"></table>
<div id="gridPager"></div>
I have a problem with the "DataTable" table. The header is not aligned. Please check the picture below after HTML renders how the table header looks.
javascript syntax
$('#TABLE_ID').DataTable( {
paging: false,//without pagination show all data
data: result,
deferRender: true,
scrollY: 200,
scroller: true,
columns: [
{title: "Name", data: "Name", width: "25%"},
{title: "Client Name", data: "Name", width: "25%"},
{title: "Client Type", data: "Client_Type", width: "25%"},
{title: "Booked Duration", data: "Booked_Duration", width: "25%"}
]
}).on('click','tbody tr',function(){
//log
});
How to get Kendo Grid to sort by a specific field if using k-data-source?
Here is my HTML:
Here is my Controller:
getBusinessUnits();
function getBusinessUnits() {
operatorService.getBusinessUnits()
.success(function (data) {
$scope.businessUnits = data;
});
};
$scope.gridOptions = {
batch: false,
reorderable: true,
sortable: true,
editable: "inline",
columns: [
{ template: '<i class="fa fa-chevron-circle-up" style="cursor:pointer" ng-click="MoveUp(#=OperatorBusinessUnitID#)"></i> <i class="fa fa-chevron-circle-down" style="cursor:pointer"></i>', title: "List Order" },
{ field: "OperatorBusinessUnitID", title: "Business Unit ID" },
{ field: "vchDescription", title: "Business Unit Name" },
{ field: "vchOperatorSystemID", title: "Operator System ID"},
{
command: [
{ name: "edit", text: " " },
{ name: "destroy", text: " " },
], title: "Action"
}
]
};
The data returned by the service from the SQL database is returned by the SQL stored procedure in the order that I need it. However, the grid automatically defaults to sorting it my the ID column. Is there any way to tell it which field to sort by default if I am not "creating" a datasource object in my Angular Controller?
Is there is any way to create widgets in kendo grid cell template? here is the sample code.
columns: [{
field: "Name",
title: "Contact Name",
width: 100
},
{
field: "Cost",
title: "Cost",
template: "<input value='#: Cost #'> </input>",// input must be an numerical up down.
}]
I want to create a numerical up down for cost column.
here is the demo
Use the "editor" property in your field definition. You have to specify a function that will append the widget to the row/bound cell.
Here's an example where I put a drop downlist in each of the rows of a grid:
$('#grdUsers').kendoGrid({
scrollable: true,
sortable: true,
filterable: true,
pageable: {
refresh: true,
pageSizes: true
},
columns: [
{ field: "Id", title: "Id", hidden: true },
{ field: "Username", title: "UserName" },
{ field: "FirstName", title: "First Name" },
{ field: "LastName", title: "Last Name" },
{ field: "Email", title: "Email" },
{ field: "Team", title: "Team", editor: teamEdit, template: "#=Team ? Team.Name : 'Select Team'#" },
{ command: { text: "Save", click: saveEmployee }, width: '85px' },
{ command: { text: "Delete", click: deleteEmployee }, width: '85px' }
],
editable: true,
toolbar: [{ name: "create-user", text: "New Employee" }]
});
function teamEdit(container, options) {
$('<input required data-text-field="Name" data-value-field="Id" data-bind="value:' + options.field + '"/>')
.appendTo(container)
.kendoDropDownList({
autoBind: false,
optionLabel: {
Name: "Select Team",
Id: ""
},
dataTextField: "Name",
dataValueField: "Id",
dataSource: model.getAllTeams()
});
}
You can define kendo numeric textbox binding in template. Also define databound function where explictly call kendo.bind method.
I have updated your fiddle as below:
template: "<input value='#=Cost#' data-bind='value:Cost' type='number' data-role='numerictextbox' />"
Updated fiddle
<kendo-grid-column title="Billed" field="billed" class="text-center" id="">
<ng-template kendoGridCellTemplate let-dataItem="dataItem">
<input type="text" width="10px" value="45">
<a class="anchor_pointer">{{dataItem.billed }}</a>
</ng-template>
</kendo-grid-column>
I have a json string which i am using to populate the jqgrid. in the string i have one element which is a hyperlink. the problem is that if i use this string then the grid does not load at all ! here is my code
var json = '{"total": "","page": "1","records": "","rows" : [{"id" :"1", "cell" :["Quantum of Solace","142456", "1234.89", "1234"]},{"id" :"2", "cell":["01/04/2013", "7741", "007997.66", "234"]},{"id" :"3", "cell":["06/08/2013", "78976", "2329.336", "234"]},{"id" :"4", "cell":["01/01/2012", "6678", "2154.22", "1234"]},]}';
jQuery(document).ready(function () {
jQuery("#list").jqGrid({
datatype: 'jsonstring',
datastr:json,
colNames: ['Date', 'Account ', 'Amount', 'Code'],
colModel: [
{ name: 'adate', index: 'adate', width: 90, sorttype: 'date', datefmt: 'Y-m-d' },
{ name: 'account', index: 'account', width: 80, align: 'right', sorttype: 'int' },
{ name: 'amount', index: 'amount', width: 80, align: 'right', sorttype: 'float' },
{ name: 'code', index: 'code', width: 80, align: 'right', sorttype: 'int' }
],
pager: "#pager",
toppager: true,
rowNum: 10,
rowList: [10, 20, 30],
toolbar: [true, "top"],
sortorder: "desc",
viewrecords: true,
gridview: true,
imgpath: 'F:/profile/ProgramFiles/JQGrid/jquery-ui-1.10.3.custom/development-bundle/themes/redmond/images',
autoencode: true,
height: '100%',
caption: "My first grid"
}).navGrid('#pager', { edit: true, add: true, del: true, search: true, refresh: true, cloneToTop: true });
});
do i need to make a change in the colModel ? is that the reason why the grid does not load ? if i replace the link with random text, the grid works just fine.
please help, i really need to implement hyperlinks in the grid and i have to do it on the backend
First of all the usage of imgpath: 'F:/profile/...' options have the same effect like the usage of for example myName: 'user2334092'. Both options will be just ignored by jqGrid as unknown. I wrote you about it in my previous answer.
If you need to have a column of grid with hyperlink which data come from the server you can do the following. You need place all information which you need in the hyperlink as data. For example
[
{
"id": 10,
"href": "http://www.google.com",
"linktext": "Quantum of Solace",
"adate": "2012-12-15",
"account": 142456,
"amount": 1234.89,
"code": 1234
},
{
"id": 20,
"href": "https://stackoverflow.com/questions/17351495/",
"linktext": "Your question",
"adate": "2013-06-28",
"account": 7741,
"amount": 7997.66,
"code": 234
}
]
Then you can use for example
colNames: ["", "Date", "Account", "Amount", "Code"],
colModel: [
{ name: "linktext", width: 200, sortable: false, search: false,
formatter: function (cellValue, options, rowObject) {
return "<a href='" + rowObject.href + "'>" +
$.jgrid.htmlEncode(cellValue) + "</a>";
}},
{ name: "adate", width: 90, formatter: "date", sorttype: "date" },
{ name: "account", width: 80, formatter: "integer", sorttype: "int",
align: "right" },
{ name: "amount", width: 80, formatter: "number", sorttype: "float",
align: "right" },
{ name: "code", width: 80, formatter: "integer", sorttype: "int",
align: "right" }
]
to read and display the data. Usage the function $.jgrid.htmlEncode make you sure that you can currectly display any text in the link event textes like </td>foo "bar's which contains symbols having special meaning in HTML. You can remove formatter: "integer" and formatter: "integer" if you don't want to display numbers with thouthand separator and with decimal separator specified in jqGrid locale file (like from grid.locale-en.js). You can use formatoptions to specify the options of the formatters (see the documentation). The demo uses the code and it display the following results