Hi guys,
I am trying to get the Popup Edit menu to work and I have implemented it as seen in the code below. However, whenever I do not update the row but cancel or close the window, the selected row is removed from the grid. I did add an id field to the model so that should not be the issue. The openOrdersList is an Array that receives its data from the server a few seconds after the grid is initialized. Please assist!
Thanks,
Jose
var gridOpenOrders = $("#gridOpenOrders").kendoGrid({
scrollable: false,
sortable: {
mode: "single",
allowUnsort: false
},
pageable: true,
filterable: true,
selectable: "row",
editable: {
mode: "popup",
template: $("#tmplPopupEditor").html()
},
height: 200,
columns: [
{ field: "TimeStamp", title: "TimeStamp", width: 200, editable: false, attributes: { class: "grid-leftalign"} },
{ field: "Symbol", title: "Symbol", width: 100, attributes: { class: "grid-centeralign"} },
{ field: "Side", title: "Side", width: 75, attributes: { class: "grid-centeralign"} },
{ field: "Price", title: "Price", width: 100, template: '#= priceFormatter(Price, Symbol) #', attributes: { class: "grid-centeralign"} },
{ field: "Qty", title: "Qty", width: 100, template: '#= quantityFormatter(Qty) #', attributes: { class: "grid-centeralign"} },
{ field: "CumQty", title: "CumQty", width: 100, template: '#= quantityFormatter(CumQty) #', attributes: { class: "grid-centeralign"} },
{ field: "StopPrice", title: "Stop Price", width: 100, template: '#= priceFormatter(StopPrice, Symbol) #', attributes: { class: "grid-centeralign"} },
{ field: "StopTriggerSide", title: "Stop/Trail Side", width: 125, template: '#= triggerSideFormatter(StopTriggerSide) #', attributes: { class: "grid-centeralign"} },
{ field: "TrailingStopTriggerPrice", title: "Trail Trigger", width: 100, template: '#= priceFormatter(TrailingStopTriggerPrice, Symbol) #', attributes: { class: "grid-centeralign"} },
{ field: "TrailingStopAmount", title: "Trail Amount", width: 75, template: '#= amountFormatter(TrailingStopAmount) #', attributes: { class: "grid-centeralign"} },
{ field: "MinQty", title: "Min Fill", width: 100, template: '#= quantityFormatter(MinQty) #', attributes: { class: "grid-centeralign"} },
{ field: "MaxShow", title: "Max Show", width: 100, template: '#= quantityFormatter(MaxShow) #', attributes: { class: "grid-centeralign"} },
{ field: "AvgPrice", title: "Avg Fill Px", width: 100, template: '#= priceFormatter(AvgPrice, Symbol) #', attributes: { class: "grid-centeralign"} },
{ field: "Type", title: "Type", width: 100, attributes: { class: "grid-centeralign"} },
{ field: "TimeInForce", title: "TIF", width: 75, attributes: { class: "grid-centeralign"} },
{ field: "OrderStatus", title: "Status", width: 100, attributes: { class: "grid-centeralign"} },
{ command: [{ name: "edit", text: "Update" }, { name: "destroy", text: "Cancel"}], title: "", width: 200, attributes: { class: "grid-centeralign"} }
],
dataSource: {
data: openOrdersList,
pageSize: 4,
sort: { field: "TimeStamp", dir: "desc" },
schema: {
model: {
id: "OrderId",
fields: {
OrderId: { type: "string", editable: false, nullable: false },
TimeStamp: { type: "string", editable: false, nullable: false },
Symbol: { type: "string", editable: false, nullable: false },
Side: { type: "string", editable: false, nullable: false },
Price: { type: "number", editable: true, nullable: false, validation: { required: true} },
Qty: { type: "number", editable: true, nullable: false, validation: { required: true, min: 1} },
CumQty: { type: "number", editable: false, nullable: false },
StopPrice: { type: "number", editable: true, nullable: false, validation: { required: true} },
StopTriggerSide: { type: "string", editable: false, nullable: false },
TrailingStopTriggerPrice: { type: "number", editable: true, nullable: false, validation: { required: true} },
TrailingStopAmount: { type: "number", editable: true, nullable: false, validation: { required: true} },
MinQty: { type: "number", editable: false, nullable: false },
MaxShow: { type: "number", editable: false, nullable: false },
AvgPrice: { type: "number", editable: false, nullable: false },
Type: { type: "string", editable: false, nullable: false },
TimeInForce: { type: "string", editable: false, nullable: false },
OrderStatus: { type: "string", editable: false, nullable: false }
}
}
}
}
});
I am trying to get the Popup Edit menu to work and I have implemented it as seen in the code below. However, whenever I do not update the row but cancel or close the window, the selected row is removed from the grid. I did add an id field to the model so that should not be the issue. The openOrdersList is an Array that receives its data from the server a few seconds after the grid is initialized. Please assist!
Thanks,
Jose
var gridOpenOrders = $("#gridOpenOrders").kendoGrid({
scrollable: false,
sortable: {
mode: "single",
allowUnsort: false
},
pageable: true,
filterable: true,
selectable: "row",
editable: {
mode: "popup",
template: $("#tmplPopupEditor").html()
},
height: 200,
columns: [
{ field: "TimeStamp", title: "TimeStamp", width: 200, editable: false, attributes: { class: "grid-leftalign"} },
{ field: "Symbol", title: "Symbol", width: 100, attributes: { class: "grid-centeralign"} },
{ field: "Side", title: "Side", width: 75, attributes: { class: "grid-centeralign"} },
{ field: "Price", title: "Price", width: 100, template: '#= priceFormatter(Price, Symbol) #', attributes: { class: "grid-centeralign"} },
{ field: "Qty", title: "Qty", width: 100, template: '#= quantityFormatter(Qty) #', attributes: { class: "grid-centeralign"} },
{ field: "CumQty", title: "CumQty", width: 100, template: '#= quantityFormatter(CumQty) #', attributes: { class: "grid-centeralign"} },
{ field: "StopPrice", title: "Stop Price", width: 100, template: '#= priceFormatter(StopPrice, Symbol) #', attributes: { class: "grid-centeralign"} },
{ field: "StopTriggerSide", title: "Stop/Trail Side", width: 125, template: '#= triggerSideFormatter(StopTriggerSide) #', attributes: { class: "grid-centeralign"} },
{ field: "TrailingStopTriggerPrice", title: "Trail Trigger", width: 100, template: '#= priceFormatter(TrailingStopTriggerPrice, Symbol) #', attributes: { class: "grid-centeralign"} },
{ field: "TrailingStopAmount", title: "Trail Amount", width: 75, template: '#= amountFormatter(TrailingStopAmount) #', attributes: { class: "grid-centeralign"} },
{ field: "MinQty", title: "Min Fill", width: 100, template: '#= quantityFormatter(MinQty) #', attributes: { class: "grid-centeralign"} },
{ field: "MaxShow", title: "Max Show", width: 100, template: '#= quantityFormatter(MaxShow) #', attributes: { class: "grid-centeralign"} },
{ field: "AvgPrice", title: "Avg Fill Px", width: 100, template: '#= priceFormatter(AvgPrice, Symbol) #', attributes: { class: "grid-centeralign"} },
{ field: "Type", title: "Type", width: 100, attributes: { class: "grid-centeralign"} },
{ field: "TimeInForce", title: "TIF", width: 75, attributes: { class: "grid-centeralign"} },
{ field: "OrderStatus", title: "Status", width: 100, attributes: { class: "grid-centeralign"} },
{ command: [{ name: "edit", text: "Update" }, { name: "destroy", text: "Cancel"}], title: "", width: 200, attributes: { class: "grid-centeralign"} }
],
dataSource: {
data: openOrdersList,
pageSize: 4,
sort: { field: "TimeStamp", dir: "desc" },
schema: {
model: {
id: "OrderId",
fields: {
OrderId: { type: "string", editable: false, nullable: false },
TimeStamp: { type: "string", editable: false, nullable: false },
Symbol: { type: "string", editable: false, nullable: false },
Side: { type: "string", editable: false, nullable: false },
Price: { type: "number", editable: true, nullable: false, validation: { required: true} },
Qty: { type: "number", editable: true, nullable: false, validation: { required: true, min: 1} },
CumQty: { type: "number", editable: false, nullable: false },
StopPrice: { type: "number", editable: true, nullable: false, validation: { required: true} },
StopTriggerSide: { type: "string", editable: false, nullable: false },
TrailingStopTriggerPrice: { type: "number", editable: true, nullable: false, validation: { required: true} },
TrailingStopAmount: { type: "number", editable: true, nullable: false, validation: { required: true} },
MinQty: { type: "number", editable: false, nullable: false },
MaxShow: { type: "number", editable: false, nullable: false },
AvgPrice: { type: "number", editable: false, nullable: false },
Type: { type: "string", editable: false, nullable: false },
TimeInForce: { type: "string", editable: false, nullable: false },
OrderStatus: { type: "string", editable: false, nullable: false }
}
}
}
}
});