Questions on UI for ASP.NET MVC Forum

3 answers

79 views

I am evaluating the Scheduler Components, specifically the TimeLine mode.

Does this component allow me to create an event that is comprised of smaller events? For example, I have a Process comprised of Steps. The Steps also have a Start/Stop Time.

I was wondering if TimeLine would allow me to customize the Series Bar so that I could display the Steps Inside of the Process?

Does that make sense?

Chuck

Scheduler

answered on 01 Mar 2016

4 answers

129 views

Custom column not working

I'm trying to fill a column of the my grid with images from the Content/images folder of the project, but for some reason the column doesn't display any content.

Since maybe I wrote the path in a wrong way, I tried to follow an example of the web with only some text, without any luck.

This is my custom column:

columns.Template(@<text>
custom content here, which is not related to the data
</text>).Title("Column Title");

I'm using Ajax binding, and because of that columns.ClienteTemplate is not an option (I need to use aggregates, which is not possible when Server binding.

This is my data source (abreviatted):

.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("Products_Read", "Home"))
)

Any help will be really appreciated.

Grid

answered on 29 Feb 2016

3 answers

126 views

Hierarchical grid row expansion and row selection?

With a hierarchical grid and row selection. Can I preserve the row selection when expanding a hierarchical grid row?

Example:

There is a grid with five rows in it. One or more rows contain hierarchical grids present (rows 2 and 5). The user has selected rows one or more rows (1 and 3). If the user clicks the hierarchical grid row expansion icon of row 2 the selection of rows 1 and 3 are lost.

Is there a way to prevent this default behavior?

Grid

answered on 29 Feb 2016

2 answers

466 views

Error Handling in DetailsTemplate Grid

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

135 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

71 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

323 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

82 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

145 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.5K+ 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