Questions on UI for ASP.NET MVC Forum

0 answers

159 views

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

74 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

171 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

446 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

0 answers

102 views

Kendo MVC ListView within ListView

Hi There,

Nested ListView requirement.

Is there any way we can implement nested listview for given design?

Thank You,

BDP

ListView

asked on 31 Jul 2023

3 answers

624 views

No Upgrade option in VS 2022 for a Telerik UI MVC 2018.2.620 solution

I have an ASP.NET solution that uses Telerik UI MVC 2018.2.620

I want to upgrade it to use Telerik UI MVC 2023.2.718

I installed Telerik UI MVC 2023.2.718, and then reinstalled Telerik UI MVC 2018.2.620

I don't have an Upgrade option to upgrade the solution. How can I use to upgrade tool to upgrade the solution?

Installer and VS Extensions

answered on 28 Jul 2023

1 answer

134 views

MVC Grid Foreign Key column - Dropdownlist with different value per row depended by data

Hi all,

I need a solution for ASP.NET MVC Grid Razor

i have a Grid InCell Edit Mode.

One Column Date

One Column as ForeignKey Column (Possible Values before Date: 01.07.2023 are [A, B, C] and At 01.07.2023 and later possible Values are [D, E]

Is there a solution how to change the selectlist by data of current row?

Regards

Gerd

Grid

answered on 28 Jul 2023

1 answer

355 views

upgraded kendo version to latest in asp.net mvc application but kendo css are not working

Upgrade kendo version to latest release 2023.2.718 but looks like the application style is breaking and upgraded the bootstrap version as well but still styling is breaking in kendo controls, still have not found any proper solution fro this

answered on 26 Jul 2023

1 answer

287 views

Upload .net core and MVC doesn't work in iOS

Has anyone else noticed that neither the .Net core or MVC upload module works when run under iOS? https://www.telerik.com/aspnet-core-ui/upload

If you try and upload anything you can never click submit.

You can try it on the demo here on any iOS device -

https://demos.telerik.com/aspnet-core/upload?_ga=2.7918193.219391470.1689953144-110638612.1682430985&_gl=1*wzaau5*_ga*MTEwNjM4NjEyLjE2ODI0MzA5ODU.*_ga_9JSNBCSF54*MTY4OTk1MzE0NC4xMS4xLjE2ODk5NTQxMDguNjAuMC4w

This seems to have broken when the move was made to go to Sass from Less a few months ago. It worked fine in Less. With it being such a major component it is something that you would hope gets fixed very quickly.

Upload

answered on 25 Jul 2023

1 answer

198 views

for loop items within PanelBar control throws error

Hi,

I first tried using a loop creating expansion panels which works fine on the face of it but each expansion panel needs to have a Rich Text Editor inside of it and it was not allowing me to click into the editor so I read it may be better to use a PanelBar to achieve what i need.

Basically what I need it to loop through a collection within the ViewModel and create a Panel Bar Item for each one. Each Panel Bar Item will generate 3 Rich Text Editors with Labels.

The markup shows no errors but when running I get "System.ArgumentOutOfRangeException: 'Index was out of range. Must be non-negative and less than the size of the collection. Parameter name: index'". This happens with even a single control referencing the index of the for loop e.g.:

An example of the code is:

@(Html.Kendo().PanelBar()
.Name("panelbar")
.ExpandMode(PanelBarExpandMode.Multiple)
.Items(panelbar =>
{

for (int i = 0; i < Model.SomeCollection.Count; i++)
{
panelbar.Add().Text(Model.SomeCollection[i].SectionHeading)
.Expanded(false)
.Selected(false)
.Content(@<text>

@Html.HiddenFor(model => model.SomeCollection[i].SectionUid)

</text>);
}
}))

If I don't reference the i of the for loop within the content it works fine e.g.:

@(Html.Kendo().PanelBar()
.Name("panelbar")
.ExpandMode(PanelBarExpandMode.Multiple)
.Items(panelbar =>
{

for (int i = 0; i < Model.SomeCollection.Count; i++)
{
panelbar.Add().Text(Model.SomeCollection[i].SectionHeading)
.Expanded(false)
.Selected(false)
.Content(@<text>

<div>Some Text</div>

</text>);
}
}))

The reason I am using a 'for i =' loop instead of a foreach loop is because the collection was not being returned to the controller on post when I used a foreach loop but this method worked which could be down to my inexperience with MVC but I went with what worked.

The Expansion Panels worked great other than not being able to click into the Kendo().Editor() controls at all when they were inside the for loop. If I bound them to a control outside of the loop then they worked fine.

Any help would be greatly appreciated.

Editor

ExpansionPanel

PanelBar

answered on 21 Jul 2023