Hello I have a page with a listview, when an item is selected, 5 grid are filtered, nested on each grid is a subgrid (in the images attached you could see it better) in this subgrid one column has a combobox, I need that when an item on the listview is selected this combobox rebind the data. But it only happens when the method is called when the page is loaded, even the method is called and executed with out errors the combobox remains with the original data.
Below is the combobox:
@model ContabilidadSinLios.Models.CatalogoCuentasViewModel
@(Html.Kendo().ComboBox()
.Name("CatalogoCuentas")
.DataValueField("CatalogoCuentaId")
.DataTextField("Nombre")
.Height(100)
.BindTo((System.Collections.IEnumerable)ViewData["catalogos"])
.HtmlAttributes(new { style = "width: 330px !important; font-size: 11px; " })
.Suggest(true)
.MinLength(1)
.Filter(FilterType.Contains)
)
And here is the one of the grids:
@(Html.Kendo().Grid<
EgresosViewModel
>()
.Name("cdfie")
.Scrollable(s => s.Enabled(true).Height("auto"))
.AutoBind(false)
.Columns(columns =>
{
columns.Template(t => { })
.ClientTemplate("#=UUID#")
.Title("UUID").Hidden(true)
.Width(100);
columns.Bound(f => f.EstatusSAT).Filterable(false).Title("Estatus SAT").Width(80);
columns.Bound(f => f.FechaEmision).Title("Fecha Emisión").Filterable(false).Format("{0:d}").Width(100);
columns.Bound(f => f.RFCReceptor).Hidden(true);
columns.Bound(f => f.RFCEmisor).Title("RFC Emisor").Width(120);
columns.Bound(f => f.NombreEmisor).Title("Nombre Emisor").Width(250);
columns.Bound(f => f.SubTotal).Filterable(false).Width(80).Format("{0:c}");
columns.Bound(f => f.Descuento).Filterable(false).Width(80).Format("{0:c}");
columns.Bound(f => f.IVA16).Title("IVA 16%").Filterable(false).Width(80).Format("{0:c}");
columns.Bound(f => f.IEPS).Filterable(false).Width(80).Format("{0:c}");
columns.Bound(f => f.RetenidoIVA).Filterable(false).Title("IVA Retenido").Width(120).Format("{0:c}");
columns.Bound(f => f.RetenidoISR).Filterable(false).Title("ISR Retenido").Width(120).Format("{0:c}");
columns.Bound(f => f.Total).Filterable(true).Width(120).Format("{0:c}");
columns.Bound(f => f.MetodoPago).Filterable(false).Width(120).Title("Método de Pago");
})
.Events(e =>
{
e.DataBound("onDataBoundEgreso");
})
.Pageable(pageable => pageable.Refresh(true))
.Sortable()
.Selectable()
.Navigatable()
.Resizable(resize => resize.Columns(true))
.ClientDetailTemplateId("ConceptosEgresos_DetailTemplate")
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(15)
.Model(m =>
{
m.Id(f => f.UUID);
m.Field(f => f.UUID).Editable(false);
m.Field(f => f.FechaEmision).DefaultValue(DateTime.Today);
})
.Events(events => events.Error("error_handler"))
.Sort(s => s.Add(f => f.FechaEmision).Descending())
.Read(read => read.Action("CFDISEgreso_Read", "SinLios"))
)
)
<
script
id
=
"ConceptosEgresos_DetailTemplate"
type
=
"text/x-kendo-tmpl"
>
<
h4
>Detalle para CFDI \\##=UUID# </
h4
>
@(Html.Kendo().Grid<
ConceptosViewModel
>()
.Name("order_details#=UUID#")
.Columns(columns =>
{
columns.Command(command =>
{
command.Edit().UpdateText("Actualizar").Text("Editar");
}).Width(100);
columns.Bound(f => f.Id).Hidden(true);
columns.Bound(f => f.Cantidad).Width(50);
columns.Bound(f => f.ValorUnitario).Format("{0:c}").Width(80);
columns.Bound(f => f.Descripcion).Encoded(false)
.Title("Descripción").Filterable(false).Width(250);
columns.Bound(f => f.Importe).Format("{0:c}").Width(80);
columns.Bound(f => f.Deducible).ClientTemplate("<
span
> \\#= Deducible ? 'Si' : 'No' \\#</
span
>")
.Title("Deducible").Width(80);
columns.Bound(f => f.DeducibleAnual).ClientTemplate("<
span
> \\#= DeducibleAnual ? 'Si' : 'No' \\#</
span
>")
.Title("Deducible Anual").Width(100);
columns.Bound(f => f.MontoDeducible).Title("Monto Deducible").Format("{0:c}").Width(100);
columns.Bound(f => f.CatalogoCuentaId).ClientTemplate("\\#=CatalogoCuentas.Nombre\\#").Title("Catálogo de Cuentas")
.Filterable(false).Width(200).ClientFooterTemplate("Total Deducible:");
columns.Bound(f => f.CatalogoCuentas.Nombre);
//.Hidden(true);
columns.Template(f => new { })
.Title("Total Deducible")
.ClientTemplate("\\#=kendo.toString(GetOrderItemPrice(data), \"c\")\\#")
.ClientFooterTemplate("<
span
name
=
'sum'
></
span
>").Width(120);
columns.Bound(f => f.IVA16).ClientTemplate("<
span
> \\#= IVA16 ? 'Si' : 'No' \\#</
span
>")
.Filterable(false).Title("IVA 16%").Width(80);
columns.Bound(f => f.IVA0).ClientTemplate("<
span
> \\#= IVA0 ? 'Si' : 'No' \\#</
span
>")
.Filterable(false).Title("IVA 0%").Width(80);
columns.Bound(f => f.IVAExento).ClientTemplate("<
span
> \\#= IVAExento ? 'Si' : 'No' \\#</
span
>")
.Filterable(false).Title("Exento IVA").Width(80);
columns.Bound(f => f.VisiblePara).Width(80);
})
.Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("ConceptosEditor"))
.Events(e =>
{
e.DataBound("onOrderDetailsEgresoDataBound");
})
.Selectable()
.Pageable(pageable => pageable.Refresh(true))
.Navigatable()
.Resizable(resize => resize.Columns(true))
.DataSource(dataSource => dataSource
.Ajax()
.Model(model =>
{
model.Id(concepto => concepto.Id);
model.Field(concepto => concepto.Id).Editable(false);
model.Field(concepto => concepto.Descripcion).Editable(false);
model.Field(concepto => concepto.Unidad).Editable(false);
model.Field(concepto => concepto.Cantidad).Editable(false);
model.Field(concepto => concepto.UUID).Editable(false);
model.Field(concepto => concepto.IVA16).DefaultValue(false);
model.Field(concepto => concepto.IVA0).DefaultValue(false);
model.Field(concepto => concepto.IVAExento).DefaultValue(false);
model.Field(concepto => concepto.Importe).Editable(true);
model.Field(concepto => concepto.ValorUnitario).Editable(false);
model.Field(concepto => concepto.CatalogoCuentaId).Editable(true);
model.Field(concepto => concepto.CatalogoCuentas).DefaultValue(ViewData["catalogos"] as CatalogoCuentasViewModel).Editable(true);
model.Field(concepto => concepto.Ano).Editable(true);
model.Field(concepto => concepto.Mes).Editable(true);
model.Field(concepto => concepto.VisiblePara).Editable(true);
})
.Events(events => events.Error("error_handler")
.Sync("sync_handler"))
.Read(read => read.Action("Conceptos_Read", "SinLios", new { UUID = "#=UUID#", Ano = "#=Ano#", Mes = "#=Mes#", VisiblePara = "#=RFCReceptor#" }))
.Update(update => update.Action("UpdateConcepto", "SinLios")))
.ToClientTemplate()
)
</
script
>
And the code for populate the catalogo de cuentas:
public
void
PopulateCatalogoCuentas(
string
RFC)
{
IOrderedEnumerable<CatalogoCuentasViewModel> catalogos = _context.CatalogoDeCuentasRFC(RFC)
.Select(c =>
new
CatalogoCuentasViewModel
{
CatalogoCuentaId = c.CatalogoCuentaId,
Nombre = c.Nombre +
" - "
+ c.CatalogoCuentaId
}).ToList()
.OrderBy(e => e.Nombre);
bool
existe = (from item
in
catalogos select item).Count() > 0;
if
(existe)
{
ViewData[
"catalogos"
] = catalogos;
ViewData[
"defaultCatalogo"
] = catalogos.FirstOrDefault();
}
else
{
ViewData.Clear();
IOrderedEnumerable<CatalogoCuentasViewModel> todoCatalogo = _catalogoCuentasRepository.FindAll()
.Select(c =>
new
CatalogoCuentasViewModel
{
CatalogoCuentaId = c.CatalogoCuentaId,
Nombre = c.Nombre +
" - "
+ c.CatalogoCuentaId
})
.OrderBy(e => e.Nombre);
ViewData[
"catalogos"
] = todoCatalogo;
ViewData[
"defaultCatalogo"
] = todoCatalogo.First();
}
}
hi , I have a pretty simple requirement for doing that I have written the following code.
grid is in paymentviewgrid cshtml which is being called in the index page, below
function BuGridSaveChange(e)
{
if (manualList.length > 0)
{
var isRecordExist = false;
var totalRecords = manualList;
for (var i = 0; i <= totalRecords.length - 1; i++)
{
if (manualList[i].PoId == e.model.PoId && manualList[i].RCUId == e.model.RCUId && manualList[i].MrrId == e.model.MrrId
&& manualList[i].BU_Id == e.model.BU_Id
&& manualList[i].REUId == e.model.REUId)
{
manualList[i].ManualAmountPaid = e.model.ManualAmountPaid;
isRecordExist = true;
}
}
if (isRecordExist == false)
{
var singleSrObj = new Object();
singleSrObj.PoId = e.model.PoId;
singleSrObj.REUId = e.model.REUId;
singleSrObj.RCUId = e.model.RCUId;
singleSrObj.MrrId = e.model.MrrId;
singleSrObj.ManualAmountPaid = e.model.ManualAmountPaid;
singleSrObj.BU_Id = e.model.BU_Id;
manualList.push(singleSrObj);
}
}
else
{
var singleNewSrObj = new Object();
singleNewSrObj.PoId = e.model.PoId;
singleNewSrObj.REUId = e.model.REUId;
singleNewSrObj.RCUId = e.model.RCUId;
singleNewSrObj.MrrId = e.model.MrrId;
singleNewSrObj.ManualAmountPaid = e.model.ManualAmountPaid;
singleNewSrObj.BU_Id = e.model.BU_Id;
manualList.push(singleNewSrObj);
}
}
function RequestEnd(e)
{
if (e.response.Errors == null )
{
if ((e.type === "update" )&& e.response.Data.length > 0)
{
if (manualList.length > 0)
{
var isAmountEntered = false;
for (var i = 0; i <= manualList.length - 1; i++)
{
if (manualList[i].ManualAmountPaid != null && manualList[i].ManualAmountPaid >= 0)
{
isAmountEntered = true;
}
if (manualList[i].PoId == e.response.Data[0].PoId && manualList[i].RCUId == e.response.Data[0].RCUId && manualList[i].MrrId == e.response.Data[0].MrrId
&& manualList[i].BU_Id == e.response.Data[0].BU_Id
&& manualList[i].REUId == e.response.Data[0].REUId)
{
manualList[i].ManualAmountPaid = e.response.Data[0].ManualAmountPaid;
document.getElementById("approvePaymentButton").disabled = true;
document.getElementById("poSummaryPaymentButton").disabled = true;
}
}
if (isAmountEntered == true)
{
document.getElementById("recreatePaymentButton").disabled = false;
}
else
{
document.getElementById("recreatePaymentButton").disabled = true;
document.getElementById("approvePaymentButton").disabled = false;
document.getElementById("poSummaryPaymentButton").disabled = false;
}
}
}
}
else if (e.response.Errors != null && e.type === "update")
{
document.getElementById("recreatePaymentButton").disabled = true;
}
}
the issue is while coding this
I received e.type== "update " and in update function I have written some other businesslogic
and after testing and implementation with no code changes , I started receiving e.type== "create" where I cannot see update atall.
due to this I cannot call the logic that was in update function from controller.
could you please help on this
Lets say i have a grid with three columns A,B and C. Also lets assume the grid is Batch so that mean In-Cell edit. If a user is entering a row and and the user enters the same number in both cells A and B, then I want cell C to have a background color of red.
Basically this is a conditional on edit of two cells and if they meet the condition a third cell's background color is changed. This is not needed during databound because it's a simple batch that will clear the entries once saved some no data binding taking place if that makes sense.
I tired using a clientTemplate but it seems to work only on a new record or during databinding. If they edit an existing row it needs to perform the check.
Any suggestions appreciated
I'm assuming on the Save event (in-cell), but how do you get and set the cell background color of C?I would like to send a viewModel selected with edit "Edit" action grid to update this row data in controller side .
I would like then to send back the new version of row data : update Popup and datasource grid.
For now, the ajax post to send the edit row doesn't work fine. The data propertie of ajax call return an javascript Error.
Do you have a suggestion ? Thanks.
View :
@(Html.Kendo().Grid<KendoGridAjaxEditing.Models.ProductViewModel>()
.Name(
"grid"
)
.Columns(columns =>
{
columns.Bound(product => product.ProductName);
columns.Bound(product => product.UnitsInStock).Width(250);
columns.Command(commands =>
{
commands.Edit();
// The "edit" command will edit and update data items
commands.Destroy();
// The "destroy" command removes data items
}).Title(
"Commands"
).Width(200);
})
.Filterable(ftb => ftb.Mode(GridFilterMode.Row))
.Scrollable()
.Groupable()
.Events(e =>
{
e.Edit(
"onRequestEdit"
); // Ajax Call to update
})
.Editable(editable => editable.Mode(GridEditMode.PopUp))
// Use inline editing mode
.DataSource(dataSource => dataSource
.Ajax()
.Model(model =>
{
model.Id(product => product.ProductID);
// Specify the property which is the unique identifier of the model
model.Field(product => product.ProductID).Editable(
false
).DefaultValue(0);
// Make the ProductID property not editable
})
.Events(events =>
{
events.Error(
"onError"
);
})
.ServerOperation(
false
)
.Create(create => create.Action(
"Products_Create"
,
"Home"
))
// Action invoked when the user saves a new data item
.Read(read => read.Action(
"Products_Read"
,
"Home"
))
// Action invoked when the grid needs data
.Update(update => update.Action(
"Products_Update"
,
"Home"
))
// Action invoked when the user saves an updated data item
.Destroy(destroy => destroy.Action(
"Products_Destroy"
,
"Home"
))
// Action invoked when the user removes a data item
)
.Pageable()
)
JavaScript (ajax call) :
function onRequestEdit(arg) {
alert(
"onRequestEdit : Edit row"
);
var griddata = $(
"#grid"
).data(
"kendoGrid"
);
var uid = $(
".k-edit-form-container"
).closest(
"[data-role=window]"
).data(
"uid"
);
kendoConsole.log(
'onRequestEdit : Edit uid :'
+ uid);
var model = $(
"#grid"
).data(
"kendoGrid"
).dataSource.getByUid(uid);
// Show row value with currente model -> OK
kendoConsole.log(
"onRequestEdit : Edit model : "
+ model.ProductID +
":"
+ model.ProductName);
// Show row value with argument -> OK
kendoConsole.log(
"onRequestEdit : Edit argument : "
+ arg.model.ProductID +
":"
+ arg.model.ProductName);
$.ajax({
url:
'@Url.Action("Products_CheckLock", "Home")'
,
type:
'POST'
,
datatype:
'json'
,
contentType:
"application/json; charset=utf-8"
,
//data: JSON.stringify({ product: arg.model.data() }), // Return a javaScript Error
//data: JSON.stringify({ product: arg.model() }), // Return a javaScript Error
//data: JSON.stringify({ product: arg.model.dataSource(this) }), // Return a javaScript Error
//data: JSON.stringify({ product: arg.model.dataSource.data() }), // Return a javaScript Error
data: JSON.stringify({ product: arg.model.dataSource.data() }),
// Return a javaScript Error
success: function (result) {
// Update record in Popup Edit
// Is it a good way ?
var grid = $(
"#grid"
).data(
"kendoGrid"
);
var dataSource =
new
kendo.data.DataSource({
data: result.Data
});
grid.setDataSource(dataSource);
grid.dataSource.refresh();
},
error: function () { alert(
'SM : Error Edit row'
); }
})
}
Controller :
public
ActionResult Products_CheckLock([DataSourceRequest]DataSourceRequest request, ProductViewModel[] product)
//public ActionResult Products_CheckLock([DataSourceRequest]DataSourceRequest request, String product)
{
if
(ModelState.IsValid)
{
using
(var northwind =
new
NorthwindEntities())
{
// Create a new Product entity and set its properties from the posted ProductViewModel
var entity =
new
Product
{
ProductID = product[0].ProductID,
ProductName = "Last_Version-" + product[0].ProductName,
UnitsInStock = product[0].UnitsInStock
};
}
}
// Return the removed product. Also return any validation errors.
return
Json(
new
[] { product }.ToDataSourceResult(request, ModelState));
}
Hello,
I am having an issue accessing a field that exists in the model for the clientdetailtemplate it keeps searching the parent grids model and not the clientdetail:
below in the template grid the line columns.Bound(c => c.PurchaseOrder).ClientTemplate("<button class='k-button' onclick=\"showDetails('#=PurchaseOrder#','#=DC#')\">Item Details</button>").Title("Item Details"); fails with "Uncaught ReferenceError: DC is not defined" but i can swith DC in that line to PODateShort and it send that number to the onclick function. so im assuming that #=field# can only reference the main grids model but i need to get the DC from the secondary grid so that i can send that to the onclick and search for all the items in that po for that dc.
Any help would be greatly appreciated.
@(Html.Kendo().Grid<PurchaseOrderResults>()
.Name("POGrid")
.Resizable(resize => resize.Columns(true))
.Reorderable(reorder => reorder.Columns(true))
.Filterable()
.HtmlAttributes(new { style = "height:600px;" })
.Columns(columns =>
{
columns.Bound(c => c.PurchaseOrder);
columns.Bound(c => c.PODateShort);
columns.Bound(c => c.RequestDateShort);
columns.Bound(c => c.ActualShipDateShort);
columns.Bound(c => c.ArrivalDateShort);
})
.Scrollable()
.ClientDetailTemplateId("POtemplate")
.Sortable()
.Pageable(builder => builder.PageSizes(new[] { 10, 50, 100 }))
.DataSource(datasource => datasource
.Ajax()
.PageSize(10)
.Read(read => read.Action("GetPOSearch", "PO", new { SiteID = Model.SiteID, PONumbers = Model.PONumbers }))
)
)
</div>
<script id="POtemplate" type="text/kendo-tmpl">
@(Html.Kendo().Grid<PurchaseOrderDCResults>()
.Name("POGrid_#=PurchaseOrder#") // template expression, to be evaluated in the master context
.Columns(columns =>
{
columns.Bound(c => c.PurchaseOrder);
columns.Bound(c => c.DC);
columns.Bound(c => c.OrderDollars);
columns.Bound(c => c.UnitsOrdered);
columns.Bound(c => c.PurchaseOrder).ClientTemplate("<button class='k-button' onclick=\"showDetails('#=PurchaseOrder#','#=DC#')\">Item Details</button>").Title("Item Details");
})
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(10)
.Read(read => read.Action("GetPODCSearch", "PurchaseOrder", new { SiteID = Model.SiteID, PONumber = "#=PurchaseOrder#" }))
)
.Pageable(builder => builder.PageSizes(new[] { 10, 50, 100 }))
.Sortable()
.ToClientTemplate()
)
</script>
Hello,
I am having some trouble using custom callbacks for PasteCleanup, Deserialization or Serialization. Whatever input string I give as the custom callback, be it a function name or declaration, just gets double quoted in the editor configuration javascript that is generated and is then seemly ignored. Unlike how setting an event callback works.
How do I setup an editor to use these features?
Sample code:
@(Html.Kendo().Editor()
.Name("bloop")
.PasteCleanup(e => e.Custom("onPaste"))
.Deserialization(e => e.Custom("onDeserialization"))
.Serialization(e => e.Custom("onSerialization"))
.Events(e => e.Change("onChange"))
)
<
script
type
=
"text/javascript"
>
function onPaste(html) {
console.log('onPaste');
return html;
}
function onSerialization(html) {
console.log('onSerialization');
return html;
}
function onDeserialization(html) {
console.log('onDeserialization');
return html;
}
function onChange() {
console.log('onChange');
}
</
script
>
Using that above code Html.Kendo().Editor() is generating the following javascript when it executes:
jQuery(
function
(){jQuery(
"#bloop"
).kendoEditor({
"change"
:onChange,
"deserialization"
:{
"custom"
:
"onDeserialization"
},
"pasteCleanup"
:{
"custom"
:
"onPaste"
},
"serialization"
:{
"custom"
:
"onSerialization"
},
"tools"
:[{
"name"
:
"formatting"
},{
"name"
:
"bold"
},{
"name"
:
"italic"
},{
"name"
:
"underline"
},{
"name"
:
"justifyLeft"
},{
"name"
:
"justifyCenter"
},{
"name"
:
"justifyRight"
},{
"name"
:
"insertUnorderedList"
},{
"name"
:
"insertOrderedList"
},{
"name"
:
"outdent"
},{
"name"
:
"indent"
},{
"name"
:
"createLink"
},{
"name"
:
"unlink"
},{
"name"
:
"insertImage"
},{
"name"
:
"createTable"
},{
"name"
:
"addColumnLeft"
},{
"name"
:
"addColumnRight"
},{
"name"
:
"addRowAbove"
},{
"name"
:
"addRowBelow"
},{
"name"
:
"deleteRow"
},{
"name"
:
"deleteColumn"
}]});});
Note how onDeserialization is double quoted where onChange is not.
Using R2 2016 SP2 (2016.2.714) with MVC4.
Thank you
Hi,
the example http://demos.telerik.com/aspnet-mvc/financial/panes show how to plot the volume in a second pane.
How can I plot Line + Volume in one pane? Similar: http://finance.yahoo.com/chart/aapl
Peter
I have a form with input text boxes, search button and grid to display the result. Once user clicks on Search button, the result get displayed in the grid. I have 10,20, 50, 100, All set as paging option in the grid. At first when the result gets displayed in the grid the paging value is 10. The issue is once the user selects different paging value e.g. 50 and perform search again, the result that get displayed in the grid is with paging value of 50.
Is there anyway to reset paging value back to 10 again whenever new search is performed?
Thanks.
Avinash