Questions on UI for ASP.NET MVC Forum

1 answer

300 views

Check kendo spreadsheet for validation errors

could you please answer the question from SO here https://stackoverflow.com/questions/76809963/check-kendo-spreadsheet-for-validation-errors

Using a (ASP.NET Core) Kendo spreadsheet, how to know if on the sheet are or not validation errors and what kind of if any.

I used this code to add validation

myCell.Validation(v => v
    .ComparerType("custom")
    .DataType("custom")
    .From("R[0]C[0] > 0")
    .Type("warning")
    .ShowButton(true)
    .AllowNulls(true)
    .TitleTemplate("Alerte de validation")
    .MessageTemplate("Attention, cette valeur est négative !"));

Spreadsheet

answered on 04 Aug 2023

0 answers

143 views

anyone having an issue with client validation?

I believe the issue is something is triggering jquery unobtrusive to fire. When I open a popup from a grid with a required text field (marked with the "required" attribute) it displays the error message without even waiting for me to enter data. It isn't a huge deal (hence a forum post vs a support ticket and I have a workaround) but It only appeared after I updated to the r2 release. Can anyone confirm a similar issue or suggest a fix? my "workaround" is a custom validator.

Grid

asked on 03 Aug 2023

1 answer

850 views

Ajax Property Binding in HtmlAttributes

Hi, I'm updating our version of the Kendo Grid from 2021 (don't recall the exact version) to 2023.1.117 and, among other changes, it seems that the following syntax for binding the Description property to data_description is no longer valid:

columns.Bound(w => w.Description).Width(100).Title("Description")
.HtmlAttributes(new { @class = "someClass", data_description = "#=Description#" });

Similar to what is shown at the bottom of this thread:

https://www.telerik.com/forums/creating-data-bound-html-attributes-in-mvc-grid-cells

This was working prior to this update, but I can't find any documentation on the change within the site and the grid example shown here:

https://demos.telerik.com/aspnet-mvc/grid

seems to indicate that it should still work this way, though that example may be outdated.

Note that the same Description property, referenced the same way (#-Description#) still works inside of a ClientTemplate.

Grid

answered on 03 Aug 2023

0 answers

1.1K+ views

Could not load file or assembly 'Telerik.SvgIcons, Version=1.0.0.0, Culture=neutral, PublicKeyToken=20b4b0547069c4f8'

I'm getting this message whenever I try and load a page containing a grid. I tried installing the Telerik.SvgIcons and Telerik.FontIcons packages, but both installations fail because of an error when installing System.Net.Http. Is there anyway I can just install the two files so that I can resurrect my .NET MVC 4.7.2 application?

The error I get while install the packages is:

Error Failed to add reference to 'System.Net.Http'.
The operation is not allowed because currently this object is not parented.

System.Net.Http version 4.2.0.0 is installed, but installing the most recent version 4.3.4 fails, whether or not there is a reference to 4.2.0.0.

Grid

asked on 02 Aug 2023

0 answers

214 views

getSelectedData - not working

I have a grid showing a list if items, with a checkbox to allow multiple rows to be selected. Virtual scrolling has been enabled, as there will be over 1000 items in the list.

I need to identify all selected rows as these will form the basis of a filter to be applied to another grid. I'm trying to use the getSelectedData method, but this keeps throwing the error:-

Uncaught TypeError: Cannot read properties of undefined (reading 'selectedRanges')

The grid definition is:-

@(Html.Kendo().Grid<InformaticsCommissioningHelper.Models.IPWLList>()
        .Name("gridListNames")

            .Columns(columns =>
            {
                columns.Select().Width(50);
                columns.Bound(p => p.ListName).Title("List Name");
            })

 .PersistSelection()
 .Events(e=>e.Change("listGridChange"))
        .DataSource(dataSource => dataSource
        .Ajax()
        .Model(model => model.Id(p => p.ListName))
        .PageSize(25)
        .Sort(s =>
        {

            s.Add(a => a.ListName).Ascending();


        })

        .Read(read => read.Action("GetListNames", "SelectTest"))
        )
        .Sortable()
         .Scrollable(scrollable => scrollable.Virtual(true))

          .HtmlAttributes(new { style = "height: 400px;" })

    )

There's a button that then runs the function:-

 function test()
    {
        var grid = $("#gridListNames").data("kendoGrid");
       

        console.log(grid.getSelectedData());
    }

The project is using version v2023.2.606 .

I have tried using the change event to identify the selections, but this only works for the active page, which doesn't work for a scrollable grid.

Grid

asked on 02 Aug 2023

0 answers

108 views

Kendo nested listview Error

I am trying to create an nested listviews but getting error in console when in .name of nested list view. Faced similar issue while creating nested grids

error in console: jquery.min.js:2 Uncaught Error: Syntax error, unrecognized expression: #inner#=id#
at fa.error (jquery.min.js:2:12750)
at fa.tokenize (jquery.min.js:2:18803)
at fa.select (jquery.min.js:2:21611)
at Function.fa [as find] (jquery.min.js:2:7337)
at n.fn.init.find (jquery.min.js:2:24126)
at new n.fn.init (jquery.min.js:2:24693)
at n (jquery.min.js:2:406)
at HTMLDocument.<anonymous> (NCRFgfUserScreen:1138:3929)
at i (jquery.min.js:2:27466)
at Object.fireWith [as resolveWith] (jquery.min.js:2:28230)
fa.error @ jquery.min.js:2
fa.tokenize @ jquery.min.js:2
fa.select @ jquery.min.js:2
fa @ jquery.min.js:2
find @ jquery.min.js:2
n.fn.init @ jquery.min.js:2
n @ jquery.min.js:2
(anonymous) @ NCRFgfUserScreen:1138
i @ jquery.min.js:2
fireWith @ jquery.min.js:2
ready @ jquery.min.js:2
K @ jquery.min.js:2

below is my code.

<div id="Lots">
@(Html.Kendo().ListView<Fellowship.Models.NCRPlantLot>()
.Name("outerListView") // Use a unique name for the outer ListView
.TagName("div")
.Deferred()
.DataSource(dataSource => dataSource
.PageSize(8)
.Model(model => {
model.Id(p => p.id);
model.Field(p => p.lot_number);
model.Field(p => p.po_number);
model.Field(p => p.quantity_affected);
model.Field(p => p.quantityReturn_to_supplier);
})
.Create(create => create.Action("Editing_Create", "NCRData"))

.Read(read => read.Action("ExampleData", "NCRData", new { id = "#=id#" }))
.Update(update => update.Action("ExampleData", "NCRData"))
.Destroy(destroy => destroy.Action("ExampleData", "NCRData"))

)
.Pageable()
.ClientTemplateId("template") // Replace "template" with the ID of the template for the outer ListView
.Editable()
)

<script type="text/x-kendo-tmpl" id="template" nonce="@Application_Nonce">
<div class="lot-view k-widget">
<div class="task">
@(Html.Kendo().ListView<Fellowship.Models.NCRPoDetails>()
.Name("inner#=id#") // Use the generated unique identifier for each inner ListView
.TagName("div")
.Deferred()
.DataSource(dataSource => dataSource
.PageSize(5)
.Read(read => read.Action("ExampleData2", "NCRData"))
.Model(model => {
model.Id(p => p.id);
model.Field(p => p.PO_Number);
model.Field(p => p.quantity);
})
)
.Pageable()
.ClientTemplateId("inner") // Replace "template2" with the ID of the template for the inner ListView (if you haven't changed the ID, it should be fine as is)
.Editable()

)

</div>
<dl>
<dt>Lot Number</dt>
<dd>#:lot_number#</dd>
<dt>Po Number</dt>
<dd>
# if (data.po_number && data.po_number.length > 0) { #
<p>#:data.po_number.join(', ')#</p>
# } else { #
<p>No PO numbers available</p>
# } #
</dd>
<dt>Quantity affected</dt>
<dd>#:quantity_affected#</dd>
<dt>quantityReturn_to_supplier</dt>
<dd>#:quantityReturn_to_supplier#</dd>
</dl>
<div class="edit-buttons">
<a role="button" class="k-button k-button-solid-base k-button-solid k-button-md k-rounded-md k-delete-button" href="\\#"><span class="k-button-icon k-icon k-i-close"></span></a>
<a role="button" class="k-button k-button-solid-base k-button-solid k-button-md k-rounded-md k-edit-button" href="\\#"><span class="k-button-icon k-icon k-i-edit"></span></a>
</div>



</div>

</div>
</script>
<script nonce="@Application_Nonce">

</script>

<script type="text/x-kendo-tmpl" id="inner" nonce="@Application_Nonce">
<div class="inner-lot-view ">
<dl>
<dt>Lot Number</dt>
<dt>Po Number</dt>
<dd>
jn kj k.,m m,nklm.
</dd>
<dt>Quantity affected</dt>
</dl>
<div class="edit-buttons">
<a role="button" class="k-button k-button-solid-base k-button-solid k-button-md k-rounded-md k-delete-button" href="\\#"><span class="k-button-icon k-icon k-i-close"></span></a>
<a role="button" class="k-button k-button-solid-base k-button-solid k-button-md k-rounded-md k-edit-button" href="\\#"><span class="k-button-icon k-icon k-i-edit"></span></a>
</div>
</div>
</script>

</div>
<div class="form-group row">
@*<a id="add-new-button" role="button" class="k-button k-button-solid-base k-button-solid k-button-md k-rounded-md k-add-button" href="#"><span class="k-button-icon k-icon k-i-add"></span>Add new record</a>*@

<button id="add-new-button" type="button" class="btn btn-primary k-add-button" style=" width: 10%; height: 1.5em;"> Add Lot</button>
</div>

ListView

Security

updated question on 01 Aug 2023

1 answer

226 views

Grid - PopUp Editor - Validation Firing on Open

I've just started using version v2023.2.606 and have a grid with a pop-up editor using an editor template.

This has several required fields (specified in the model), but on opening the window for a new record, the validation error tool tip is shown for the first field (image attached).

This wasn't the behavior in previous versions, which only fired the validation when the update button was clicked. How can I stop this happening?

The grid is:-

@(Html.Kendo().Grid<InformaticsCommissioningHelper.Models.Rule>()
        .Name("grid")
            .Events(e => e.Edit("onEdit"))
        .Columns(columns =>
        {
            columns.Bound(p => p.ID).Title("ID").Width(120);
            columns.Bound(p => p.RunOrder).Title("Order").Width(120);
            columns.Bound(p => p.Description).Title("Name").Width(600);
            columns.Bound(p => p.LastUpdateDate).Title("Last Updated").Width(150).Format("{0:g}");


            columns.Command(command => { command.Edit(); command.Destroy(); });



        })
            //.ClientDetailTemplateId("subdetailsTemplate")
            .ToolBar(toolbar => toolbar.Create())
            .Editable(editable => editable.Mode(GridEditMode.PopUp))


            .Pageable(p => p.Refresh(true))
        .Sortable()

        .Filterable()

        .DataSource(dataSource => dataSource
            .Ajax()
            .Model(m => m.Id(p => p.ID))
            .PageSize(15)
            .Events(e => e.Error("error"))
            .Read(read => read.Action("RD_Rules", "Rules").Data("antiForgery"))
            .Create(a => a.Action("InsertRule", "Rules"))
            .Update(a => a.Action("UpdateRule", "Rules"))
            .Destroy(a => a.Action("DeleteRule", "Rules"))


            .Sort(s => s.Add(a => a.RunOrder).Ascending())
            )
        )

and the template is:-

@model InformaticsCommissioningHelper.Models.Rule

<div style="width:650px;">

    @Html.ValidationSummary(true)

    @Html.HiddenFor(c => c.ID)

    <p>
        <span class="lbllabel2">
            Name:
        </span>
        @Html.Kendo().TextBoxFor(model => model.Description).Name("Description").HtmlAttributes(new { style = "width:250px", Maxlength = 75 })


        @Html.ValidationMessageFor(model => model.Description)

    </p>


    <p>
        <span class="lbllabel2">
            Order:
        </span>
        <div style="width:150px;" class="float-start">
            @Html.Kendo().NumericTextBoxFor(c => c.RunOrder).Spinners(false)
            @Html.ValidationMessageFor(model => model.RunOrder)
        </div>

    </p>

    <div style="clear:both"></div>
    <p></p>
    <p>
        <span class="lbllabel2">
            SQL:
        </span>
        @Html.Kendo().TextAreaFor(model => model.RuleSQL).Name("RuleSQL").HtmlAttributes(new { style = "width:470px; font-family:Courier New, Courier, monospace"}).Rows(5)
        @Html.ValidationMessageFor(model => model.RuleSQL)

    </p>

    <p>
        <span class="lbllabel2">
            Comments:
        </span>
        @Html.Kendo().TextAreaFor(model => model.Comments).Name("Comments").HtmlAttributes(new { style = "width:470px;"}).Rows(3)
        @Html.ValidationMessageFor(model => model.Comments)

    </p>

Grid

answered on 01 Aug 2023

1 answer

538 views

[Solved] NumericTextBox setting width

Since the change in R2 2022, numeric text boxes now take up 100% of the width of their container, so the recommended way to set an elements width is with a DIV. However this is a block element, so how do I show a label (in a span) before the numeric text box on a single line?

Setting the div to inline, negates the width setting.

I'm using version v2023.2.606.

I currently have:-

 <p>
        <span class="lbllabel2">
            Field Namew:
        </span>
        <div style="width:150px;">
            @Html.Kendo().NumericTextBoxFor(c => c.Field)
            @Html.ValidationMessageFor(model => model.RunOrder)
        </div>

    </p>