Telerik Forums
UI for ASP.NET MVC Forum
0 answers
158 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.

 

AP
Top achievements
Rank 1
Iron
Iron
Veteran
 asked on 02 Aug 2023
0 answers
74 views
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()
)
    <!-- Template for Outer ListView (template) -->
    <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>

        <!-- Nested ListView (inner ListView) -->



        </div>

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

    </script>
    <!-- Template for Inner ListView (template2) -->
    <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>
Rachit
Top achievements
Rank 1
 updated question on 01 Aug 2023
1 answer
170 views

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>

 

Anton Mironov
Telerik team
 answered on 01 Aug 2023
1 answer
443 views

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.

Ivan Danchev
Telerik team
 answered on 01 Aug 2023
0 answers
102 views

Hi There,

Nested ListView requirement.

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

Thank You,

BDP

 

Bhumi
Top achievements
Rank 1
 asked on 31 Jul 2023
3 answers
616 views

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?

 

Yana
Telerik team
 answered on 28 Jul 2023
1 answer
134 views

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

Eyup
Telerik team
 answered on 28 Jul 2023
1 answer
355 views
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
Anton Mironov
Telerik team
 answered on 26 Jul 2023
1 answer
286 views

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. 

Alexander
Telerik team
 answered on 25 Jul 2023
1 answer
197 views

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.

 

 

Vasko
Telerik team
 answered on 21 Jul 2023
Narrow your results
Selected tags
Tags
+? more
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?