TreeList with Checkbox and dropdownlist

9 posts, 0 answers
  1. Tiago
    Tiago avatar
    5 posts
    Member since:
    Jun 2015

    Posted 31 Jul 2015 Link to this post

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

  2. Tiago
    Tiago avatar
    5 posts
    Member since:
    Jun 2015

    Posted 03 Aug 2015 in reply to Tiago Link to this post

    Please, can some one help me 
  3. Kendo UI is VS 2017 Ready
  4. Marin
    Admin
    Marin avatar
    1044 posts

    Posted 04 Aug 2015 Link to this post

    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!
     
  5. Tiago
    Tiago avatar
    5 posts
    Member since:
    Jun 2015

    Posted 05 Aug 2015 in reply to Marin Link to this post

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

  6. Marin
    Admin
    Marin avatar
    1044 posts

    Posted 06 Aug 2015 Link to this post

    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!
     
  7. Tiago
    Tiago avatar
    5 posts
    Member since:
    Jun 2015

    Posted 06 Aug 2015 in reply to Marin Link to this post

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


  8. Marin
    Admin
    Marin avatar
    1044 posts

    Posted 07 Aug 2015 Link to this post

    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!
     
  9. Fady
    Fady avatar
    12 posts
    Member since:
    Jan 2015

    Posted 08 Sep 2015 Link to this post

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

  10. Marin
    Admin
    Marin avatar
    1044 posts

    Posted 11 Sep 2015 Link to this post

    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!
     
Back to Top
Kendo UI is VS 2017 Ready