Related
In my project am showing js grid from partial view. so tried like this
View
<div id="searchgrid" class="col-lg-12">
#Html.Partial("ResultGrid", new List<SCM_MVC.Models.User>(), new ViewDataDictionary(this.ViewData) { { "index" , ViewData["Form"] } })
</div>
<script src="~/assets/js/jquery-1.10.2.js"></script>
<script>
var url = '#Url.Action("ResultGrid", "User", new { xEdit = ViewData["Form"]})';
$('#btnloadgrid').click(function () {
$('#searchgrid').load(url);
})
</script>
Partial View
#model IEnumerable<SCM_MVC.Models.User>
#{
/**/
/**/
#section head {
#*<link rel="stylesheet" type="text/css" href="~/SCM/jsgrid/css/demos.css" />*#
<link rel="stylesheet" type="text/css" href="~/SCM/jsgrid/css/jsgrid.css" />
<link rel="stylesheet" type="text/css" href="~/SCM/jsgrid/css/theme.css" />
<script src="~/SCM/jsgrid/js/jquery-1.8.3.js"></script>
<script src="~/SCM/jsgrid/src/jsgrid.core.js"></script>
<script src="~/SCM/jsgrid/src/jsgrid.load-indicator.js"></script>
<script src="~/SCM/jsgrid/src/jsgrid.load-strategies.js"></script>
<script src="~/SCM/jsgrid/src/jsgrid.sort-strategies.js"></script>
<script src="~/SCM/jsgrid/src/jsgrid.field.js"></script>
<script src="~/SCM/jsgrid/src/jsgrid.core.js"></script>
<script src="~/SCM/jsgrid/src/fields/jsgrid.field.text.js"></script>
<script src="~/SCM/jsgrid/src/fields/jsgrid.field.number.js"></script>
<script src="~/SCM/jsgrid/src/fields/jsgrid.field.select.js"></script>
<script src="~/SCM/jsgrid/src/fields/jsgrid.field.checkbox.js"></script>
<script src="~/SCM/jsgrid/src/fields/jsgrid.field.control.js"></script>
}
/**/
<table id="jsGrid"></table>
#section scripts {
<script src="http://js-grid.com/js/jsgrid.min.js"></script>
<script>
$(function () {
$("#jsGrid").jsGrid({
height: "70%",
width: "100%",
filtering: true,
editing: true,
inserting: true,
sorting: true,
paging: true,
autoload: true,
pageSize: 15,
pageButtonCount: 5,
deleteConfirm: "Do you really want to delete the user?",
controller: {
loadData: function (filter) {
return $.ajax({
type: "GET",
url: "/api/data",
data: filter,
dataType: "json"
});
},
insertItem: function (item) {
return $.ajax({
type: "POST",
url: "/api/data",
data: item,
dataType: "json"
});
},
updateItem: function (item) {
return $.ajax({
type: "PUT",
url: "/api/data/" + item.ID,
data: item,
dataType: "json"
});
},
deleteItem: function (item) {
return $.ajax({
type: "DELETE",
url: "/api/data/" + item.ID,
dataType: "json"
});
}
},
fields: [
{ name: "user_id", title: Resources.Resource.user_id, type: "text", width: 150 },
{ name: "username", title: Resources.Resource.user_name, type: "text", width: 50 },
{ name: "mailid", title: Resources.Resource.mailid, type: "text", width: 200 },
{ name: "role", title: Resources.Resource.role, type: "text", width: 50 },
{ name: "dept", title: Resources.Resource.dept, type: "text", width: 100 },
{ name: "designation", title: Resources.Resource.designation, type: "text", width: 100 },
{ name: "city", title: Resources.Resource.city, type: "text", width: 100 },
{ name: "country", title: Resources.Resource.country, type: "text", width: 100 },
{ type: "control" }
]
});
});
</script>
}
}
DataController
namespace SCM_MVC.Controllers
{
public class DataController : ApiController
{
// GET: Data
public IEnumerable<object> Get()
{
//ClientFilter filter = GetFilter();
//var result = DB.Client.Where(c =>
// (String.IsNullOrEmpty(filter.Name) || c.Name.Contains(filter.Name)) &&
// (String.IsNullOrEmpty(filter.Address) || c.Address.Contains(filter.Address)) &&
// (!filter.Married.HasValue || c.Married == filter.Married) &&
// (!filter.Country.HasValue || c.Country == filter.Country)
//);
Models.User xuser = new Models.User();
List<Models.User> xuserlist = new List<Models.User>();
//if (ViewData["index"] == null)
//{
// ViewData["index"] = xEdit;
//}
xuser.UserId = "US-0001";
xuser.UserName = "Robert";
xuser.Mailid = "robert#gmail.com";
xuser.Role = "Admin";
xuser.Designation = "Sales Admin";
xuser.Dept = "Sales";
xuser.State = "Tamil Nadu";
xuser.Country = "India";
xuserlist.Add(xuser);
return xuserlist;
}
}
}
UserController
public ActionResult ResultGrid(string xEdit)
{
Models.User xuser = new Models.User();
List<Models.User> xuserlist = new List<Models.User>();
xuser.UserId = "US-0001";
xuser.UserName = "Robert";
xuser.Mailid = "robert#gmail.com";
xuser.Role = "Admin";
xuser.Designation = "Sales Admin";
xuser.Dept = "Sales";
xuser.State = "Tamil Nadu";
xuser.Country = "India";
xuserlist.Add(xuser);
return PartialView(xuserlist);
}
But in Screen its not showing. What am doing wrong here?
Thanks
Am using Visual Studio 2017 ASP.Net MVC
I am trying to display ScheduleState for UserStories in a grid.
I am not able to display ScheduleState as editable bar, like we see in Rally, with DPCA bar-columns for each state.
For e.g. SimpleTreeGrid example on below link shows user-story schedule state as DPCA bar-columns.
https://help.rallydev.com/apps/2.1/doc/#!/example/simple-tree-grid
Code is as below.
<!DOCTYPE html>
<html>
<head>
<title>Custom Store Grid Example</title>
<script type="text/javascript" src="/apps/2.1/sdk.js"></script>
<script type="text/javascript">
Rally.onReady(function() {
Ext.define('Rally.example.CustomStoreGrid', {
extend: 'Rally.app.App',
componentCls: 'app',
launch: function() {
console.log('launch');
Ext.create('Rally.data.wsapi.Store', {
model: 'userstory',
autoLoad: true,
listeners: {
load: this._onDataLoaded,
scope: this
},
fetch: ['FormattedID', 'ScheduleState', 'ScheduleStatePrefix' ]
});
},
_onDataLoaded: function(store, data) {
console.log('_onDataLoaded data', data);
this.add({
xtype: 'rallygrid',
showPagingToolbar: false,
showRowActionsColumn: false,
editable: false,
store: Ext.create('Rally.data.custom.Store', {
data: data
}),
columnCfgs: [
{
xtype: 'templatecolumn',
text: 'ID',
dataIndex: 'FormattedID',
width: 100,
tpl: Ext.create('Rally.ui.renderer.template.FormattedIDTemplate')
},
{
text: 'Prefix',
dataIndex: 'ScheduleStatePrefix',
xtype: 'templatecolumn',
tpl: Ext.create('Rally.ui.renderer.template.ScheduleStateTemplate', { field: 'ScheduleStatePrefix'}),
},
{
text: 'State',
dataIndex: 'ScheduleState',
xtype: 'templatecolumn',
tpl: Ext.create('Rally.ui.renderer.template.ScheduleStateTemplate', { field: 'ScheduleState'}),
}
]
});
}
});
Rally.launchApp('Rally.example.CustomStoreGrid', {
name: 'Custom Store Grid Example'
});
});
</script>
<style type="text/css">
</style>
</head>
<body></body>
</html>
Does it need to be a custom store?
If not, the following _onDataLoaded works:
_onDataLoaded: function(store, data) {
console.log('_onDataLoaded data', data);
this.add({
xtype: 'rallygrid',
showPagingToolbar: false,
showRowActionsColumn: false,
editable: true,
store: store,
columnCfgs: [
{
text: 'ID',
dataIndex: 'FormattedID',
width: 100
},
{
text: 'Prefix',
dataIndex: 'ScheduleStatePrefix'
},
{
text: 'State',
dataIndex: 'ScheduleState'
}
]
});
}
});
I'm trying to filter calendar MeetingAttendees which can have multiple users. I've built a filter and tested with various options, but it doesn't work. The basic example shows how to filter a calendar owner (which is a single value) and it works fine for me. But Attendees is an array and when I'm trying to filter that all my events disappear.
Here is my filter code:
var checked = $.map($("#teamMembers :checked"), function (checkbox) {
return parseInt($(checkbox).val());
});
var filter = {
logic: "or",
filters: $.map(checked, function (value) {
return {
operator: "eq",
field: "Attendees",
value: value
};
})
};
var scheduler = $("#scheduler").data("kendoScheduler");
scheduler.dataSource.filter(filter);
Attendees in MeetingViewModel are loaded as an array:
Attendees = meeting.MeetingAttendees.Select(m => m.AttendeeID).ToArray(),
Here is the scheduler configuration:
#(Html.Kendo().Scheduler<Itsws.Models.MeetingViewModel>()
.Name("scheduler")
.Date(DateTime.Today)
.Editable(editable =>
{
editable.TemplateName("CustomEditorTemplate");
})
.StartTime(new DateTime(DateTime.Today.Year, DateTime.Today.Month, DateTime.Today.Day, 7, 00, 00))
.Height(600)
.Views(views =>
{
views.DayView();
views.WeekView(weekView => weekView.Selected(true));
views.MonthView();
views.AgendaView();
views.TimelineView();
})
.Timezone("Etc/UTC")
.DataSource(d => d
.Model(m =>
{
m.Id(f => f.MeetingID);
m.Field(f => f.Title).DefaultValue("No title");
m.RecurrenceId(f => f.RecurrenceID);
m.Field(f => f.Title).DefaultValue("No title");
})
.Read("Meetings_Read", "Scheduler")
.Create("Meetings_Create", "Scheduler")
.Destroy("Meetings_Destroy", "Scheduler")
.Update("Meetings_Update", "Scheduler")
)
)
Apparently operator field can also be a function that does filter comparison. Here is the sample code generously provided by Telerik support.
More info here:
http://www.telerik.com/forums/how-to-filter-array-type-of-resource-(e-g-attendees)
<!DOCTYPE html>
<html>
<head>
<base href="http://demos.telerik.com/kendo-ui/scheduler/resources-grouping-vertical">
<style>html { font-size: 12px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.common.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.moonlight.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.dataviz.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.dataviz.moonlight.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.default.mobile.min.css" />
<script src="http://cdn.kendostatic.com/2015.1.408/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2015.1.408/js/kendo.all.min.js"></script>
<script src="http://cdn.kendostatic.com/2015.1.408/js/kendo.timezones.min.js"></script>
</head>
<body>
<div id="example" class="k-content">
<div id="team-schedule">
<div id="attendees">
<ul>
<li>Alex: <input type="checkbox" id="alex" value="1"></li>
<li>BoB: <input type="checkbox" id="bob" value="2"></li>
<li>Charlie: <input type="checkbox" id="charlie" value="3"></li>
</ul>
</div>
</div>
<div id="scheduler"></div>
</div>
<script>
$(function() {
$("#scheduler").kendoScheduler({
date: new Date("2013/6/13"),
height: 600,
views: [
"timelineMonth"
],
timezone: "Etc/UTC",
dataSource: {
batch: true,
transport: {
read: {
url: "http://demos.telerik.com/kendo-ui/service/meetings",
dataType: "jsonp"
},
update: {
url: "http://demos.telerik.com/kendo-ui/service/meetings/update",
dataType: "jsonp"
},
create: {
url: "http://demos.telerik.com/kendo-ui/service/meetings/create",
dataType: "jsonp"
},
destroy: {
url: "http://demos.telerik.com/kendo-ui/service/meetings/destroy",
dataType: "jsonp"
},
parameterMap: function(options, operation) {
if (operation !== "read" && options.models) {
return {models: kendo.stringify(options.models)};
}
}
},
schema: {
model: {
id: "meetingID",
fields: {
meetingID: { from: "MeetingID", type: "number" },
title: { from: "Title", defaultValue: "No title", validation: { required: true } },
start: { type: "date", from: "Start" },
end: { type: "date", from: "End" },
startTimezone: { from: "StartTimezone" },
endTimezone: { from: "EndTimezone" },
description: { from: "Description" },
recurrenceId: { from: "RecurrenceID" },
recurrenceRule: { from: "RecurrenceRule" },
recurrenceException: { from: "RecurrenceException" },
roomId: { from: "RoomID", nullable: true },
attendees: { from: "Attendees", nullable: true },
isAllDay: { type: "boolean", from: "IsAllDay" }
}
}
}
},
group: {
resources: ["Rooms", "Attendees"],
orientation: "vertical"
},
resources: [
{
field: "roomId",
name: "Rooms",
dataSource: [
{ text: "Meeting Room 101", value: 1, color: "#6eb3fa" },
{ text: "Meeting Room 201", value: 2, color: "#f58a8a" }
],
title: "Room"
},
{
field: "attendees",
name: "Attendees",
dataSource: [
{ text: "Alex", value: 1, color: "#f8a398" },
{ text: "Bob", value: 2, color: "#51a0ed" },
{ text: "Charlie", value: 3, color: "#56ca85" }
],
multiple: true,
title: "Attendees"
}
]
});
$("#attendees :checkbox").change(function(e) {
var checked = $.map($("#attendees :checked"), function(checkbox) {
return parseInt($(checkbox).val());
});
var scheduler = $("#scheduler").data("kendoScheduler");
scheduler.dataSource.filter({
field: "attendees",
operator: function(item, value) {
var found = true;
for (var i = 0; i < checked.length; i++) {
if (item.indexOf(checked[i]) < 0) {
found = false;
}
}
return found;
}
});
});
});
</script>
</body>
</html>
I am trying out the open source Kendo Grid for the first time. I have the basic grid up and running just fine, but now I need to add a search feature, with a search on first and last names. I am trying to do it in ajax but I am stuck on an error:
Error: Cannot call method 'read' of undefined
my code:
<div id="search-index">
<div class="editor-field">
<label>First Name:</label>
#Html.TextBox("FirstName")
<label style = "margin-left: 15px;">Last Name:</label>
#Html.TextBox("LastName", "", new { style = "margin-right: 15px;" })
</div>
<div id="search-controls-index">
<input type="button" id="searchbtn" class="skbutton" value="Search" />
<input type="button" id="addPersonbtn" class="skbutton" value="Add New Person" onclick="location.href='#Url.Action("AddPerson", "Person")'"/>
</div>
</div>
<div id="index-grid"></div>
</div>
$(document).ready(function () {
var grid = $('#index-grid').kendoGrid({
height: 370,
sortable: true,
scrollable: true,
pageable: true,
dataSource: {
pageSize: 8,
transport: {
read: "/Home/GetPeople",
dataType:"json"
}
},
columns: [
{ field: "FirstName", title: "First Name" },
{ field: "LastName", title: "Last Name" },
{ field: "Gender", title: "Gender" },
{ field: "DOB", title: "Date of Birth", template: '#= kendo.toString(new Date(parseInt(DOB.substring(6))), "MM/dd/yyyy") #' },
{ field: "IsStudent", title: "Is a Student?" }]
});
$("#searchbtn").on('click', function () {
var fsname = $("#FirstName").val();
var ltname = $("#LastName").val();
$.ajax({
type: 'GET',
url: '#Url.Content("~/Home/GetPeople")',
data: { fname: fsname, lname: ltname },
success: function (data) {
grid.dataSource.read();
},
error: function () {
$("#index-grid").html("An error occured while trying to retieve your data.");
}
});
});
});
Should matter, but here is my controller (using asp MVC 3):
public JsonResult GetPeople(string fname, string lname)
{
if (((fname == "") && (lname == "")) || ((fname == null) && (lname == null)))
{
var peopleList = repo.GetPeople();
return Json(peopleList, JsonRequestBehavior.AllowGet);
}
else
{
var personResult = repo.GetSearchResult(fname, lname);
return Json(personResult, JsonRequestBehavior.AllowGet);
}
}
The problem is that $("#grid").kendoGrid() returns a jQuery object which doesn't have a dataSource field. Here is how to get a reference to the client-side object: http://docs.kendoui.com/getting-started/web/grid/overview#accessing-an-existing-grid
Hello
I want to show "export to excel" button in the pager of jqgrid. I tried many ways, read many articles/posts, but I don't see this button. Documentation does not have anything useful too. Which actions should I do to see this button
Ps. I use ASP.NET MVC
PSS. my code is
<link href="../../Scripts/jquery.UI/css/redmond/jquery-ui-1.8.1.custom.css" rel="Stylesheet"
type="text/css" />
<link href="../../Scripts/jquery.jqGrid/css/ui.jqgrid.css" rel="Stylesheet" type="text/css" />
<script type="text/javascript" src="../../Scripts/jquery.jqGrid/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../../Scripts/jquery.jqGrid/js/i18n/grid.locale-ru.js"></script>
<script type="text/javascript" src="../../Scripts/jquery.jqGrid/js/jquery.jqGrid.min.js"></script>
<table id="EmployeeTable">
</table>
<div id="EmployeeTablePager">
</div>
<script type="text/javascript">
jQuery(document).ready(function () {
jQuery('#EmployeeTable').jqGrid({
url: '/Employee/EmployeeData',
datatype: "json",
mtype: 'POST',
jsonReader: {
page: "page",
total: "total",
records: "records",
root: "rows",
repeatitems: false,
id: ""
},
colNames: ['Id', 'Имя', 'Фамилия', 'Email', 'Date'],
colModel: [
{ name: 'Id', width: 20 },
{ name: 'FirstName', width: 105 },
{ name: 'LastName', width: 100 },
{ name: 'Email', width: 150 },
{ name: 'Date', width: 150, formatter: ndateFormatter }
],
pager: '#EmployeeTablePager',
excel: true,
viewrecords: true
}).jqGrid('navButtonAdd',
'#EmployeeTablePager',
{ caption: " Export to Excel ",
buttonicon: "ui-icon-bookmark",
onClickButton: genCSV, position: "last"
});
});
function genCSV() {
alert('a');
}
function ndateFormatter(cellval, opts, rwdat, _act) {
var time = cellval.replace(/\/Date\(([0-9]*)\)\//, '$1');
var date = new Date();
date.setTime(time);
return date.toDateString();
}
</script>
but I don't see the excel import button.
http://ru.magicscreenshot.com/jpg/t97BDzCIO0Q.html
why?
Assuming markup of
<table id="jqgrid"></table>
<div id="pager"></div>
Something along the lines of
$('#grid')
.jqGrid({
datatype: "clientSide",
height: 190,
colNames: headers,
colModel: model,
multiselect: true,
pager: '#pager',
pgbuttons: false,
pginput: false,
caption: "Random Data",
deselectAfterSort: false,
width: 930
})
.jqGrid('navButtonAdd',
'#pager',
{caption:" Export to Excel ",
buttonicon:"ui-icon-bookmark",
onClickButton: genCSV, position:"last"});
genCSV will be a JavaScript function that will make the call to the controller action to generate a CSV file.
Here's an example, in combination with jQuery flot. Create some data, select some grid rows and then click the generate graph button in the bottom left of the grid to plot the points. Note that this will not work in Internet Explorer less than 8 as it requires support for the HTML 5 canvas element (and I haven't bothered to include excanvas).
EDIT:
Your markup is not working because you need to initialize a navGrid before being able to set a custom button (see note on page). You can do this like so
jQuery(document).ready(function () {
jQuery('#EmployeeTable').jqGrid({
url: '/Employee/EmployeeData',
datatype: "json",
mtype: 'POST',
jsonReader: {
page: "page",
total: "total",
records: "records",
root: "rows",
repeatitems: false,
id: ""
},
colNames: ['Id', 'Имя', 'Фамилия', 'Email', 'Date'],
colModel: [
{ name: 'Id', width: 20 },
{ name: 'FirstName', width: 105 },
{ name: 'LastName', width: 100 },
{ name: 'Email', width: 150 },
{ name: 'Date', width: 150, formatter: ndateFormatter }
],
pager: '#EmployeeTablePager',
excel: true,
viewrecords: true
})
/* Need to initialize navGird before being able to set any custom buttons */
.jqGrid('navGrid', '#EmployeeTablePager', {
add: false,
edit: false,
del: false,
search: false,
refresh: false
}).jqGrid('navButtonAdd',
'#EmployeeTablePager',
{ caption: " Export to Excel ",
buttonicon: "ui-icon-bookmark",
onClickButton: genCSV, position: "last"
});
});
function genCSV() {
alert('a');
}
function ndateFormatter(cellval, opts, rwdat, _act) {
var time = cellval.replace(/\/Date\(([0-9]*)\)\//, '$1');
var date = new Date();
date.setTime(time);
return date.toDateString();
}
What I did was to create a csv file on the server and display a download link next to the grid in my view.
It's not as slick as what you have in mind but it is quick and easy to implement.
Extension method to create a csv file from a list (from another post on SO):
public static string AsCsv<T>(this IEnumerable<T> items)
where T : class
{
var csvBuilder = new StringBuilder();
var properties = typeof(T).GetProperties();
foreach (T item in items)
{
//string line = properties.Select(p => p.GetValue(item, null).ToCsvValue()).ToArray().Join(",");
string line= string.Join(", ", properties.Select(p => p.GetValue(item, null).ToCsvValue()).ToArray());
csvBuilder.AppendLine(line);
}
return csvBuilder.ToString();
}
private static string ToCsvValue<T>(this T item)
{
if (item is string)
{
return string.Format("\"{0}\"", item.ToString().Replace("\"", "\\\""));
}
double dummy;
if (double.TryParse(item.ToString(), out dummy))
{
return string.Format("{0}", item.ToString());
}
return string.Format("\"{0}\"", item.ToString());
}
Controller:
model.AListOfData.ToArray().AsCsv();
using (StreamWriter sw = System.IO.File.CreateText(errorFilePath))
{
sw.Write(values);
}
model.ErrorFullFileName = errorFilePath;
In the view:
<%=Html.ImageLink("", "AssetUpload", "DownloadErrors", "/?filename=" + Model.ErrorFullFileName, "/Content/Icons/excel.png", "Download errors and warnings", "imagelink")%>
I used this and it works pretty well
jQuery("#table_resultats").jqGrid('navGrid', "#yourpager").jqGrid( //#pager
'navButtonAdd', "#yourpager", {
caption : "Excel export",
buttonicon : "ui-icon-arrowthickstop-1-s",
onClickButton : null,
position : "first",
title : Excel export,
cursor : "pointer"
});