I'm new to Kendo and working on task which is CRUD using kendo grid with inline edit, but I am facing issue with create operation when I try to insert the data the date field does not working it brings {1/1/0001 12:00Am} value to the controller, I don't know whats happening here because I have used date format with date picker but issue still persist. help me solve this issue thanks.
The code for the grid is :
<script>
$(document).ready(function () {
dataSource = new kendo.data.DataSource({
transport: {
read: {
url: "/Home/LoadEmployeesAsyc",
dataType: "json"
},
update: {
url: "/Home/UpdateEmployeesAsyc",
dataType: "json"
},
destroy: {
url: "/Home/DelectEmployeesAsyc",
dataType: "json"
},
create: {
url: "/Home/CreateEmployeeAsyc",
dataType: "json"
}
},
schema: {
model: {
id: "Id",
fields: {
Id: {type: "number"},
Name: {type: "string"},
Age: {type: "number"},
JoiningDate: {type: "Date"},
DepartmentId: {type: "number"},
profilePic: {type: "string"}
}
}
}
}),
$("#grid").kendoGrid({
dataSource: dataSource,
height: 550,
sortable: true,
pageSize: 10,
groupable: true,
filterable: true,
pageable: {
refresh: true,
pageSizes: true,
buttonCount: 5
},
toolbar: ["create", "save", "cancel"],
columns: [{
field: "Id",
title: "Employee Code"
},
{
field: "Name",
title: "Name"
},
{
field: "Age",
title: "Age"
},
{
field: "JoiningDate",
title: "Joining Date",
width: 100,
format: "{0:MM/dd/yyyy}",
editor: dateEditor
},
{
field: "DepartmentId",
title: "Department Code",
},
{
field: "ProfilePic",
title: "Picture",
template:
'<img height="50" width="50" src="../Content/Images/#:data.ProfilePic#"/>'
},
{command: ["edit", "destroy"], title: " ", width: "250px"}],
editable: "inline"
});
});
function dateEditor(container, options) {
$('<input type="text" name="JoiningDate" id="JoiningDate"/>')
.appendTo(container)
.kendoDatePicker({
format: "MM/dd/yyyy"
});
}
</script>
Code of grid :
public JsonResult LoadEmployeesAsyc()
{
var employees = employeeRepository.GetAll();
return new JsonNetResult() { Data = employees };
}
public JsonResult CreateEmployeeAsyc(Employee employee)
{
employeeRepository.Create(employee);
var employees = employeeRepository.GetAll();
return new JsonNetResult() { Data = employees };
}
Finally i have found solution for my issue:
I have used parameterMap function convert date to this "MM/dd/yyyy" format
parameterMap: function (options, operation) {
if (operation != "read") {
var d = new Date(options.JoiningDate);
options.JoiningDate = kendo.toString(new Date(d), "MM/dd/yyyy");
return options;
}
Put the below script in schema model
JoiningDate: { type: 'date', format: "MM/dd/yyyy" },
and define format in date column :
{
field: "JoiningDate",
title: "Joining Date",
format: '{0:MM/dd/yyyy}',
width: 100
},
Related
In my AngularJS web app, I'm doing a Pivot with devexpress. Particularly, I'm using
the Field Chooser: https://js.devexpress.com/Demos/WidgetsGallery/Demo/PivotGrid/FieldChooser/AngularJS/Light/
In the example there are static data. I have to retrieve them from the server. So, I wrote this:
$scope.testData = null;
$scope.pivotGridDataSource = new DevExpress.data.PivotGridDataSource({
fields: [{
caption: "Nome",
dataField: "fullName",
area: "row"
}, {
caption: "Country",
dataField: "country",
area: "column"
}, {
caption: "Count",
dataField: "countOne",
dataType: "number",
summaryType: "sum",
area: "data"
}],
store: $scope.testData
});
$scope.pivotGridOptions = {
allowSortingBySummary: true,
allowSorting: true,
allowFiltering: true,
showBorders: true,
dataSource: $scope.pivotGridDataSource,
fieldChooser: {
enabled: false
}
},
$scope.fieldChooserOptions = {
dataSource: $scope.pivotGridDataSource,
texts: {
allFields: "All",
columnFields: "Columns",
dataFields: "Data",
rowFields: "Rows",
filterFields: "Filter"
},
width: 400,
height: 400,
bindingOptions: {
layout: "layout"
}
};
// Now I call the function to retrieve data
$scope.getTestData = () => {
// I call the server and save the data
........
$scope.testData = result;
}
The problem is that the table, after the calling, is still empty. There is written "No data". Why? I also tried to write
$scope.pivotGridDataSource.load();
$scope.pivotGridDataSource.reload();
after the call to the server, but it doesn't work yet.
The problem is in your store, so do something like this
var dataStore = new DevExpress.data.CustomStore({
load: function (loadOptions) {
var d = $.Deferred();
$.ajax({
url: UrlApi,
method: "GET",
}).done(function (result) {
d.resolve(result, {
});
});
return d.promise();
},
key: "Id",
});
$scope.pivotGridDataSource = new DevExpress.data.PivotGridDataSource({
.......
store: dataStore
});
See this code below, it is jquery, but AngularJS is basically the same
var dataStore = new DevExpress.data.CustomStore({
load: function (loadOptions) {
var d = $.Deferred();
$.ajax({
url: UrlApi,
method: "GET",
}).done(function (result) {
d.resolve(result, {
});
});
return d.promise();
},
key: "Id",
});
$("#pvtSales").dxPivotGrid({
showBorders: true,
"export": {
enabled: true,
fileName: "Sales"
},
dataSource: {
fields: [{
caption: "Fecha",
dataField: "maeFecha",
width: 350,
area: "row"
}, {
caption: "Nombre",
dataField: "maeNombre",
dataType: "number",
summaryType: "count",
area: "data"
}, {
dataField: "maeGestion",
width: 350,
area: "column"
}],
store: dataStore
}
});
And see the results
I am very new to Kendo and am having some difficulties.
I am having trouble creating a kendo grid where I can use the grid selection feature (http://demos.telerik.com/kendo-ui/grid/selection 2nd example) to do batch inline editing (http://demos.telerik.com/kendo-ui/grid/editing).
Essentially, I want to be able to select multiple CELLS (not rows - so the second example in the link above), and start typing to edit all of the selected cells.
The closest I've gotten so far is creating something where I can select multiple cells and press a button to generate a predetermined value, but this is not what I want.
$(document).ready(function () {
var crudServiceBaseUrl = "//demos.telerik.com/kendo-ui/service",
dataSource = new kendo.data.DataSource({
transport: {
read: {
url: crudServiceBaseUrl + "/Products",
dataType: "jsonp"
},
update: {
url: crudServiceBaseUrl + "/Products/Update",
dataType: "jsonp"
},
destroy: {
url: crudServiceBaseUrl + "/Products/Destroy",
dataType: "jsonp"
},
create: {
url: crudServiceBaseUrl + "/Products/Create",
dataType: "jsonp"
},
parameterMap: function(options, operation) {
if (operation !== "read" && options.models) {
return {models: kendo.stringify(options.models)};
}
}
},
batch: true,
pageSize: 20,
schema: {
model: {
id: "ProductID",
fields: {
ProductID: { editable: false, nullable: true },
ProductName: { validation: { required: true } },
UnitPrice: { type: "number", validation: { required: true, min: 1} },
Discontinued: { type: "boolean" },
UnitsInStock: { type: "number", validation: { min: 0, required: true } }
}
}
}
});
$("#cellSelection").kendoGrid({
dataSource: dataSource,
selectable: "multiple cell",
pageable: {
buttonCount: 5
},
scrollable: false,
navigatable: true,
columns: [
"ProductName",
{ field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: 120 },
{ field: "UnitsInStock", title: "Units In Stock", width: 120 },
{ field: "Discontinued", width: 120 },
{ command: "destroy", title: " ", width: 150 }],
editable: true
});
});
Thanks for any help
Hi i have a Kendo grid which works fine but I was wondering if its possible to add another exact one with a button click so i could have multiple instances of the same grid?
I am getting all the data from a sql database.
My code for the grid is ->
function DisplaySearch() {
var textS = $('#searchBox').val();
Textvalue = textS;
$.ajax({
type: "post",
data: JSON.stringify({
search_string: Textvalue,
}),
url: "Search.aspx/display_search",
dataType: "json",
contentType: 'application/json',
success: function (object) {
response(object);
},
complete: function (object) {
},
error: function (object) {
}
});
function response(object) {
$("#searchGrid").kendoGrid({
dataSource: {
data: object.d,
schema: {
model: {
archive_header_key: { type: "number" },
group_Name: { type: "string" },
Server: { type: "string" },
archive: { type: "string" },
display_name: { type: "string" },
file_written: { type: "number" },
session_ID: { type: "string" },
},
},
pageSize: 20,
},
reorderable: true,
navigatable: true,
selectable: "multiple",
scrollable: true,
sortable: true,
filterable: false,
columnMenu: true,
pageable: {
input: true,
numeric: true
},
columns: [
{ field: "archive_header_key", title: "Key", width: 50 },
{ field: "Server", title: "Server", width: 75 },
{ field: "group_Name", title: "Group", width: 75 },
{ field: "archive", title: "Archive", width: 50 },
{ field: "display_name", title: "Display name", width: 300 },
{ field: "file_written", title: "Files", width: 50 },
{ field: "session_ID", title: "Session", width: 200 },
]
});
}
};
any help would be appreciated.
Of course you can! You only need to make sure that the id of the grid is unique.
This code will add a div to a given container and create a grid - with any button click a new grid. Hope it works, I haven't tested it.
var gridNr = 1;
$("#btn").click(function(e){
$("#gridContainer").append("<div id='grid_'" + gridNr + " />");
$("#grid_" + gridNr).kendoGrid({ ... your grid code here ... });
gridNr++;
})
I am create one sample application and use kendo-ui inline editing grid.
Problem is: not come date field value in action controller.
View page Code is:
<script type="text/javascript">
$(document).ready(function () {
$("#grid").kendoGrid({
dataSource: {
type: "json",
transport: {
read: {
url: "#Html.Raw(Url.Action("CriticalDateList", "Home"))",
type: "POST",
dataType: "json"
},
create: {
url: "#Html.Raw(Url.Action("InsertCriticalDate", "Home"))",
type: 'POST',
dataType: "json"
},
},
change: function (e) {
if (e.action == "itemchange") {
e.items[0].dirtyFields = e.items[0].dirtyFields || {};
e.items[0].dirtyFields[e.field] = true;
}
},
batch: true,
schema: {
data: "Data",
total: "Total",
errors: "Errors",
model: {
id:"Id",
fields: {
Id: { editable: false},
Date: { editable: true, type: "date" },
}
}
},
error: function (e) {
//display_kendoui_grid_error(e);
this.cancelChanges();
},
pageSize:5,
serverPaging: true,
serverFiltering: true,
serverSorting: true
},
pageable: true,
height: 500,
toolbar: ["create"],
columns: [
{field: "Date", title: "Date", format: "{0:dd-MMM-yyyy hh:mm:ss tt}", parseFormats: ["yyyy-MM-dd'T'HH:mm:ss.zz"], width: "130px"},
{ command: ["edit", "destroy"], title: "Action", width: "250px" }],
editable: "inline"
});
Action Code is:
public ActionResult InsertCriticalDate(CriticalDateModels model)
{
return null;
}
output is.
And in my action i am getting different date.
I am trying to implement a custom editor for a column on a grid. The editor uses a DropdownList control.
I am able to get the Dropdown to show upon add/edit, however after making a selection and posting the json that is sent contains the default value, not the value that was selected.
My implementation is below it is an excerpt from a Razor page.
Can you help me figure out what I've done wrong here?
<div id="divGrid"></div>
<script>
$(document).ready(function () {
var dsGroupForm = new kendo.data.DataSource({
transport: {
read: {
url: '#Url.Action("GroupForm_Read", "Settings")',
dataType: "json"
},
update: {
url: '#Url.Action("GroupForm_Update", "Settings")',
dataType: "json"
},
destroy: {
url: '#Url.Action("GroupForm_Destroy", "Settings")',
dataType: "json"
},
create: {
url: '#Url.Action("GroupForm_Create", "Settings")',
dataType: "json"
}
},
batch: false,
pageSize: 5,
schema: {
data: "Data",
total: "Total",
errors: "Errors",
model: {
id: "GroupFormId",
fields: {
GroupFormId: { editable: false, nullable: false },
AdGroupId: { required: false },
AdGroupDisplayName: { validation: { required: true } },
FormKey: { validation: { required: true } },
Ordinal: { validation: { required: true } },
FormType: { validation: { required: false } },
FormTypeDisplay: { defaultValue: { FormTypeName: "Form1", FormTypeId: "1" } },
FormProjectionId: { validation: { required: false } }
}
}
}
});
$("#divGrid").kendoGrid({
autobind: true,
dataSource: dsGroupForm,
pageable: true,
height: 430,
toolbar: [{ name: "create", text: "Add"}],
columns: [
{field: "AdGroupDisplayName", title: "Group" },
{ field: "FormKey", title: "Key" },
{ field: "Ordinal", title: "Ordinal", format: "{0:d}", width: "100px" },
{ field: "FormTypeDisplay", title: "Type", width: "150px", editor: formTypeDropDownEditor, template: "#=FormTypeDisplay.FormTypeName#" },
{ field: "FormProjectionId", title: "ProjectionId" },
{ command: [{ name: "edit", text: "Edit" }, { name: "destroy", text: "Remove" }], title: " ", width: "172px" }
],
editable: "inline"
});
});
var formTypeData = new kendo.data.DataSource({
data: [
{ FormTypeName: "Form1", FormTypeId: "1" },
{ FormTypeName: "Form2", FormTypeId: "2" },
{ FormTypeName: "Form3", FormTypeId: "3" }
]
});
function formTypeDropDownEditor(container, options) {
$('<input name="FormTypeDisplay" required data-text-field="FormTypeName" data-value-field="FormTypeId" data-bind="value:' + options.field + '"/>')
.appendTo(container)
.kendoDropDownList({
autoBind: true,
dataTextField: "FormTypeName",
dataValueField: "FormTypeId",
dataSource: formTypeData
});
}
</script>
I was able to get it working using a MVC wrapper and by following this post:
http://www.sitereq.com/post/kendo-mvc-dropdown-lists-inside-inline-kendo-mvc-grids
The key was adding the save event due to a known Kendo grid bug - seems to me the Kendo docs should have some mention of this issue.
I tried implementing the same logic using the javascript implementation but could not get it working.
Try this
function formTypeDropDownEditor(container, options) {
$('<input name="' + options.field + '" required data-text-field="FormTypeName" data-value-field="FormTypeId" data-bind="value:' + options.field + '"/>')
.appendTo(container)
.kendoDropDownList({
autoBind: true,
dataTextField: "FormTypeName",
dataValueField: "FormTypeId",
dataSource: formTypeData
});
}