Questions on UI for ASP.NET MVC Forum

1 answer

123 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

241 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

192 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

132 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

108 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

102 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

105 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

143 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

538 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