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())
});
Related
I went through devExtreme documentation and examples but I can't find a solution for this...
In a Razor view I am loading a dxScheduler as follows (it's bound to a db object where "orders" and "resources" are defined):
<div id="scheduler"></div>
and
<script>
$(function () {
$("#scheduler").dxScheduler({
dataSource: orders,
views: ["timelineDay"],
currentView: "timelineDay",
showCurrentTimeIndicator: true,
shadeUntilCurrentTime: true,
firstDayOfWeek: 0,
startDayHour: 0,
endDayHour: 24,
cellDuration: 15,
groups: ["areaId"],
resources: [{
fieldExpr: "areaId",
allowMultiple: false,
dataSource: resources,
label: ""
}],
height: "100%"
})
});
</script>
It works fine. However, while keeping cellDuration = 15 mins:
I would like the scheduler to be centered around the current time indicator (i.e. the vertical line that represents datetime.now...)
At the same time "startDayHour" has to be "0" and "endDayHour" has to be "24", as they are now.
Any suggestion would be appreciated. Thanks.
It turned out that I was looking at the "Configuration" section only. But there are "Methods" too...
The answer is to use the "scrollToTime" method.
Reference:
https://js.devexpress.com/Documentation/ApiReference/UI_Widgets/dxScheduler/Methods/#scrollToTimehours_minutes_date.
Updated working example (it's straightforward then to set the argument of "scrollToTime" dynamic).
$(function () {
$("#scheduler").dxScheduler({
dataSource: orders,
views: ["timelineDay"],
currentView: "timelineDay",
showCurrentTimeIndicator: true,
shadeUntilCurrentTime: true,
firstDayOfWeek: 0,
startDayHour: 0,
endDayHour: 24,
cellDuration: 15,
groups: ["areaId"],
resources: [{
fieldExpr: "areaId",
allowMultiple: false,
dataSource: resources,
label: ""
}],
height: "100%",
onContentReady: function (e) {
e.component.scrollToTime(5, 30, new Date());
}
})
});
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
}
});
I am very new in ext.net mvc. I have problem of binding grid in ext.net mvc.
My code as below. I checked service return json data. But not show any data in grid view. Any missing in my code.
How to bind json data in grid? Please advice me any other ways. I have not found many sample in online regarding ext.net mvc.
#{
ViewBag.Title = "A Task";
//Layout = "~/Views/Shared/_BaseLayout.cshtml";
}
<script type="text/javascript" src="http://extjs-public.googlecode.com/svn/tags/ext-2.2/release/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="http://extjs-public.googlecode.com/svn/tags/ext-2.2/release/ext-all.js"></script>
<script type="text/javascript">
Ext.onReady(function () {
var store = new Ext.data.JsonStore({
url: 'http://localhost:49813/Areas/ASample/WcfService/AService.svc/GetDatas',
root: 'GetDatas',
idProperty: 'Id',
fields: ['Id', 'Employee_Name'],
remoteSort: true,
autoLoad: true
});
var cm = new Ext.grid.ColumnModel({
columns: [
{ header: 'Id', dataIndex: 'Id', hidden: true },
{ header: 'Employee Name', dataIndex: 'Employee_Name', width: 100 }
],
defaults: {
sortable: true,
scope: this,
menuDisabled: true,
align: 'left'
}
});
alert(1);
var grid = new Ext.grid.GridPanel({
title: 'Employees',
store: store,
colModel: cm,
renderTo: Ext.get('divGrid'),
width: 500,
height: 350,
border: true,
loadMask: true
});
});
</script>
<h2>A Task</h2>
Loading the store is async, so who says if the store is loaded? Try listen to the store.load event and from there do a reconfigure on the grid.
You can also set autoLoad to false and manually load the store.
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" }
]
});
}
In an ASP.NET MVC application using for the first time jqGrid.
I have a menu, I call "employee" from the menu in the master page like this :
<script language="javascript" type="text/javascript">
$(document).ready(function() {
$(".mnuEmployee").click(function() {
$.post("/Employee/Index", null, function(data) {
$("#text").html(data);
});
});
});
</script>
In the controller, I have this :
[AcceptVerbs(HttpVerbs.Post)]
public ActionResult Index()
{
EmployeeModel model = new EmployeeModel();
model.List = _employeeService.List();
model.Languages = _languageService.List();
return View("Index", model);
}
In the View (Index.ascx), I have this :
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery("#sandgrid").jqGrid({
url: '/Employee/MyGridData/',
datatype: 'json',
mtype: 'GET',
height: 255,
width: 600,
colNames: ['Index', 'Name', 'Code'],
colModel: [
{ name: 'item_id', index: 'item_id', width: 65 },
{ name: 'item', index: 'item', width: 150 },
{ name: 'item_cd', index: 'item_cd', width: 100}],
pager: jQuery('#sandgridp'),
rowNum: 10,
rowList: [5, 10, 20, 50],
sortname: 'item_id',
sortorder: "desc",
viewrecords: true,
caption: 'Liste des employés'
});
});
</script>
<table id="sandgrid" cellpadding="0" cellspacing="0"></table>
<div id="sandgridp" style="text-align:center;"></div>
The problem is in this last part (I think), I have all datas in my model, I'd like display employee list in a jqGrid and languages (and more are coming) in classic textbox, textarea, ... How can I use the "model.List" (IList) to show in the grid ?
Thanks,
What is the reason to show languages in textbox/textarea? Did you mean select? If so then look at http://www.trirand.com/jqgridwiki/doku.php?id=wiki:common_rules, for the "select" edit type. Note that you can have multiselect list.
If you just want to display languages, then do this in your model:
model.Languages = string.Join(_languageService.List().Select(x => x.Name).ToArray(), ",");
And then jqGrid will display your languages as a string, comma-separated.
But I'd suggest you to decide (since it's not clear from the Q):
how you want to display languages/list
do you want to edit them and how
Also take a look at custom formatters http://www.trirand.com/jqgridwiki/doku.php?id=wiki:custom_formatter, you can write a function to convert your languages list into anything you want, on input you get data, on output you return string with any HTML. Don't forget "unformatter" if you need to edit the cell value. For example, I use custom formatter to display checkbox images instead of true/false text.
I'm a little confused. You have your jqGrid set up to do an AJAX query for it's data as JSON so there's no need to include in in the Index view's model.
url: '/Employee/MyGridData/',
datatype: 'json',
To use the AJAX method your controller needs a MyGridData action.
[AcceptVerbs(HttpVerbs.Get)]
public JsonResult MyGridData ()
{
var list = _employeeService.List();
return Json(list);
}
Also, the name and index properties in the colModel must match the property names in your model.