Questions on UI for ASP.NET MVC Forum

0 answers

104 views

Change child dropdownlist selected item when parent dropdownlist selected item is changed

Was originally doing this with ASP.NET AJAX WebForms Telerik Grid, but because of walls we hit with other functionality we are moving page to MVC.

Thing of Order Line and then as detail table we have Line Items. The Order Line has a Category Drop Down. When the Order Line Category gets changed all the Line Items must be changed to the same Category of the Order Line. If a Line Item category is changed then if all the Line Items have the same category then the Order Line needs to get changed to the category of all the Line Items. If all of the Line Items arent the same then the Order Line must be changed to the "Multiple" category.

We have been able to make changes to the datasource of the Line Items and if you click on the drop down in a Line Item the DropDown will change and the Category of the Order Line is shown as selected, but not until then. When page 1st renders the Order Line has a drop down with "Category One" showing, then all the Line Items will also show that category in the drop down. If you change the Category of the Order Line with say "Category Two" the line items get changed, but user doesnt see in grid. If the user clicks on the Line Item dropdown the drop down appears and the item selected shows "Category Two".

How to make this work as desired with MVC and Kendo?

DropDownList

Grid

asked on 04 Aug 2023

1 answer

401 views

Kendo Grid MVC - column with multi checkbox filter enabled not loading for large dataset

hi,

When Multi checkbox column is enabled in MVC Kendo Grid, it keeps spinning and not loading filter checkboxes for large dataset.
Please find the sample code attached.

We use Kendo.Mvc, Version=2022.1.412.0.
This sample code uses lesser version.

@(Html.Kendo().Grid<TelerikMvcApp6.Models.OrderViewModel>()
            .Name("grid")
            .Columns(columns =>
            {
                columns.Bound(p => p.OrderID).Filterable(false);
                columns.Bound(p => p.Freight);
                columns.Bound(p => p.ShipName);
                columns.Bound(p => p.ShipCity).Filterable(f => f.Multi(true).Search(true));
            })
            .Pageable()
            .Sortable()
            .Scrollable()
            .Filterable()
            .HtmlAttributes(new { style = "height:550px;" })
            .DataSource(dataSource => dataSource
                .Ajax()
                .PageSize(10)
                .Read(read => read.Action("Orders_Read", "Grid"))
            )
        )

Regards

Karthik

Filter

Grid

answered on 04 Aug 2023

1 answer

257 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

122 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

784 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.0K+ 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

172 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

81 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

180 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

486 views

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>

The only way I can see to get it working is with floats, which seems excessively complicated for such a simple (and I'd assume) common scenario.

I can say that the new versions since R2 2022 have proved extremely problematic and I have yet to see an up side to the changes.

NumericTextBox

answered on 01 Aug 2023