This is a migrated thread and some comments may be shown as answers.

TreeList with Checkbox and dropdownlist

8 Answers 407 Views
TreeList
This is a migrated thread and some comments may be shown as answers.
Tiago
Top achievements
Rank 1
Tiago asked on 31 Jul 2015, 12:06 PM

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)
)

8 Answers, 1 is accepted

Sort by
0
Tiago
Top achievements
Rank 1
answered on 03 Aug 2015, 08:16 PM
Please, can some one help me 
0
Marin
Telerik team
answered on 04 Aug 2015, 07:59 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Tiago
Top achievements
Rank 1
answered on 05 Aug 2015, 05:57 PM

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...)
   #}#

0
Marin
Telerik team
answered on 06 Aug 2015, 07:42 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Tiago
Top achievements
Rank 1
answered on 06 Aug 2015, 09:25 AM

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 :\


0
Marin
Telerik team
answered on 07 Aug 2015, 07:37 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Fady
Top achievements
Rank 1
answered on 08 Sep 2015, 05:18 PM

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.​​

0
Marin
Telerik team
answered on 11 Sep 2015, 07:23 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
TreeList
Asked by
Tiago
Top achievements
Rank 1
Answers by
Tiago
Top achievements
Rank 1
Marin
Telerik team
Fady
Top achievements
Rank 1
Share this question
or