Hello, I have a Kendo Listview with a template defined as follows:
<script type=
"text/x-kendo-tmpl"
id=
"template"
>
<div class=
"product"
>
<div class=
"product-title"
>
<h3>
#:Name#</h3>
</div>
<div class=
"product-img"
id=
"area"
>
<img src=
"@Url.Content("
~/content/images/
#:Image#")" alt="#:Name# Image" />
<div id=
'tile_#:data.Id#'
class=
"white"
onclick=
"favClick('#:Id#')"
>
</div>
</div>
</div>
</script>
The object in the Listview is the following:
public
class
TileDto
{
public
string
AppId {
get
;
set
; }
public
int
Id {
get
;
set
; }
public
string
Name {
get
;
set
; }
public
string
Url {
get
;
set
; }
public
string
Image {
get
;
set
; }
public
bool
IsFavorite {
get
;
set
; }
public
string
CssClass {
get
;
set
; }
}
I would like for the "IsFavorite" property of the item to determine the value of the class property for the div (white if false, yellow if true):
<
div
id
=
'tile_#:data.Id#'
class
=
"white"
onclick
=
"favClick('#:Id#')"
>
</
div
>
Can this be done within the template? Or, is there an event off of the Listview or its datasource where this can be done?
Thanks for any assistance here.
--- x
I am trying to define a listview containing an element that has an event linked to it (a div or an <a/> tag). However, whenever I click on the item, the event is not invoked.
Here is my listview definition
<
div
class
=
"demo-section k-content wide"
>
@(Html.Kendo().ListView<
InsightPortalWeb.Models.RootObject
>(Model)
.Name("listView")
.TagName("div")
.ClientTemplateId("template")
.DataSource(dataSource =>
{
dataSource.Read(read => read.Action("Application_Read", "Home"));
dataSource.PageSize(15);
})
.Pageable()
.Selectable(selectable => selectable.Mode(ListViewSelectionMode.Multiple))
.Events(events => events.Change("onChange").DataBound("onDataBound"))
)
</
div
>
Here is my template:
<
script
type
=
"text/x-kendo-tmpl"
id
=
"template"
>
<
div
class
=
"product"
>
<
div
class
=
"product-title"
>
<
h3
>#:name#</
h3
>
</
div
>
<
div
class
=
"product-img"
id
=
"area"
>
<
img
src
=
"@Url.Content("
~/content/images/")Picture1.png"
alt
=
"#:name# image"
/>
@*<
div
class
=
"red"
href
=
"#"
></
div
>*@
<
div
id
=
"star"
class
=
"red"
></
div
>
</
div
>
</
div
>
</
script
>
I've tried numerous ways to get an event to fire such as the following:
var
reds = document.getElementsByClassName(
"red"
);
var
redfunction =
function
() {
alert(
"in star"
);
return
true
;
// Not needed, as long as you don't return false
};
for
(
var
i = 0; i, reds.length; i++) {
reds[i].addEventListener(
'click'
, redfunction,
false
);
};
However, none seem to do the trick. What am I missing. How might I accomplish this?
Thanks for any help.
I just updated the Kendo Spreadsheet components to the latest release and am now having a weird problem when data is posted back to the server, the row order changes.
I have a simple controller method that loads a file and returns data back to the client as a spreadsheet (it's doing some server-side validations but that's irrelevant to the problem).
Then client side I send the data back to the server. In the past this has worked great. Now, however, Rows 0 and 1 swap positions.
The only difference between the data coming back with the new component vs. the old is a height attribute. Aside from that everything else is the same.
Controller Method
public ActionResult LoadFile(HttpPostedFileBase file)
{
var workbook = Workbook.Load(file.InputStream, Path.GetExtension(file.FileName));
//workbook = KendoExcelLoader.ProcessWorkbook<
MyObject
>(workbook, ApplyRules);
return Content(workbook.ToJson(), MimeTypes.JSON);
}
Client Side (this is where rows 0 and 1 swap positions):
function saveData() {
kendo.ui.progress($("body"), true);
var sheetData = $("#spreadsheet").data("kendoSpreadsheet").sheets()[0];
$.ajax({
type: "POST",
url: "/import/SaveData",
data: {records: JSON.stringify(sheetData.toJSON())},
success: function (data) {
kendo.ui.progress($("body"), false);
}
});
}
Hi,
I have a requirement to bind data to TreeList where Id and ParentId field are of type string but this does not seem to work. Is it possible?
I have tried making id and parentId field int and then its works.
TreeList:
<div class=
"demo-section k-header"
>
@(Html.Kendo().TreeList<JobErrorLogController.MyClass>()
.Name(
"myClassTreelist"
)
.Columns(columns =>
{
columns.Add().Field(e => e.Item).Width(220);
})
.Filterable()
.Sortable()
.DataSource(dataSource => dataSource
.Read(read => read.Action(
"AllData"
,
"JobErrorLog"
))
.ServerOperation(
false
)
.Model(m =>
{
m.Id(f => f.id);
m.ParentId(f => f.parentId);
//m.Expanded(true);
m.Field(f => f.Item);
})
)
.Height(540)
)
</div>
Class that is bind to TreeList:
public
class
MyClass
{
public
static
IList<MyClass> TestData =
new
List<MyClass>()
{
new
MyClass() {id =
"parent1"
, Item =
"Item0"
, parentId =
null
},
new
MyClass() {id =
"child1"
, Item =
"Item1"
, parentId =
"parent1"
}
};
public
string
id {
get
;
set
; }
public
string
parentId {
get
;
set
; }
public
string
Item {
get
;
set
; }
}
Controller's code:
public
JsonResult AllData([DataSourceRequest] DataSourceRequest request)
{
var result = MyClass.TestData.ToTreeDataSourceResult(request,
e => e.id,
e => e.parentId
);
return
Json(result, JsonRequestBehavior.AllowGet);
}
Hi,
Are there any upgrade guides that cover upgrading from a 2016 version to a 2019 version? Does the Upgrade API Analyzer cover more recent versions?
Hi, I've got a problem with clientTemplate on my grid. I'm not fetching data from server. When I try to switch to Template, it throws an exception. This is my code :
@(Html.Kendo().Grid<PRR405.ViewModels.BatchViewModel>(Model.LotsOuverts)
.Name("LotsOuvert")
.Columns(columns =>
{
columns.Bound(p => p.Post_date).Title(PRR405.Resources.OpenLot.OpenLot.DateDOuverture).Format("{0: yyyy/MM/dd}").Width(150).Filterable(f => f.UI("DatePickerFormated"));
columns.Bound(p => p.Btch_num).Title(PRR405.Resources.OpenLot.OpenLot.NumLotPRR).ClientTemplate(@"<a href='/ResumeLot/ResumeLot?btchNum=#: Btch_num #'>#: Btch_num #</a>").Width(170);
columns.Bound(p => p.Comp_num).Title(PRR405.Resources.OpenLot.OpenLot.Assureur).Width(110);
columns.Bound(p => p.Br_cd).Title(PRR405.Resources.OpenLot.OpenLot.SuccursaleLabel).Width(120);
columns.Bound(p => p.Batch_cd).Title(PRR405.Resources.OpenLot.OpenLot.CodeDeLot).Width(120);
columns.Bound(p => p.Entry_Date_Formated).Title(PRR405.Resources.OpenLot.OpenLot.DateInscription).Width(160);
columns.Bound(p => p.Batch_type_Name).Title(PRR405.Resources.OpenLot.OpenLot.TypeDeLot).Width(140);
//columns.Bound("").Title(PRR405.Resources.OpenLot.OpenLot.ImprimerResume).ClientTemplate(string.Format(@"<a href='/OpenLot/PrintLot?btchNum=#: Btch_num #'>{0}</a>", PRR405.Resources.OpenLot.OpenLot.Imprimer)).Filterable(false);
})
.Scrollable(s => s.Height("100%"))
.HtmlAttributes(new { style = "max-height: 333px; margin-bottom:20px;" })
.Sortable()
.Scrollable()
.Filterable(f => f.Extra(false).Operators(o => o.ForString(str => str.Clear().IsEqualTo(PRR405.Resources.Shared.Shared.GridFiltre_EstEgaleA).IsNotEqualTo(PRR405.Resources.Shared.Shared.GridFiltre_NestPasEgaleA))))
.Resizable(resize => resize.Columns(true))
Thank you for your help
I am trying to set up my index page such that it has a splitter with two horizontal panes, left and right. Each pane gets its contents from a partial view. The left pane should contain a text box, button and a TreeView. The right pane is a map. If I try to load the partial view in the left pane, the page does not display correctly. If I only have a simple string in the left pane content, the page (and map) work. Please advise.
Index.cshtml:
@(Html.Kendo().Splitter()
.Name("splitter")
.Orientation(SplitterOrientation.Horizontal)
.Panes(hPanes =>
{
hPanes.Add()
.HtmlAttributes(new { id = "left-pane" })
.Size("25%")
.Scrollable(false)
.Collapsible(true)
.Content(Html.Partial("_TreeView").ToHtmlString());
//.Content("<
h1
>TEST</
h1
>");
hPanes.Add()
.HtmlAttributes(new { id = "right-pane" })
.Size("75%")
.Scrollable(false)
.Collapsible(false)
.Content(Html.Partial("_MapView").ToHtmlString());
})
)
<
style
>
#splitter {
height: 100vh;
/*width: 100vw;*/
padding: 0;
margin: 0;
}
#left-pane {
color: #000;
background-color: #ccc;
}
#right-pane {
color: #000;
background-color: #aaa;
}
</
style
>
<
script
>
</
script
>
_TreeView.cshtml:
@{
Html.Kendo().TextBox()
.Name("searchTextBox");
Html.Kendo().Button()
.Name("SearchTrigger")
.Content("Search");
}
_MapView.cshtml:
@(Html.Kendo().Map()
.Name("map")
.Center((double)ViewBag.BicLat, (double)ViewBag.BicLong)
.Zoom(14)
.Layers(layers =>
{
layers.Add()
.Type(MapLayerType.Bing)
.ImagerySet(MapLayersImagerySet.AerialWithLabels)
.Key("ApiZL7kfQK2OAVUEfEtIUds-61ZYq1QHeX8DF6fm7kKWlLuzreW4anD5v8DeuvEu");
//.Type(MapLayerType.Tile)
//.UrlTemplate("http://#= subdomain #.tile.openstreetmap.org/#= zoom #/#= x #/#= y #.png")
//.Subdomains("a", "b", "c");
})
.Markers(markers =>
{
markers.Add()
.HtmlAttributes(new {id = "bicMarker" })
.Location((double)ViewBag.BicLat, (double)ViewBag.BicLong)
.Shape(MapMarkersShape.PinTarget)
.Tooltip(tooltip => tooltip.Content("BIC"));
})
)
<
style
>
#map {
height: 100%;
margin: 0;
padding: 0;
}
</
style
>
var grid = $(".k-grid").data("kendoGrid");
grid.setOptions(grid.getOptions())"
{name: "create"}{name: "save"}{name: "cancel"}
MVC:
{ command: { { name: null, buttonType: "ImageAndText", text: "create"}, ...
Hi,
I saw in the documentation:
If you have customized the colors of Bootstrap before using it, and need Kendo UI to match the newly chosen colors, you will need to customize Kendo UI's bootstrap theme through the Kendo UI ThemeBuilder.
But I wasn't lucky trying this.
I use Cyborg in my site an I want KendoUI to use the same colors / fonts.
When I copy the ...min.css to the ThemeBuilder nothing happens.
So how can I import such a theme?
Manfred