I have a Kendo UI TreeMap using the razor syntax:
#(Html.Kendo().TreeMap()
.Name("treeMap")
.DataSource(dataSource => dataSource
.Read(read => read.Action("_PopulationUSA", "TreeMap"))
.Model(m => m.Children("Items")))
.ValueField("Value")
.TextField("Name")
.HtmlAttributes(new { style = "height:600px" })
)
How can I change the default theme to a custom theme?
.Theme("BlueOpal") should work, perhaps you just spelled "BlueOpal" wrong?
#(Html.Kendo().TreeMap()
.Name("treeMap")
.Theme("BlueOpal")
.DataSource(dataSource => dataSource
.Read(read => read.Action("_PopulationUSA", "TreeMap"))
.Model(m => m.Children("Items")))
.ValueField("Value")
.TextField("Name")
.HtmlAttributes(new { style = "height:600px" })
)
Related
How to use Pageable In Kendo TreeList ??
Please Help Me to Add Pageable to Kendo TreeList ??
How can we arrange KENDO TREELIST?
Is it possible to paging at all?
#(Html.Kendo().TreeList<Auditing.Models.DomainModels.EF.test>()
.Name("AccessTreeList")
.Columns(columns =>
{
})
.Filterable()
.Sortable()
.Events(events =>
{
events.ColumnMenuInit("RemoveHide");
events.DataBound("mergeColumn10");
})
.DataSource(dataSource => dataSource
.Read(read => read.Action("FillGrid_Tree", "Balance"))
.Aggregates(aggregates =>
{
aggregates.Add(ss => ss.CreditorAmountInDuringPeriod).Sum();
aggregates.Add(ss => ss.CreditorAmountInBeginningPeriod).Sum();
})
.ServerOperation(false)
.Model(m =>
{
m.Id(f => f.Id);
m.ParentId(f => f.ParentId);
m.Expanded(false);
m.Field(p => p.TurningId_P);
m.Field(p => p.Name);
m.Field(p => p.Name_turning);
})
).ColumnMenu())
The Kendo TreeList doesn't support pagination out of the box but it can be done. You can see a solution in this post in Telerik's forums.
I am a new babie for Kendo UI for MVC, I am trying to customise row color when doing batch editing for a grid, I looked in the internet but couldn't find any info. After editing a cell for batch editing grid by default Kendo add a small red spot at the top left hand side of the cell , what I want to achieve after editing any cell the whole row for that record change change it color. I would like to change the row to green for example to give the user more visibility what row have been edited before click save. I would really app if someone could help me.
code
#(Html.Kendo().Grid<MvcKendo.Models.Availablity>().Name("grid")
.Columns( columns => {
columns.Bound(c => c.Id);
columns.Bound(c => c.TimeFrom);
columns.Bound(c => c.TimeTo);
})
.DataSource(datasource => datasource.Ajax().PageSize(5)
.Read("GetDataAvailablity","Home"))
.ClientDetailTemplateId("template")
)
<script id="template" type="text/kendo-tmpl">
#(Html.Kendo().TabStrip()
.Name("tabStrip_#=Id#")
.SelectedIndex(0)
.Animation(animation => animation.Open(open => open.Fade(FadeDirection.In)))
.Items(items =>
{
items.Add().Text("TimeSheet Details").Content(#<text>#TimeSheetDetails()</text>);
})
.ToClientTemplate()
)
#helper TimeSheetDetails()
{
#(Html.Kendo().Grid<MvcKendo.Models.TimeSheet>()
.Name("grid_#=Id#")
.Events(e => {
e.DataBound("onDataBound");
e.Change("ChangeEvent");
})
.Columns(columns =>
{
columns.Bound(t => t.Id);
columns.Bound(t => t.WardName);
})
.Selectable(selectable => selectable.Mode(GridSelectionMode.Multiple))
.Editable(editable => editable.Mode(GridEditMode.InCell))
.ToolBar(tb=>tb.Save())
.DataSource(dataSource => dataSource
.Ajax().Batch(true)
.PageSize(5)
.Model(model=>model.Id(x=>x.Id))
.Read(read => read.Action("GetDataTimeSheet", "Home", new { Id = "#=Id#" }))
.Update(update => update.Action("Editing_Update", "Home"))
.Events(events => events.Error("error_handler"))
)
.Pageable().Sortable().ToClientTemplate()
)
![enter image description here][2]}
You can make use of the save event in Kendo grid to achieve this
C#
.Events(events => events.Save("onSave")
Javascript
function(e) {
$(e.container).closest("tr").css("background-color","lightgreen");
}
Here's the fiddle for the sample in JS
How would I get my TreeView to expand once the data is loaded?
#(Html.Kendo().TreeView()
.Name("OrganizationTree")
.HtmlAttributes(new { #class = "demo-section" })
.DataTextField("Name")
.DragAndDrop(true)
.ExpandAll(true)
.Events(events => events
.Select("onOrgSelect")
.Drop("onOrgDrop")
)
.DataSource(dataSource => dataSource
.Model(m=> m
.Id("ID")
.HasChildren("HasChildren")
)
.Read(read => read
.Action("Organizations_Read", "Organizations")
)
)
)
I figured it out. It's different than what was posted in Petur's link since it's not pure "Kendo UI" but instead it's Telerik's "UI for ASPNET MVC" that uses Kendo UI's framework.
#(Html.Kendo().TreeView()
.Name("OrganizationTree")
.HtmlAttributes(new { #class = "demo-section" })
.DataTextField("Name")
.DragAndDrop(true)
.ExpandAll(true)
.Events(events => events
.Select("onOrgSelect")
.Drop("onOrgDrop")
.DataBound("onDataBound") //I ADDED THIS HERE
)
.DataSource(dataSource => dataSource
.Model(m=> m
.Id("ID")
.HasChildren("HasChildren")
)
.Read(read => read
.Action("Organizations_Read", "Organizations")
)
)
)
And this I needed this function in the head tag:
<script>
function onDataBound(e)
{
$("#OrganizationTree").data("kendoTreeView").expand(".k-item")
}
</script>
My grid is build like this:
#(Html.Kendo().Grid<MyProject.Models.DataObjects.MyObject>()
.Name("my-object-grid")
.Columns(columns =>
{
columns.Bound(p => p.ID).Hidden();
columns.Bound(p => p.Name).Width(300);
columns.Command(command =>
{
command.Edit().Text("Modify")
.UpdateText("Save")
.CancelText("Cancel")
.HtmlAttributes(new { style = "width:90px;height:30px;font-size:12px;" });
command.Destroy().Text("Delete").HtmlAttributes(new { style = "width:90px;height:30px;font-size:12px;" });
}).Width(220);
})
.ToolBar(toolbar => toolbar.Create().Text("Add").HtmlAttributes(new { style = "width:120px;height:30px;float:left;" }))
.Editable(editable => editable.Mode(GridEditMode.PopUp)
.Window(win => win.Title("MyObject")).TemplateName("MyObject"))
.Pageable()
.Sortable()
.Scrollable()
.Filterable()
.HtmlAttributes(new { style = "height:430px;" })
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(10)
.Model(model =>
{
model.Id(p => p.ID);
})
.Create(update => update.Action("MyObject_Create", "MyObject"))
.Read(read => read.Action("MyObject_Read", "MyObject"))
.Update(update => update.Action("MyObject_Update", "MyObject"))
.Destroy(update => update.Action("MyObject_Delete", "MyObject"))
.Events(evt => evt.Push("myObjectGridDataSource_push").Error("myObjectGridDataSource_error"))
)
)
And the foolwingo javacript handlers are defined after:
<script type="text/javascript">
function myObjectGridDataSource_push(e) {
alert(e.type);
}
function myObjectGridDataSource_error(e) {
alert(e.status);
}
</script>
The javascript generated by the helper seems to be ok, but the event handlers are never fired when I add/edit/remove some item of the grid. But the requests to the controller are working fine.
Could be this related to the edit mode of the grid (using popup)?
I can't find what I am doing wrong...
Push is invoked during dataSource transport initialization which sets up push notifications. The data source will call this function only once and provide callbacks which will handle push notifications (data pushed from the server).
Push event Detailed information
If you can tell what exactly you are trying to achieve then I can be of a bit more help. Also if you want to catch the event before the record id being udpated or inserted or deleted then push won't do it. You will need to implement the sync event of the grid.
The components I'm using Kendo UI, but I have problem in Grid
If you use the code below the column "Command" does not show on the page, but the page Change Sort or by grid, there is a page refresh.
#(Html.Kendo().Grid(Model)
.Name("Grid")
.Columns(columns =>
{
columns.Bound(p => p.cd_empresa).Visible(false);
columns.Bound(p => p.cd_grupo).Visible(false);
columns.Bound(p => p.descricao);
columns.Template
(
#<text>
Text 1
Text 2
</text>
).Title("Command").Width(80);
})
.ColumnMenu()
.Selectable(selectable => selectable.Mode(GridSelectionMode.Single))
.Pageable()
.Sortable()
.Scrollable(scr => scr.Height(240))
.Filterable()
.DataSource(dataSource => dataSource
.Ajax()
.ServerOperation(false)
.PageSize(7)
.Read(read => read.Action("Index", "GrupoFiscal"))
.Model(model => model.Id(p => p.cd_grupo))
.Model(model => model.Id(p => p.cd_empresa))
)
)
If I put
. DataSource (dataSource => dataSource
. Ajax ()
. ServerOperation (false)
. PageSize (7)
. Read (read => read.Action ("Index", "GrupoFiscal"))
. Model (model => model.Id (p => p.cd_grupo))
. Model (model => model.Id (p => p.cd_empresa))
)
Ajax works without refresh the page, but the column "Command" no shows.
Note This column has links to Edit, Delete and Details
Refer to the documentation:
A column template is not displayed
This will happen if the server template is set but the grid is
configured for ajax binding. Set the ClientTemplate as well. This will
also happen if only the client template is set but the grid is
configured for server binding. Set the Template as well.