Questions on UI for ASP.NET MVC Forum

1 answer

677 views

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></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);

}

});

}

Grid

answered on 30 Jul 2015

6 answers

2.0K+ views

Grid inline editing with server side validation errors

hi guys,
Server side validations it will support or not ?
I currently have a working grid with inline editing. I need validation that needs to be done on the server side because duplicate records checking..

Please check the code and let me know any issues in this code? or send me working sample code....

View code...

@(Html.Kendo().Grid<PeopleTray.Models.Admin.EmploymentTypeModel>()
.Name("gridEmployementType")
.Columns(columns =>
{
columns.Command(command => { command.Edit().Text("Edit").HtmlAttributes(new { title = "Edit" }); command.Destroy().Text("Delete").HtmlAttributes(new { title = "Delete" }); }).Width(160);
columns.Bound(p => p.Name);
columns.Bound(p => p.Description);
columns.Bound(w => w.Id).Hidden();

})
.ToolBar(toolbar => toolbar.Create().Text("Add").HtmlAttributes(new { title="Add" }))
.Editable(editable => editable.Mode(GridEditMode.InLine).CreateAt(GridInsertRowPosition.Bottom))
.Pageable(pager => pager.Refresh(true))
.Sortable(sortable => sortable.AllowUnsort(true))
.Events(e => e.Edit("onEdit"))
.Events(e => e.Save("onSave"))
.HtmlAttributes(new { style = "width: 70%;" })
.DataSource(dataSource => dataSource
.Ajax()
.ServerOperation(false)
.Events(events => events.Error("error_handler"))
.PageSize(5)
.Model(model =>
{
model.Id(ds => ds.Id);
})
.Create(create => create.Action("EmployementType_Insert", "CorporateAdmin"))
.Read(read => read.Action("EmployementTypes_Read", "CorporateAdmin"))
.Update(update => update.Action("EmployementType_Update", "CorporateAdmin"))
.Destroy(destroy => destroy.Action("EmployementType_Delete", "CorporateAdmin"))
)
)
function error_handler(e) {
if (e.errors) {
var message = "Errors:\n";
$.each(e.errors, function (key, value) {
if ('errors' in value) {
$.each(value.errors, function () {
message += this + "\n";
});
}
});
alert(message);
}
}
--------------------------
Controller code.....

public ActionResult EmployementType_Insert([DataSourceRequest]DataSourceRequest request, EmploymentTypeModel model)
{
var employementtypes = AdminService.GetEmployementTypesModel();
for (int r = 0; r < employementtypes.Count; r++)
{
if (employementtypes[r].Name.ToLower() == model.Name.Trim().ToLower())
{
ModelState.AddModelError("grid_error", "The employement type already exists. Please modify or delete your entry.");
return Json(new[] { model }.ToDataSourceResult(request, ModelState));
}
}
if (model.Name != null && ModelState.IsValid)
{
AdminService.InsertEmploymentType(model);
}
return Json(new[] { model }.ToDataSourceResult(request, null), JsonRequestBehavior.AllowGet);
}

Grid

answered on 30 Jul 2015

5 answers

146 views

Tooltip for ForeignKeyColumns

Hi,

I have a grid showing several columns like this:

columns.Bound(c => c.WeekNumber).ClientGroupHeaderTemplate("KW: #=value#").Hidden(true);

columns.Bound(c => c.Date).Format("{0:dddd dd.MM.yy}") ;

columns.ForeignKey(c => c.ThisToSoup, (IEnumerable<EECanteen.Models.FoodItem>)ViewData["Soups"], "ID", "Name").Width(200);

columns.ForeignKey(c => c.ThisToMenuOne, (IEnumerable<EECanteen.Models.FoodItem>)ViewData["Menus"], "ID", "Name").Width(200);

columns.ForeignKey(c => c.ThisToMenuTwo, (IEnumerable<EECanteen.Models.FoodItem>)ViewData["Menus"], "ID", "Name").Width(200);

columns.ForeignKey(c => c.ThisToMenuThree, (IEnumerable<EECanteen.Models.FoodItem>)ViewData["Menus"], "ID", "Name").Width(200);

columns.ForeignKey(c => c.ThisToCake, (IEnumerable<EECanteen.Models.FoodItem>)ViewData["Cakes"], "ID", "Name").Width(200);

columns.Bound(c => c.Salads).ClientTemplate("#=SaladsTemplate(Salads)#");

columns.Command(command => { command.Destroy(); command.Edit(); }).Width(180);

I want to display a tooltip for the foreign key and for the selected items in the "Salads" column.
And I want to load the data via Ajax using a controller method where I pass the ForeignKey.

Fortunately these Key (also for the Salads) reference the same table in my database.

I also have this ID in my Salads Template which is built like this:

<script type="text/kendo" id="SaladsTemplate">

<strong>

#for(var i = 0; i< data.length; i++){#

<a title="#:data[i].Name#" data-id="#:data[i].ID#" href="">#:data[i].Name#</a>

#}#

</strong>

</script>

<script type="text/javascript">

var SaladsTemplate = kendo.template($("#SaladsTemplate").html(), { useWithBlock: false });

</script>

By the way - I want no tooltip on the Date and other columns (not shown here).

Manfred

Grid

answered on 30 Jul 2015

4 answers

154 views

New Offline feature

Can someone point to some demos using this new feature using the MVC Wrappers. A complete demo would be nice. Someone mentioned during the webinar about some examples that also show how to detemine when Broswers on online and offline. Thanks

Grid

answered on 30 Jul 2015

3 answers

142 views

kendo Treeview controls througing runtime error

Hi All,

Can you please help me on this .i am using the telerik mvc application.
i have kendo treeviews is not working on the telerik asp.net mvc3 application.but its working fine for the Normal asp.net mvc3 application
add one .cshtml page and add following code its throughing the error.
<div>
@(Html.Kendo().TreeView()
.Name("TreeView") here througing runtime error.
.Items(treeview =>
{
treeview.Add().Text("My Web Site")
.SpriteCssClasses("folder")
.Expanded(true)
.Items(root =>
{
root.Add().Text("images")
.Expanded(true)
.SpriteCssClasses("folder")
.Items(images =>
{
images.Add().Text("logo.png")
.SpriteCssClasses("image");

images.Add().Text("body-back.png")
.SpriteCssClasses("image");

images.Add().Text("my-photo.jpg")
.SpriteCssClasses("image");
});

root.Add().Text("resources")
.Expanded(true)
.SpriteCssClasses("folder")
.Items(resources =>
{
resources.Add().Text("pdf")
.Expanded(true)
.SpriteCssClasses("folder")
.Items(pdf =>
{
pdf.Add().Text("brochure.pdf")
.SpriteCssClasses("pdf");

pdf.Add().Text("prices.pdf")
.SpriteCssClasses("pdf");
});

resources.Add().Text("zip")
.SpriteCssClasses("folder");
});

root.Add().Text("about.html")
.SpriteCssClasses("html");

root.Add().Text("contacts.html")
.SpriteCssClasses("html");

root.Add().Text("index.html")
.SpriteCssClasses("html");

root.Add().Text("portfolio.html")
.SpriteCssClasses("html");
});
})
)
</div>

i had added the kendo dll file web.cong files and referece aslo but its throughing the javascript runtime error like this.

Microsoft JScript runtime error: Object doesn't support property or method 'kendoTreeView'
plwease anybody can help me .

Thanks & Regards,
Narasimha

TreeView

answered on 29 Jul 2015

2 answers

219 views

Kendo Editor inside a grid in-cell editor

Hi,

We're using the Kendo Editor in a custom editor template for fields in a kendo grid in in-cell edit mode.

It mainly works, but one issue is that sometimes using toolbar tools like foreColor seems to cause the editor blur event to fire, which closes the editor.

Is this a bug or is there a suggested work-around for this?

Editor

answered on 29 Jul 2015

2 answers

272 views

Inline Editing while new row is added

Hi there!

I was facing an issue and have been struggling with it since Friday but couldn't find any solution to it.

While searching on internet I found the same issue on you samples and demos website, if you go to this link:

http://demos.telerik.com/kendo-ui/grid/editing-inline

If you click on "Add New Record" button, a new empty row is added into the grid, now without saving this new row, if you click on Edit button in any of other rows, the empty row that was added against Add action gets removed, which is fine, but the row which you want to Edit, it doesn't come up in editable mode.

Is there any fix for it or it is the behavior of the grid?

Regards

Waqar

Grid

answered on 29 Jul 2015

2 answers

104 views

Treeview control not requesting based on parent node

I am following along with the demo found here: http://www.telerik.com/videos/aspnet-mvc/-persistedvalue-kendo-ui-for-asp-net-mvc-treeview-value-kendo-ui-for-asp-net-mvc-treeview and compared with the documentation here: http://demos.telerik.com/aspnet-mvc/treeview/remote-data-binding and there is no network traffic for subsequent child node requests that includes the id of the parent node. What results is a never ending list of "Andrew Fuller"s.

I am operating in Visual Studio 2013 premium with EF 6.1 and SQL server 2014 hosting the Northwind database and the app being run on MVC 5 platform. The static Tree List displayed fine however upon attempting to perform the updates it stopped working.

This overall has been a pretty poor experience with the trial period and I am wondering exactly what I am doing wrong to be experiencing these issues.

TreeView

answered on 29 Jul 2015

3 answers

80 views

Line chart with custom x coordinate

Hi,

Is there a way to specify a specific x-coordinate for each point in a line chart, independent of the category? The reason is I need to create a chart of points that aren't evenly distributed, alongside a denser set of points that are.

Also, when I try to plot them on the same CategoryAxis, the denser plot ends up just adding additional ticks to the category, which I don't want.

Thanks

Chart

answered on 29 Jul 2015

2 answers

199 views

Hierarchical Grid not able to access child grid

I have a hierarchical grid and a button on child grid which on click opens a window and there is a grid on that window. When on click of the button on child grid , i am trying to reload the grid on the window, but throwing an exception $(...).data(...).kendoGrid is undefined. upon all this, it has been working perfectly fine for one month and suddenly it is not fetching any rows. when i debugged it is throwing this exception. may i know what has changed suddenly even though i haven't changed anything on this page.

parent grid

<div class="container-fluid">

<div class="row">

<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);

columns.Bound(p => p.BHSISNum);

columns.Bound(p => p.StartDate).Format("{0:MM/dd/yyyy}");

columns.Bound(p => p.EndDate).Format("{0:MM/dd/yyyy}");

columns.Bound(p => p.ContractorIsAlsoRegion);

columns.Bound(p => p.ContractorName);

columns.Bound(p => p.AddressBkNum);

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" }));

}).Events(e => e.DataBound("onDataBound"))

.Pageable()

.Sortable()

.Scrollable()

.Filterable()

.Selectable()

.ClientDetailTemplateId("template")

.HtmlAttributes(new { style = "height:550px;" })

.DataSource(dataSource => dataSource

.Ajax()

.PageSize(20)

.Read(read => read.Action("Contractors_Read", "Contract").Data("additionalInfo"))

)

@*.ToolBar(toolbar =>

{

toolbar.Template(@<text>

<div class="toolbar">

<button class="k-button k-button-icontext k-grid-add k-primary" id="providerskendowindow">Add Providers</button>

</div>

</text>);

})*@

)

</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.Bound(o => o.CodeModifier);

columns.Bound(o => o.ServiceModifier);

columns.Bound(o => o.StartDate).Format("{0:MM/dd/yyyy}");

columns.Bound(o => o.EndDate).Format("{0:MM/dd/yyyy}");

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>

window on click of 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)