Questions on UI for ASP.NET MVC Forum

1 answer

489 views

Unable to remove required attribute of a RadioGroup via javascript

Scenario: Drop-down for customer to select preferred language. If they choose anything other than English, the Radio Group 'Interpreter Required?' (Yes / No) would be a required field. If they select English, this Radio Group is NOT required.

I have the 'Required' Data Annotations set in my model:

[Required]
public int? LanguageID { get; set; }

[Required]
public int? InterpreterRequiredID { get; set; }

View:

<div class="form-group">
    <label>What is your preferred language?</label><br />

    @Html.Kendo().ComboBoxFor(m => m.LanguageID).BindTo(new List<SelectListItem>()
    {
        new SelectListItem() { Text="English", Value="E" },
        new SelectListItem() { Text="Spanish", Value="S" },
        new SelectListItem() { Text="Other", Value="O" }
    }).Events(e => e
        .Change("LanguageID_onChange")
    )
</div>
<div class="form-group">
    <label>Do you require an interpreter?</label><br />
    @Html.Kendo().RadioGroupFor(m => m.InterpreterRequiredID).Items(i =>
        {
            i.Add().Label("Yes").Value("1");
            i.Add().Label("No").Value("2");
        })
</div>
<script>
    function LanguageID_onChange(e) {
        var el = document.getElementById('InterpreterRequiredID');

        if (this.value() == 'E') {
            el.removeAttribute("data-val-required");
        } else {
            el.setAttribute("data-val-required", "This is required!");
        }
    }
</script>

The Radio Group is still requiring a selection upon submission, no matter the language selected. If I change the target control in the javascript function to any other type of input (such as textbox or combobox), the required attribute is successfully removed / assigned according to the language selection. It just doesn't appear to work with the RadioGroup.

RadioGroup

answered on 09 May 2022

1 answer

159 views

Can I Invoke Spreadsheet Comment with Double Click on the Cell rather than using the Tool Bar

I really have two questions: The first is as described above. I really have no need for the tool bar other than for entering cell comments, so I would like to know if there is a way to invoke that functionality with a double click. Also, I am replacing a Windows Desktop Application that does allow the users to double click to add comments so if I cannot do this in Kendo UI, it will be a behavior change for the users.

Secondly, can comment data be bound to the data source so that when I do a load or submit the database Comment field is updated along with all the other data?

Spreadsheet

answered on 29 Apr 2022

1 answer

282 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

239 views

[Solved] 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

157 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

136 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

123 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

131 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.3K+ 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

180 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