Dear Telerik Admins
I want to know, Do you have any solution for dynamic change PageSize?
If i expand my question, I want to show my grid in 10 element default but when i want to show it in big screen i want to show in 20 or 30 element?
Is there any solution for it?
Thanks
I have 2 barcharts on a page, 1 showing monthly gross wages for a Year To Date, and a separate chart displaying the same thing, for the same period but for a year previously. I'd like to hilight somehow, whether through a different bar color or bold facing both the common categories in both charts... I hope that makes sense... Let's trim it down..
First chart shows customer A, B, and C
Second chart shows customer B, D, E
Somehow or another, I'd like to draw the viewers attention that the same customer appears on both charts. As I said, they are each different charts and data series' and completely unaware of each other.
<div
class
=
"chart"
>
@(Html.Kendo().Chart<GWChartData>()
.Name(
"chartPayrollYTD"
)
.ChartArea(ca => ca.Height(600))
.HtmlAttributes(
new
{@
class
=
"center"
})
.Title(
"Top 10 Client Gross Wages - YTD ("
+ DateTime.Now.ToString(
"MMMM"
) +
" "
+ DateTime.Now.Year +
")"
)
.Legend(l => l.Position(ChartLegendPosition.Top))
.Series(s =>
{
s.Column(m => m.GrossWages).Name(
"Gross Wages"
).Color(
"#009933"
).Labels(l => l.Visible(
true
).Position(ChartBarLabelsPosition.OutsideEnd).Format(
"C"
));
})
.ValueAxis(va => va.Numeric().MinorGridLines(m => m.Visible(
true
)).Labels(l => l.Format(
"C"
)))
.CategoryAxis(c => c.Categories(m => m.ClientId).Labels(l => l.Visible(
true
)))
.DataSource(ds => ds
.Read(r => r.Action(
"YTDGrossWages"
,
"GWHReport"
,
new
{topNumber = 10}).Type(HttpVerbs.Get))
.Events(ev =>
{
ev.RequestEnd(
"requestEnd"
);
ev.RequestStart(
"requestStart"
);
})
)
.Tooltip(tp => tp.Visible(
true
).Template(
"#=category# - #=dataItem.ClientName#: #=kendo.format('{0:C}', value)#"
))
)
</div>
<div
class
=
"chart"
>
@(Html.Kendo().Chart<GWChartData>()
.Name(
"chartPayrollLastYear"
)
.ChartArea(ca => ca.Height(600))
.HtmlAttributes(
new
{@
class
=
"center"
})
.Title(
"Top 10 Client Gross Wages - YTD ("
+ DateTime.Now.ToString(
"MMMM"
) +
" "
+ (DateTime.Now.Year - 1) +
")"
)
.Legend(l => l.Position(ChartLegendPosition.Top))
.Series(s =>
{
s.Column(m => m.GrossWages).Name(
"Gross Wages"
).Color(
"#009933"
).Labels(l => l.Visible(
true
).Position(ChartBarLabelsPosition.OutsideEnd).Format(
"C"
));
})
.ValueAxis(va => va.Numeric().MinorGridLines(m => m.Visible(
true
)).Labels(l => l.Format(
"C"
)))
.CategoryAxis(c => c.Categories(m => m.ClientId).Labels(l => l.Visible(
true
)))
.DataSource(ds => ds
.Read(r => r.Action(
"YTDGrossWages_LastYear"
,
"GWHReport"
,
new
{topNumber = 10}).Type(HttpVerbs.Get))
.Events(ev =>
{
ev.RequestEnd(
"requestEnd"
);
ev.RequestStart(
"requestStart"
);
})
)
.Tooltip(tp => tp.Visible(
true
).Template(
"#=category# - #=dataItem.ClientName#: #=kendo.format('{0:C}', value)#"
))
)
</div>
In tracking down a datepicker display issue, I've found that kendo.toString returns a different value for some dates on Chrome than it does in IE.
Here is an example that differs:
kendo.toString(kendo.parseDate("\/Date(-1316628000000)\/"), "MM/dd/yyyy")
The datepicker uses kendo.toString to set the input element value. Unfortunately, this can actually mess up data if a datepicker is set with javascript and sent to the server with a full post.
What's going on here?
I'm having a heck of a time building a line chart, showing what I want.
Here is the scenario: It is an MVC app, and I want to load a line chart with historical payroll data for each month, so along the bottom axis, there'd be a column for "Jan", "Feb", "Mar", "Apr", etc... Along the side axis will be amounts. Each column should be the value for the specific month.
There will be a variable number of line series for each year. A client may have values for 2017-2020, or values for 2014-2018.. SO the number of lines on the chart would be variable, but the columns are static...
I have attached an image of what the data looks like in a spreadsheet. I am not building these series manually, they are coming from a database. I just need some help with transforming the data as shown in the spreadsheet image into a collection that this damn line chart will accept, and plot how I want it to.
Hi, I've been working at this for some time to no avail. Here is my code:
// view models
public class RegisterViewModel
{
[Required]
[Display(Name = "Roles")]
public List<
RoleModel
> RolesList { get; set; }
}
public class RoleModel
{
public string Id { get; set; }
public string Name { get; set; }
}
// view
@model ERMgtProgram.Models.RegisterViewModel
@using (Html.BeginForm("Register", "Account", FormMethod.Post, new { @class = "form-horizontal", role = "form" }))
{
<
div
class
=
"form-group"
>
@Html.LabelFor(m => m.RolesList)
@(Html.Kendo().MultiSelectFor(m => m.RolesList)
.Name("RolesList")
.Placeholder("Select roles")
.DataTextField("Name")
.DataValueField("Id")
.HtmlAttributes(new { style = "width: 485px;" })
.IgnoreCase(true)
.AutoBind(true)
.DataSource(datasource =>
{
datasource.Read(read => read.Action("ReadRolesList", "Manage"));
})
)
</
div
>
<
div
class
=
"form-group"
>
<
div
class
=
"col-md-offset-2 col-md-10"
>
<
input
type
=
"submit"
class
=
"k-button"
value
=
"Register"
/>
</
div
>
</
div
>
}
<
script
>
$(document).ready(function () {
var multiSelect = $("#RolesList").data("kendoMultiSelect");
});
</
script
>
// Controller method for reading data
[Authorize(Roles = "DM_Admin")]
public async Task<
ActionResult
> ReadRolesList()
{
var dmRoles = await RoleManager.Roles.Where(r =>
r.Name.Contains("DM_")).ToListAsync();
var roles = dmRoles.Select(u => new RoleModel
{
Id = u.Id,
Name = u.Name
}).ToList();
return Json(roles, JsonRequestBehavior.AllowGet);
}
// controller method that widget posts back to
public async Task<
ActionResult
> Register(RegisterViewModel model)
{
if (ModelState.IsValid)
{
// additional code
}
// additional code
}
So, in the view, the MultisSelect widget populates with the correct list of roles, and I am able to select them and everything is fine, and when I click the button to submit the form the correct "Register" controller method is called.
However, ModelState.IsValid == false and my model.RolesList is empty
Additionally, I receive this exception:
Exception {"The parameter conversion from type 'System.String' to type 'ERMgtProgram.Models.RoleModel' failed because no type converter can convert between these types."} System.Exception {System.InvalidOperationException}
When debugging I can see that the attempted value was: "AttemptedValue "2" string"
Why is the MultiSelect widget not posting back to the controller with type: List<RoleModel>, and what is an efficient fix for this issue?
Thanks for all the help!
Ruben
Hi,
we have a InLine editable grid that has several columns that may or not require a checkbox in them based on a flag in the model used for the grid.
The combination of which checkboxes are available varies from row to row (see attached image). For any cells that have a checkbox, this should be editable when you go into the edit mode for the row.
I have managed to get this to display properly using a client template when viewing the grid using the code:
.ClientTemplate("<
div
style
=
'text-align:center'
># if(data.PrivateCircuitExpected) {# <
input
type
=
'checkbox'
disabled
=
'disabled'
#= data.PrivateCircuit ?
checked
=
'checked'
:'' #></
input
> #}#</
div
>")
In the case of this column data.PrivateCircuitExpected defines whether this row should have a checkbox. data.PrivateCircuit is whether this value is ticked or not.
The one issue I'm having is that checkboxes appear in all columns when you go into the edit mode for the row as in attached image.
What would be the best approach to allow checkboxes to be hidden in edit mode if, in this case, data.PrivateCircuitExpected is false?
Thank you
Hi,
I am facing the following issue: my dropdown, that is inside a Kendo UI grid, is showing as textbox.
Here is the code of the grid:
@model Portal.Web.Areas.Orders.Models.IngressoMerceViewModel<
br
><
br
>@(Html.Kendo().Grid<
Portal.Web.Areas.Orders.Models.IngressoMerceGridViewModel
>()<
br
> .Name("grid")<
br
> .Events(e => e.DataBound(@<
text
>function() {for (var i = 0; i @Html.Raw("<") this.columns.length; i++) {this.autoFitColumn(i);}}</
text
>))<
br
>.Columns(columns =><
br
>{<
br
>columns.Template("<
input
type
=
'checkbox'
/>");<
br
>columns.Bound(p => p.Posizione).Title("Posizione").Width(200);<
br
>columns.Bound(p => p.Materiale).Title("Materiale").Width(200);<
br
>columns.Bound(p => p.Description).Title("Testo breve").Width(200);<
br
>columns.Bound(p => p.WarehouseLogicStore)<
br
> .Editable("false").Width(200)<
br
>.ClientTemplate(Html.Kendo().DropDownList().Events(e => e.Change("change"))<
br
>.Name("WHLogicValue").DataTextField("Code").DataValueField("Code").DataSource(source =><
br
>{<
br
>source.Read(read =><
br
>{<
br
>read.Action("WarehouseLogicTypes_Read", "IngressoMerce");<
br
>});<
br
>}).Deferred(!Model.IsAjax).ToClientTemplate().ToString()<
br
><
br
>);<
br
>columns.Bound(p => p.Quantity).Title("Qta Ordine").Width(200);<
br
>columns.Bound(p => p.UnitOfMeasure).Title("UM").Width(200);<
br
>columns.Bound(p => p.ReceivedQty).Title("Qta già ricevute").Width(200);<
br
>columns.Template("<
input
type
=
'text'
value=#= InProgressQtyCheck# onclick=\"myFunction(p)\"/>").Title("Qta ricevute");<
br
>columns.Template("<
input
type
=
'checkbox'
/>").Title("Completa Pos.Ordine");<
br
>columns.Bound(p => p.InProgressQtyCheck).Title("Qta da ricevere").Width(200);<
br
>columns.Bound(p => p.ExpectedDeliveryDate).Format("{0:dd/MM/yyyy}").Title("Data consegna prevista").Width(200);<
br
>columns.Bound(p => p.QualityCheckNeeded).Title("Check qualitativo richiesto").Width(220);<
br
>})<
br
>.Pageable()<
br
>.Sortable()<
br
>.Scrollable()<
br
>.HtmlAttributes(new { style = "height:430px;" })<
br
>.DataSource(dataSource => dataSource<
br
>.Ajax()<
br
>//.Read(read => read.Url("/orders/details").Type(HttpVerbs.Get))<
br
>.Read(read => read.Action("OrderDetails_Read", "IngressoMerce", Model))<
br
>)<
br
>.Deferred(!Model.IsAjax)<
br
><
br
><
br
><
br
>)<
br
><
br
><
br
><
br
> <
script
><
br
> myFunction(p)<
br
> {<
br
><
br
> }<
br
> </
script
>
Here is the call of the action method, that does not fire in the controller:
[AllowAnonymous]
public async Task<JsonResult> WarehouseLogicTypes_Read()
{
try
{
var types = await gateway.GetWarehouseLogicTypes();
return Json(types);
}
catch (Exception ex)
{
//logger.LogError(ex.Message);
throw ex;
}
}
I have a view that contains a DatePicker and Grid.
I would load data to Grid, using DatePicker value.
I'm using a submit form that fires an Action.
I use this approach, because the data to be recovered are many and also have fields that must be calculated according to the date indicated, before loading the collection
What is the best practice to post the data filter and then load the data in the grid? I do not know how to do! :-(
01.
<
form
asp-action
=
"Item_Read"
asp-controller
=
"Home"
>
02.
<
p
>Filtri disponibili</
p
>
03.
<
div
class
=
"form-group"
>
04.
<
label
>Data</
label
>
05.
@(Html.Kendo().DatePicker()
06.
.Name("dateFilterDatepicker") // The name of the DatePicker is mandatory. It specifies the "id" attribute of the widget.
07.
.Min(new DateTime(1900, 1, 1)) // Sets the min date of the DatePicker.
08.
.Max(new DateTime(2099, 12, 31)) // Sets the max date of the DatePicker.
09.
.Value(DateTime.Today) // Sets the value of the DatePicker.
10.
.DateInput(true)
11.
)
12.
</
div
>
13.
<
div
class
=
"form-group"
>
14.
@(Html.Kendo().Button()
15.
.Name("textSearchButton")
16.
.HtmlAttributes( new {type = "submit"} )
17.
.Content("Ricerca")
18.
)
19.
</
div
>
20.
21.
<
div
class
=
"text-center form-group"
>
22.
@(Html.Kendo().Grid<
ItemModel
>()
23.
.Name("itemGrid")
24.
.ToolBar(t => t.Search())
25.
.Filterable()
26.
.Columns(columns =>
27.
{
28.
columns.Bound(f => f.No);
29.
columns.Bound(f => f.Description);
30.
columns.Bound(f => f.Brand);
31.
columns.Bound(f => f.NetChange);
32.
columns.Bound(f => f.PurchasesQty);
33.
columns.Bound(f => f.LastEntryDate).Format("{0:dd/MM/yyyy}"); ;
34.
35.
})
36.
.Pageable() // Enable paging
37.
.Sortable() // Enable sorting
38.
.Scrollable(scrollable => scrollable.Virtual(true))
39.
.HtmlAttributes(new { style = "height:430px;" })
40.
.DataSource(dataSource => dataSource //Configure the Grid data source.
41.
.Ajax() //Specify that Ajax binding is used.
42.
.PageSize(20)
43.
44.
)
45.
)
46.
</
div
>
47.
</
form
>
Hi,
I am using the Kendo UI autocomplete control instead of a jQuery steps wizard:
http://www.jquery-steps.com/
Is this control compatible with the wizard? When searching for suggested answers, there are two calls to my database. When I remove the auto complete from the wizard, then it works fine. It would appear the wizard is rendering the control once, but the HTML to search for suggested answers twice. Here is how the control looks:
@{
ViewBag.Title = "Add Rules";
}
@using ConnexForQuickBooks.Web.Models;
@using ConnexForQuickBooks.Model;
@model RuleSetViewModels
<
div
class
=
"content"
>
<!-- Simple card -->
<
div
class
=
"card"
>
<
div
class
=
"card-header bg-white header-elements-inline"
>
<
h6
class
=
"card-title"
>@ViewBag.Title</
h6
>
</
div
>
@using (Html.BeginForm("Index", "RuleSet", FormMethod.Post, new { @class = "wizard-form steps-basic-rules", id = "PairQBForm" }))
{
<
h6
>Give the rule a name.</
h6
>
<
fieldset
>
<
div
class
=
"row"
>
<
div
class
=
"col-md-12"
>
<
div
class
=
"form-group"
>
<
label
class
=
"col-lg-3 control-label"
>Rule Name:</
label
>
<
div
class
=
"col-lg-9"
>
@Html.TextBoxFor(model => model.RuleSet.SetName, new { @class = "form-control" })
</
div
>
</
div
>
</
div
>
</
div
>
</
fieldset
>
<
h6
>Perform this action</
h6
>
<
fieldset
>
<
div
class
=
"row"
>
<
div
class
=
"col-md-12"
>
<
div
class
=
"form-group"
>
@Html.LabelFor(model => model.RuleSet.Action, "Action:", new { @class = "text-semibold" })
@Html.DropDownListFor(model => model.RuleSet.Action, Model.Actions, new { @class = "select-search" })
</
div
>
</
div
>
</
div
>
</
fieldset
>
<
h6
>If these conditions are met</
h6
>
<
fieldset
>
<
div
class
=
"row"
>
<
div
class
=
"col-md-12"
>
@Html.Partial("~/Views/Shared/RulesTemplates/_RulesGrid.cshtml", Model)
<
p
> </
p
>
</
div
>
</
div
>
</
fieldset
>
<
h6
>Then map this value</
h6
>
<
fieldset
>
<
div
class
=
"row"
>
<
div
class
=
"col-md-12"
>
<
div
class
=
"form-group"
>
@Html.LabelFor(model => model.RuleSet.ActionValue, "Map To:", new { @class = "col-lg-3 control-label" })
<
div
class
=
"col-lg-9"
>
@(Html.Kendo().AutoCompleteFor(model => model.RuleSet.ActionValue)
.Filter("contains")
.MinLength(3)
.DataSource(source =>
{
source.Read(read =>
{
read.Action("XX", "XX")
.Data("onAdditionalData2");
})
.ServerFiltering(true);
})
)
</
div
>
</
div
>
</
div
>
</
div
>
</
fieldset
>
<
h6
>Did the rule work? Let's find out.</
h6
>
<
fieldset
>
<
div
class
=
"row"
>
<
div
class
=
"col-md-12"
>
<
div
class
=
"form-group"
>
@Html.LabelFor(model => model.Connection, "Choose connection:", new { @class = "text-semibold" })
@Html.DropDownListFor(model => model.Connection, Model.Connections, new { @class = "select" })
</
div
>
<
div
class
=
"form-group"
>
@Html.LabelFor(m => m.StringOrders, "Order Numbers:", new { @class = "text-semibold" })
@Html.TextBoxFor(model => model.StringOrders, new { @class = "form-control" })
</
div
>
<
div
class
=
"text-left"
style
=
"padding-bottom: 10px;"
>
<
button
class
=
"btn btn-primary"
onclick
=
"rebindRulesPreviewer()"
>Save and Preview Rule</
button
>
</
div
>
<
div
style
=
"padding-bottom: 10px;"
>
@Html.Partial("~/Views/Shared/RulesTemplates/_RulesPreviewer.cshtml")
</
div
>
</
div
>
</
div
>
</
fieldset
>
@Html.HiddenFor(m => m.RuleSet.ID)
}
</
div
>
</
div
>
<
script
type
=
"text/javascript"
>
/** Rebinds the rules previewer grid, so it shows with the order number */
function rebindRulesPreviewer() {
$("#OrderPreviewerGrid").data("kendoGrid").dataSource.read();
updateRuleSet();
}
/** When the user chooses an action, this method updates the rule in the database */
function updateRuleSet() {
$.post("/ruleset/updateruleset", { ruleSetId: $("#RuleSet_ID").val(), setName: $("#RuleSet_SetName").val(), action: $("#RuleSet_Action").val(), actionValue: $("#RuleSet_ActionValue").val() })
.done(function (data) {
console.log("Data Loaded: " + data);
})
}
function onAdditionalData2() {
return {
actionRule: $("#RuleSet_Action").val(),
q: $('#ActionValue').val()
};
}
</
script
>