Questions on UI for ASP.NET MVC Forum

1 answer

263 views

Panelbar loadondemand to false with items that loadcontentfrom

Hi,

So basically I'm trying to load the items of my PanelBar at the creation of the PanelBar. My item has a LoadContentFrom itself but it only triggers once I open the panelbar item. It used to work with the LoadOnDemand property set to false but it doesn't anymore. Any idea what is I am doing wrong here?

@(Html.Kendo().PanelBar()
            .Name("panelbar")
            .ExpandMode(PanelBarExpandMode.Multiple)
            .HtmlAttributes(new { @class = "k-primary", type = "submit", style = "width:100%" })
            .LoadOnDemand(false)
            .Items(panelbar =>
            {
                panelbar.Add().Text("Item Title").LoadContentFrom(Url.Action("Function", "Controller", Model));
            }))

Thanks again!

PanelBar

answered on 29 Apr 2022

1 answer

208 views

Incorrect icon classes?

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?

Grid

answered on 28 Apr 2022

1 answer

141 views

Scheduler Component - Overwrite Date Labels

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 ... ?

Scheduler

answered on 28 Apr 2022

1 answer

119 views

Is there a way to clear the visible range selection in the calendars when the popup shows up without clearing the selected start and end-dates?

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.

DateRangePicker

answered on 28 Apr 2022

0 answers

111 views

asp.net MVC grid showing Text Data on browser not grid.

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>

Grid

asked on 23 Apr 2022

0 answers

118 views

Tooltip loading panel gone?

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

ToolTip

asked on 22 Apr 2022

1 answer

1.2K+ views

Multiple edit buttons kendo grid

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?

Grid

answered on 22 Apr 2022

4 answers

159 views

setting value of second drop down

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>

DropDownList

Form

answered on 21 Apr 2022

2 answers

568 views

Problem editing with multiple instances of same Grid

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 { get; set; }

@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))

) }

Grid

updated answer on 21 Apr 2022

1 answer

872 views

MVC Grid not populating from datasource when using AJAX

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

Grid

updated answer on 20 Apr 2022