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.
9 Answers, 1 is accepted
Rank 1
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.
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
Rank 1
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.
Rank 1
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?
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
Rank 1
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') ?
Rank 1
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>
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
Rank 1
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.