TreeList with Checkbox and dropdownlist

[Tiago]

Hi, i'm tring to add checkboxes and dropdownlist to my treelist 

I saw this exemple for the checkboxes: http://dojo.telerik.com/@gyoshev/ilUxi

but i'm not able to add the template field to my code,.

here's how my view code looks like:

     @(Html.Kendo().TreeList<Als.NxAudit.Dtos.RoleOperationDto>()
    .Name("treelist")
    .Selectable(true)
    .Columns(columns =>
        {
            columns.Add().Field(e => e.Operation.Name).Width(220);
        })
    .Sortable()
    .DataSource(dataSource => dataSource
        .Read(read => read.Action("TreeList_Read", "Role"))
        .ServerOperation(false)
        .Model(m => {
            m.Id(f => f.OperationID);
            m.ParentId(f => f.Operation.ParentID);
            m.Field(f => f.Operation.Name);
            })
        )
    .Height(540)
)

[Tiago]

Please, can some one help me 

[Marin]

Hello,

You can add template as shown in this live demo:
http://demos.telerik.com/aspnet-mvc/treelist/index

columns.Add().Field(e => e.FirstName).Width(220).TemplateId("photo-template");

and then define it in HTML:

<script id="photo-template" type="text/x-kendo-template">
   <div class='employee-photo'
        style='background-image: url(<%= Url.Content("~/content/web/treelist/people") %>/#: EmployeeId #.jpg);'></div>
   <div class='employee-name'>#: FirstName #</div>
</script>

I hope this helps.

Regards,
Marin
Telerik

 

 

[Tiago]

Hi, thanks for the reply Marin, am i able to add a dropdownlist with the templateId and a condition? I tried a few different ways but nothing appeared in the column, i have this is the tree:
columns.Add().Field(e => e.RestrictionLevelID).TemplateId("myTemplate").Width(200);

and this is the template :
<script type="text/x-kendo-template" id="myTemplate">
    #if(Operation.HasRestrictionLevel){#
    (..call dropdown...)
    #}else{#
    (..show nothing...)
   #}#

[Marin]

Hello,

The code enclosed between the #  # symbols has to be javascript code so it can be executed properly.
You can check out the different template syntax here:
http://docs.telerik.com/kendo-ui/framework/templates/overview

If you need to execute server-side code it has to be enclosed in <% %> tags or starting with @if-statement when using Razor syntax as shown here:
http://www.csharpcity.com/2011/ifelse-statements-in-mvc3-with-razor/


Regards,
Marin
Telerik

 

 

[Tiago]

So ​I should do something like this? 

    #if(Operation.HasRestrictionLevel){#
<div id="treeview-template"></div>   (...)

 <script id="treeview-template" type="text/kendo-ui-template">
    @(Html.Kendo().DropDownList()
                            .Name("​example")
                            .DataTextField("Name")
                            .DataValueField("TypeID")
                            .DataSource(source =>
                            {
                                source.Read(read =>
                                {
                                    read.Action("​Types", "​AllOthers");
                                })
                            }).ToClientTemplate()
    )
</script>

 

this way my treeview only shows blank squares :\

[Marin]

Hi,

You don't need to put the treeview declaration inside <script id="treeview-template" type="text/kendo-ui-template"> this is required only for the template. You can follow the approach show in this demo:
http://demos.telerik.com/aspnet-mvc/treelist/index
Then if you need to add client=side conditions you can use the # # tags wrapped around the code. Additionally you can also check the value of the condition on every item it is initialized for.

Regards,
Marin
Telerik

 

 

[Fady]

Hi,

 I am trying to put the Kendo dropdown list in a Treelist.

I am using the templateId in a Kendo treelist:

<script id="templateId-DropDown" type="text/x-kendo-template">
    @Html.Kendo().DropDownListFor(i => i.InstanceId).Name("InstanceId").BindTo(Model.InstanceList).DataTextField("InstanceName").DataValueField("InstanceId").ToClientTemplate()
</script>

 

@(Html.Kendo().TreeList<PNR.WebUI.Models.InstanceViewModel>()
                            .Name("InstanceTreelist")

                            .Columns(columns =>
                                {
                                    columns.Add().Template("<input type='checkbox' data-bind='checked: checked' class = 'checkboxSelect' checked = 'checked' disabled = 'disabled'/>").Width(20);
                                    columns.Add().Field(e => e.Abbreviation).Width(20);
                                    columns.Add().Field(e => e.PartieIntervenantName).Width(60);
                                    columns.Add().Field(e => e.Ville).Width(60);
                                    columns.Add().Field(e => e.PhoneNumber).Width(70);
                                    columns.Add().Field(e => e.HasChildren).Width(50).Hidden(true);
                                    //columns.Add().Template("<select data-role='dropdownlist' data-text-field='ProductName' data-value-field='ProductId' data-value-primitive='true' class='InstanceDropDown'></select>");
                                    columns.Add().TemplateId("templateId-DropDown").Width(40);
                                    //columns.Add().Field(e => e.DossierId).Width(50).Hidden(true);
                                })
                                    .DataSource(dataSource => dataSource
                            .Read(read => read.Action("PartieIntervenantForAddInstance_Read", "Instance"))
                                       .Model(m =>
                                        {
                                            m.Id(f => f.PartieIntervenantId);
                                            m.ParentId(f => f.ReportsTo).DefaultValue(Guid.Empty);
                                            m.Expanded(true);
                                            m.Field(f => f.Abbreviation);
                                            m.Field(f => f.PartieIntervenantName);
                                            m.Field(f => f.PhoneNumber);
                                            m.Field(f => f.Ville);
                                        })
                                        )

                                       .Height(180)
                                      .Resizable(true)
                            )

 

Please let me know if its possible to put Kendo drop down list in treelist or not?

 

If its possible how should i proceed? Kindly provide some code snippet.

 

Thanks.​​

[Marin]

Hi,

You can try adding a column template in the following way:

columns.Add().Field(e => e.FirstName).Width(220).TemplateId("templateId-DropDown");

Let me know how this works in your case and if you have any other questions.

Kind Regards,
Marin
Telerik