There are two things I would like to accomplish:
1. I want to be able to use a Kendo Numeric Textbox in my Kendo Grid without binding it to a field.
2. I want to be able to retrieve this value.
My grid looks as follows:
@(Html.Kendo().Grid<ProofData>()
.Name("ProofDataGrid")
.AutoBind(true)
.HtmlAttributes(new { style = "height: 500px; font-size: 12px;" })
.Columns(columns =>
{
columns.Bound(c => c.Number).Groupable(false);
columns.Bound(c => c.ProofAmount).Groupable(false);
columns.Bound(c => c.ProofAssignmentID).Groupable(false);
columns.Bound(c => c.PrimaryAmount).Groupable(true);
columns.Bound(c => c.PrimaryAssignmentID).Groupable(true);
columns.Template(@<textarea></textarea>).Title("FinalData");
}
)
.ToolBar(toolbar =>
{
toolbar.Save();
})
.Editable(editable => editable.Mode(GridEditMode.InCell))
.Pageable(pageable => pageable
.Enabled(true)
.PageSizes(new int[4] { 5, 10, 25, 50 })
.Refresh(true))
.Navigatable(n => n.Enabled(true))
.Sortable()
.Scrollable()
.Selectable()
.DataSource(datasource => datasource
.Ajax()
.Batch(true)
.Update("Editing_Update", "Grid")
.Model(model => model.Id(c => c.ID))
.ServerOperation(false))
.Events(ev => ev.SaveChanges("debugData"))
)
When I click a button, I format the Grid as follows:
function formatProofGridData(id) {
var dataSource = new kendo.data.DataSource({
transport: {
read: {
url: "/Proofing/GetInconsistentData/",
dataType: "json",
data: { id: id }
}
},
// determines if changes will be send to the server individually or as batch
batch: true,
model: {
id: "ID",
fields: {
ID: { validation: { required: true} },
Number: { editable: false },
ProofAmount: { editable: false },
PrimaryAmount: { editable: false },
ProofAssignmentID: { editable: false },
PrimaryAssignmentID: { editable: false },
}
}
}
//...
});
$("#ProofDataGrid").kendoGrid({
dataSource: dataSource,
toolbar: ["save", "cancel"],
editable: { update: true },
scrollable: true,
sortable: true,
pageable: true,
columns: [
{
field: "Number",
title: "Number"
},
{
field: "ProofAmount",
title: "ProofAmount"
},
{
field: "PrimaryBidAmount",
title: "PrimaryBidAmount"
},
{
field: "ProofAssignmentID",
title: "ProofAssignmentID"
},
{
field: "PrimaryAssignmentID",
title: "PrimaryAssignmentID"
},
{
title: "FinalData",
template: '<input id="numeric" type="number" value="" min="0" max="100" step="1" />'
}]
});
}
Basically, I'm loading two sets of data side by side to compare the values to determine which has the correct values. The extra non field bound column is for me to input a value. When I click "Save", I am going to use this value to place the corrected value in another table.
I am currently loading the data this way so I can format the data before it hits the grid. So far I have been unsuccessful in converting the textbox into a numeric textbox. And secondly, I also have been unable to figure out how to retrieve the data in the textbox.
I have checked the data in $('#ProofDataGrid').data('kendoGrid').dataSource.data(); but have not seen the data I input into the textbox fields.
Any help for either issue would be appreciated.
1. I want to be able to use a Kendo Numeric Textbox in my Kendo Grid without binding it to a field.
2. I want to be able to retrieve this value.
My grid looks as follows:
@(Html.Kendo().Grid<ProofData>()
.Name("ProofDataGrid")
.AutoBind(true)
.HtmlAttributes(new { style = "height: 500px; font-size: 12px;" })
.Columns(columns =>
{
columns.Bound(c => c.Number).Groupable(false);
columns.Bound(c => c.ProofAmount).Groupable(false);
columns.Bound(c => c.ProofAssignmentID).Groupable(false);
columns.Bound(c => c.PrimaryAmount).Groupable(true);
columns.Bound(c => c.PrimaryAssignmentID).Groupable(true);
columns.Template(@<textarea></textarea>).Title("FinalData");
}
)
.ToolBar(toolbar =>
{
toolbar.Save();
})
.Editable(editable => editable.Mode(GridEditMode.InCell))
.Pageable(pageable => pageable
.Enabled(true)
.PageSizes(new int[4] { 5, 10, 25, 50 })
.Refresh(true))
.Navigatable(n => n.Enabled(true))
.Sortable()
.Scrollable()
.Selectable()
.DataSource(datasource => datasource
.Ajax()
.Batch(true)
.Update("Editing_Update", "Grid")
.Model(model => model.Id(c => c.ID))
.ServerOperation(false))
.Events(ev => ev.SaveChanges("debugData"))
)
When I click a button, I format the Grid as follows:
function formatProofGridData(id) {
var dataSource = new kendo.data.DataSource({
transport: {
read: {
url: "/Proofing/GetInconsistentData/",
dataType: "json",
data: { id: id }
}
},
// determines if changes will be send to the server individually or as batch
batch: true,
model: {
id: "ID",
fields: {
ID: { validation: { required: true} },
Number: { editable: false },
ProofAmount: { editable: false },
PrimaryAmount: { editable: false },
ProofAssignmentID: { editable: false },
PrimaryAssignmentID: { editable: false },
}
}
}
//...
});
$("#ProofDataGrid").kendoGrid({
dataSource: dataSource,
toolbar: ["save", "cancel"],
editable: { update: true },
scrollable: true,
sortable: true,
pageable: true,
columns: [
{
field: "Number",
title: "Number"
},
{
field: "ProofAmount",
title: "ProofAmount"
},
{
field: "PrimaryBidAmount",
title: "PrimaryBidAmount"
},
{
field: "ProofAssignmentID",
title: "ProofAssignmentID"
},
{
field: "PrimaryAssignmentID",
title: "PrimaryAssignmentID"
},
{
title: "FinalData",
template: '<input id="numeric" type="number" value="" min="0" max="100" step="1" />'
}]
});
}
Basically, I'm loading two sets of data side by side to compare the values to determine which has the correct values. The extra non field bound column is for me to input a value. When I click "Save", I am going to use this value to place the corrected value in another table.
I am currently loading the data this way so I can format the data before it hits the grid. So far I have been unsuccessful in converting the textbox into a numeric textbox. And secondly, I also have been unable to figure out how to retrieve the data in the textbox.
I have checked the data in $('#ProofDataGrid').data('kendoGrid').dataSource.data(); but have not seen the data I input into the textbox fields.
Any help for either issue would be appreciated.