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.
Related
currently i am working on kendo Grid. I am facing this error. please help me to solve this error.
'DataSourceBuilder' does not contain a definition for
'Custom' and no extension method 'Custom' accepting a first argument
of type 'DataSourceBuilder' could be found (are you missing
a using directive or an assembly reference?)
my code is on razor view is as following:
#(Html.Kendo().Grid<KendoApp.Models.Customer>()
.Name("Grid")
.Columns(columns =>
{
columns.Bound(p => p.ID)
.ClientFooterTemplate("<div>Total Count: #=count#</div><div>Min: #= min #</div><div>Max: #= max #</div>");
columns.Bound(p => p.Age)
.ClientFooterTemplate("Average: #=average#");
columns.Bound(p => p.Name)
.ClientFooterTemplate("<div>Count: #= count #</div>");
columns.Bound(p => p.Salary)
.ClientFooterTemplate("<div>Sum: #= sum #</div>");
})
.ToolBar(toolbar =>
{
toolbar.Create();
toolbar.Save();
})
.Editable(editable => editable.Mode(GridEditMode.InCell))
.Pageable()
.Navigatable()
.Sortable()
.Scrollable()
.DataSource(dataSource => dataSource
.Custom()
.Batch(true)
.PageSize(20)
.Schema(schema => schema.Model(m => m.Id(p => p.ProductID)))
.Transport(transport =>
{
transport.Read(read =>
read.Url("http://demos.telerik.com/kendo-ui/service/products")
.DataType("jsonp")
);
transport.Create(create =>
create.Url("http://demos.telerik.com/kendo-ui/service/products/create")
.DataType("jsonp")
);
transport.Update(update =>
update.Url("http://demos.telerik.com/kendo-ui/service/products/update")
.DataType("jsonp")
);
transport.Destroy(destroy =>
destroy.Url("http://demos.telerik.com/kendo-ui/service/products/destroy")
.DataType("jsonp")
);
transport.ParameterMap("parameterMap");
})
)
)
Error display on "custom". please help me.
Thank you in advance.
The custom DataSource was introduced in version 2014.1.318. Make sure you are using this or a newer Kendo.Mvc.dll version than that.
More information on custom DataSource usage is available at:
http://docs.telerik.com/kendo-ui/aspnet-mvc/custom-datasource
So I've got a grid that I believe is all set up correctly. I've confirmed that the data is coming through, and I've even checked that the AJAX call returns a success with the "ToDataSourceResult" JSON data.
Unfortunately, the only problem is that the data doesn't display. This seems to only be an issue on read, as update, create and delete all work. Just can't retrieve the list of all items afterwards.
My controller action looks like this:
public IActionResult Blog_Read([DataSourceRequest] DataSourceRequest request)
{
var blogs = _blogService.GetPosts().Select(post => new BlogPostModel
{
Id = post.Id,
Title = post.Title,
Author = post.Author,
ShortDescription = post.ShortDescription,
Contents = post.Contents,
LastSaved = post.LastSaved,
Published = post.Published,
PublishedOn = post.PublishedOn
});
var result = blogs.ToDataSourceResult(request);
return Json(result);
}
And my Grid View looks like this:
#(Html.Kendo().Grid<BlogPostModel>()
.Name("grid")
.Columns(columns =>
{
columns.Bound(p => p.Title);
columns.Bound(p => p.Author).Width(120);
columns.Bound(p => p.LastSaved).Width(120);
columns.Bound(p => p.Published).Width(120);
columns.Command(command => { command.Edit(); command.Destroy(); }).Width(250);
})
.ToolBar(toolbar => toolbar.Create())
.Editable(editable => editable.Mode(GridEditMode.PopUp))
.Pageable()
.Sortable()
.Scrollable()
.HtmlAttributes(new { style= "height:600px;"})
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(20)
.Events(events => events.Error("error_handler"))
.Model(model => model.Id(p => p.Id))
.Create(update => update.Action("Blog_Create", "BlogAdmin"))
.Read(read => read.Action("Blog_Read", "BlogAdmin"))
.Update(update => update.Action("Blog_Update", "BlogAdmin"))
.Destroy(update => update.Action("Blog_Delete", "BlogAdmin"))
)
.Deferred()
)
The correct JSON is returned, no javascript errors in the console, so I'm a little confused as to what this could be. Any help would be greatly appreciated.
I solved this by adding
services.AddMvc().AddJsonOptions(options => options.SerializerSettings.ContractResolver = new DefaultContractResolver());
to my Startup.cs ConfigureServices method.
I am new at using Kendo .
I have searched all over but could not see any hint on using group on kendo grid , with server/client side grouping.
#(Html.Kendo().Grid<TemperatureRecord>()
.Name("grid")
.Columns(columns =>
{
columns.Bound(temperatureRecord => temperatureRecord.RecordId).Width(100);
columns.Bound(temperatureRecord => temperatureRecord.MemberIdentity).Width(150);
columns.Bound(temperatureRecord => temperatureRecord.Location);
columns.Bound(temperatureRecord => temperatureRecord.TemperatureCelcius).Width(200);
columns.Bound(temperatureRecord => temperatureRecord.Remark).Width(300);
})
.Groupable(g => g.Enabled(false))
.ToolBar(toolbar =>
{
toolbar.Save();
})
.Editable(editable => editable.Mode(Kendo.Mvc.UI.GridEditMode.InCell))
.DataSource(dataSource => dataSource
.WebApi()
.Batch(true) // Enable batch updates
.Group(groups => groups.Add(temperatureRecord => temperatureRecord.MemberIdentity))
.Model(model =>
{
model.Id(temperatureRecord => temperatureRecord.RecordId);
})
.Read(read => read.Url(Url.HttpRouteUrl("DefaultApi", new { controller = "TemperatureRecord" })))
.Update(update => update.Url(Url.HttpRouteUrl("DefaultApi", new { controller = "TemperatureRecord" })))
)
)
The code which I have do not show any error on screen but it hangs.
Same thing happens when I manually group the grid on browser.. It hangs.
After a number of tries , I discovered that Model needs to be added on the field which you want to group.
Changed the code to following and it worked
#(Html.Kendo().Grid<IHiS.Noss.Web.Models.TemperatureRecord>()
.Name("grid")
.Columns(columns =>
{
columns.Bound(temperatureRecord => temperatureRecord.RecordId).Width(100).Hidden(true);
columns.Bound(temperatureRecord => temperatureRecord.MemberIdentity).Width(150).Groupable(true).Hidden(true);
columns.Bound(temperatureRecord => temperatureRecord.Location).Width(100);
columns.Bound(temperatureRecord => temperatureRecord.TemperatureCelcius).Width(200);
columns.Bound(temperatureRecord => temperatureRecord.Remark).Width(300);
})
.Groupable(g => g.Enabled(false))
.ToolBar(toolbar =>
{
toolbar.Save(); // The "save" command saves the changed data items
})
.Editable(editable => editable.Mode(Kendo.Mvc.UI.GridEditMode.InCell)) // Use in-cell editing mode
.DataSource(dataSource => dataSource
.WebApi()
.ServerOperation(false)
.Batch(true) // Enable batch updates
.Group(groups => groups.Add(temperatureRecord => temperatureRecord.MemberIdentity))
.Model(model =>
{
model.Id(temperatureRecord => temperatureRecord.RecordId); // Specify the property which is the unique identifier of the model
model.Field(temperatureRecord => temperatureRecord.MemberIdentity);
})
.Read(read => read.Url(Url.HttpRouteUrl("DefaultApi", new { controller = "TemperatureRecord" })).Data("getdate"))
.Update(update => update.Url(Url.HttpRouteUrl("DefaultApi", new { controller = "TemperatureRecord" })))
)
)
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" })
)
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.