Telerik Forums
UI for ASP.NET MVC Forum
1 answer
219 views
What is the difference between custom validation on grid and the Remote validation? What would be the use-case for Remote over custom validation? Is one for server-side only?
Alex Hajigeorgieva
Telerik team
 answered on 22 Apr 2020
1 answer
380 views

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

Silviya Stoyanova
Telerik team
 answered on 21 Apr 2020
2 answers
76 views

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>
Joe
Top achievements
Rank 1
 answered on 20 Apr 2020
3 answers
264 views

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?

Preslav
Telerik team
 answered on 20 Apr 2020
1 answer
105 views

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.

 

Joe
Top achievements
Rank 1
 answered on 17 Apr 2020
8 answers
2.8K+ views

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

K.Ramadan
Top achievements
Rank 2
Veteran
 answered on 17 Apr 2020
2 answers
562 views

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

Chris
Top achievements
Rank 1
 answered on 17 Apr 2020
1 answer
1.6K+ views

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

 

Aleksandar
Telerik team
 answered on 17 Apr 2020
1 answer
609 views

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>
Georgi
Telerik team
 answered on 17 Apr 2020
4 answers
284 views

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>
Dimitar
Telerik team
 answered on 17 Apr 2020
Narrow your results
Selected tags
Tags
+? more
Top users last month
Will
Top achievements
Rank 2
Iron
Motti
Top achievements
Rank 1
Iron
Hester
Top achievements
Rank 1
Iron
Bob
Top achievements
Rank 3
Iron
Iron
Veteran
Thomas
Top achievements
Rank 2
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Will
Top achievements
Rank 2
Iron
Motti
Top achievements
Rank 1
Iron
Hester
Top achievements
Rank 1
Iron
Bob
Top achievements
Rank 3
Iron
Iron
Veteran
Thomas
Top achievements
Rank 2
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?