I have a Razor for that has several Autocomplete fields on it.
Some of these fields are required, some are not required.
I need to show the required fields in a red border and a blue background, while non-required fields are white, with a blue border.
My css works for a regular text field, but i cannot figure out how to make it work for an autocomplete field.
How would I do that? I have tried " .HtmlAttributes(new { @class="rsireqtext",style = "width: 99%;" }) " in the autocomplete (rsireqtext is my 'required' styling),
but that doesn't do it.
Any ideas?
TIA,
Bob Mathis
Using Kendo UI for ASP.NET MVC, I am creating and passing in a Model that contains a collection of objects (called ChartSeries) that has fields for Color, SeriesName, and a collection of a second class (ChartSeriesValue) which contains fields Value, Date. I am trying to create a line chart using this local data with a dynamic number of series. Using a foreach statement, I can get the different series values plotted, but am unable to get the Dates to display using CategoryAxis. Will I have to go the route of using DataSource to group the flattened data, or is it possible to accomplish this using localdata?
Here are the chart-related classes I am using:
public
class
ChartSeries
{
public
string
SeriesName {
get
;
set
; }
public
string
ValueType {
get
;
set
; }
public
string
HexColor {
get
;
set
; }
public
IList<ChartSeriesValue> ChartSeriesValues {
get
;
set
; }
}
public
class
ChartSeriesValue
{
public
decimal
? Value {
get
;
set
; }
public
DateTime Effective {
get
;
set
; }
}
Thus far, I have been able to get either the lines with proper values, or just the X-Axis date labels to display, but not both. Here's my current attempt that displays proper line series data without X-Axis labels:
@(Html.Kendo().Chart<
ChartSeriesValue
>()
.Name("myChart_" + Model.MyChart.Id)
.Title(Model.MyChart.Name)
.Legend(legend => legend
.Position(ChartLegendPosition.Bottom)
)
.ChartArea(chartArea => chartArea
.Background("transparent")
.Width(250)
.Height(250)
)
.SeriesDefaults(seriesDefaults =>
seriesDefaults.Line().Style(ChartLineStyle.Smooth)
)
.Series(series =>
{
if (!Model.ChartSeriesList.IsNullOrEmpty())
{
foreach (var metSeries in Model.ChartSeriesList)
{
if (!metSeries.ChartSeriesValues.IsNullOrEmpty())
{
series.Line(metSeries.ChartSeriesValues)
.Field("Value")
.Name(metSeries.SeriesName)
.Color(metSeries.HexColor);
}
}
}
})
.CategoryAxis(axis => axis
.Categories(x => x.Effective.Date)
.Name("Effective Date")
//.Name("Effective")
//.MajorGridLines(lines => lines.Visible(true))
//.Date().BaseUnit(ChartAxisBaseUnit.Months)
.Labels(labels => labels.Visible(true))
.Color("Red")//.Rotation(-60))
//.Type(ChartCategoryAxisType.Date)
)
))
Please let me know if you need further clarification. Thanks!
I have a very simple grid. For this grid only is there a way to disable the row hover highlight? I want it everwhere else, just not for this grid.
@(Html.Kendo().Grid<SalesRepSummaryItem>()
.Name("grid")
.NoRecords()
.Sortable()
.Columns(columns =>
{
columns.Bound(c => c.SalesRepFullName).Title("Sales Rep");
columns.Bound(c => c.TotalSales).Title("Invoiced Sales").Format("{0:c}").HtmlAttributes(new { @class = "money" }).Width(150);
columns.Bound(c => c.CalculatedTotalSales).Title("Total Sales").Format("{0:c}").HtmlAttributes(new { @class = "money" }).Width(150);
columns.Bound(c => c.NumberOfOrders).Title("# of Orders").Format("{0:0}");
columns.Bound(c => c.NumberOfItems).Title("# Of Items").Format("{0:0}");
columns.Bound(c => c.TotalOrdered).Title("Qty Ordered").Format("{0:0}");
columns.Bound(c => c.TotalShipped).Title("Qty Shipped").Format("{0:0}");
})
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Url(Url.HttpRouteUrl("Default", new { controller = "SalesRep", action = "Sales_GetSalesData" })).Data("getFilterValuesForGridRead")))
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
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?
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
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!
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>
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