Questions on UI for ASP.NET MVC Forum

1 answer

218 views

Is there a HighlightFirst option for DropDownList?

The ComboBox control appears to have a configuration called HighlightFirst which supresses the automatic highlighting of the first list item as the user types.

Is there any way of implementing this same logic on the DropDownList control? By default, it appears to highlight / focus on the first option in the list when the user begins to type.

@(Html.Kendo().DropDownList()
        .Name("Sku")
        .DataValueField("Value")
        .DataTextField("Text")
        .//HighlightFirst(false)
        .Filter("contains")
        .AutoBind(false)
        .BindTo(new List<SelectListItem>()
                {
                    new SelectListItem(){ Value = "ZIP100", Text = "ZIP100 - Zip Active Stool | Stock | 400H-550H | Purple Moon	" },
                    new SelectListItem(){ Value = "ZIP101", Text = "ZIP101 - Zip Active Stool | Stock | 400H-550H | Juice Green" },
                    new SelectListItem(){ Value = "ZIP102", Text = "ZIP102 - Zip Active Stool | Stock | 400H-550H | Capri Mid Blue" },
                    new SelectListItem(){ Value = "ZIP103", Text = "ZIP103 - Zip Active Stool | Clearance | 400H-550H | Opal Light Blue" },
                    new SelectListItem(){ Value = "ZIP104", Text = "ZIP104 - Zip Active Stool | Clearance | 400H-550H | Oyster Grey" },
                    new SelectListItem(){ Value = "ZIP105", Text = "ZIP105 - Zip Active Stool | Clearance | 400H-550H | Melon Rush" },
                    new SelectListItem(){ Value = "ZIP106", Text = "ZIP106 - Zip Active Stool | Stock | 400H-550H | Charcoal" },
                    new SelectListItem(){ Value = "ZIP107", Text = "ZIP107 - Zip Active Stool | Clearance | 400H-550H | Capri Blue with NC Whale Seat Pad" },
                    new SelectListItem(){ Value = "ZIP108", Text = "ZIP108 - Zip Active Stool | Clearance | 400H-550H | Juice Green with NC Whale Seat Pad" },
                    new SelectListItem(){ Value = "ZIP109", Text = "ZIP109 - Zip Active Stool | Clearance | 400H-550H | Melon Rush with NC Whale Seat Pad" },
                    new SelectListItem(){ Value = "ZIP110", Text = "ZIP110 - Zip Active Stool | Clearance | 400H-550H | Opal Blue with NC Whale Seat Pad" },
                    new SelectListItem(){ Value = "ZIP111", Text = "ZIP111 - Zip Active Stool | Clearance | 400H-550H | Oyster Grey with NC Whale Seat Pad" },
                    new SelectListItem(){ Value = "ZIP112", Text = "ZIP112 - Zip Active Stool | Clearance | 400H-550H | Purple Moon with NC Whale Seat Pad" }
                })
    )

ComboBox

DropDownList

answered on 04 Nov 2021

1 answer

400 views

How to insert 2 pictures into the HEADER of a RadFlowDocument Word document

Anyone know how to adding 2 images in the header , one on the left and one on the right?

I try setting defaultHeaderParagraph.Properties.TextAlignment.LocalValue = Alignme

nt.Justified; but it does not work

.

both images still align to left.

Thanks in advance.

Editor

answered on 04 Nov 2021

1 answer

91 views

I am unable to display data in Telerik Grid. in asp.net core mvc in VS2019.

Hi All,

Please find the attachment for my project and DB script. Due size issue i am sharing only few files excep ref files. I am displaying data in Home.cshtml. After login youser details are displayed in Home.cshtml page. Added MVC HTML helper tabel and Telerik Grid to display data based on the user login.

But Telerik grid data is not displaying i dont know what is my mistake. Same thing i did in Telerik MVC there it works fine but in core mvc telerik grid is not working as expected.

Data displaying in HTML helper tables but not displaying in Telerik Grid control. I need to submit this test project for client approval please henp me to use telerik grid in Coremvc.

Sample Screens:

Error in ;

Please find the attachemnt for project File and script.

Grid

answered on 04 Nov 2021

2 answers

272 views

kendo grid redirects to API and shows JSON when column title is clicked for sorting

Hi,

I have a Kendo grid on a page that is created using this code in my cshtml file

 @(Html.Kendo().Grid<Entity>()
        .Name("productsGrid")
        .Columns(columns =>
        {
            columns.Bound(schema => schema.Ns).Width(150)
                .Filterable(false).Sortable(false);
            columns.Bound(schema => schema.Name).Title("Entity Name").Width(250);
            columns.Bound(schema => schema.Desc).Title("Description")
                .ClientTemplate("#= preserveDirtyFlag(data, data.Desc) #")
                .Filterable(false).Sortable(false);
        })
        .Editable(editable => editable.Mode(GridEditMode.InCell))
        .Sortable()
        .DataSource(dataSource => dataSource
            .Ajax()
            .Batch(true)
            .ServerOperation(true)
            .PageSize(100)
            .Model(model =>
            {
                model.Id(entity => entity.Id);
                model.Field(entity => entity.Ns).Editable(false);
                model.Field(entity => entity.Name).Editable(false);
                model.Field(entity => entity.Desc);
            })
            .Read(read => read.Action("GetEntityList", "Products").Data("getQuery"))
            .Events(e => e.RequestStart("onPageChange"))
        )
        .Events(e => e.DataBound("onDataBound"))
        .ClientDetailTemplateId("fieldDescriptions")
)

Everything works perfectly fine on first load.

The pagination works perfectly (have removed the code for that from above). Even the filtering works smoothly. super smooth.

The only issue is with sorting.

---

As the code shows that sorting is enabled on the single column: 'Entity name'

As soon as that column title is clicked in order to sort the data, the browser redirects to a new URL

earlier it was at

/CatalogManager/Descriptions

but after clicking on the 'Entity Name' in order to sort that table, it redirects to:

/CatalogManager/Descriptions/GetEntityList?sortField=Relevancy&sortFieldValue=_score&descriptionsGrid-sort=Name-desc

and then shows the pure JSON output that the GetEntityList controller returns instead of rendering in the grid.

Why does filtering and pagination work well but sorting breaks the page?

---

The amazing thing is, if I remove the '/GetEntityList' from the url manually and just navigate to:

/CatalogManager/Descriptions?sortField=Relevancy&sortFieldValue=_score&descriptionsGrid-sort=Name-desc

Then the table is displayed in its full glory sorted by the required field. So they question is, why does it navigate to the API url and display the raw JSON data in the first place?

Grid

Sortable

answered on 03 Nov 2021

1 answer

174 views

Calculate Measures in a PivotGrid

Hello,

I'm trying to use a pivotgrid where a ratio is calculated, but I can find a way to do it, as the Total is always wrong.

Example : I don't know how to calculate the cell with "?"

| Object 1 | Object 2 | Total Object |

01/01/2021 | 15 | 12 | 0.8 | 15 | 6 | 0.4 | 30 | 18 | ? |

02/01/2021 | 16 | 10 | 0.625| 12 | 6 | 0.5 | 28 | 16 | ? |

Total Date | 31 | 22 | ? | 27 | 12 | ? | 58 | 34 | ? |

Thanks for your help

PivotGrid

answered on 02 Nov 2021

1 answer

217 views

Telerik radcombobox deselect disabled items on OnClientCheckAllChecked

I have a Telerik RadComboBox that is programmatically generated in C#. In the aspx file, I have this JavaScript function which I would like to deselect any disabled comboBox item when the "Check All" choice is selected.

        function OnClientCheckAllChecked(sender, args) {

            var checkedItems = sender.get_checkedItems();

            for (var i = 0; i < checkedItems.length; i++) {

                console.log(checkedItems[i].get_text());

                if (checkedItems[i].get_enabled() === false) {

                    console.log("enabled is false for " + i);
                    checkedItems[i].set_checked(false);
                }
                
                console.log("checked is " + checkedItems[i].get_checked());
            }
        }

However, it does not work as intended. The disabled item is still checked after clicking the "Check All".

Here is an image of the description:

ComboBox

General Discussions

answered on 02 Nov 2021

1 answer

149 views

Yaxis step size

Hello

I hvae just started to use line chart and i am using demo exmple but y axis looks very bad

@using Kendo.Mvc.UI;

@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}

 

<div id="page-wrapper">
    <div class="row">
        <div class="col-lg-12">
            <div class="panel panel-default" style="min-height: 100px;">
                <div class="panel-body index" style="padding: 0px">
                    Todays Totals
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-2">
            <div class="panel panel-default" style="min-height: 500px;">
                <div class="panel-body index" style="padding: 0px">
                    Filters
                </div>
            </div>
        </div>
        <div class="col-lg-4">
            <div class="panel panel-default" style="min-height: 500px;">
                <div class="panel-body index" style="padding: 0px">
                    Sales by platform
                </div>
            </div>
        </div>
        <div class="col-lg-6">
            <div class="col-lg-12">
                <div class="panel panel-default" style="min-height: 400px;">
                    <div class="panel-body index" style="padding: 0px">
                        <div class="k-content wide">
        
                            @(Html.Kendo().Chart()
     .Name("chart1")
     .Title("Internet Users")
     .Legend(legend => legend
         .Position(ChartLegendPosition.Bottom)
     )
     .Series(series =>
     {
         series.Line(new double[] { 15.7, 16.7, 20, 23.5, 26.6 }).Name("World");
         series.Line(new double[] { 67.96, 68.93, 75, 74, 78 }).Name("United States");
     })
     .CategoryAxis(axis => axis
         .Categories("2005", "2006", "2007", "2008", "2009")
         .MajorGridLines(lines => lines.Visible(false))
     )
     .ValueAxis(axis => axis
         .Numeric().Labels(labels => labels.Format("{0}%"))
     )
)

                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-12">
                <div class="panel panel-default" style="min-height: 270px;">
                    <div class="panel-body index" style="padding: 0px">
                        Grid
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

it looks like this

Chart

answered on 01 Nov 2021

1 answer

494 views

KendoDialog button ids

We have a dialog the dialog has an OK and Cancel button. How can I add button ids for the buttons.

Dialog

answered on 01 Nov 2021

1 answer

147 views

"Undo" TaskBoard Card Movement in OnMove event.

Hello, I'm attempting to "undo" an "invalid" card move on a taskboard between 2 cols with specified states.

I'll add the HtmlHelper code:

@(Html.Kendo().TaskBoard()
    .Name("kittingTaskBoard")
    .ColumnSettings(s =>
    {
        s.TemplateId("column-template");
        s.Width("320");
        s.Buttons(b =>
        {

        });

    })
    .Columns(c =>
    {
        c.Add().Text("On Hold").Status("2");
        c.Add().Text("New").Status("1");
        c.Add().Text("In Work").Status("3");
        c.Add().Text("Staged").Status("4");
        c.Add().Text("Verified").Status("5");
    })
    .Editable(false)
    .DataDescriptionField("ShipNumber")
    .DataTitleField("Control")
    //.DataOrderField("PriorityId")
    .DataStatusField("StatusId") 
    .TemplateId("card-template")
    .Events(events => events.MoveStart("onKitSessionStartMove").MoveEnd("onKitSessionMove"))
    .DataSource(source => source.Ajax().Read(read => read.Action("GetKittingQueue", "Fulfillment")))
    .Height("980")
    .Events(ev => ev.DataBound("onDataBound").ColumnsDataBound("onColumnsDataBound")))

I'll add the validation code:

        const manager = {
            claim: function(id, uid) {
                $.ajax('@Url.Action("ClaimKitSession", "Fulfillment")',
                    {
                        method: "Post",
                        data: getAntiForgeryToken({ id })
                    }).done(function(response) {
                    notify(response);
                }).fail(function(error) {
                    notify(error.responseJSON);
                });
            },
            valid: function(from, to) {
                console.log(`[valid]: ${from} > ${to}`);
                if ((from === "3" && to === "1") // InWork > New
                        ||
                        (from === "3" && to === "2") // InWork > OnHold
                        ||
                        (from === "4" && to === "3") // Staged > InWork
                        ||
                        (from === "5" && to === "4") // Verified > Staged
                        ||
                        (from === "1" && to === "4") // New > Staged
                        ||
                        (from === "1" && to === "5") // New > Verified
                ) {
                    return false;
                }
                return true;
            }
        }

I'll add the Move Event code:

        function onKitSessionStartMove(e) {
            state.card = null;
            state.col = "0";
        }

        function onKitSessionMove(e) {
            if (state.card !== null) {
                if (!isUndefined(e.card)) {
                    if (e.card.RowId === state.card.RowId) {
                        if (!isUndefined(e.column)) {
                            if (e.column.Status === state.col) {
                                return;
                            }
                        }
                    }
                }
            } else {
                state.card = e.card;
                state.col = e.column.Status;
                return;
            }
            state.card = e.card;
            state.prev = state.col;
            state.col = e.column.Status;

            setBadgeText();

            if (manager.valid(state.prev, state.col)) {
                if (state.col === "3") {
                    manager.claim(state.card.RowId);
                }
            } else {
                toastr.warning("Invalid action prevented, you do not have permission to perform this action",
                    "Warning",
                    { positionClass: "toast-bottom-right", containerId: "toast-bottom-right" });
            }

        }

I was wondering If i could there was a card function or something I can call when the validation fails to move it back to it's previous column?

TaskBoard

answered on 26 Oct 2021

1 answer

375 views

Razor Web Application, Keno grid InCell edition using a date picker control unable to return the updated value to server

Need an example of how to use a date picker to change the date field in a Keno grid. The examples I can find only show a dropdown. I have not problem get this to work on the client side. But I can not find anything that show how to return the updated value back to the server.

Razor page:

@(Html.Kendo().Grid<Pages.EditContract>()
.Name("grid")
.Editable(editable => editable.Mode(GridEditMode.InCell))
.Columns(columns =>
{
columns.Bound(p => p.StartDate);
columns.Bound(p => p.EndDate).ClientTemplate("#=EndDate#").Sortable(false).Width(180).Format("MM/dd/yyyy");
})
.DataSource(ds => ds.Ajax()
.Model(model =>
{
model.Id(p => p.Id);
model.Field(p => p.StartDate).Editable(false);
model.Field(p => p.EndDate).Editable(true);

})
.Read(r => r.Url("/Edit?handler=Read").Data("forgeryToken"))
.Update(r => r.Url("/Edit?handler=Update").Data("forgeryToken"))
.Model(m => m.Id(id => id.Id))
.PageSize(4)
)
//.Events(ev => ev.DataBound("db"))
)

Edit Template:

@model ContractorManagment.Models.Contract

@(Html.Kendo().DatePicker()
.Name("EndDate") // The name of the DatePicker is mandatory. It specifies the "id" attribute of the widget.
.Format("MM/dd/yyyy")
//.Value(Model.EndDate) // Sets the value of the DatePicker.
)

If it was not in a grid all you have to do is set the .Value property. But that does not work when it is in a grid.

DatePicker

Grid

updated answer on 25 Oct 2021