I want to use ClientRowTemplate with external template but cant seem to reference it
.ClientRowTemplate( what goes here )
how to do . thanks
<
script
id
=
"cart-grid-template"
type
=
"text/x-kendo-template"
>
...
</
script
>
Hi,
I have two custom editors in my Grid.
One is a simple dropdown for a "ForeignKeyColumn" - using UIHint("MyEditor") this works fine in Inline as well as in PopUp edit mode.
An other column using a "MultiSelect" works in Inline but not in PopUp edit mode.
In PopUp the whole Column is not displayed.
It is something like the territories in Northwind, where on Record can belong to multiple Territories.
I works fine in Inline - but (for other reasons) I would need PopUp.
Manfred
Hi, I am using Kendo for ASP.Net MVC version 2015.2.264 using the Blue Opal theme. I have a checkbox input which is not "checkable" when bound to a model property via the @CheckBoxFor razor syntax. It renders correctly using the Kendo assigned theme, but does not allow you to check it even though it is not disabled.
This works:
<div style="display:block;">
<input type="checkbox" id="chkIntegrated" class="k-checkbox" name="Integrated">
<label class="k-checkbox-label" for="chkIntegrated">Integrated 2</label>
</div>
This does NOT work:
<div style="display:block;">
@Html.CheckBoxFor(Function(m) m.Integrated, New With {.class = "k-checkbox", .Id = "chkIntegrated"})
@Html.LabelFor(Function(m) m.Integrated, New With {.class = "k-checkbox-label"})
</div>
I have attached the test html page which illustrates this. Any ideas?
Hello !
I have a kendo UI grid displaying data with a templated pop up for edition.:
@(Html.Kendo().Grid<
Model
>()
.Name("Grid")
.Events(events => {events.Edit(@<
text
>
function(e) {
e.sender.editable.validatable._errorTemplate = kendo.template($('#tooltip-template').html());
}
</
text
>);})
.Columns(columns =>
{
columns.Bound(m => m.DateReceived);
columns.Bound(m => m.SupplierName);
columns.Bound(m => m.InvoiceNo);
columns.Bound(m => m.RefFileNo);
columns.Bound(m => m.InvoiceDate);
columns.Bound(m => m.Amount);
columns.Bound(m => m.DatePayment);
columns.Command(command => { command.Edit().CancelText(" ").UpdateText(" ").Text(" "); }).Title(Litigation.Action);
})
.ToolBar(config =>
{
config.Create().Text(Litigation.AddInvoice);
})
.Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("LitigationInvoiceEditPopUp").Window(w => { w.Width(711); w.Height(300); w.HtmlAttributes(new { @class = "invoice" }); })
.DisplayDeleteConfirmation(Generic.Delete))
.Sortable()
.Resizable(resize => resize.Columns(true))
.DataSource(datasource => datasource
.Ajax()
.Model(model =>
{
model.Id(m => m.Id);
model.Field(m => m.LitigationFileId).DefaultValue(Model.LitigationFileId);
})
.Read(read => read.Action<
Controller
>(x => x.Read(null, Model.LitigationFileId)))
.Create(create => create.Action<
Controller
>(x => x.Create(null, null)))
.Update(update => update.Action<
Controller
>(x => x.Update(null, null)))
.Events(events => events.Error(@<
text
> function(e) {
debugger;
error(e);}
</
text
>))
.PageSize(int.MaxValue)
)
)
I have succeeded in setting the error Template for the validation errors and it works well. But when validation errors occurs on a combobox, the combobox border does not change to red. In my other pages I have done something like this :
var validator = $("form").kendoValidator({
validate: function (e) {
return showErrors(this.errors(),this._errors)
},
errorTemplate: "<
div
class
=
'validationMessage'
style
=
'color:red;font-size:10px;'
>#=message#</
div
>"
}).data("kendoValidator");
The function showErrors changes the colors of the combobox if they are in the parameters "this._errors"
I want to do the same thing with the validator of the popup but I have not find a way to do it yet. Here is what I already tried :
In the definition of the DataSource in the grid :
Update(update => update.Action<
Controller
>(x => x.Update(null, null)))
.Events(events => events.Error(@<
text
> function(e) {
debugger;
error(e);}
</
text
>))
This is not even fired because I guess it is the server side event and the validation stops before going server side
and in the Edit Event of the grid :
.Events(events => {events.Edit(@<
text
>
function(e) {
e.sender.editable.validatable._errorTemplate = kendo.template($('#tooltip-template').html());
e.sender.editable.validate = = function(e) {debugger;error(e, this);}
}
e is always undefined et this does not contains any errors and the validation messages do not show up anymore.
I could really need a hand on this one !
Thanks,
Guillaume
columns.Bound(f => f.FluidID).Title("ID").Width(50).Hidden();
columns.Bound(f => f.Name).Title("Name");
columns.Bound(f => f.Code).Title("Code");
columns.Bound(f => f.Grade).Title("Grade");
columns.Bound(f => f.Manufacturer).Title("Manufacturer");
columns.Bound(f => f.RowVersion).Title("RowVersion").Hidden().IncludeInMenu(false);
columns.Command(command => { command.Edit(); command.Destroy(); }).Width(182);
Hi,
In all my projects using kendo, I have a problem with the culture. I set the culture in french but sometimes, the culture come back in english. So what I did exactly, in my main layout, i set the cultre like this : <script> kendo.culture("fr-FR"); </script> and in my references I included Kendo.Mvc.resources.
Did i forget something ?
Thanks by advance
I am looking to filter the datasource for Grid with a CompositeFilterDescriptor instead of just a FilterDescriptor so I can set the or condition. I can't quite figure out a way to do this using the example on your site as well as playing around with the different constructors for the add method. The add methods only take a FilterDescriptor. Below is an example from your site, is this possible using the Filter() Method on the grid to asdd
@(Html.Kendo().Grid<Product>()
.Name(
"grid"
)
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action(
"Products_Read"
,
"Home"
))
.Filter(filters =>
{
// Show products whose ProductName property contains "C"
filters.Add(product => product.ProductName).Contains(
"C"
);
// and UnitsInStock is greater than 10
filters.Add(product => product.UnitsInStock).IsGreaterThan(10);
})
)
)
Hi , i have he following code in myview of businessunit grid.
while displaying it the businessunit grid and edit businessunit pages it reflects wrong date format be default- 01/01/0001 instead of the actual date though there is an actual and corect date in database.
i am using sql server 2014 .
businessunit view
@{
Layout = null;
}
@Scripts.Render("~/bundles/kendo")
<div>
@(Html.Kendo().Button()
.Name("textButton")
.HtmlAttributes(new { type = "Add BusinessUnit", @class = "btn-primary mar-b-10" })
.Content("Add BusinessUnit"))
</div>
<div id="businessunit" >
@(Html.Kendo().Grid<BHEBS.Areas.Admin.Models.ModalfBusinessUnit>()
.Name("BusinessUnitGrid")
.Events(events => events.Change("Grid_OnRowSelect"))
.Columns(columns =>
{
columns.Bound(b => b.BusinessUnit).Width(40); ;
columns.Bound(b => b.Fund).Width(30);
columns.Bound(b => b.FundPurpose).Width(40);
columns.Bound(b => b.ServiceType).Width(40);
columns.Bound(b => b.GrantNumber).Width(40);
columns.Bound(b => b.StartDate).Format("{0:MM/dd/yyyy}").Width(30);
columns.Bound(b => b.EndDate).Format("{0:MM/dd/yyyy}").Width(30);
columns.Bound(b => b.id).Visible(false);
columns.Bound("").ClientTemplate("<button class='btnGrid btn btn-primary btn-sm' data-id='#:id#' onclick='gridBtnClick(this)'><span class='edit_icon glyphicon glyphicon-pencil' aria-hidden='true'></span>Edit</button> <button class='btnGrid btn btn-primary btn-sm' data-id='#:id#' value='View' onclick='gridBtnClick(this)'><span class='edit_icon glyphicon glyphicon-eye-open' aria-hidden='true'></span>View</button>").Width(40);
})
.HtmlAttributes(new { style = "height: 410px;" })
.ToolBar(tools => tools.Excel())
.Scrollable()
.Sortable()
.Excel(excel => excel
.FileName("BusinessUnit.xlsx")
.Filterable(true)
.ProxyURL(Url.Action("Excel_Export_Save", "Grid"))
)
.ColumnMenu()
.Filterable()
.Pageable(pageable => pageable
.Refresh(true)
.PageSizes(true)
.ButtonCount(5))
.Resizable(resize => resize.Columns(true))
.Selectable(selectable => selectable
.Mode(GridSelectionMode.Multiple))
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("GetBusinessUnitData", "BusinessUnit"))
)
)
</div>
<br />
@(Html.Kendo().Button()
.Name("textButtonAA")
.HtmlAttributes(new { type = "Add BusinessUnit", @class = "btn-primary mar-b-10" })
.Content("Add BusinessUnit AA"))
<div id="businessunitaa" >
@(Html.Kendo().Grid<BHEBS.Areas.Admin.Models.ModalfBusinessUnitAA>()
.Name("BusinessUnitGridAA")
.Columns(columns =>
{
columns.Bound(b => b.SpendPriority).Width(40); ;
columns.Bound(b => b.Description).Width(80);
columns.Bound(b => b.StartDate).Format("{0:MM/dd/yyyy}").Width(30);
columns.Bound(b => b.EndDate).Format("{0:MM/dd/yyyy}").Width(30);
columns.Bound(b => b.InitTotalAuth).Width(35);
columns.Bound(b => b.InitAvailable).Width(35);
columns.Bound(b => b.Id).Visible(false).Width(10);
// columns.Bound("").ClientTemplate("<button class='btnGrid btn btn-primary btn-sm' data-id='#:Id#' onclick='gridAAClick(this)'><span class='edit_icon glyphicon glyphicon-pencil' aria-hidden='true'></span>Edit</button><button class='btnGrid btn btn-primary btn-sm' data-id='#:Id#' onclick='gridAAClick(this)'><span class='edit_icon glyphicon glyphicon-eye-open' aria-hidden='true'></span>View</button>").Width(50);
columns.Bound("").ClientTemplate("<button class='btnGrid btn btn-primary btn-sm' data-id='#:Id#' onclick='gridAAClick(this)'><span class='edit_icon glyphicon glyphicon-pencil' aria-hidden='true'></span>Edit</button> <button class='btnGrid btn btn-primary btn-sm' data-id='#:Id#' value='View' onclick='gridAAClick(this)'><span class='edit_icon glyphicon glyphicon-eye-open' aria-hidden='true'></span>View</button>").Width(40);
})
.HtmlAttributes(new { style = "height: 410px;", })
.ToolBar(tools => tools.Excel() )
.Scrollable()
.Sortable()
.Excel(excel => excel
.FileName("BusinessUnitAA.xlsx")
.Filterable(true)
.ProxyURL(Url.Action("Excel_Export_Save", "Grid"))
)
.ColumnMenu()
.Filterable()
.Pageable(pageable => pageable
.Refresh(true)
.PageSizes(true)
.ButtonCount(5))
.Resizable(resize => resize.Columns(true))
.Selectable(selectable => selectable
.Mode(GridSelectionMode.Multiple))
.Navigatable()
.Navigatable()
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("GetBusinessUnitAA", "BusinessUnit").Data("additionalInfo"))
)
)
</div>
<script>
var id = 0;
Grid_OnRowSelect = function (e) {
var data = this.dataItem(this.select());
id = data.id;
$('#BusinessUnitGridAA').data('kendoGrid').dataSource.read();
$('#BusinessUnitGridAA').data('kendoGrid').refresh();
// alert("1 st grid :" + data.id);//IMP
}
function additionalInfo() {
//alert(id);
return { AdditionalParam: id };
}
function doOnRowSelect(e) {
var selectedItem = this.dataItem(this.select());
alert(selectedItem.ShipName);
}
function formatDate(date) {
debugger;
switch (flag) {
case 1:
return kendo.toString(date, "g");
case 2:
return kendo.toString(date, "d");
case 3:
return kendo.toString(date, "Y");
default:
return kendo.toString(date, "F");
}
}
$('#textButton').on('click', function () {
$.ajax({
url: '@Url.Action("AddBusinessUnit", "BusinessUnit")',
type: 'GET',
success: function (data) {
$('#AddBusinessUnitDiv').html(data);
},
error: function () {
console.log("add business unit error rendering page");
}
});
});
$('#textButtonAA').on('click', function () {
if (id == 0) {
alert("Select one row on the BusinessUnit grid");
}
else {
$.ajax({
url: '@Url.Action("AddBusinessUnitAA", "BusinessUnit")' + '?BU_Id=' + id,
type: 'GET',
success: function (data) {
$('#AddBusinessUnitDiv').html(data);
},
error: function () {
console.log("add business unit aa error rendering page");
}
});
}
});
</script>
<style>
.row div:nth-child(even) {
background-color: #F9F9F9;
}
.row div:nth-child(odd) {
background-color: #aaaaaa;
}
</style>
please suggest.