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>

Hi There,

Nested ListView requirement.

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

Thank You,

BDP

 

I have an app thats working with SignalR grids, but now we want to add bearer auth.

The token handling stuff has to happen before my SignalR promise is set, but the problem is the Kendo components required the SignalR promise to bind.

How can I set a SignalR promise that the Kendo components can use which will not resolve until my own token handling functions are complete?

Here is a sample of what we're doing:

i am getting the error when i use @html.kendo()

 

it showing are you missing any directives

 

>please suggest any solution

Hi,
I am new to both mvc and Telerik mvc components. Apologies if this is the wrong place to ask for assistance.

I am developing a page that has a menu that consists of a list of buttons that set up a category.
Below this I have an MVC Listview.
If say the "Travel" category is chosen then I want to change the listview to display "Travel" type information.
I know that I can make the button force a postback and then reload the page with "Travel" stuff.

I want to know if there is an ajaxy way of doing this.
ie I would like to make the listview change what it displays as the menu above it changes.

Any advice or help would be appreciated.

Thanks in advance.

Niall

Hi,

My requirement is like this.

i want to add new records using popup .
corresponding to each row i want to show edit & delete button

Can suggest me how to do this using list view.

Regards
Vani

Is there a way to allow templates to use an "image/jpg" (byte) type in a model to populate an <img>
I have fooled around with a couple of ways with no real way forward.

Many Thanks

I have the following:

@(Html.Kendo().ListView<CourseServiceModel.CourseSearchResult>(Model)
        .Name("CourseListView")
        .TagName("div")
        .ClientTemplateId("template")
        .DataSource(dataSource =>
        {
        dataSource.Read(read => read.Action("GetSearchedCourses", "SearchCourse").Data("getSortBy"));
        dataSource.PageSize(10);
    })
        .Pageable(x => x.PageSizes(true).Refresh(true).Info(true).PageSizes(new int[]{10,25,50}))
      )

On the first time the page loads, the datasource is read as expected. On subsequent post the datasource does not get read, no ajax calls.

Works fine in FF and Chrome only an issue in IE (8,9).

Sounds like a caching issue but not sure where to start....

The page navigation is <page to set search criteria> -> RedirectToRoute("Results") -> <Results (contains ListView)> 

This was posted in the UI forum by mistake.

<RESOLVED>

the issue was IE caching ajax responses.  I tried to add in the headers to not cache etc.that did not work, so had to use a "cache buster" time stamp in the post back data in the getSortBy json object.  Maybe this will help someone else.

function getSortBy() {
       return {
           sortByCritera: $("#SortBy").data("kendoDropDownList").dataItem(),
           timeStamp: Date()
       };
   }

When any of the ${} below are null, or not provided, it wraps as if the <dd></dd> doesn't exist.  
How do I handle the if(${MiddleName}) !== NULL) then ${MiddleName} for example...

<div class="contact-research-view">         
<dl>             
<dt>Conact Id:</dt><dd>${ContactId}</dd>             
<dt>Honorific:</dt><dd>${Honorific}</dd>             
<dt>First Name:</dt><dd>${FirstName}</dd>             
<dt>Middle Name:</dt><dd>${MiddleName}</dd>             
<dt>Last Name:</dt><dd>${LastName}</dd>             
<dt>Suffix:</dt><dd>${Suffix}</dd>             
<dt>Primary Address Line 1:</dt><dd>${PrimaryAddressLine1}</dd>             
<dt>Primary Address Line 2:</dt><dd>${PrimaryAddressLine2}</dd>             
<dt>Primary Address City:</dt><dd>${PrimaryAddressCity}</dd>             
<dt>Primary Address StateOrProvince:</dt><dd>${PrimaryAddressStateOrProvince}</dd>             
<dt>Primary Address PostalCode:</dt><dd>${PrimaryAddressPostalCode}</dd>             
<hr/>             
<dt>Account Address Line 1:</dt><dd>${AccountAddressLine1}</dd>             
<dt>Account Address Line 2:</dt><dd>${AccountAddressLine2}</dd>             
<dt>Account Address City:</dt><dd>${AccountAddressCity}</dd>             
<dt>Account Address StateOrProvince:</dt><dd>${AccountAddressStateOrProvince}</dd>             
<dt>Account Address PostalCode:</dt><dd>${AccountAddressPostalCode}</dd>             
</dl>     
</div>

I am using MVC4 with the latest Kendo UI Q2. I am trying to use the mvc wrappers to implement a list view.