Please help me with the TagHelper equivalent of the following code.
ps. A suggestion for your documentation team; please include more useful examples like you have for the razor code -> the one read-only example is trivial and on the border of being useless.
@(Html.Kendo().Grid<
OrderViewModel
>
()
.Name("grid2")
.Columns(columns =>
{
columns.Bound(p => p.OrderID).Width(100);
columns.Bound(p => p.Freight);
columns.Bound(p => p.OrderDate).Format("{0:yyyy-MM-dd HH:mm:ss}");
columns.Bound(p => p.ShipName);
columns.Bound(p => p.ShipCity);
columns.Command(command => { command.Edit(); command.Destroy(); }).Width(250);
})
.ToolBar(toolbar => toolbar.Search())
.Editable(editable => editable.Mode(GridEditMode.InLine))
.Pageable()
.Sortable()
.Scrollable()
.HtmlAttributes(new { style = "height:430px;" })
.DataSource(dataSource => dataSource
.Ajax()
.ServerOperation(false)
.PageSize(80)
//.Events(events => events.Error("error_handler"))
.Model(model => model.Id(p => p.OrderID))
.Read(read => read.Action("Orders_Read", "Grid"))
.Create(create => create.Action("Orders_Create","Grid"))
.Destroy(update => update.Action("Orders_Destroy", "Grid"))
.Update(update => update.Action("Orders_Update", "Grid"))
)
)
I have tried with the following but have not succeeded in getting the destroy event to fire properly.
<
kendo-grid
name
=
"grid1"
height
=
"550"
>
<
columns
>
<
column
field
=
"OrderID"
title
=
"Order ID"
>
<
filterable
enabled
=
"false"
></
filterable
>
</
column
>
<
column
field
=
"Freight"
title
=
"Freight"
/>
<
column
field
=
"OrderDate"
title
=
"Order Date"
format
=
"{0:MM/dd/yyyy}"
/>
<
column
field
=
"ShipName"
title
=
"Ship Name"
/>
<
column
field
=
"ShipCity"
title
=
"Ship City"
/>
<
column
>
<
commands
>
<
column-command
text
=
"Delete"
name
=
"destroy"
></
column-command
>
<
column-command
text
=
"Edit"
name
=
"edit"
></
column-command
>
</
commands
>
</
column
>
</
columns
>
<
scrollable
enabled
=
"true"
/>
<
sortable
enabled
=
"true"
/>
<
pageable
enabled
=
"true"
/>
<
editable
mode
=
"inline"
/>
<
filterable
enabled
=
"true"
/>
<
datasource
type
=
"DataSourceTagHelperType.Ajax"
page-size
=
"20"
server-operation
=
"false"
>
<
transport
>
<
read
url
=
"@Url.Action("
Orders_Read", "Grid")" />
<
destroy
url
=
"@Url.Action("
Orders_Destroy", "Grid")" />
</
transport
>
<
schema
>
<
model
>
<
fields
>
<
field
name
=
"OrderId"
type
=
"int"
></
field
>
<
field
name
=
"Freight"
type
=
"decimal"
></
field
>
<
field
name
=
"OrderDate"
type
=
"DateTime"
></
field
>
<
field
name
=
"ShipName"
type
=
"string"
></
field
>
<
field
name
=
"ShipCity"
type
=
"string"
></
field
>
</
fields
>
</
model
>
</
schema
>
</
datasource
>
</
kendo-grid
>
Why are the 3.0 templates still using older 2.2 code in startup.cs and program.cs? Sure it works but it's not really 3.0 syntax.
Example:
2.2 -> 3.0:
AddMvc -> AddControllersWithViews
IWebHostBuilder -> IHostBuilder
There must be an easier way to set the background color of cells based on a condition.
I have the following code that colors all cells the same color. I will modify it later to constrain it to those cells that I actually need to color.
Before I do, I want make sure I am doing things correctly. My code works, but seems overly complicated. The other issue is that when the color is set I lose the horizontal border. Is there a way to color a cell and keep the 4 borders (i.e. the gridlines)?
Any guidance would be greatly appreciated.
function gridDataBound(e)
{
var grid = this;
var headerCells = grid.element.find("th");
var data = $("#grid").data("kendoGrid").dataSource.data();
var i;
var j;
var dataItem;
rows = e.sender.content.find('tr');
for (i = 0; i < rows.length; i++)
{
dataItem = data[i];
var rowCells = grid.element.find("tr[data-uid=" + dataItem.uid + "] td");
for (j = 0; j < rowCells.length; j++)
{
$(rows[i]).children('td:eq(' + j + ')').css("background-color", "yellow");
}
}
Hello,
I try setup my Kendo grid in a Net.Core project with inline editing, but the "Create" controller action not firing after I try add new row. The Read method executes successfully, but the Create method never executing.
My controller code:
[HttpPost]
public
ActionResult Create([DataSourceRequest] DataSourceRequest request, DynamicMessageViewModel product)
{
return
Json(
new
[] { product }.ToDataSourceResult(request, ModelState));
}
public
ActionResult Read([DataSourceRequest]DataSourceRequest request)
{
IQueryable<DynamicMessageModel> dynamicmessagemodels = _context.DynamicMessage.DistinctBy(d => d.StringId).AsQueryable();
DataSourceResult result = dynamicmessagemodels.ToDataSourceResult(request, dynamicMessageModel =>
new
DynamicMessageViewModel {
Id = dynamicMessageModel.Id,
StringId = dynamicMessageModel.StringId,
Culture = dynamicMessageModel.Culture,
Message = dynamicMessageModel.Message
});
return
Json(result);
}
My view:
@(Html.Kendo().Grid<MyCoreSite.Models.DynamicMessage.DynamicMessageViewModel>()
.Name(
"grid"
)
.Columns(columns =>
{
columns.Bound(c => c.Id).Hidden();
columns.Bound(c => c.StringId);
columns.Bound(c => c.Culture).Hidden();
columns.Bound(c => c.Message).Hidden();
columns.Command(command => { command.Edit().Text(
" "
).CancelText(
" "
).UpdateText(
" "
).HtmlAttributes(
new
{ title = Lang[
"Szerkesztés"
].Value }); command.Destroy().Text(
" "
).HtmlAttributes(
new
{ title = Lang[
"Törlés"
].Value }); }).Width(102);
})
.ToolBar(toolbar =>
{
toolbar.Create();
toolbar.Excel();
})
.Editable(editable => editable.Mode(GridEditMode.InLine))
.Pageable()
.Selectable(selectable =>
{
selectable.Mode(GridSelectionMode.Single);
selectable.Type(GridSelectionType.Row);
})
.Sortable(sortable =>
{
sortable.SortMode(GridSortMode.SingleColumn);
})
.Filterable(filterable => filterable.Mode(GridFilterMode.Row))
.Scrollable()
.Events(events =>
{
events.Edit(
"onEdit"
);
events.Change(
"onRowChange"
);
events.SaveChanges(
"onSaveChanges"
);
})
.DataSource(dataSource => dataSource
.Ajax()
.Create(create => create.Action(
"Create"
,
"DynamicMessage"
))
.Update(update => update.Action(
"Update"
,
"DynamicMessage"
))
.Read(read => read.Action(
"Read"
,
"DynamicMessage"
))
)
)
My first question: why the Create action not firing after I try add new row? If I check the url of the Accept button, I see "#" in the href attribute...
My second question: after I click on the "Edit" button inside a row, the Cancel button appear. After I click on Cancel, the entire row will be removed from the grid. I dont understand why.
Thank you for help!
Hi There,
I am working on a grid which has a dropdownlist column. I use the solution in the following demo:
https://demos.telerik.com/aspnet-core/grid/editing-custom
The difference is that we need to save the grid through an ajax call instead of the build-in "Save Changes" button. I added a "Save" button under the grid, change the dropdownlist value and use the following code to post the grid data to Controller action, but the value of products passed to Action always contains the original dropdownlist value other than the updated value. Is there anything not right in my code? Please help. Thank you.
$('#btnSaveGridData').click(function () {
var data = $("#grid").data("kendoGrid").dataSource.data();
$.ajax({
url: '/Editing_CustomController/SaveGridData',
type: "post",
contentType: 'application/json',
dataType: 'json',
data: JSON.stringify(data),
complete: function (response) {
$("#gridSection").empty();
$("#gridSection").html(response.responseText);
},
failure: function (response) {
//alert(response.responseText);
},
error: function (response) {
//alert(response.responseText);
}
});
});
Controller Action
[HttpPost]
public async Task<
IActionResult
> SaveGridData([FromBody] List<
ProductViewModel
> products)
{
//Action logic
return PartialView("_Grid");
}
Hi,
We have a custom popup grid editing form with cascading dropdowns, which use serverFiltering(true) and pass 3 parameters to the datasource read action.
The dropdown gets a set of items and we then want to use simple clientside filtering in the dropdown to help the users find what they want:
@(Html.Kendo().DropDownListFor(m => m.CodeId)
.OptionLabel("Select code ...")
.DataTextField("Description")
.DataValueField("Id")
.Filter(FilterType.Contains)
.MinLength(2)
.ValuePrimitive(true)
.DataSource(source =>
{
source.Read(read =>
{
read.Action("GetCodesForPropertyForCashType", "CodeInvoice").Data("GetCodes");
})
.ServerFiltering(true);
})
.Enable(false)
.AutoBind(false)
.CascadeFrom("ScheduleId")
)
But the server filtering always seems to kick in.
Can we get the dropdown to just filter its contents in place after the initial load?
Thanks,
Daniel.
How create chart with 2 or 3 bars from DataSource
series.Bar(model => model.Sum).Name(""); // One Bar
series.Bar(model => model.Sum).Name(""); // Need new data????
@(Html.Kendo().Chart<CoreDiag.Models.CKassaLine>(Model)
.Name(
"Name1"
)
// The name of the Chart is mandatory. It specifies the "id" attribute of the widget.
.Title(
"Name1"
)
.Series(series =>
{
series.Bar(model => model.Sum).Name(
""
);
})
.CategoryAxis(axis => axis
.Categories(model => model.Period)
)
)
HI
I have a ASP.NET MVC/ASP.NET Core MVC compatibility question
about ASP.NET Core MVC Grid.
Why the following code not available in .NET Core 2.2 ?
.cshtml
columns.Template(template => { }).ClientTemplate(" ");
More detail :
.Columns(columns =>
{
...
columns.Template(template => { }).ClientTemplate(" ");
})
I think Telerik have the responsibility keep the code of recent version
(R2 2017, R2 2019...) to compatible with ASP.NET Core MVC.
Private implementation changed but should try to keep the public property/method the same.
It is the Value/Reason Why We choose Telerik.
Best regards
Chris
I have a situation where I don't know the number of columns I need at design time.
I want to do something like:
DateTime dt = DateTime.Now.Date;
int dayCount = 30;
.Columns(columns =>
{
for (int i = 0; i < dayCount ; i++)
{
columns.Bound(model.datedata).Title(dt.AddDays(i).ToString())… blah blah blah
}
}
Can someone show me an example of how to do this. Nothing I've found on the web seems to fit this bill.
Thanks …. Ed
Hi.
How I can change the value before export data to PDF?
I have a checkbox, and I need to change the format, I want to write YES/NO for checkboxes.
Is it possible to change PDF export to say Yes / No for check-boxes?