Questions on UI for ASP.NET MVC Forum

2 answers

474 views

I have a sub-grid in a details template, that allows records to be inserted and deleted. I can put an error handler on the datasource, which will show an error message if the action fails, however as the grid name is dynamically generated, I can't see a way to call preventdefault(), to stop the failed inserts / deletes being displayed in the grid.

How can I get the grid name to call the preventDefault method?

Grid:-

<script id="subdetailsTemplate" type="text/kendo-tmpl">

@(Html.Kendo().Grid<EVASLogicLibrary.UserDirectorateMap>()

.Name("MapGrid_#=ID#")

.Columns(columns =>

{

columns.Bound(o => o.ID).Title("ID");

columns.ForeignKey(p => p.DirectorateID, (System.Collections.IEnumerable)ViewData["directorates"], "ID", "DirectorateName").Title("Directorate").Width(200);

//columns.Bound(o => o.UserID).Title("User");

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

})

.Events(e=>e.DataBound("gridBind"))

.ToolBar(tb => tb.Create())

.Editable(e=>e.Mode(GridEditMode.InLine))

.DataSource(dataSource => dataSource

.Ajax()

.PageSize(10)

.Events(e=>e.Error("Suberror"))

.Model(m=>{

m.Id(p => p.ID);

m.Field(p => p.ID).Editable(false);

})

.Read(read => read.Action("RD_Maps", "Users", new { UserId = "#= ID #" }))

.Create(u=>u.Action("InsertMap", "Users", new { UId = "#= ID #" }))

.Update(u => u.Action("InsertMap", "Users"))

.Destroy(u => u.Action("DeleteMap", "Users"))

)

.Pageable(p => p.Refresh(true))

.ToClientTemplate()

)

</script>

Error handler:-

function Suberror(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);

}

And the main grid error handler (that I want to replicate the functionality of:-

function error(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";

});

}

});

var grid = $("#Grid").data("kendoGrid");

grid.one("dataBinding", function (e) {

e.preventDefault(); // cancel grid rebind if error occurs

});

alert(message);

}

Thanks

Grid

answered on 29 Feb 2016

1 answer

140 views

limitation?

Hi,

We are currently using our own calculations by using JavaScript and Kendo Grid. Since it is written by us with a lot of validations, it hurts the performance and creates bugs. I found Kendo has Spreadsheet control and I like to give it a try, I have already found some answers but I still have a lot of questions which I cannot find. I wonder if you can help me with those answers.

1. Can we move worksheet bar to the top?

2. Can we set a default worksheet to open up with?

2. Can we lock all features but only open "add row" to the user?

3. Can we add a drop-down list to one column of cells?

4. can it handle different date/time format based on the user culture?

5. can we lock columns so users cannot modify those columns?

6. can we pre-define the formula and users cannot change it?

7. can we change the column header name instead of "A" "B" "C" ...

thanks a lot!

Spreadsheet

answered on 29 Feb 2016

3 answers

72 views

TabStrip Name does not get replaced

In the attached picture, the id is equal to "tabStrip_#=Name#", but the #=Name# portion should be replaced with the name from the ViewModel.

<div class="row " style="max-width: 98%">
<div class="columns">
<div class="full-width">
@(Html.Kendo().Grid<EPP.AdminPortal.ViewModels.Test>
()
.Name("grid")
.HtmlAttributes(new {style = "table-layout: fixed, height: 550px;"})
.Columns(columns =>
{
columns.Bound(c => c.Id).Width(1000);
columns.Bound(c => c.Name).Width(2000);
columns.Bound(c => c.Email).Width(5000);
columns.Bound(c => c.Ap).Width(5000);
columns.Bound(c => c.Bp).Width(5000);
columns.Bound(c => c.Cp).Width(5000);
columns.Bound(c => c.Dp).Width(5000);
columns.Bound(c => c.Ep).Width(5000);
columns.Bound(c => c.Fp).Width(200);
})
.ClientDetailTemplateId("template")
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("T_Read", "Test"))
)
//.Groupable()
.Sortable()
)
</div>
</div>
</div>

<script id="template" type="text/kendo-tmpl">
@(Html.Kendo().TabStrip()
.Name("tabStrip_#=Name#")
.SelectedIndex(0)
.Animation(animation => animation.Open(open => open.Fade(FadeDirection.In)))
.Items(items =>{
items.Add().Text("Contact Person").Content("Jeremy");
}
).ToClientTemplate())
</script>

TabStrip

answered on 29 Feb 2016

1 answer

343 views

DataSourceResult Help

Hello,

I was wondering if there was any way to add conditions to a datasourcereulst like "Where" and"Union"? Here is my controller code.

public ActionResult tbl_vessels_Read([DataSourceRequest]DataSourceRequest request, decimal[] param_bhp, decimal[] param_deck)

{

IEnumerable<tbl_vessels> tbl_vessels = db.tbl_vessels;

DataSourceResult result = tbl_vessels.ToDataSourceResult(request,

c => new tbl_vessels

{

vessel_idx = c.vessel_idx,

vessel_name = c.vessel_name,

spotlist_dp = c.spotlist_dp,

spotlist_bhp = c.spotlist_bhp,

spotlist_deck = c.spotlist_deck,

spotlist_bp = c.spotlist_bp,

spotlist_oilrec = c.spotlist_oilrec,

spotlist_fifi = c.spotlist_fifi,

spotlist_rov = c.spotlist_rov,

charterer_info = c.charterer_info

});

JsonResult data;

if (param_bhp == null && param_deck == null)

{

data = Json(tbl_vessels);

}

else

{

data = Json(tbl_vessels.Where(

w => w.spotlist_bhp > param_bhp[0] &&

w.spotlist_bhp < param_bhp[1] &&

w.spotlist_deck > param_deck[0] &&

w.spotlist_deck < param_deck[1]

).ToDataSourceResult(request));

}

return data;

}

As you can see I also have sliders which means that my dataresults need to be enumerable, IQueryable isn't allowed on array. So how can I add some conditions to the DataSourseResult like "Where" etc??

Thanks

Grid

answered on 29 Feb 2016

3 answers

90 views

TreeView intellisense not shown

Hi,

I'm using Telerik Grid with MVC6 and Razor and It works great. However, when I tried to use TreeView, it is not available in intellisence. Same thing for DropDownList. Do you know if I missed something?

Thank you

TreeView

answered on 26 Feb 2016

3 answers

150 views

Expanding on initial render

When I set an item to expand on initial render (via .Expanded(true)) I lose formatting.

I suspect this is because the item loses class "k-state-default" and we have overridden css for this class. I have worked around by adding the class directly:

panelbar.Add()

.Text("Expanded Item")

.HtmlAttributes(new {@class="k-state-default"})

.Expanded(true)

.Content(...

This seems to me to be a bug rather than default behaviour. Why would expanding on initial render be different from expanding via mouse click?

There is something in kendo.panelbar.js that looks a bit suspicious to me:

wrapperCssClass: function (group, item) {

var result = "k-item",

index = item.index;

if (item.enabled === false) {

result += " " + DISABLEDCLASS;

} else if (item.expanded === true) {

result += " " + ACTIVECLASS;

} else {

result += " k-state-default";

}

if (index === 0) {

result += " k-first";

}

if (index == group.length-1) {

result += " k-last";

}

if (item.cssClass) {

result += " " + item.cssClass;

}

return result;

},

Can someone confirm if this is a bug or just me being dim.

Also, is my workaround safe (i.e. it won't interfere with the operation of the control).

Cheers,

Mark

PanelBar

answered on 26 Feb 2016

5 answers

2.6K+ views

DropDownList enabling and populating datasource programmatically

I'm having problems with enabling. I need to be able to have the dropdownlist, initially, be disable. After I enable it, I need to retrieve data and filter based on parameters. What I am running into is that when I enable the dropdownlist via javascript, nothing is happening. What am I doing wrong? Any help is greatly appreciated.

<script>
function myFunction() {
var functionalRequirements = new Array();
var i = 0;
var hearing = document.getElementById("hearing");
var vision = document.getElementById("vision");
if(hearing.checked) {
functionalRequirements[i] = hearing.value;
i++;
}
if(vision.checked){
functionalRequirements[i] = vision.value;
i++;
}

var categories = $("#categories").data("kendoDropDownList"),
products = $("#products").data("kendoDropDownList"),
orders = $("#orders").data("kendoDropDownList");

categories.enable(true);
categories.setDataSource(read.action("GetCascadeCategories", "Home", functionalRequirements));

});

}
</script>
<div class="demo-section">
<form name="input" id="theForm">
<input type="checkbox" name="hearing" value="Hearing" id="hearing"/>Hearing
<input type="checkbox" name="vision" value="Vision" id="vision"/>Vision
<br/>
<input type="submit" value="Submit" onclick="myFunction()"/>

</form>

<p>
<label for="categories">Catergories:</label>
@(Html.Kendo().DropDownList()
.Name("categories")
.HtmlAttributes(new { style = "width:300px" })
.OptionLabel("Select category...")
.DataTextField("CategoryName")
.DataValueField("CategoryId")
.Enable(false)


)

</p>.....

DropDownList

answered on 26 Feb 2016

1 answer

111 views

Resource Grouping

Does anyone know how to Group by resource and date in the week view in MVC such as in this example in the ajax version?

http://demos.telerik.com/aspnet-ajax/scheduler/examples/resourcegrouping/defaultcs.aspx

if you set in the example GroupBy="Date, Speaker" the group will be by date and the speakers under each date.

I have tried to do something similar in the MVC version but not able to get the same behaviour

.Group(group => group.Resources("Date, EmployeeID")) - Failed

.Group(group => group.Resources("Date").Resources("EmployeeID")) - Failed

Scheduler

answered on 26 Feb 2016

4 answers

255 views

MVC Grid - Get values from other pages?

Is it possible to get some or all of the values from subsequent pages in the grid?

For example:

The user is on page one or three. I would like to get all of the values for a particular column from the grid. Even those values not shown in the grid (pages 2 & 3).

Grid

answered on 25 Feb 2016

3 answers

611 views

File Browser Controller: How to insert link to a file that opens in a new window?

Using the Kendo Editor's FileBrowser is there any way to insert a link to a file who's <a> tag (anchor tag) has the attribute target="_blank", i.e. the link to the file opens in a new tab. I know this could be manually added to the inserted link through the "ViewHtml" button however my client is not tech savvy and this option is not a desired solution.

Below is an example of the current and desired outcome upon inserting a file using the FileBrowser.

Current outcome:
<a href="/Files/SomeFile.pdf">File</a>

Desired outcome:

Editor

answered on 25 Feb 2016