I'm trying to set connectors datasource in my diagram, but the connectors are not set.
When I inspect the diagram, members source is filled but connectors source is empty.
My code is something like this:
Html.Kendo().Diagram()
//Set Members DataSource
.DataSource(ds => ds
.Read(read => read.Action("MembersActionName", "ControllerName")
.Model(m =>
{
m.Id("MemberId");
})
)
//Set Connectors DataSource
.ConnectionsDataSource(cds => cds
.Read(read => read.Action("ConnectorsActionName", "ControllerName")
.Model(m =>
{
m.From("SourceMemberId");
m.To("DestinationMemberId");
m.Id("ConnectionId");
})
)
.AutoBind(true)
.Layout(l => l
.Type(DiagramLayoutType.Tree)
.Subtype(DiagramLayoutSubtype.Down)
)
.ShapeDefaults(sd => sd.Visual("visualTemplate"))
.ConnectionDefaults(cd =>
{
cd.Stroke(s => s.Color("#006bab").Width(1));
cd.Type(DiagramConnectionType.Polyline);
cd.StartCap(st =>
{
st.Type("FilledCircle");
st.Fill(stf => stf.Color("#006bab"));
});
cd.EndCap(st =>
{
st.Type("ArrowEnd");
st.Fill(stf => stf.Color("#006bab"));
});
})
.Render();
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.
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" })))
)
)
By default it looks like Telerik Grid for MVC3 submits only the rows marked as "dirty" to my controller. I need to be able to submit all rows on a Telerik Grid to my controller. In other words I think I need to mark all rows as changed so the grid will send all rows to my controller.
I am using Ajax data binding as in:
.DataBinding(dataBinding => dataBinding
.Ajax()
.Select("GetData", "ModuleAccess", new { roleId = #ViewBag.RoleId, appId = #ViewBag.AppId })
.Update("SaveBatchEditing", "ModuleAccess")
#(Html.Telerik().Grid<BarcodeListModel>()
.Name("orders-grid")
.ClientEvents(events => events.OnDataBinding("onDataBinding"))
.DataKeys(keys =>
{
keys.Add(x => x.Id);
})
.ToolBar(commands =>
{
commands.SubmitChanges();
})
.DataBinding(dataBinding =>
dataBinding.Ajax()
.Select("BulkEditSelect", "ProductVariant")
.Update("BulkEditSaveBarcode", "ProductVariant")
.Delete("DeleteBarcode", "ProductVariant")
)
.Columns(columns =>
{
columns.Bound(x => x.Id).ReadOnly();
columns.Bound(x => x.SKU);
columns.Bound(x => x.barcode);
//columns.Bound(x => x.Id)
// .Template(x => Html.ActionLink(T("Admin.Common.View").Text, "DeleteBarcode", new { id = x.Id }))
// .ClientTemplate("" + "Delete" + "")
// .Width(50)
// .Centered()
// .HeaderTemplate("DeleteBarcode")
// .Filterable(false)
// .Title("Delete");
columns.Command(commands => commands.Delete()).Width(180);
})
.Pageable(settings => settings.PageSize(gridPageSize).Position(GridPagerPosition.Both))
.DataBinding(dataBinding => dataBinding.Ajax().Select("BarcodeList", "ProductVariant", Model))
.Editable(editing => editing.Mode(GridEditMode.InCell))
.EnableCustomBinding(true)
)
use like this code
I found the answer:
function ModuleAccessGridHasChanges() {
var grid = $("#ModuleAccessGrid").data("tGrid");
if (grid != null) {
var additionalValues = grid.data;
if (!$.telerik.trigger(grid.element, 'submitChanges', { values: additionalValues })) {
grid.sendValues($.extend({}, additionalValues), 'updateUrl', 'submitChanges');
}
}
}
Fiddler shows all the data for the grid coming accross:
I have Kendo Grid with delete command. When I click delete and then click "save change" on the left top of grid, real data is not sent to server. data has key/create date/other fields. I used Odata service. In debug mode, key = 0 and create date = 1/1/0001. Anyone got a clue what is happening here?
#(Html.Kendo().Grid<OData.proxySvc.table1>()
.Name("MyGrid")
.Columns(columns =>
{
columns.Bound(f => f.key).Visible(false);
columns.Bound(f => f.UserName).Title("Name");
columns.Command(command => {
command.Destroy();
}).Title("Action").Width(90);
})
.ToolBar(toolbar =>
{
toolbar.Save();
})
.Editable(editable => editable.Mode(GridEditMode.InCell))
.Sortable()
.Scrollable(s => s.Height("100px"))
.Filterable()
.DataSource(ds => ds
.Ajax()
.Batch(true)
.ServerOperation(false)
.Model(model => model.Id(p => p.key))
.Destroy("Delete","Home")
))
in control file, there is action:
// no [Httppost] attributes. if [HttpPost] attributes exist, no event fire
public ActionResult Delete([DataSourceRequest]DataSourceRequest request,
[Bind(Prefix = "models")]IEnumerable<table1> tbl1)
{
var context = CreateOdataServiceContext();
foreach (var t1 in tbl1)
{
var x = context.table1.Where(r => r.key == t1.key).FirstOrDefault();
if (x!=null)
{
context.DeleteObject(x);
context.SaveChanges();
}
}
}