Add ListView with use ClientTemplateId to Main Listview with use ClientTemplateId

[Mohamad Javad]

Hello
I have a listView to show information from ClientTemplateId("template")
uses and its code:

<script type="text/x-kendo-tmpl" id="template">
    <span class='newfile'>
        #: FileName #
    </span>

    <div id='myUpload'>

    </div>
</script>

@(Html.Kendo().ListView<MSG_UserMessagesList_Ex_For_Model>()
      .Name("listView")
      .TagName("div")
      .ClientTemplateId("template")
      .DataSource(dataSource => dataSource
      .Ajax()
      .Read(r => r.Url(@Url.Page("MsgList", "MSG_UserMessagesList_Ex")).Data("forgeryToken"))
      )
      )

I want another ListView that also uses .ClientTemplateId("templateFileUpload") with code Below :

<script type="text/x-kendo-tmpl" id="templateFileUpload">
    <span class="old message">
        #: FileName #
    </span>
</script>
@(Html.Kendo().ListView<BehniafarTicket.Data.FileUpload_Select_Model>()
        .Name("listViewFileUpload")
        .TagName("div")
        .ClientTemplateId("templateFileUpload")
        .DataSource(dataSource => dataSource
        .Ajax()
        .Read(r => r.Url(@Url.Page("MsgList", "FileUpload_Select").Data("forgeryToken"))
        )
        )

I need to add the listview  -listViewFileUpload- in inside the <div id='myUpload'> tag </div> but I get an error.

My final code should look like the following, the error I get is because of the internal script tag with the full title
<script type="text/x-kendo-tmpl" id="templateFileUpload">
is.

My final code should be as follows, which gives an error when executed:

<script type="text/x-kendo-tmpl" id="template">
    <span class='newfile'>
        #: FileName #
    </span>

    <div id='myUpload'>
                        <script type="text/x-kendo-tmpl" id="templateFileUpload">
                                <span class="old message">
                                    #: FileName #
                                </span>
                        </script>
                        @(Html.Kendo().ListView<BehniafarTicket.Data.FileUpload_Select_Model>()
                                .Name("listViewFileUpload")
                                .TagName("div")
                                .ClientTemplateId("templateFileUpload")
                                .DataSource(dataSource => dataSource
                                .Ajax()
                                .Read(r => r.Url(@Url.Page("MsgList", "FileUpload_Select",new{MessageId=  #: MessageId # }).Data("forgeryToken"))
                                )
                                )

    </div>
</script>

@(Html.Kendo().ListView<MSG_UserMessagesList_Ex_For_Model>()
      .Name("listView")
      .TagName("div")
      .ClientTemplateId("template")
      .DataSource(dataSource => dataSource
      .Ajax()
      .Read(r => r.Url(@Url.Page("MsgList", "MSG_UserMessagesList_Ex")).Data("forgeryToken"))
      )
      )

please help me

[Mihaela]

Hi Mohamad,

To achieve the desired result, I would recommend the following changes:

• Move the nested Kendo UI template "templateFileUpload" outside of the first template with id "template":

<script type="text/x-kendo-tmpl" id="template">
    <span class='newfile'>
        #: FileName #
    </span>
    <div id='myUpload'>
      @(Html.Kendo().ListView<BehniafarTicket.Data.FileUpload_Select_Model>()
        .Name("listViewFileUpload")
        .TagName("div")
        .ClientTemplateId("templateFileUpload")
        ...
      )
    </div>
</script>

<script type="text/x-kendo-tmpl" id="templateFileUpload">
  <span class="old message">
    #: FileName #
  </span>
</script>

@(Html.Kendo().ListView<MSG_UserMessagesList_Ex_For_Model>()
      .Name("listView")
      .TagName("div")
      .ClientTemplateId("template")
      ...
)

• Add ToClientTemplate() to the "listViewFileUpload" ListView:

<script type="text/x-kendo-tmpl" id="template">
    <span class='newfile'>
        #: FileName #
    </span>
    <div id='myUpload'>
      @(Html.Kendo().ListView<BehniafarTicket.Data.FileUpload_Select_Model>()
        .Name("listViewFileUpload")
        .TagName("div")
        .ClientTemplateId("templateFileUpload")
        .DataSource(....)
        .ToClientTemplate()
      )
    </div>
</script>

• Since the ListView template will be used for each ListView item, it is important to ensure that the nested ListView has unique Name() to avoid duplicated initialization:

For example, you could use the unique Model Id of the "FileUpload_Select_Model" Model (i.e., "FileID"):

<script type="text/x-kendo-tmpl" id="template">
    <span class='newfile'>
        #: FileName #
    </span>
    <div id='myUpload_#=FileID#'>
      @(Html.Kendo().ListView<BehniafarTicket.Data.FileUpload_Select_Model>()
        .Name("listViewFileUpload_#=FileID#")
        .TagName("div")
        .ClientTemplateId("templateFileUpload")
        .DataSource(....)
        .ToClientTemplate()
      )
    </div>
</script>

Here is a REPL example for your reference:

https://netcorerepl.telerik.com/wRumFUki58BgTkHk36

Regards, Mihaela Progress Telerik

[Mohamad Javad]

Thank you for your help.
My problem is solved.
One more problem still remains, and that in your example in this link I want to

listViewFileUpload_#=ProductID#

Let me style it, so the code:

<div id='myUpload_#=ProductID#'>

to the code:

     <div id='myUpload_#=ProductID#' style='background-color:red;color:green'>

  I changed it, but the style was not applied.
Please advise.

[Mihaela]

Thank you for your feedback.

To apply the styles over the nested ListView, you could use the HtmlAttributes() method:

<script type="text/x-kendo-tmpl" id="template">
    <span class='newfile'>
        #: ProductName #
    </span>
    <div id='myUpload_#=ProductID#'>
        @(Html.Kendo().ListView<Kendo.Mvc.Examples.Models.ProductViewModel>()
            .Name("listViewFileUpload_#=ProductID#")
            .HtmlAttributes(new { style = "background-color:red; color:green;"})
            ...
            .ToClientTemplate()
        )
    </div>
</script>