Related
I am using kendo grid with MVC in a .NET project. Two columns of my grid are templates and those have an input text inside of the template. That way every time the grid loads the input texts are always visible and available for change.
When the user clicks on save, I need to check all the rows of the grid, at client side and get the values of those two columns (the only two have templates) and get the values of the input box. So the result I am expecting is a list with two columns that have the last values inserted by the user in the input boxes and not the original value.
Here is my code:
//Grid Data source
var dataSource = new kendo.data.DataSource({
transport: {
read: { url: "/CsmForecastRegistration/GetForecast", cache: false }
},
error: function (e) {
openDialog(e.errorThrown);
},
batch: true,
pageSize: 20,
schema: {
data: "Data",
total: "Total",
errors: "Errors",
model: {
id: "ForecastItemId",
fields: {
ForecastItemId: { editable: false },
RecordId: { editable: false },
SaleId: { editable: false },
IsUpSell: { editable: false },
BusinessName: { editable: false },
HealthScore: { editable: false },
CurrencySymbol: { editable: false },
ForecastWeekTotalContractValue: { editable: true },
ForecastWeekMonths: { editable: true },
ForecastWeek12Months: { editable: false }
}
}
}
});
$("#grdCsmForecast").kendoGrid({
dataSource: dataSource,
scrollable: true,
dataBound: onDataBound,
toolbar: ["excel"],
excel: {
allPages: true,
fileName: "CSMForecast.xlsx"
},
pageable: true,
columns: [
{ title: "", width: "80px", template: $("#comments-template").html(), attributes: { style: "text-align:center; background-color: white;" } },
{
title: "Contract Details",
columns: [
{ field: "RecordId", title: "RecordId", width: "90px", attributes: { "class": "contractDetailGridStyle" } },
{ field: "SaleId", title: "SaleId", width: "90px", attributes: { "class": "contractDetailGridStyle" } },
{ field: "IsUpSell", title: "Upsell?", width: "75px", attributes: { "class": "contractDetailGridStyle" } },
{ field: "BusinessName", title: "Business Name", width: "250px", attributes: { "class": "contractDetailGridStyle"} },
{ field: "HealthScore", title: "Health Score", width: "95px", attributes: { "class": "contractDetailGridStyle"} },
{ field: "CurrencySymbol", title: "CCY", width: "50px", attributes: { "class": "contractDetailGridStyle" } }
]
},
{
title: "Forecast Week",
columns: [
{ field: "ForecastWeekTotalContractValue", title: "TCV", width: "75px", template: $("#forecast-week-tcv").html(), attributes: { "class": "forecastWeekGridStyle" }, footerTemplate: "#: sum # " },
{ field: "ForecastWeekMonths", title: "Months", width: "70px", template: $("#forecast-weekMonths").html(), attributes: { "class": "forecastWeekGridStyle" } },
{ field: "ForecastWeek12Months", title: "12Month", width: "75px", attributes: { "class": "forecastWeekGridStyle" }, footerTemplate: "#: sum # " }
]
}
]
});
And the templates:
<script id="forecast-week-tcv" type="text/x-kendo-template">
# if(IsNewContract === true ){ #
<span>#=ForecastWeekTotalContractValue#</span>
#}
else{#
<input type="text" value="#=ForecastWeekTotalContractValue#" />
#}#
</script>
<script id="forecast-weekMonths" type="text/x-kendo-template">
# if(IsNewContract === true ){ #
<span>#=ForecastWeekMonths#</span>
#}
else{#
<input type="text" value="#=ForecastWeekMonths#" />
#}#
</script>
So I would like to have a list and send to my MVC the controller all the values of these two inputs:
<input type="text" value="#=ForecastWeekTotalContractValue#" />
<input type="text" value="#=ForecastWeekMonths#" />
Thanks
Try something like this:
function getInputValues() {
let result = [];
$('#grid tbody tr').each((i, tr) => {
let row = {};
$(tr).find('input[type="text"]').each((index, input) => {
row[(index ? "ForecastWeekTotalContractValue" : "ForecastWeekMonths")] = $(input).val();
});
result.push(row);
});
return result;
}
Demo
It just iterates over the elements and adds to an array of objects.
Requirement: How to get selected drop down value in kendo grid while updating records
By using kendo editor i have implemented dropdown in grid column and i want to save datavaluefiled value
Datasource
ID:1,Interestname:cricket
Id:2,Interestname:football
while submiiting i need to save only value i:e Id
<html>
<head>
<title></title>
</head>
<body>
<div id="grid-container"></div>
#*Scripts*#
<script type="text/javascript">
$(document).ready(function () {
debugger
var gridDataSource = new kendo.data.DataSource({
transport: {
read: {
url: "/KendoGrid/GetStudents",
dataType: "json"
},
update: {
url: "/KendoGrid/CreateOrUpdate",
dataType: "json"
},
create: {
url: "/KendoGrid/CreateOrUpdate",
dataType: "json"
},
destroy: {
url: "/KendoGrid/DeleteDetails",
dataType: "json"
},
parameterMap: function (options, operation) {
debugger
if (operation !== "read" && options) {
return options;
}
}
},
pageSize: 5,
schema: {
model: {
id: "Id",
fields: {
Id: { editable: false, nullable: true },
Name: { editable: false, validation: { required: true } },
FatherName: { type: "text", validation: { required: true, min: 1 } },
DateOfBirth: { type: "date" },
Address: { type: "text", validation: { min: 0, required: true } },
Email: { type: "email", validation: { min: 0, required: true } },
Phone: { type: "text", validation: { min: 0, required: true } },
StudnetInterest: { type: "text", validation: { min: 0, required: true } }
}
},
parse: function (data) {
debugger
if (!data.success && typeof data.success !== 'undefined') {
//notifier.logixNotifier("notifyError", data.message);
gridDataSource.read();
}
if (data.success) {
//notifier.logixNotifier("notifySuccess", data.message);
gridDataSource.read();
}
return data;
}
}
});
$("#grid-container").kendoGrid({
dataSource: gridDataSource,
height: 550,
groupable: true,
sortable: true,
toolbar: ["create"],
pageable: {
refresh: true,
pageSizes: true,
buttonCount: 5,
},
columns: [
{
field: "Name",
title: "Name",
editable: false
},
{
field: "FatherName",
title: "Father Name",
},
{
field: "DateOfBirth",
title: "Date Of Birth",
format: "{0:MM/dd/yyyy}"
},
{
field: "Address",
title: "Address",
},
{
field: "Email",
title: "Email",
},
{
field: "Phone",
title: "Phone",
attributes: { hideMe: true }
},
{
field: "StudnetInterest",
title: "Student Interest",
editor: interestsDropdown,
values: interestsDropdown
},
{ command: ["edit", "destroy"], title: " ", width: "250px" }
],
// editable: "inline"
editable: "popup"
});
});
#*drop down Data Source*#
var dropDownDataSource = new kendo.data.DataSource({
transport: {
read: {
dataType: "json",
url: "/KendoGrid/GetInterest",
},
}
});
function interestsDropdown(container, options) {
debugger
$('<input required name="' + options.field + '" id="dropintrest" onchange="drop(this)"/>')
.appendTo(container)
.attr('data-bind', 'value:Id')
.kendoDropDownList({
autoBind: false,
dataTextField:"InterestName",
dataValueField:"Id",
dataSource: dropDownDataSource,
});
}
function drop(event) {
debugger
var data= $("#dropintrest").data("kendoDropDownList");
}
</script>
</body>
</html>
I think you may be binding to the wrong property on your model. Also, try setting the valuePrimitive property of your drop down list to true:
$('<input required data-bind="value:' + options.field + '" name="' + options.field + '" id="dropintrest" onchange="drop(this)"/>')
.appendTo(container)
.kendoDropDownList({
autoBind: false,
dataTextField:"InterestName",
dataValueField:"Id",
dataSource: dropDownDataSource,
valuePrimitive: true
});
According to the documentation:
If set to true, the View-Model field will be updated with the selected item value field. If set to false, the View-Model field will be updated with the selected item.
Hope this helps.
I have an editable Kendo Grid, with a field that is a dropdownlist. I have a U_UserId and U_Name field that need to be used in that column. The name obviously displays, while the ID should be what is used for binding. I've removed my datasource URLs in the example below, but the DropDownList data displays just fine, with a list of Names and ID values.
I've been looking at this for a while so it's possible I'm missing something obvious. I'm having an identical problem to this question (the dropdown doesn't bind to the user displayed in that row until I click on the dropdown to expand it), but I think my model and fields are correct so I'm not sure why I still can't get the dropdown to bind correctly.
Here is my JS for both the grid and the editor:
$(document).ready(function () {
var grid = $("#grid").kendoGrid({
dataSource: {
type: "json-ajax",
transport: {
read: {
url: myUrl,
type: "GET"
}
},
batch: true,
pageSize: 20,
schema: {
data: "Data",
total: "Total",
model: {
id: "OrderId",
fields: {
O_OrderNumber: {
editable: false
},
O_Date: {
editable: false, type: "date"
},
O_InvoiceNumber: {
editable: false
},
O_Status: {
editable: false
},
O_DueDate: {
editable: false, type: "date"
},
U_UserId: {
editable: true
},
U_Name: {
editable: false
},
O_VendorId: {
editable: false
},
O_TrackingNumber: {
editable: false
}
}
}
},
},
scrollable: false,
editable: true,
pageable: true,
columns: [
{
field: "O_OrderNumber",
title: "Order #",
hidden: false
},
{
field: "O_Date",
title: "Pull Date",
hidden: false,
type: "date",
format: "{0:MM/dd/yyyy}"
},
{
field: "O_InvoiceNumber",
title: "Invoice #",
hidden: false
},
{
field: "O_Status",
title: "Status",
hidden: false
},
{
field: "O_DueDate",
title: "Due Date",
hidden: false,
type: "date",
format: "{0:MM/dd/yyyy}"
},
{
field: "U_UserId",
title: "Owner",
hidden: false,
width: 130,
editor: ownerDropDownEditor,
template: "#=U_Name#"
},
{
field: "O_VendorId",
title: "Vendor",
hidden: false
},
{
field: "O_TrackingNumber",
title: "Tracking #",
hidden: false
}
]
}).data("kendoGrid");
});
function ownerDropDownEditor(container, options) {
$('<input required name="' + options.field + '" />')
.appendTo(container)
.kendoDropDownList({
autoBind: false,
dataTextField: "Name",
dataValueField: "UserId",
dataSource: {
type: "json",
transport: {
read: {
url: myOtherUrl,
type: "GET"
}
}
}
});
}
Edit: Out of curiosity, I tried changing my dropdownlist to have both the DataTextField and the DataValueField be UserId, and the selection was made right away, but with the ID (int) value being shown instead of the Name (string).
So investigating a little further into my edit above, I found this Telerik post, which made it sound like the dropdown actually binds by an object, and not by dropdown value. There is a data-value-primitive attribute that can be added so that it binds by value. I updated my editor, and it is now behaving as expected:
function ownerDropDownEditor(container, options) {
$('<input required name="' + options.field + '" data-value-primitive="true" />')
.appendTo(container)
.kendoDropDownList({
autoBind: false,
dataTextField: "Name",
dataValueField: "UserId",
dataSource: {
type: "json",
transport: {
read: {
url: myOtherUrl,
type: "GET"
}
}
}
});
}
I have a kendo grid with create, edit and delete buttons. I also have a next button outside the grid. What I want to do is prevent the user from clicking on the next button, if the user doesn't at least create/edit one record first.
<div ng-show="showActivePage === 'PageTwo'" ng-controller="inputFiscalYearController" >
<div kendo-grid="myGrid" k-options="gridOptionsFiscalYear" ></div>
<div ng-click="showActivePage = 'PageThree'"> Next </div>
<div ng-click="showActivePage = 'PageOne'"> Back </div>
</div>
app.controller('inputFiscalYearController', ['$scope', function ($scope) {
$scope.isDisabled = false;
$scope.gridOptionsFiscalYear = {
toolbar: ["create"],
editable: true,
pageable: true,
edit: function(){
alert();
},
columns: [
{
field: "Name",
title: "Name",
width: "250px",
},
{
field: "Surname",
title: "Surname",
width: "250px",
},
{
title: "",
command: ["edit", "destroy"],
width: "105px"
},
],
editable: "inline",
dataSource: {
data: [
],
pageSize: 10,
schema: {
model: {
id: "id",
fields: {
id: { editable: false },
Name: {
type: "string",
validation: {
required: {
message: "*Required"
}
}
},
Surname: {
type: "string",
validation: {
required: {
message: "*Required"
}
}
},
}
}
}
},
}
}]);
I'm not familiar with kendo-ui, but I do know Angular. Couldn't you just do:
<div ng-click="showActivePage = 'PageThree'" disabled="!gridOptionsFiscalYear.data.length"> Next </div>
I'm presuming that gridOptionsFiscalYear.data is where new records will be created.
Edit: didn't have the required negation on the length.
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
});
}