Questions on UI for ASP.NET Core Forum

0 answers

158 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

210 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

563 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

112 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

110 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

123 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

791 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

1 answer

146 views

How to indicate cursor position when dragging an appointment on scheduler, and auto-changing other appointments?

We are using the .net Core scheduler and i have 6x appointments on a day ranging from 10 min to 1 hour; A,B,C,D,E,F.

I want to move appointments around using drag and drop eg Change C, before B, and A after D, etc.

I want to show a cursor so I can tell that when I drop the appointment C it will in fact insert between A and B. I do not want them in parallel.

I also want the schedule to adjust based on the changed times as I move the appointments.

This should be a simple and intuitive process of 1 click, drag, and drop, not involving creating holes, filling them, rearranging appointments etc etc..

Scheduler