Telerik Forums
UI for ASP.NET MVC Forum
1 answer
27 views

I have a grid with a toolbar

    .ToolBar(
        tools =>
        {
            tools.Excel();
            tools.Custom().Text("Finalize").IconClass("k-i-success").HtmlAttributes(new { id = "customButton", @class = "floatRight" });
        }
    )

The icon class is k-i-success (also tried k-i-check-outline)

On this page (https://docs.telerik.com/kendo-ui/styles-and-layout/icons-web) it shows k-i-success as a checkmark in a circle.

But in my toolbar, it is a mail icon

 

Am I doing something wrong, or is there an error in the class name?

Kevin
Top achievements
Rank 2
Iron
Iron
Iron
 answered on 28 Apr 2022
1 answer
10 views
Can the date labels in scheduler be customized to display arbitrary labels instead of dates? Instead of seeing Mon 1/1 Tue 1/2 can I show Item 1 Item 2 ... ?
Anton Mironov
Telerik team
 answered on 28 Apr 2022
1 answer
18 views

In some odd user-cases it is handy not to show the selected range inside the calendar when it shows up.

Case: Lets say you have a range already selected. Then you click the current start-date in the calendar which pops up. Further you click a new date back in time. This sets a new start date instead of selecting the end-date. The combination of actions requires 3 clicks to set the new range.

If the user unfortunately clicks on the start-date, it's not obvious to some people that the next date you select is still a start-date, unless you are aware that the controller does not select ranges backward in the calendar.

 

Yanislav
Telerik team
 answered on 28 Apr 2022
0 answers
17 views

I am using Web API Restful Services hosting on IIS, following are my Mvc controler code, I am new to telerik and it first time.

 public ActionResult Listtelerikgrid([DataSourceRequest(Prefix = "Grid")] DataSourceRequest request) {
            try
            {
                ServiceRepository serviceObj = new ServiceRepository();
                HttpResponseMessage response = serviceObj.GetResponse("/api/BreakUpValue/GetAllBreakUpValueDeals");
                response.EnsureSuccessStatusCode();
                IEnumerable<Models.RPS_BreakUpValue> RPSEquity = response.Content.ReadAsAsync<IEnumerable<Models.RPS_BreakUpValue>>().Result;

                 return Json(RPSEquity.ToDataSourceResult(request),  JsonRequestBehavior.AllowGet ); //View(RPSEquity);

            }
            catch (Exception)
            {
                throw;
            }
        }

    ============================================================================================

@using Kendo.Mvc.UI
@model IEnumerable<WebRPSUIFront.Models.RPS_BreakUpValue>
<div class="row">
    <div class="col-12">
        @(Html.Kendo().Grid<WebRPSUIFront.Models.RPS_BreakUpValue>()
            .Name("Grid")
            .AutoBind(true)
            .Columns(columns =>
            {
                columns.Bound(p => p.Sno);
                columns.Bound(p => p.Symbol);
                columns.Bound(p => p.BreakUpValue);
            })
            .Sortable()
            .Pageable()
            .Filterable()
            .HtmlAttributes(new { style = "height:550px;" })
            .DataSource(dataSource => dataSource
           // .WebApi()
           .Ajax()
            .Model(model =>
            {
                model.Id(p => p.Sno);
            })
                .Events(events => events.Error("error_handler"))  
                .Read(read => read.Action("Listtelerikgrid", "BreakUpValue"))
            )
        )
    </div>
</div>
<script type="text/javascript">
    function errorHandler(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);
        }
    }
        function error_handler(e) {
    var errors = $.parseJSON(e.xhr.responseText);
    if (errors) {
            alert("Errors:\n" + errors.join("\n"));
        }
    }

</script>

 

Ali
Top achievements
Rank 1
 asked on 23 Apr 2022
0 answers
25 views

I just upgraded to version 2022.1412 from 2020.3.915.  I have a tooltip that loads dynamic content.  It used to show a loading panel to the user while it was reaching out the server.  After I upgraded it doesn't show it anymore and sometimes it seems like it's not doing anything because the load can take a few seconds.  Is there anyway to get this back?

This is what it used to look like...

 

 

Thanks

Dave Wolf
Top achievements
Rank 1
Iron
 asked on 22 Apr 2022
1 answer
36 views

Hi Telerik,

I got an issue when rendering kendo datepicker. At first time we open the page, the value of Kendo datepicker populated. But then, after refresh (via browser button or f5) the value was gone, and only the format shown like below:

The only way to make it populated is to:

  • Hard reload the page (ctrl+f5)
  • change the browser (tested on chrome).
  • change datepickerfor to datepicker() and add .value(x.FldBirthdate.Value.ToString("MM/dd/yyyy")).
    we have to ToString() it, if it's only x.FldBirthdate, it doesn't work.

Here is how I render the kendo datepicker

@(Html.Kendo()
                    .DatePickerFor(x => x.FldBirthdate)
                    .Max(DateTime.Now)
                    .DateInput()
                    .Format("dd/MM/yyyy")
                    .ParseFormats(new List<string>() { "dd MMM yyyy" })
                    .HtmlAttributes(customAttributes)
                    .Events(x => x.Change("dateOnChange"))
                )

I already tried to remove the max, dateinput(), format, parseformat, htmlattributes but the problem still persist.
There is no error message shown in the console.

Kendo version: 2019.3.1023
Jquery version: 3.4.1

Please advise.
Thank you.

Patrick | Technical Support Engineer, Senior
Telerik team
 answered on 22 Apr 2022
1 answer
25 views

Im using Kendo grid MVC and trying to determine how i can have 2 edit popup buttons (edit command at column level) that edit diffrent things.  Business rules dont allow a single editor template to update all data.

example “edit address” button shows address editor tenplate and a “edit company” button which shows company editor template.  

how can achieve this?

Ivan Danchev
Telerik team
 answered on 22 Apr 2022
4 answers
31 views

I have a kendo form with two drop down list editors.

How can I from Javascript set the selected value of one of the drop downs.

Both drop downs are using server side filtering .

There is a possibility that the value i need to set is not in the already pulled data , but it is guaranteed to be in the full datasource.

Any direction would be appreciated.


    @(Html.Kendo().Form<KitMasterViewModel>()
        .Name("KitInfoForm")
        .HtmlAttributes(new { action = @Url.Action("ValidationKitMaster", "KitsOverview"), method = "POST" })
        .FormData(Model)
        .Layout("grid")

        .Grid( c => c.Cols(2).Gutter(4))
        .Validatable(v =>
        {
            v.ValidateOnBlur(true);
            v.ValidationSummary(vs => vs.Enable(false));
        })
        .Items(items =>
        {
            items.AddGroup()
                .Label("Kit Information")
                .Items(i =>
                {
                    i.Add()
                        .Field(f => f.SeqKit)
                        .Label(l => l.Text("Kit Number:"));
                    i.Add()
                        .Field(f => f.DateSchedule)
                        .Label(l => l.Text("Date Required"));

                    i.Add()
                        .Field(f => f.KitQty)
                        .Editor(E =>
                        {
                            E.NumericTextBox<int>()
                                .HtmlAttributes(new {style = "text-align:right" })
                                .Format("N0");
                        })
                        .Label(l => l.Text("Kit Quantity:"));

                    i.Add()
                        .Field(f => f.PickOrder)
                        .Label(l => l.Text("Pick Order:"))
                        .Editor(E => {
                            E.DropDownList()
                                .DataTextField("Text")
                                .DataValueField("Value")
                                .BindTo(new List<SelectListItem>()
                                {
                                                 new SelectListItem()
                                                 {
                                                     Text="Lowest Quantity",
                                                     Value=$"{(int)InoAutoBusiness.Enums.EPickPackageOrder.LowestQty}",
                                                 },
                                                 new SelectListItem()
                                                 {
                                                     Text="FIFO Order",
                                                     Value=$"{(int)InoAutoBusiness.Enums.EPickPackageOrder.FIFO}"
                                                 },
                                                 new SelectListItem()
                                                 {
                                                     Text="Match Quantity",
                                                     Value=$"{(int)InoAutoBusiness.Enums.EPickPackageOrder.ClosestMatch}"
                                                 },
                                                 new SelectListItem()
                                                 {
                                                     Text="Custom Order",
                                                     Value=$"{(int)InoAutoBusiness.Enums.EPickPackageOrder.Custom}"
                                                 },
                                });
                        });



                    i.Add()
                        .Field(f => f.ID)
                        .Label(" ")
                        .EditorTemplate("<input name='ID' type='hidden' />");
                });

            items.AddGroup()
                .Label("Source")
                .Items(i =>
                {
                    i.Add()
                        .Field(f => f.IDBom)
                        .Label("Assigned Bill of Material")
                        .Editor(e =>
                        {
                            e.DropDownList()
                                .DataValueField("IDBom")
                                .DataTextField("LongName")
                                .HtmlAttributes(new { style = "width:100%"})
                                .Filter("contains")
                                .Events(item => item.Change("BillChanged"))
                                .MinLength(3)
                                .Height(520)

                                .Template("<table><tr><td style='width:200px' >#: data.PartNumber #</td><td style='width:50px'>#: data.Revision #</td></tr></table>")

                                .DataSource(
                                    source =>
                                    {
                                        source.Custom()
                                            .ServerFiltering(true)
                                            .ServerPaging(true)
                                            .PageSize(80)
                                            .Type("aspnetmvc-ajax")
                                            .Transport(transport =>
                                            {
                                                transport.Read("GetBOMMasters", "BillOfMaterial");
                                            })
                                            .Schema(schema =>
                                            {
                                                schema.Data("Data") //define the [data](https://docs.telerik.com/kendo-ui/api/javascript/data/datasource#configuration-schema.data) option
                                                    .Total("Total"); //define the [total](https://docs.telerik.com/kendo-ui/api/javascript/data/datasource#configuration-schema.total) option
                                            });
                                    }
                                );


                        });


                    i.Add()
                        .Field(f => f.IDAVL)
                        .Label("Assigned Constraint")
                        .Editor(e =>
                        {
                            e.DropDownList()
                                .Name("ddlAVL")
                                .HtmlAttributes(new { })
                                .DataTextField("NameAVL")
                                .DataValueField("IDAVL")
                                .HtmlAttributes(new { style = "width:100%" })
                                .Height(520)
                                .MinLength(3)
                                .Filter(FilterType.Contains)
                                .DataSource(
                                    source =>
                                    {
                                        source.Custom()
                                            .ServerFiltering(true)
                                            .ServerPaging(true)
                                            .PageSize(80)
                                            .Type("aspnetmvc-ajax") //Set this type if you want to use DataSourceRequest and ToDataSourceResult instances
                                            .Transport(transport =>
                                            {
                                                transport.Read("GetAVLMasters", "BOMEdit");
                                            })
                                            .Schema(schema =>
                                            {
                                                schema.Data("Data") //define the [data](https://docs.telerik.com/kendo-ui/api/javascript/data/datasource#configuration-schema.data) option
                                                    .Total("Total"); //define the [total](https://docs.telerik.com/kendo-ui/api/javascript/data/datasource#configuration-schema.total) option
                                            });

                                    }
                                );


                        });
                });

        })
        )


<script type="text/javascript">
    $(document).ready(function () {
        $("input[type='text'], textarea").attr('spellcheck', false);
    });

    function BillChanged(e) {
        var ddl = e.sender; 
        var selectedValue = ddl.value(); 

        $.ajax({
            url: "@Url.Action("GetBOMMasters", "BillOfMaterial",new { id = UrlParameter.Optional, operation = UrlParameter.Optional })" + "/" + selectedValue,
            type: 'POST',
            contentType: 'application/json;',
            data: JSON.stringify({ id: selectedValue }),
            success: function (bom) {
                if (bom.Data.length>0) {
                    var idAVL = bom.Data[0].IDAVL;

                    // I need to set the value of ddlAVL to idAVL here
                    // but i am at a loss to how to do it

                    debugger;
                }
            }
        });
    }

    function NavigateComponents() {
        location.href = "@Url.Action("KitsOverview", "KitsOverview",new {id=Model.ID, operation = "components"})";
    }

    function NavigateKitInfo() {
        location.href = "@Url.Action("KitsOverview", "KitsOverview",new { id = Model.ID, operation = "info"})";
    }

    function NavigateOverview() {
        location.href = "@Url.Action("KitsOverview", "KitsOverview", new { id = UrlParameter.Optional, operation = UrlParameter.Optional})";
    }

</script>

David Ocasio
Top achievements
Rank 2
Iron
Veteran
Iron
 answered on 21 Apr 2022
2 answers
95 views

I am showing multiple instances of the same grid in the same view. And everything works fine except if you try to edit a record on two grids at the same time.

The problem seems to be that the EditorFor elements created when switching to in-line edit mode all end up named the same, so the second set of editors don't work as expected (as-in, the DatePicker doesn't render, I just end-up with a non-formatted date in a regular textbox).

 

I tried adding an HtmlFieldPrefix to each partial (the helper to create the view is held within a PartialView that's called for each team).

That makes the actual editors render appropriately, but they don't get properly bound to the underlying model (as-in, I can see the datepicker, but it doesn't have the existing value, nor posts back to the model as expected).

 

As far as the model, the key portion would be with the Date fields, where I have the model decorated so that it shows the appropriate date picker.

The way I'm creating multiple grids is that I loop through a collection of teams and call a helper to create each grid with a separate Id.

[DisplayFormat(DataFormatString = "{0:MM/dd/yyyy}", ApplyFormatInEditMode = true)]
[UIHint("Date")]
public DateTime DateStart { getset; }
 
@helper TeamGrid(int id)
{
    @(Html.Kendo().Grid<KTeam>()
          .Name("gridTeam" + id)
          .DataSource
          (
              d => d
                  .Ajax()
                  .ServerOperation(false)
                  .PageSize(20)
                  .Model(model =>                   {
                      model.Id(u => u.Id);
                   })
                  .Events(events => events.Error("onError"))
                  .Read(r => r.Action("ReadTeam""Report").Data("dataTeamId(" + id + ")"))
                  .Update(u => u.Action("EditTeam""Report"))
                  .Sort(sort => sort.Add(s => s.Member).Ascending())
          )
          .Columns(columns =>           {
              columns.Bound(u => u.Id).Hidden();
              columns.Bound(u => u.Member).Width(200);
              columns.Bound(u => u.DateStart).Width(120);
              columns.Bound(u => u.DateEnd).Width(120);
              columns.Command(command => command.Edit()).Width(177);
          })
          .Filterable(f => f.Extra(false).Operators(o => o.ForString(s => s.Clear().Contains("Contains"))))
          .Sortable(s => s.SortMode(GridSortMode.MultipleColumn).AllowUnsort(true))
    ) }

 

Matus
Top achievements
Rank 1
Iron
 updated answer on 21 Apr 2022
1 answer
275 views

Hi All,

I am implementing a project based on one of the Telerik
examples as part of learning KendoUI and MVC.  It is not going well.

By reviewing the browser console on Firefox 37.0.1 and IE 11
I have resolved all JavaScript errors.   All libraries appear to be loading.

The grid populates fine when using server binding but with
Ajax I have the following problem:

If I use this return statement:
      return View("Index", Json(result, "text/html", System.Text.Encoding.UTF8, JsonRequestBehavior.AllowGet));
I get a nicely formatted but empty grid.

If I use this return statement:
     return Json(result, JsonRequestBehavior.AllowGet);
I get my expected data dumped to the screen but no grid.

 

The data being returned by the controller looks like this:

{"Data":[{"EmployeeID":"FITS-0001","FirstName":"John","LastName":"Doe","EmailAddress":"jdoe@acme.com","TelephoneNumber":null,"UserID":"johndoe","JobTitle":null,"EmployeeStatus":null}, {"EmployeeID":"FITS-0002","FirstName":"Jane","LastName":"Doe","EmailAddress":"janedoe@acme.com","TelephoneNumber":null,"UserID":"janedoe","JobTitle":null,"EmployeeStatus":null}],"Total":2,"AggregateResults":null,"Errors":null}

My code is below.  Any pointers would be greatly appreciated. 

Controller -- EmployeeController
 
using System.Linq;
using System.Web.Mvc;
using Kendo.Mvc.Extensions;
using Kendo.Mvc.UI;
using TestBagWeb.Models;
using TestBagWeb.DAL;
 
namespace TestBagWeb.Controllers
{
    public class EmployeeController : Controller
    {
        public ActionResult Employees_JsonRead([DataSourceRequest]DataSourceRequest request)
        {
            using (TestBagContext employeeData = new TestBagContext())
            {
                IQueryable<Employee> employees = employeeData.Employees;
                DataSourceResult result = employees.ToDataSourceResult(request);
                return View("Index", Json(result, "text/html", System.Text.Encoding.UTF8, JsonRequestBehavior.AllowGet));
                //return Json(result, JsonRequestBehavior.AllowGet);           
            }
        }
    }
}

View -- Employee/Index
 
 
@{
    ViewBag.Title = "Test Bag";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
 
 
 
@(Html.Kendo().Grid<TestBagWeb.Models.Employee>()
      .Name("employeeGrid")
      .Columns(columns =>
      {
        columns.Bound(c => c.EmployeeID);
        columns.Bound(c => c.FirstName);
        columns.Bound(c => c.LastName);
        columns.Bound(c => c.EmailAddress);
        columns.Bound(c => c.TelephoneNumber);
        columns.Bound(c => c.UserID);
        columns.Bound(c => c.JobTitle);
        columns.Bound(c => c.EmployeeStatus);
        columns.Bound(c => c.FullName);
        columns.Bound(c => c.EmployeeName);
      })
      .Scrollable()
      .Sortable()
      .Pageable()
      .DataSource(dataSource => dataSource
          .Ajax()
              .Read(read => read.Action("Employees_JsonRead", "Employee"))
      )
)

 

Regards


Ivan Danchev
Telerik team
 updated answer on 20 Apr 2022
Narrow your results
Selected tags
Tags
+? more
Top users last month
sun
Top achievements
Rank 2
Iron
Iron
Iron
Alan
Top achievements
Rank 2
Iron
Iron
Paul
Top achievements
Rank 2
Iron
Veteran
Iron
Ohad
Top achievements
Rank 2
Iron
Iron
Iron
arkan
Top achievements
Rank 2
Want to show your ninja superpower to fellow developers?
Top users last month
sun
Top achievements
Rank 2
Iron
Iron
Iron
Alan
Top achievements
Rank 2
Iron
Iron
Paul
Top achievements
Rank 2
Iron
Veteran
Iron
Ohad
Top achievements
Rank 2
Iron
Iron
Iron
arkan
Top achievements
Rank 2
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?