Questions on UI for ASP.NET Core Forum

1 answer

92 views

Right now, I have a ListBox on a ASP.NET Core MVC application that has some "clonky" behavior. When I press the "Up/Down" arrows to reorder the contents of the ListBox, it redirects over to the controller then loads an "Edit" view then when I save the Edit result (item index) and it directs back to the view with the ListBox. This is not a good user experience.

Instead, I want to push the up/down arrow and have it perform the update without it redirecting over to the Controller/Edit page. How do I accomplish this?

                <div class="container">
                    @(Html.Kendo().ListBox()
                        .Name("listBox")
                        .DataTextField("Name")
                        .DataValueField("Id")
                        .DataSource(source =>
                            source.Read(read =>
                                read.Action("IndexJson", "SessionOptionItems").Data("gridGetData"))
                        )
                        .TemplateId("item-template")
                        .Toolbar(toolbar =>
                        {
                            toolbar.Position(ListBoxToolbarPosition.Right);
                            toolbar.Tools(tools => tools
                                .MoveUp()
                                .MoveDown()
                                .Remove()
                                );
                        })
                        .Events(events => events
                            .Reorder("onReorder")
                            .Remove("onRemove"))
                        .HtmlAttributes(new { style = "height:550px;width:530px" })
                        .BindTo(new List<SessionOptionTemplate>()))
                </div>

    function onReorder(e) {
        //alert("onReorder");

        $("#isbusy").show();

        var dataSource = e.sender.dataSource;
        var element = e.sender.select();
        var dataItem = e.sender.dataItem(element[0]);

        //alert("id: " + dataItem.Id);
        //alert("name: " + dataItem.Name);

        var index = dataSource.indexOf(dataItem) + e.offset;

        //alert("index: " + index);

        var url = '@Url.Action("Edit", "SessionOptionItems")?id=' + dataItem.Id + '&order=' + index + '@Model.GetUrlParameters("&")';
        // Replace &amp with & as the above encoding step changes & to &amp.
        window.location.href = url.replace(/&amp;/g, "&");
    }

ListBox

answered on 22 Sep 2022

1 answer

151 views

Bind grid to a model with Navigation property?

I've got an EF Core model that represents a one-to-many relationship. There's a navigation property on the parent that holds a collection of child items. What I'd like to do is bind this to a hierarchical grid and have the child items display underneath the parent items.

The example for a hierarchical grid shows separate data sources for the parent and child tables. Since I've already retrieved this data, why not just display it in that form?

I have a datasource defined which has an include statement. I tried to adapt the example code and have the same datasource for both grids, using syntax like "Client.Order" in the child table, but it doesn't like that.

Many thanks for any suggestions.

Grid

answered on 21 Sep 2022

0 answers

160 views

How to hide window form field on window activate

Hi there,

i have a window with a form. in these form there are three fields bound to my model.

One of the fields shouldn't be visible when the window was opened.

Here is the html helper code:

@{Html.Kendo().Window()
                    .Name("MeterData" + Model.Plan["Number"])
                    .Title("Vertragskontonummer: " + Model.PlanAccount.PlanAccount.Number + " Vertrags-Nr.: " + Model.Plan["Number"])
                    .Content(@<text>
        <div class="window-plan-content">
            <partial name="_PlanDetailData" />
            <div style="padding-top: 20px; width: 100%;">
                <div class="row window-form-content" style="border-radius: 13px 13px;">
                    <span class="accordeon-text-header" style="padding: 20px 0px 0px 20px;">Neuen Zählerstand angeben:</span>
                </div>
                <div class="row window-form-content">
                    <span class="accordeon-text" style="padding-top: 10px; padding-bottom: 20px; padding-left: 20px;">
                        Hier können Sie Ihren aktuellen Zählestand eingeben. Um sicher zu sein, dass Sie den richtigen Zähler<br />
                        abgelesen haben, sehen Sie hier Ihre zuletzt angegebene Zählernummer, die mit der Nummer auf Ihrem zähler<br />
                        übereinstimmen sollte.
                    </span>
                </div>
                <div class="row window-form-content" style="border-radius: 0px 0px 13px 13px;">
                    @(Html.Kendo().Form<Wsw.MeineWsw.Dks.Models.LastMeterReading>()
                                .Name("MeterDataDetailsForm")
                                .HtmlAttributes(new { action = "SaveMeterData", method = "PUT", style = "width: 100%;"})
                                .Layout("grid")
                                .ButtonsTemplate("<button id=\"closeMeterDetails" + Model.Plan["Number"] + "\" class=\"k-button open-modal-box\">Zurück</button><button id=\"submit-meter\" class=\"k-button k-primary k-form-submit open-modal-box\" type=\"submit\" planAccount=\"" + Model.PlanAccount.PlanAccount.Number + "\" plan=\"" + Model.Plan["Number"] + "\" meterNumber=\"" + Model.PlanAccount.Meters.Where(m => m.PlanAccountNumber == Model.PlanAccount.PlanAccount.Number).FirstOrDefault().Number + "\" registerKind=\"" + Model.PlanAccount.Meters.Where(m => m.PlanAccountNumber == Model.PlanAccount.PlanAccount.Number).FirstOrDefault().RegisterKind + "\" disabled=\"true\">Zählerstand übernehmen</button>")
                                .Grid(g => g.Cols(1).Gutter(20))
                                .Validatable(v =>
                                {
                                    v.ValidateOnBlur(true);
                                    v.ValidationSummary(vs => vs.Enable(false));
                                })
                                .Items(items =>
                                {
                                    items.AddGroup()
                                        .Layout("grid")
                                        .Grid(g => g.Cols(2).Gutter(10))
                                        .Items(i =>
                                        {
                                            i.Add()
                                                .Field(f => f.Value)
                                                .Label("Neuen Zählerstand angeben:")
                                                .Editor(e => e.NumericTextBox().Spinners(false).Format("n0"))
                                                .InputHtmlAttributes(new { style = "border-radius: 8px;" });
                                            i.Add()
                                                .Field(f => f.Date)
                                                .Label("Ablesedatum")
                                                .InputHtmlAttributes(new { style = "border-radius: 8px;" })
                                                .Editor(e => e.DateInput().Format("dd.MM.yyyy").Messages(m => m.Day("tt").Month("mm").Year("jjjj")).Max(DateTime.Now).Min(DateTime.Now.AddDays(-14)));
                                            i.Add()
                                                .Field(f => f.Comment)
                                                .Label("Kommentar")
                                                .Id("ReadingComment")
                                                .InputHtmlAttributes(new { style = "border-radius: 8px;" });
                                        });
                                })
                                .Events(ev => ev.Submit("onFormSubmitMeter").Change("validateMeterForm")))
                </div>
            </div>
        </div>
                    </text>
                    )
                    .Visible(false)
                    .Modal(true)
                    .Draggable(true)
                    .Scrollable(false)
                    .Width(1085)
                    .Height(746)
                    .Events(e => e.Activate("toogleMeterReadingCommentVisibility"))
                    .Render();
}

And here is the way I tried to toogle the visibility of the field:

function toogleMeterReadingCommentVisibility(e) {
        
    var parentEle = document.getElementById('ReadingComment-form-label').parentNode;
    parentEle.style.display = 'none';
    console.log(parentEle);
}

After setting display = 'none' the DOM-Element has changed as expected, but only in the console. The field is still visibile.

Thanks for help.

Timo

Form

Window

asked on 21 Sep 2022

1 answer

213 views

Grid HeaderTemplate checkbox not holding its value

Hi

I have a grid with checkbox columns, I like to place a checkbox on the header and select /deselect rows.

here is my grid, columns AttendTraining and ExamPassed are checkbox columns



<div>
        @(Html.Kendo().Grid<ViewStudents>()
              .Name("StudentGrid")
              .Columns(columns =>
              {
                  ;
                  columns.Bound(c => c.StId).Width(80);
                  columns.Bound(c => c.EmailPersonal).Width(230);
                  columns.Bound(c => c.FirstName).Width(200);
                  columns.Bound(c => c.Surname).Width(200);
                  columns.Bound(c => c.AttendTraining).Width(120).ClientTemplate("#= AttendTraining ? 'Yes' : 'No' #").HeaderTemplate("<label><input type='checkbox' id='chkAttTrn' onclick='ChangeCheckStatus(this.checked,this);'> <span>&nbsp; Attend Training </span></label>");
                  columns.Bound(c => c.ExamPassed).Width(120).ClientTemplate("#= ExamPassed ? 'Yes' : 'No' #").HeaderTemplate("<label><input type='checkbox' id='chkExam' onclick='ChangeCheckStatus(this.checked,this);'> <span>&nbsp; Exam Passed </span></label>");

                  columns.Bound(c => c.MobilePhoneNumber).Width(120).Title("Mobile/Cell Number");

              })
              .Editable(e => e.Mode(GridEditMode.InCell).DisplayDeleteConfirmation(false))
          .Resizable(resize => resize.Columns(true))
          .Scrollable(s => s.Enabled(true))
          .Selectable(selectable =>
          {
              selectable.Mode(GridSelectionMode.Single);
              selectable.Type(GridSelectionType.Row);
              selectable.Mode(GridSelectionMode.Multiple);
          })
          .Pageable(pageable => pageable
            .Refresh(true)
            .PageSizes(true)
            .ButtonCount(25)
            .PageSizes(new int[] { 25, 50, 100 })
            )
          .Sortable(sortable =>
          {
              sortable.SortMode(GridSortMode.SingleColumn);
          })
          .Events(events => events.Edit("disableEdit"))
.DataSource(dataSource => dataSource
        .Ajax()
        .Model(model => model.Id(x =>x.EmailWork))

        .PageSize(20)
        .ServerOperation(false))
          )

    </div>

I can update each column

	    
function ChangeCheckStatus(flag, e) {

        var grid = $('#StudentGrid').data('kendoGrid');
        var check = 0;
        if (flag)
            check = 1;

        $.each(grid.dataSource.data(), function (index, row) {
            console.log("row...")
            if (e.id == "chkAttTrn")
                row.set('AttendTraining', check);
            else if (e.id == "chkTakeExam")
                row.set('ExamPassed', check);
        });
    }

When I click on the header checkboxes (Attend Training & Exam Passed) it does change the column values, but the checkbox itself does not retain it's value.

what i need is, for it to hold it's value like below so i can toggle.

Thanks

Faz

Grid

answered on 20 Sep 2022

1 answer

582 views

Is it possible to export a list of data to excel with the export function but without the the grid component?

Scenario:

I've used grid component before,
and I'm aware that it has excel export function,
but what it exports is all the data from the grid.
However, in my scenario,
data in each row of my grid is only the maximum value of a list of data,
and I would like to press the button and export the list of data,
where the button is at the last column of the row.
Its hard to describe with words,
So I'll leave a picture hoping it will clarify my question

Button

Grid

answered on 20 Sep 2022

1 answer

113 views

TreeList DropDownListFor Display Value

Hey all,

Using Telerik UI for ASP.NET Core, I've added a TreeList widget. I'm trying to get it to display a DropDownList for what amounts to, in "Grid-speak", a Foreign Key column.

The method I found somewhere in my searches appears to be "working", in that when I enter inline edit mode on the row, the column is showing as a DropDownList and is rendering correctly showing the DataTextField (as shown in the attached Edit.png), but when in display mode on the row, it is only showing the DataValueField (as shown in the attached Display.png).

How do I get the display mode on the row to show the DataTextField from the drop down for the column?

Widget code in /Pages/ProposalVersions/details.cshtml Razor page (removed fields irrelevant to the question for conciseness):

@(Html.Kendo().TreeList<ProposalVersionLineItem>()
  .Name("proposalVersionLineItemTreeList")
  .Columns(columns => {
    columns.Add().Field(column => column.name).Width(200);
    columns.Add().Field(column => column.ProductID).Template("#=ProductID#").Sortable(false).Width(100);              
    columns.Add().Width(300).Command(c =>
    {
      c.CreateChild().Text("Add child");
      c.Edit();
      c.Destroy();
    });            
  })
  .Editable(e => e.Move(move => move.Reorderable(true)))
  .Filterable()
  .Sortable()
  .DataSource(ds => ds
    .Read(r => r.Url("/ProposalVersions/Details?handler=ReadProposalVersionLineItemForTreeList").Data("forgeryToken"))
    .Model(m =>
    {
      m.Id(f => f.ProposalVersionLineItemID);
      m.ParentId(f => f.ParentProposalVersionLineItemID).Nullable(true);
      m.Field(f => f.name);
      m.Field(f => f.ProductID);
    })
  )
)

Editor Template at /Shared/EditorTemplates/ProductID.cshtml:

@(Html.Kendo().DropDownListFor(m => m)
    .DataValueField("ProductID") 
    .DataTextField("name") 
    .BindTo((System.Collections.IEnumerable)ViewData["products"]) 
)

Code Behind populating ViewData in /Pages/ProposalVersions/details.cshtml.cs:

ViewData["products"] = _context.Products
  .Select(s => new {
    s.ProductID,
    s.name
});

From /Models/ProposalVersionLineItem.cs Class:

[Display(Name = "Product")]
[UIHint("ProductID")]
public int ProductID { get; set; }

I feel like this is working "as expected" as it is effectively rendering a custom Editor Template, but I can't figure out how to get it to render a custom "Display Template" for the field... any insight would be appreciated!

Thanks!

Nick

DropDownList

TreeList

updated answer on 19 Sep 2022

1 answer

114 views

How can I bind my dropdownlist to a WebAPI call?

I've tried several iterations, and something isn't right. If I type the endpoint in a browser, I get a Json result. Swagger shows the API returning stuff. No luck with the DropDownList yet.

Here is my current markup on the client:

    <div>
        <kendo-datasource name="data" type="DataSourceTagHelperType.WebApi" server-operation="true">
            <transport>
                <read url="https://localhost:7225/api/SievePack" action="get" datatype="jsonp"/>
            </transport>
            <schema>
                <model id="SieveSetId">
                    <fields>
                        <field name="SieveSetId" type="number" />
                        <field name="SieveSetName" type="number" />
                    </fields>
                </model>
            </schema>
        </kendo-datasource>

        <script>
            data.read();
        </script>
        
        <kendo-dropdownlist name="sets"
                            datatextfield="SieveSetName"
                            datavaluefield="SieveSetId"
                            datasource="data">
        </kendo-dropdownlist>

    </div>

I have the API solution running when I launch the client.

Do I need to do something in another part of my application? From what I've been reading, this should work..

Thanks!

DropDownList

answered on 19 Sep 2022

1 answer

1.1K+ views

Kendo Dropdownlist with ServerFiltering and Contains-Filter

Hi, I have a Kendo Dropdownlist with ajax datasource, ServerFiltering and a contains filter.

Unfortunately, the contains filter does not work. I tried to pass the "text" parameter in the data-function of the dropdownlist, but without success.

<select id="multiselect" multiple="multiple"></select>

$("#multiselect").kendoDropDownList({
    name: "dataSelect",
    filter: "contains", 
    dataSource: {
        type: "aspnetmvc-ajax",
        serverFiltering: true,
        transport: {
            read: {
                type: "POST",
                url: "@Url.Page("Data", "ReadData")",
                data: function() {
                    //var text = $('#dataSelect').data("kendoDropDownList").filterInput; not working
                    //var data = { text: text }; 
                    //return $.extend(kendo.antiForgeryTokens(), data);                    
                    return kendo.antiForgeryTokens();
                }
            }
        }
});
public ActionResult OnPostReadData([DataSourceRequest] DataSourceRequest request, string text)
{
}

DropDownList

answered on 19 Sep 2022

1 answer

125 views

DropDownTree with checkboxes - post values to server

Hi,

As per the Github issue here, when the DropDownTree has Checkboxes enabled, is there a way to post its selected values to a controller, either as comma-separated IDs or an array?

I would have expected this to work in a similar way to the MultiSelect control, but unless I'm missing something that doesn't appear to be the case.

Many thanks in advance,

David.

DropDownTree

answered on 16 Sep 2022

1 answer

812 views

Kendo grid filter from value range

Hi,

I have a question for you:
I would like to create a filter for one column of my Grid. The values of this column are integers, but the values are not visible for the users. They see only an icon depending on the value's range. (see the linked image)

For example:
If the value is 89, the user sees an icon and the tooltip for that is "Very good".

We have 4 ranges:
0-50 Bad,

51-70 OK,

71-85 Good,

86-100 Very good

How can I create a filter, where only the 4 text can be selected from a dropdown, but is filters for the range represented by the text?

Thanks in advance.

DropDownList

Filter

Grid

answered on 15 Sep 2022