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

[Solved] How to add resource boolean

10 Answers 183 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Markus
Top achievements
Rank 1
Markus asked on 13 Feb 2015, 10:44 AM
Hi

In following example, how can I add a Boolean field (checkbox like isallday) in the resources rather than a dropdown field?

http://dojo.telerik.com/UkaxO

Many thanks

10 Answers, 1 is accepted

Sort by
0
Markus
Top achievements
Rank 1
answered on 16 Feb 2015, 08:53 AM
updated example for better demo purposes... http://dojo.telerik.com/UkaxO/3
0
Vladimir Iliev
Telerik team
answered on 17 Feb 2015, 09:01 AM
Hi Markus,

Please check the updated example below which allows editing of the resource using "checkbox" (inside custom editor template):

Regards,
Vladimir Iliev
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Markus
Top achievements
Rank 1
answered on 17 Feb 2015, 04:52 PM
Hi

Thank you for your reply.

Unfortunately your example does not work in my browser (IE or Chrome), the edit popup does not actually popup.

Furthermore, I do not want to use a custom editor template because if I do I cannot create a new event anymore (I would have to recreate all the fields that are on the edit popup by default because using a custom editor replaces the whole editor window).

It is super easy to add fields with resources - as per my example where "attendees" is added http://dojo.telerik.com/UkaxO/3 - hence there must be a way to just have this "attendees" be a checkbox (boolean) without destroying the complete template and using a custom editor?

Many thanks
0
Vladimir Iliev
Telerik team
answered on 18 Feb 2015, 06:23 AM
Hi Markus,

Straight to your questions:

1) Unfortunately your example does not work in my browser (IE or Chrome), the edit popup does not actually popup - I tried to reproduce this behavior, however the example works on Firefox, IE and Chrome browsers on our side (as seen in this screencast). 

2) Furthermore, I do not want to use a custom editor template because ... - We already provide custom editor template that replicates the build in one which is intended to be used as baseline for creating custom editors:
3) There must be a way to just have this "attendees" be a checkbox (boolean) without destroying the complete template and using a custom editor? - The recommended approach is to use editor template.

Regards,
Vladimir Iliev
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Markus
Top achievements
Rank 1
answered on 19 Feb 2015, 08:43 AM
Hi Vladimir

Thank you for your reply.

1) Yes when I double click on the already created event in the Scheduler the checkbox appears. But when I double click somewhere else (behaviour to create a new event is to doubleclick on emtpy space in the Scheduler) then nothing happens.

2) Thank you for the link, inside is a visual basic project and I do not know how to get the default editor template which I can then extend with one field. (I have found "CustomEditorTemplate.cshtml" but did not get any further)

I assume I am looking for below but with all the fields so that in the end it looks like this: http://oi62.tinypic.com/20gi1iu.jpg
<script id="edit-template" type="text/x-kendo-template">
 <div class="k-edit-label">
        <label for="private">Private</label>
    </div>
    <div data-container-for="private" class="k-edit-field">
        <input data-bind="checked:private" name="private" type="checkbox" value="true" />
    </div>
</script>

3) It seems overly complication that in order to just extend the edit popup with 1 field that I have to recreate the whole template and then extend this one field!? (maybe just my opinion) I guess I was expecting a function to which I can pass new fields and location for the edit popup...

Thanks Vladimir
0
Vladimir Iliev
Telerik team
answered on 19 Feb 2015, 09:09 AM
Hi Markus,


1) This is caused by the missing dataSource configuration - currently there is no "dataSource.schema" defined.

2) The editor template can be found in "index.cshtml", under the scheduler code:

<script type="text/x-kendo-template" id="CustomEditorTemplate">
     <div class="k-edit-label">
        <label for="Title">Title</label>
    </div>
    <div data-container-for="title" class="k-edit-field">
        <input class="k-textbox" data-bind="value:title" name="Title" type="text" required="required" />
    </div>

Regards,
Vladimir Iliev
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Markus
Top achievements
Rank 1
answered on 19 Feb 2015, 10:24 AM
Hi Vladimir

Thank you for your reply, that worked almost perfectly.

Here is my example: http://dojo.telerik.com/UkaxO/13 (double click on empty grid)

I am trying but it seems not possible to have the "color" attribute as I tried here for my "Owners" in the editor template: http://dojo.telerik.com/UkaxO/12

Many thanks
0
Vladimir Iliev
Telerik team
answered on 20 Feb 2015, 08:37 AM
Hi Markus,


Please note that all "#" symbols inside the edit template should be escaped as this symbol is used by Kendo UI template syntax. Please check the example below:

{ "text": "Person1", "value": 1, "color": "\#f8a398" },
{ "text": "Person2", "value": 2, "color": "\#51a0ed" },
{ "text": "Person3", "value": 3, "color": "\#56ca85" }


Regards,
Vladimir Iliev
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Markus
Top achievements
Rank 1
answered on 20 Feb 2015, 09:47 AM
Thank you Vladimir

I applied this here (3 different colours) but there is no color icon or anything?!

http://dojo.telerik.com/UkaxO/15

Thanks

0
Vladimir Iliev
Telerik team
answered on 20 Feb 2015, 11:29 AM
Hi Markus,

You can add custom "template" and "valueTemplate" for the dropDownList which to render the color as expected:

<input id="Owner" name="Owner" style="width: 200px" type="text"
            data-template="custom-template"
            data-value-template="custom-value-template"

<script type="text/x-kendo-template" id="custom-template">
    <span class='k-scheduler-mark' style='background-color:#=color#'></span>#=text#
</script>
   
<script type="text/x-kendo-template" id="custom-value-template">
    <span class='k-scheduler-mark' style='background-color:#=color#'></span>#=text#
</script>

Regards,
Vladimir Iliev
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
Grid
Asked by
Markus
Top achievements
Rank 1
Answers by
Markus
Top achievements
Rank 1
Vladimir Iliev
Telerik team
Share this question
or