Nest Grid Sortable Ignore options does not work.

10 posts, 0 answers
  1. Peter
    Peter avatar
    39 posts
    Member since:
    May 2015

    Posted 30 Jun 2015 Link to this post

    Hi. There. Please have a look attachment.
    From the attachment, you can see i have got three grids.
    Grid1-Green
        Grid2-Blue
           Grid3-White
    Grid3-white is nested inside Grid2-Blue. Grid2-Blue is nested inside Grid1-Green.
    That is the background.
    I want to achieve Grid3-White is draggable within container of Grid2-Blue.
    And Grid2-Blue is draggable within container of Grid2-Blue.
    And Grid1-Green is draggable within container of Grid1-Green.

    I have used ignore option is sortable.
    From Grid1-Green i set it to container 'Grid1-Green > tbody >tr ' and ignore 'background-color-light-blue'. This is working nicely. Grid1-Green and Grid2-Blue sort individually without conflicting each other.
    But when i set Grid2-Blue i set it to container 'Grid2-Blue > tbody >tr ' and ignore 'background-color-white'. This is not working. When i drag Grid3-White, whole section of Grid2-Blue got dragged!!!
    Am i in right track or are there any other ways to achieve this? Thx in advance.

  2. Peter
    Peter avatar
    39 posts
    Member since:
    May 2015

    Posted 01 Jul 2015 Link to this post

    Ok. I have replicated this in Plunker. I think it's easy to explain that way.
    http://plnkr.co/33ZgTPdDsYauLI7vP7GS
    Second grid which got command button is the one i am talking about.
    In second grid first hierarchy, u can sort (Health and PE, Music, English within Green background) nicely. Restrict inside green background.
    In second grid second hierarchy by click expand button of subject "Music", u can sort (Personal Learning, The Arts within Blue background) nicely. Restrict inside blue background.
    In second grid third hierarchy by click expand button of domain "Personal Learning", the sorting inside third grid (The individual learner, Managing personal learning) does not work. With means it does not restrict inside white background.

    As i mentioned,I have used ignore option in sortable. U can see in the plnkr code.
    From Grid1-Green i set it to container 'Grid1-Green > tbody >tr ' and ignore 'background-color-light-blue'. This is working nicely.
    But when i set Grid2-Blue i set it to container 'Grid2-Blue > tbody >tr ' and ignore 'background-color-white'. This is not working.
    Thx in advance again.

  3. Kendo UI is VS 2017 Ready
  4. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 03 Jul 2015 Link to this post

    Hello Peter,

    The scenario that you would like to achieve is not supported out of the box. The main reason are not Kendo Sortable selectors but the way AngularJS works.

    You should know that the Sortable widget modifies the DOM - it adds additional element (placeholder) inside the Sotrable container and re-arranges the DOM element after drag end. This is in contrary to AngularJS conventions according to which DOM manipulations should not exist in controllers, services or anywhere else but in directives.

    In addition the Sortable widget is initialized at the dataBound event which means that it will be initialized multiple times.

    Regards,
    Alexander Valchev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  5. Peter
    Peter avatar
    39 posts
    Member since:
    May 2015

    Posted 05 Jul 2015 in reply to Alexander Valchev Link to this post

    HI. Alex. U made a good point with DOM manipulations should not exist in controllers, services or anywhere else but in directives.
    I have thought this over the weekend.
    In http://plnkr.co/33ZgTPdDsYauLI7vP7GS,
    Script.js line 810, 811, 812, 816, i have manipulated the DOM via controller which is not inside directive but in Kendo-UI configuration options.
    What is kendo ui best practice to manipulate the DOM eg: change a background color? If possible, please provide an example. Thx in advance.
  6. Peter
    Peter avatar
    39 posts
    Member since:
    May 2015

    Posted 05 Jul 2015 Link to this post

    Also, in line 696, i have used "kendo.template($("#addTemplate").html())​"
    That jquery $('selector') worries me, is there a anguarjs way to achieve same result?

  7. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 07 Jul 2015 Link to this post

    Hi Peter,

    Also, in line 696, i have used "kendo.template($("#addTemplate").html())​"
    That jquery $('selector') worries me, is there a anguarjs way to achieve same result?

    There is no build-in approach. You may use inline template or save the template in a variable (kendo.template returns function).

    Script.js line 810, 811, 812, 816, i have manipulated the DOM via controller which is not inside directive but in Kendo-UI configuration options. 
    What is kendo ui best practice to manipulate the DOM eg: change a background color?

    You may use the configuration options of the widget to append CSS classes to <td> elements.
    I hope this information will help.

    Regards,
    Alexander Valchev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  8. Peter
    Peter avatar
    39 posts
    Member since:
    May 2015

    Posted 07 Jul 2015 in reply to Alexander Valchev Link to this post

    Thx again. Alex. You information is very helpful.
    As you can see from here http://plnkr.co/4GVh9XF7uLeNKD1uxkRx
    I am using inline template now to set the background.
    I still like anguarjs way, view is just response to the data from vm.
    At the moment in index.html, i just hard code in css class for TD.
    Later on, i will get css class load in json, then bind td with a ngClass.
    I hope that is going to work. Fingers crossed!

    Anyway, but in my script.js line 822 i still have to use kendo.template($("#subjectYearSemesterGridRowTemplate").html()).
    Can you give me an example to get rid of $('selector') ?
  9. Peter
    Peter avatar
    39 posts
    Member since:
    May 2015

    Posted 07 Jul 2015 Link to this post

    Sry to confuse u. I am not using inline template.
    I am using external template.
    I see what do you mean by inline template.
    Something like this right:
    rowTemplate: '<tr data-uid="#= uid #"><td colspan="2"><strong>#: name #</strong><strong>#: age #</strong></td></tr>'
    Format of this can be messy.

    If i have multiple lines, what is the best way to format them?
    Can you give me an example of "inline template or save the template in a variable (kendo.template returns function)"?

    EG: I want to put following multiple line block of html into javascript function.
    <tr class="k-master-row" data-uid="#= uid #">
            <td class="k-hierarchy-cell">
              <a href="\#" class="k-icon k-plus">
              </a>
            </td>
            <td></td>
            <td>
              <input type="text" class="k-input k-textbox col-lg-12 col-md-12" ng-model="dataItem.domainYearSemesterVO.domainVO.domain" />
            </td>
            <td>
              <input type="text" class="k-input k-textbox col-lg-12 col-md-12" ng-model="dataItem.domainYearSemesterVO.domainVO.kdokey" />
            </td>
            <td>
              {{dataItem.domainYearSemesterVO.reportAtDimensionLevel}}
            </td>
            <td>

            </td>
            <td>

            </td>
          </tr>

  10. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 09 Jul 2015 Link to this post

    Hi Peter,

    For row template you may use a nested template directive. Please this help article:
    • http://docs.telerik.com/kendo-ui/AngularJS/introduction#template-directives


    Regards,
    Alexander Valchev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  11. Peter
    Peter avatar
    39 posts
    Member since:
    May 2015

    Posted 09 Jul 2015 Link to this post

    Thx. Alex.
    Seems template directive is very promising.
    But it may not work for grid properly according to http://www.telerik.com/forums/cannot-properly-set-k-row-template-in-html-%28angular-directive%29

    FYI. I have set my form up with external template like this http://plnkr.co/w44pS20LB0K1EpxPIq1i.
    Again, i am using external template which is easy to read.
    I know i still need use jquery selector for external template, but that is maybe the best way to get Kendo grid to render a proper <Tr> <td>.
    Sometimes u just have to compromise to get things work.
    I will keep eye on k-row-template options for kendo-grid.
    I reckon that will be the perfect solution.
    With external template, i could bind to ng-class and set up a Finite state machine etc. Basically i have control over every details of html component i put in.
    If $(selector) just render html content without DOM manipulation, i dont mind it.
    Now my view in html is just response to whether the Model( from json) changes.
    That is angular way. I am happy with that.

Back to Top
Kendo UI is VS 2017 Ready