// would like to access Id value not the string being passed, so I expect 1 in my method not "#: Id #"
.ClientTemplate(ABFront.Model.MethodTest("#: Id #"));
Kendo()
.Grid<Model>()
.Name("AB")
.Columns(columns =>
{
columns.Bound(p => p.ID);
columns.Bound(p => p.Name)
.ClientTemplate(ABFront.Model.MethodTest("#: Id #"));
})
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("ReadPeople", "Person"))
)
Related
I am unable to get edited control value from telerik jquery grid row. I am using .net core telerik kendo grid
#(Html.Kendo().Grid(Model.LedgerEntries)
.Name("LedgerEntries")
.ToolBar(tools => tools.Create().Text("Add New Voucher Row"))
.Editable(editable => editable.Mode(GridEditMode.InCell).CreateAt(GridInsertRowPosition.Bottom))
.Columns(columns =>
{
columns.Bound(p => p.ACCNT_CODE).Title("Account Code").ClientTemplate("#= ACCNT_CODE #" +
"");
columns.Bound(p => p.TRANS_AMT).Title("Debit").HtmlAttributes(new {
#id = "TRANS_AMT" }).ClientTemplate("#= TRANS_AMT #" + "");
columns.Bound(p => p.TRANS_AMT).Title("Credit").ClientTemplate("#= TRANS_AMT_1 #" +
"");
columns.Bound(p => p.BASE_AMOUNT_1).Title("Base Amount
Debit").HtmlAttributes(new { #id = "BASE_AMOUNT_1"
}).ClientTemplate("#= TRANS_AMT_1 #"
+"");
columns.Bound(p => p.BASE_AMOUNT_1).Title("Base Amount
Credit").ClientTemplate("#= TRANS_AMT_1 #" + "");
columns.Bound(p =>
p.DESCRIPTION).Title("Narration").ClientTemplate("#= DESCRIPTION #" +
"");
columns.Command(command => command.Destroy()).Width(100);
columns.Command(command => command.Edit()).Width(100);
})
.DataSource(dataSource => dataSource.Ajax()
.Model(model =>
{
model.Id(p => p.TRANSROWID);
model.Field(p => p.TRANSROWID).Editable(false);
model.Field(p => p.ACCNT_CODE).Editable(true);
model.Field(p => p.TRANS_AMT).Editable(true).DefaultValue(0);
model.Field(p => p.TRANS_AMT_1).Editable(true).DefaultValue(0);
model.Field(p => p.BASE_AMOUNT_1).Editable(true).DefaultValue(0);
model.Field(p => p.DESCRIPTION).Editable(true).DefaultValue("");
})
.ServerOperation(false)
.Batch(true)
.Events(e => e.Error("error_handler")
.Change("onChange"))
)
)
script:
function onChange(e) {
var selected = $.map(this.select(), function (item) {
return $(item).text();
});
kendoConsole.log("Selected: " + selected.length + " item(s), [" + selected.join(", ") + "]");
Error:
Create:315 Uncaught Type Error: this.select is not a function
at init.onChange (Create:315:35)
at init.trigger (kendo.all.js:309417:87)
at init._process (kendo.all.js:309417:87)
at init.success (kendo.all.js:309417:87)
at Object.success (kendo.all.js:309417:87)
at init.read (kendo.aspnetmvc.js:1052:87)
at kendo.all.js:309417:87
at init._queueRequest (kendo.all.js:309417:87)
at init.read (kendo.all.js:309417:87)
at init.query (kendo.all.js:309417:87)
According to telerik's official documentation, the select method will not trigger the change event. Maybe this is the reason why this.select is not accepted. You can refer to the code in it.
Another possibility is that you need to select a value by default to correspond to the this.select function before letting the grid load.
Hope this can help you.
I have a grid bind to SignalR hub on what's down
#(Html.Kendo().Grid<MyDownloader.Core.ViewModel.DownloaderViewModel>()
.Name("grid")
.Columns(columns =>
{
columns.Bound(c => c.LocalFile);
columns.Bound(c => c.FileSize);
columns.Bound(c => c.StatusMessage);
columns.Bound(c => c.Progress);
columns.Bound(c => c.Left);
columns.Bound(c => c.Rate);
columns.Bound(c => c.CreatedDateTime);
columns.Bound(c => c.State);
columns.Bound(c => c.ResourceLocation);
columns.Command(c => c.Destroy());
})
.HtmlAttributes(new { style = "height: 550px;margin-bottom:20px;" })
.Sortable()
.Scrollable()
.DataSource(dataSource => dataSource
.SignalR()
.AutoSync(true)
.Events(events => events.Push("onPush"))
.Sort(s => s.Add("FileSize").Descending())
.Transport(tr => tr
.Promise("hubStart")
.Hub("hub")
.Client(c => c
.Read("read")
.Create("create")
.Update("update")
.Destroy("destroy"))
.Server(s => s
.Read("read")
.Create("create")
.Update("update")
.Destroy("destroy"))).Schema(schema => schema
.Model(model =>
{
model.Id("FileSize");
}))
))
I want to update all client when an object added to database (Downloader Table)
I call read() client method out side the hub like this
var context = GlobalHost.ConnectionManager.GetHubContext<Hubs.DownloadrHub>();
context.Clients.All.read();
but read() method not raised and grid not refresh and Data not update
How can update all client grid out of the Hub?
Usually you don't call the read method on the client. You call the create, update or delete method. Depending on the action performed. The grid handles it automagically.
E.g. Clients.All.update(new { Data = whateveryourdatais );
Have a look at the telerik examples.
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'm trying to set a min and max values for datetime picker control inside a grid. The value needs to be set dynamically, based on the value of another datepicker on the form.
I had try handling the onEdit event and trying to find the datetime picker control inside the row been edited to set those values without looking.
Whats is the proper way of restricting date ranges in Kendo Grid MVC inline editing?
This is how the grid is created:
<div>
#(Html.Kendo().Grid<CpcPrevisionUnidadesDto>()
.Name("gridListado")
.HtmlAttributes(new { #class = "kendo-grid-" })
.AutoBind(false)
.Columns(columns =>
{
columns.Bound(c => c.IdCpcPrevisionParadasUnidadesDto).Hidden();
columns.Bound(c => c.IdCpcUnidadesProceso).Hidden();
columns.Bound(c => c.CodigoUnidadProceso).Title(Html.Resource("CPC_CU_DP003_Unidad").ToString());
columns.Bound(c => c.DescripcionUnidadProceso).Title(Html.Resource("CPC_CU_DP003_Nombre").ToString());
columns.Bound(c => c.FechaParada).Title(Html.Resource("CPC_CU_DP003_FechaParada").ToString()).Format("{0:dd/MM/yyyy}").EditorTemplateName("Date"); // Need to set MAX and MIN values
columns.Bound(c => c.FechaArranque).Title(Html.Resource("CPC_CU_DP003_FechaArranque").ToString()).Format("{0:dd/MM/yyyy}").EditorTemplateName("Date"); // Need to set MAX and MIN values
columns.Bound(c => c.Observaciones).Title(Html.Resource("CPC_CU_DP003_Observaciones").ToString());
columns.Template(c => { }).Title(" ").Width(40).ClientTemplate("#=menuRuedaTemplate([uid])#").HtmlAttributes(new { style = "overflow: visible;" });
})
.DataSource(datasource => datasource
.Ajax()
.PageSize(20)
.Read(read => read.Action("BuscarPrevisionParadasPrevistasUnidades", "PrevisionParadasPrevistasUnidades").Data("setParametrosListado"))
.Create(create => create.Action("CreatePrevisionParadasPrevistasUnidades", "PrevisionParadasPrevistasUnidades").Type(HttpVerbs.Post).Data("sendAntiForgery"))
.Update(update => update.Action("UpdatePrevisionParadasPrevistasUnidades", "PrevisionParadasPrevistasUnidades").Type(HttpVerbs.Post).Data("sendAntiForgery"))
.Sort(sort => sort.Add("CodigoUnidadProceso").Ascending())
.Events(e => e.Error("screenErrorHandling"))
.Model(model => model.Id(p => p.IdCpcPrevisionParadasUnidadesDto))
)
.Sortable()
.Navigatable()
.Pageable(pager => pager.Messages(messages => messages.Display(Html.Resource("Mensaje_Grid_Datos").ToString()))
.Messages(m => m.Empty(Html.Resource("Mensaje_Grid_SinDatos").ToString())))
.Resizable(r => r.Columns(true))
.Events(e => e.DataBound("dataBoundGrid").Edit("onEdit"))
.Editable(editable => editable.Mode(GridEditMode.InCell))
.ToolBar(toolbar => toolbar.Save().SaveText(Html.Resource("MAIN_Guardar").ToString()).CancelText(Html.Resource("MAIN_Cancelar").ToString())))
</div>
This is the date editor template:
#model DateTime?
#(Html.Kendo().DatePickerFor(m => m))
You need to edit the HTML for your DatePicker and specify values for Min and Max. In this example, you will only be able to choose past values from this year.
#(Html.Kendo().DatePickerFor(m => m)
.Min("01/01/2016")
.Max(DateTime.Now)
)
If you need to set the value dynamically, you can try this, just get the value you need:
$("#Date").data("kendoDatePicker").min(new Date(2015, 0, 1))
same for .max()
Try that on your "onEdit" event, when the datepicker is created, and let me know if you need more help
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" })))
)
)