Is it possible to add graphs using the Google Chart API or any other graph to one column of jqGrid? If it is possible, how? I need to filter each row of jqGrid and show a graph of that particular row in the last column of jqGrid.
You could use a custom formatter:
<script type="text/javascript">
$(function () {
$('#myGrid').jqGrid({
url: '#Url.Action("Data")',
datatype: 'json',
colNames: [ 'Foo', 'Bar', 'Chart' ],
colModel: [
{ name: 'foo', index: 'foo' },
{ name: 'bar', index: 'bar' },
{ name: 'chart', index: 'chart', formatter: chartFormatter },
]
});
});
function chartFormatter(el, cval, opts) {
return '<img src="' + el + '" alt="chart" title="" />';
}
</script>
<div style="height: 500px;">
<table id="myGrid"></table>
</div>
and your controller would return the corresponding Google Chart URLs:
public ActionResult Data()
{
return Json(new
{
rows = new[]
{
new { id = 1, cell = new[] { "foo 1", "bar 1", "https://chart.googleapis.com/chart?cht=p3&chd=t:60,40&chs=250x100&chl=Hello|World" } },
new { id = 2, cell = new[] { "foo 2", "bar 2", "https://chart.googleapis.com/chart?cht=p3&chd=t:60,40&chs=250x100&chl=Hello|World" } },
}
}, JsonRequestBehavior.AllowGet);
}
which gives:
Related
Tried this How to customize edit event in JsGrid as below. But doesnt seem to work
$("#jsgrd").jsGrid({
data: ds,
fields: [{
type: "control",
editItem: editrow(item)
}, ]
});
function editrow(item) {
var $row = this.rowByItem(item);
if ($row.length) {
console.log('$row: ' + JSON.stringify($row)); // I modify this
this._editRow($row);
}
}
The error I get now is "item" not defined.
What I m looking for is, when user clicks edit, I want to get the rowid stored in a hidden col and use it to fetch more data from server and populate outside jsgrid. And avoid changing the row to edit mode
You are not using the documented way. You should use editTemplate.
A simple working example is:
$(document).ready(function() {
$("#grid").jsGrid({
width: "100%",
editing: true,
autoload: true,
data: [ { id:1, name:"Tom"}, {id:2, name:"Dick"}],
fields: [
{ name: "id", type: "text", title: "Id"},
{ name: "name", type: "text", title: "Name",
editTemplate: function(item) {
return "<input type='checkbox'>" + item;
}},
{ type: "control"}
]
});
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid-theme.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.min.js"></script>
<div id="grid">
Test
</div>
For the purpose of illustration, I turn the edit of the name field from the standard text box into a check box.
You could use itemTemplate to get the required result.
itemTemplate is a function to create cell content. It should return markup as string, DomNode or jQueryElement. The function signature is function(value, item), where value is a value of column property of data item, and item is a row data item.
Inside of itemTemplate you can customise your dom element based on your requirement.
Run Demo
$("#jsGrid").jsGrid({
width: "100%",
height: "auto",
paging: false,
//for loadData method Need to set auto load true
autoload: true,
noDataContent: "Directory is empty",
controller: {
loadData: function(filter) {
var data = [{
id: 1,
nickname: "Test",
email: "t#gmail.com"
}, {
id: 2,
nickname: "Test 1",
email: "t1#gmail.com"
}, {
id: 3,
nickname: "Test 2",
email: "t2#gmail.com"
}, {
id: 4,
nickname: "Test 3",
email: "t3#gmail.com"
}];
return data;
}
},
fields: [{
name: "nickname",
type: "text",
width: 80,
title: "Name"
}, {
name: "email",
type: "text",
width: 100,
title: "Email Address",
readOnly: false
}, {
type: "control",
itemTemplate: function(value, item) {
var editDeleteBtn = $('<input class="jsgrid-button jsgrid-edit-button" type="button" title="Edit"><input class="jsgrid-button jsgrid-delete-button" type="button" title="Delete">')
.on('click', function (e) {
console.clear();
if (e.target.title == 'Edit') {
//Based on button click you can make your customization
console.log(item); //You can access all data based on item clicked
e.stopPropagation();
} else {
//Based on button click you can make your customization
console.log('Delete')
}
});
return editDeleteBtn; //
},
}]
});
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid-theme.min.css" />
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.min.js"></script>
<div id="jsGrid"></div>
I have two TreeViews, one has a list of countries, and the other is empty, now I want drag and drop selected countries into the second tree-view. I don't know how to send data to the controller from the TreeView and there is also some text field on the page in a form. So, how can I send both the form data and the TreeView's data to the controller.
Here is the code for the second tree-view which is empty and I want to add the selected nodes to:
#(Html.Kendo().TreeView()
.Name("treeview-right")
.DragAndDrop(true)
.Events(events => events
.Drag("onDrag")
.Drop("onDrop")
)
)
Please try with the below code snippet.
HTML/VIEW
<div style="border: 1px solid green;">
<div id="treeview-left"></div>
</div>
<div style="border: 1px solid red;">
<div id="treeview-right"></div>
</div>
<div id="mydiv" onclick="SaveData()">Click me to save data</div>
<script>
$("#treeview-left").kendoTreeView({
dragAndDrop: true,
dataSource: [
{
id: 11, text: "Furniture", expanded: true, items: [
{ id: 12, text: "Tables & Chairs" },
{ id: 13, text: "Sofas" },
{ id: 14, text: "Occasional Furniture" }
]
},
{
id: 15, text: "Decor", items: [
{ id: 16, text: "Bed Linen" },
{ id: 17, text: "Curtains & Blinds" },
{ id: 18, text: "Carpets" }
]
}
]
});
$("#treeview-right").kendoTreeView({
dragAndDrop: true,
dataSource: [
{
id: 1, text: "Storage", expanded: true, items: [
{ id: 2, text: "Wall Shelving" },
{ id: 3, text: "Floor Shelving" },
{ id: 4, text: "Kids Storage" }
]
},
{
id: 5, text: "Lights", items: [
{ id: 6, text: "Ceiling" },
{ id: 7, text: "Table" },
{ id: 8, text: "Floor" }
]
}
]
});
var selectedID;
function SaveData() {
selectedID = '';
var tv = $("#treeview-right").data("kendoTreeView");
selectedID = getRecursiveNodeText(tv.dataSource.view());
alert(selectedID);
var data = {};
data.str = selectedID;
$.ajax({
url: 'Home/SaveData',
type: 'POST',
data: data,
dataType: 'json',
success: function (result) {
alert("Success");
},
error: function (result) {
alert("Error");
},
});
}
function getRecursiveNodeText(nodeview) {
for (var i = 0; i < nodeview.length; i++) {
selectedID += nodeview[i].id + ",";
//nodeview[i].text; You can also access text here
if (nodeview[i].hasChildren) {
getRecursiveNodeText(nodeview[i].children.view());
}
}
return selectedID;
}
</script>
CONTROLLER
namespace MvcApplication2.Controllers
{
public class HomeController : Controller
{
[HttpPost]
public JsonResult SaveData(string str)
{
foreach (string s in str.Split(','))
{
if (!string.IsNullOrEmpty(s))
{
//Perform your opeartion here
}
}
return Json("");
}
}
}
jsfiddle Demo
i have used kendoui grid like;
<script>
$(function(){
$("#grid").kendoGrid({
dataSource:{
transport: {
read: "<?php echo base_url() ?>index.php/user_management/manage_users/list_view/"
},
schema:{
data: "data"
}
},
columns: [
{
field: "UserID",
hidden:true
},
{
field: "Username",
title:"Username"
},
{ field: "FirstName",
title:"First Name"
},
{field:"MiddleNames"},
{field:"LastName"},
{field:"City"},
{field:"Email"},
{field:"Actions"},
{command: { text: "View", click: showDetails }, title: " ", width: "140px"}
]
});
});
function showDetails(e) {
e.preventDefault();
//i want to get the id of the clicked row and pass that id to the next(redirected) page;
}
</script>
How do I get the current clicked row id i.e UserId column value and pass that id(redirect) to the next page?
From the event that you receive, you get the row that it belongs to:
var row = $(e.target).closest("tr");
And then you get the item using dataItem:
var item = $("#grid").data("kendoGrid").dataItem(row);
So it would be:
function showDetails(e) {
var row = $(e.target).closest("tr");
var item = $("#grid").data("kendoGrid").dataItem(row);
alert("UserId is:" + item.UserId);
}
I am using a Kendo UI grid, which looks like this:
function refreshGrid()
{
$(".k-pager-refresh.k-link").click();
}
var editWindow;
var fields= {FullName: {type: "string"}, Email: {type: "string"}, LogCreateDate: {type: "date"}};
var gridColumns =
[{
width: 90,
command: {
name: "edit",
text: "Edit",
click: function(e) {
var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
editWindow = $("#edit").kendoWindow({
title: "Edit User",
modal: true,
visible: false,
resizable: false,
width: 800,
height: 400,
content: 'myediturl' + dataItem.ID
});
editWindow.data("kendoWindow").center().open();
return false;
}
}
},
{
width: 90,
command: {
name: "delete",
text: "Delete",
click: function(e) {
//alert(this.dataItem($(e.currentTarget).closest("tr")).ID);
var id = this.dataItem($(e.currentTarget).closest("tr")).ID;
if (confirm("Are you sure you want to delete this user?"))
{
$.ajax({
type: 'POST',
url: '#Url.Action("deleteuser","admin",null, "http")' + "/" + this.dataItem($(e.currentTarget).closest("tr")).ID,
success: function (param) { refreshGrid(); },
async: false
});
}
return false;
}
}
},
{
field: "FullName",
title: "Full Name",
type: "string"
},
{
field: "Email",
title: "Email",
type: "string"
},
{
field: "LogCreateDate",
title: "Created",
type: "date",
template: '#= kendo.toString(LogCreateDate,"MM/dd/yyyy") #'
}];
//getSorts the columns of the grid
function getColumns() {
//Parsing the set of columns into a more digestable form
var columns = "";
for (var col in gridColumns) {
if (!!gridColumns[col].field)
{
if (columns.length > 0) {
columns += ";";
}
columns += gridColumns[col].field + "," + gridColumns[col].type;
}
}
return columns;
}
function getSorts(sortObject) {
if (!(sortObject)) {
return "";
}
//Getting the row sort object
var arr = sortObject;
if ((arr) && (arr.length == 0)) {
return "";
}
//Parsing the sort object into a more digestable form
var columnSet = getColumns();
var returnValue = "";
for (var index in arr) {
var type = "";
for (var col in gridColumns) {
if (gridColumns[col].field === arr[index].field) {
type = gridColumns[col].type;
}
}
returnValue += ((returnValue.length > 0) ? (";") : ("")) + arr[index].field + "," + (arr[index].dir === "asc") + "," + type;
}
return returnValue;
}
var grid;
$(function () {
$("#grid").kendoGrid({
dataSource: {
transport: {
read: {
url: "mydatasourceurl",
type: "POST",
},
parameterMap: function (data, type) {
data.filters = JSON.stringify(data.filter);
data.columns = JSON.stringify(getColumns());
data.sorts = JSON.stringify(getSorts(data.sort));
console.log(data);
return data;
}
},
schema: {
fields: fields,
data: "Data",
total: "Total"
},
pageSize: 10,
serverPaging: true,
serverFiltering: true,
serverSorting: true
},
toolbar: [{
name: "Add",
text: "Add new record",
click: function(e){console.log("foo"); return false;}
}],
height: 392,
groupable: false,
sortable: true,
filterable: true,
pageable: {
refresh: true,
pageSizes: true
},
columns: gridColumns
});
grid = $("#grid").data("kendoGrid");
});
My create toolbar action is not triggered on click. How can I resolve this problem, is Kendo UI able to handle toolbar click events? The best solution I came up with looks like this:
$(".k-button.k-button-icontext.k-grid-add").click(function () {
//If the window doesn't exist yet, we create and initialize it
if (!grids[gridContainerID].addWindow.data("kendoWindow")) {
grids[gridContainerID].addWindow.kendoWindow({
title: "Add " + entityName,
width: "60%",
height: "60%",
close: onClose,
open: onAddOpen,
content: addUrl
});
}
//Otherwise we just open it
else {
grids[gridContainerID].addWindow.data("kendoWindow").open();
}
//Centralizing and refreshing to prepare the layout
grids[gridContainerID].addWindow.data("kendoWindow").center();
grids[gridContainerID].addWindow.data("kendoWindow").refresh();
return false;
});
Thanks in advance.
Instead of using that complex selector use the one that Kendo UI creates from name:
toolbar: [
{
name: "Add",
text: "Add new record",
click: function(e){console.log("foo"); return false;}
}
],
and then:
$(".k-grid-Add", "#grid").bind("click", function (ev) {
// your code
alert("Hello");
});
In kendogrid docs here shows that there is no click configuration for grid toolbar buttons like grid.colums.commands.
To solve this problem you can reference following steps:
create a template for toolbar
<script id="grid_toolbar" type="text/x-kendo-template">
<button class="k-button" id="grid_toolbar_queryBtn">Query</button>
</script>
apply tempate to toolbar
toolbar:[{text:"",template: kendo.template($("#grid_toolbar").html())}]
add event listener to button
$("#grid_toolbar_queryBtn").click(function(e) {
console.log("[DEBUG MESSAGE] ", "query button clicked!");
});
I'm using kendoTabStrip as is shown on KendoUI Page. In my case in each div I have rendered partial view. In a few of my partial views I have additionaly kendoGrid.
Problem
When I reload page in any tab and go to tab which contain kendoGrid then it do not work correctly. For example: I'm on tab#0 and go for tab#3 which contain kendoGrid with pagination, then pagination is not display. But when I reload it then pagination works fine.
What can I do to my Grids works inside TabStrip?
Any help would be appreciated.
UPDATE
My implementation of tabstrip
$("#tabStrip").kendoTabStrip({
animation: { open: { effects: false} },
select: function (e) {
document.location.hash = 'tab-' + $(e.item).index();
}
});
var tabStrip = $('#tabStrip').data('kendoTabStrip');
var tabId = 0;
var scheduledId = 0;
if (document.location.hash.match(/tab-/) == 'tab-') {
tabId = document.location.hash.substr(5);
}
if (document.location.hash.match(/scheduled-/) == 'scheduled-') {
tabId = 1;
scheduledId = document.location.hash.substr(11);
editSchedule('/admin/Course/Scheduled/' + scheduledId + '/Edit/' );
}
tabStrip.select(tabStrip.tabGroup.children('li').eq(tabId));
So I need it to make some rewrites from controller.
To fix this problem we must change :
$("#tabStrip").kendoTabStrip({
animation: { open: { effects: false} },
select: function (e) {
document.location.hash = 'tab-' + $(e.item).index();
}
});
for:
$("#tabStrip").kendoTabStrip({
animation: { open: { effects: false} },
select: function (e) {
document.location.hash = 'tab-' + $(e.item).index();
},
activate: function(e) {
$(e.contentElement).find('.k-state-active [data-role="grid"]').each(function() {
$(this).data("kendoGrid").refresh();
});
}
});
Event activate is 'Triggered just after a tab is being made visible, but before the end of the animation'. So we must refresh our grids then becouse js counts widths of hidden elements wrong.
I put together an example of Grids working inside of a TabStrip: http://jsfiddle.net/dpeaep/SJ85S/. Maybe, I am missing part of what you are asking in your question. If so, you can modify the jsfiddle to clarify what the problem is.
HTML
<div id="tabstrip">
<ul>
<li>Grid 1</li>
<li>Grid 2</li>
<li>Grid 3</li>
</ul>
<div><div id="grid1"></div></div>
<div><div id="grid2"></div></div>
<div><div id="grid3"></div></div>
</div>
Javascript
var tabstrip = $("#tabstrip").kendoTabStrip().data("kendoTabStrip");
tabstrip.select(0);
$("#grid1").kendoGrid({
columns: [
{ field: "FirstName", title: "First Name" },
{ field: "LastName", title: "Last Name" }
],
dataSource: {
data: [
{ FirstName: "Joe", LastName: "Smith" },
{ FirstName: "Jane", LastName: "Smith" }
]
}
});
$("#grid2").kendoGrid({
columns: [
{ field: "FirstName", title: "First Name" },
{ field: "LastName", title: "Last Name" }
],
dataSource: {
data: [
{ FirstName: "Betty", LastName: "Lakna" },
{ FirstName: "Fumitaka", LastName: "Yamamoto" },
{ FirstName: "Fred", LastName: "Stevenson" }
]
}
});
$("#grid3").kendoGrid({
columns: [
{ field: "Title", title: "Title" },
{ field: "Year", title: "Year" }
],
dataSource: {
data: [
{ Title: "Lost in Domtar", Year: "2012" },
{ Title: "Evergreen", Year: "2012" },
{ Title: "Fields of Yellow", Year: "2010" },
{ Title: "Where the Whistle Blows", Year: "2008" }
]
}
});