Hello,
I managed to connect to the database by refering to the following article: http://docs.telerik.com/kendo-ui/aspnet-mvc/helpers/grid/ajax-editing
I am currently able to read, create, edit and delete table rows from my Azure SQL database.
Nevertheless, I still have a little problem dealing with that subject.
As soon as a modification is made (one row update for example) using that method, new rows are automatically created and they are based on
existing data before changes.
For example, I have a single row called "T1" in my datatable. After adding a second row called "Other", it automatically creates another
third row called "T1". As as result, I get 3 rows except of 2.
I have checked with some debugger and I have noticed that my creation method (called "FournisseursCreate" in the controller) is called twice once the "Update" button is clicked. But I don't handle KendoUI enough yet to point the reason out.
Have you ever heard about that ?
I have attached the view and the controller I'm using.
Thank you for your help.
I'm will be using MVC 5.0 and entity framework 6.0. I want to create a view where there are text fields, combo boxes on the top from a parent table. Then beneath that, there is a grid with lines from a child table. I want all of this to have a pager at the bottom, so that when you hit the arrow to go to the next parent record, it shows the child records that go with it in the grid.
What is the best way to do this w/Telerik controls (mvc server wrapper controls).
Hi,
I have a ASP.Net MVC 2 project with Telerik MVC Extension. In it there is Grid that has DetailView to display another grid after clicking a plus sign. It works fine. But when converting the project to Kendo, I am surprise to find that there is such feature in Kendo. DetailView is an important feature. So I'd like to know how to implement DetailView in Kendo. Thanks.
York
Found an issue when displaying a list of items and deleting. Kendo seems to be picking up on the “k-grid-delete” style and showing the confirmation correctly, but if I delete multiple rows(one at at time), the action name for the first delete call is missing from the URL.
For the first call and only for the first call it looks like “http://localhost:58501/Application/WholesaleLicense?permitApplicationId=d562e244-2093-488a-aec1-a4e300a72881” instead of “http://localhost:58501/Application/WholesaleLicense/Delete?permitApplicationId=d562e244-2093-488a-aec1-a4e300a72881”.
When calling delete the second time it works fine. It doesn’t matter which row is deleted first so it’s not that the first row of the grid is somehow rendered differently.
Is there a fix for this? See code below.
@using
(Html.BeginForm("IndexPost", "WholesaleLicense",
FormMethod.Post, new { id = "ApplicationNavigationForm", Area =
"Application" }))
{
@Html.Partial("_NewApplicationProcessHeader", Model)
<div
class="panel-body">
@(Html.Kendo().Grid<WholesaleLicenseDetailViewModel>()
.Name("licenseGrid")
.Editable(editable =>
editable.DisplayDeleteConfirmation("Are you sure you want to delete this
item?"))
.DataSource(datasource => datasource.Ajax()
.Read(read =>
read.Action("GetWholeSaleLicenseSummaries",
"WholesaleLicense", new { permitApplicationId =
@Model.HeaderViewModel.PermitApplicationId }))
.Destroy(x =>
x.Action("Delete", "WholesaleLicense", new { permitApplicationId
= @Model.HeaderViewModel.PermitApplicationId }))
.Model(model => model.Id(x => x.WholesaleLicenseId)))
.Columns(col =>
{
col.Bound(x => x.WholesaleLicenseId).Hidden();
col.Bound(x => x.LicenseNumber);
col.Template(@<text></text>)
.ClientTemplate("<a class='blue-tableRowIcon glyphicon glyphicon-edit'
href='" + Url.Action("Details", new { id = "#= Id #",
permitApplicationId = Model.HeaderViewModel.PermitApplicationId }) +
"'></a>" + Environment.NewLine
+ "<div class='k-button-icontext k-grid-delete red-tableRowIcon glyphicon
glyphicon-remove' ></div>"
)
.FooterTemplate("<a class='green-tableRowIcon glyphicon glyphicon-plus'
href='" + Url.Action("Details", new { id = Guid.Empty,
permitApplicationId = Model.HeaderViewModel.PermitApplicationId }) +
"'></a>")
.Title("Action")
.Width(94);
}))
</div>
@Html.Partial("_NewApplicationProcessFooter", Model)
}
Hello,
I have an ASP.NET MVC app using Telerik MVC controls and I need to return a Razor expression from the controller action and have it rendered in the view as razor. For example, I need to return the following in my model to the view:
"@(Html.Kendo().CheckBox().Name(\"eq1\").Checked(true).Label(\"Rear side airbags\"));";
And have it rendered correctly as a checkbox in the view. All I can get it to do is render the text itself.
Thanks,
Michael
I'm trying [ UI for ASP.NET MVC Q2 2015 ]'s pivotgrid object, (in order to substantiate if it fits the needs of the organization which I belong. Also, I haven't read the terms and conditions about creating threads. Sorry if that information was unnecessary.). The object:
<%: Html.Kendo().PivotGrid<T>()
.Name("pivotgrid").Configurator("#configurator")
.BindTo(Model).DataSource(dataSource => dataSource
/* etcetera */
%>
It is required to set active fields on Columns, Rows, etc, via Javascript, or C# for that matter, after the object is created. It is indispensable to load some report configuration model associated to user profiles. The pivot grid object would be used by some sort of administrator user (who would export reports configuration built with the "configurator"), and by other users who would only be able to see the report and do some minor sets on those previously determined measures, rows, columns.
Thank you,
Great tool! By the way
I have custom editable hierarchical grid. I have add and delete buttons in the child grid. when i click add button on child grid, it opens up kendo window on which user will be displayed list of records where user can select record and click add button. On add click button i am writing ajax call which adds the records. on success of ajax call i am refreshing parent grid which closes up the child expandable row. At that point i just want to refresh child grid so that it still stays open.
I have same issue with delete button too. when user clicks on delete on child grid, I have a ajax call which deletes the record but on success i want to refresh just child grid
parent grid
<
div
class
=
"col-xs-18 col-md-12"
>
@(Html.Kendo().Grid<
BHEBS.Areas.Admin.Models.ContractModel.providers
>()
.Name("grid")
.Columns(columns =>
{
//columns.Bound(p => p.Id).Filterable(false).Width(50);
columns.Bound(p => p.ContractorType).Width(100);
columns.Bound(p => p.ContractorName);
columns.Bound(p => p.BHSISNum).Width(200); ;
columns.Bound(p => p.StartDate).Format("{0:MM/dd/yyyy}").Width(180);
columns.Bound(p => p.EndDate).Format("{0:MM/dd/yyyy}").Width(180);
columns.Command(command => command.Custom("Remove").Text("Remove").SendDataKeys(true).Click("deleteClick").HtmlAttributes(new { @class = "k-button k-button-icontext k-grid-add k-primary" })).Width(160);
}).Events(e => e.DataBound("onDataBound"))
.Pageable()
.Sortable()
.Scrollable()
.Filterable()
.Selectable()
.ClientDetailTemplateId("template")
.HtmlAttributes(new { style = "height:350px;" })
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(20)
.Read(read => read.Action("Contractors_Read", "Contract").Data("additionalInfo"))
))
</
div
>
child grid
<
script
id
=
"template"
type
=
"text/kendo-tmpl"
>
@(Html.Kendo().Grid<
BHEBS.Areas.Admin.Models.ContractModel.serviceDetails
>()
.Name("grid_#=Id#")
.Columns(columns =>
{
// columns.Bound(o => o.Id).Width(50);
columns.Bound(o => o.ServiceId);
columns.Bound(o => o.ServiceType);
columns.Bound(o => o.AdultChild);
columns.Bound(o => o.Qualifier);
columns.Command(command => command.Custom("Remove").SendDataKeys(true).Click("deleteClickServices"));
}).Events(e => e.DataBound("onDataBoundServices"))
.ToolBar(toolbar =>
{
toolbar.Template(@<
text
>
<
div
class
=
"toolbar"
>
<
button
class
=
"k-button k-button-icontext k-grid-add k-primary"
id
=
"serviceskendowindow"
>Assign Services</
button
>
</
div
>
</
text
>);
})
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(10)
.Read(read => read.Action("Services_Read", "Contract", new { contractorId = "#=Id#", contractId = ViewBag.ContractService.Id }))
)
.Pageable()
.Sortable()
.ToClientTemplate()
)
</
script
>
on click assign button on child grid
@(Html.Kendo().Window()
.Name("servicewindow")
.Title("Assign Services")
.Content(@<
text
><
div
class
=
"container-fluid"
>
<
div
class
=
"row"
>
<
div
class
=
"col-xs-18 col-md-12"
>
@(Html.Kendo().Grid<
BHEBS.Areas.Admin.Models.ContractModel.serviceDetails
>()
.Name("gridServicesWindow")
.Columns(columns =>
{
columns.Template(x => { }).HtmlAttributes(new { @class = "chkbox" }).ClientTemplate("<
input
type
=
'checkbox'
class
=
'checkbox'
id
=
'chkBoxServices'
/>");
columns.Bound(p => p.Id).Filterable(false).Width(50);
columns.Bound(p => p.ServiceId);
columns.Bound(p => p.ServiceType);
columns.Bound(p => p.StartDate).Format("{0:MM/dd/yyyy}");
columns.Bound(p => p.EndDate).Format("{0:MM/dd/yyyy}");
columns.Bound(p => p.AdultChild);
})
.Pageable()
.Sortable()
.Scrollable()
.Filterable()
.AutoBind(false)
.Selectable(selectable => selectable.Mode(GridSelectionMode.Multiple))
.HtmlAttributes(new { style = "height:350px;margin-right:30px;" })
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(20)
.Read(read => read.Action("GetAllServices_Read", "Contract").Data("additionalInfoAddServices"))
)
)
<
button
class
=
"k-button close-buttonservices k-primary"
style
=
"bottom: 10px; "
>Cancel</
button
>
<
button
class
=
"k-button k-primary"
id
=
"addSelectedServices"
style
=
"bottom: 10px; "
>Assign</
button
>
</
div
>
</
div
>
</
div
></
text
>
)
.Draggable()
.Resizable()
.Width(800)
.Modal(true)
.Visible(false)
)
script :
$("#addSelectedServices").bind("click", function () {
var checked = [];
for(var i in checkedServiceIds){
if(checkedServiceIds[i]){
checked.push(i);
}
}
var contractId = '@(ViewBag.ContractService.Id)';
var contractorId=addSelectedContractorService;
addServices(checked,contractId,contractorId)
});
function addServices(lstServices,contractId,contractorId) {
var element = $(document.body);
kendo.ui.progress(element, true);
$.ajax({
url: '@Url.Action("AddServices", "Contract")',
type: 'POST',
contentType: 'application/json',
data: JSON.stringify({
lstSelectedService: lstServices ,
contractorId:contractorId,
contractId: contractId
}),
success: function (response, jqXHR) {
var element = $(document.body);
kendo.ui.progress(element, false);
var orderWindow = $('#servicewindow').data("kendoWindow");
orderWindow.close();
var addSelectedContractorService =null;
checkedServiceIds.length =0;
//delete checked;
$('#grid').data().kendoGrid.dataSource.read();//refreshing parent grid but want to refesh only child grid
//var grid = e.detailRow.find("[data-role=grid]").data("kendoGrid");
//grid.dataSource.read();
},
error: function(jqXHR, errorThrown) {
var element = $(document.body);
kendo.ui.progress(element, false);
alert('Error - ' + errorThrown);
}
});
}
function deleteClickServices(e)
{
e.preventDefault();
var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
var Id = dataItem.Id;
var kendoWindow = $("<
div
/>").kendoWindow({
title: "Confirm",
resizable: false,
modal: true,
height: "100px",
width: "300px"
});
kendoWindow.data("kendoWindow")
.content($("#delete-confirmation").html())
.center().open();
kendoWindow
.find(".delete-confirm,.delete-cancel")
.click(function() {
if ($(this).hasClass("delete-confirm")) {
var lstServiceId = [];
lstServiceId.push(Id);
var gridMaster = $("#grid").data("kendoGrid");
var row= gridMaster.dataItem($(e.target).closest(".k-detail-row").prev(".k-master-row"));
var contractorId = row.Id;
var contractId = '@( ViewBag.ContractService.Id)';
removeService(lstServiceId,contractorId,contractId,kendoWindow)
}
if ($(this).hasClass("delete-cancel")) {
return true;}
})
.end()
}
function removeService(lstServiceId,contractorId,contractId,kendoWindow) {
var element = $(document.body);
kendo.ui.progress(element, true);
$.ajax({
url: '@Url.Action("RemoveService", "Contract")',
type: 'POST',
contentType: 'application/json',
data: JSON.stringify({
lstSelectedService: lstServiceId ,
contractorId:contractorId,
contractId: contractId
}),
success: function (response, jqXHR) {
var element = $(document.body);
kendo.ui.progress(element, false);
kendoWindow.data("kendoWindow").close();
$('#grid').data().kendoGrid.dataSource.read(); //refreshing parent grid but want to refesh only child grid
//var grid = e.detailRow.find("[data-role=grid]").data("kendoGrid");
//grid.dataSource.read();
},
error: function(jqXHR, errorThrown) {
var element = $(document.body);
kendo.ui.progress(element, true);
kendoWindow.data("kendoWindow").close();
alert('Error - ' + errorThrown);
}
});
}