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

DropDowlListFor DataColorField alternative !?

7 Answers 12 Views
Scheduler
This is a migrated thread and some comments may be shown as answers.
K.Ramadan
Top achievements
Rank 2
Veteran
K.Ramadan asked on 20 Apr 2020, 11:20 AM

Hello There,

I have a resource in my Scheduler and there is the option DataColorField where I can give every Option in the list a specific color.

I'm trying to do the same but with a DropDownListFor in my CustomEditorTemplate.

 

Thanks in Advance . .

7 Answers, 1 is accepted

Sort by
0
Petar
Telerik team
answered on 22 Apr 2020, 08:26 AM

Hi Blackout,

Please check this Customize Edit and Events Templates knowledge base article. It demonstrates how we can add resources to a custom editor template. 

The definition of the resources in the template is realized with the following snippet:

    <div class="k-edit-label"><label for="ownerId">Owner</label></div>
    <div data-container-for="ownerId" class="k-edit-field">
        <select id="ownerId" data-bind="value:ownerId" data-role="dropdownlist"  data-value-field="value" data-text-field="text">
          <option value="1">Alex</option>
          <option value="2">Bob</option>
          <option value="3">Charlie</option>
      </select>
      </div>

Where the resources in the Scheduler are defined as follows:

          resources: [
            {
              field: "ownerId",
              title: "Owner",
              dataSource: [
                { text: "Alex", value: 1, color: "#f8a398" },
                { text: "Bob", value: 2, color: "#51a0ed" },
                { text: "Charlie", value: 3, color: "#56ca85" }
              ]
            }
          ]

I hope the provided example will help you resolve the issue in the application you are working on. 

Regards,
Petar
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
0
K.Ramadan
Top achievements
Rank 2
Veteran
answered on 22 Apr 2020, 10:08 AM

Hello Petar,

Thank for your response.

But this is not what i meant...

So in my scheduler resource, I have this :

resources.Add(r => r.Typ)
            .Name("Typ")
            .Title("Typ")
            .DataTextField("Typ")
            .DataValueField("Typ")
            .DataColorField("Color")
            .BindTo(new[]
            {
              new {Typ = "Firmenseminar", Color = ""},
              new {Typ = "Seminar"      , Color = "black"},
              new {Typ = "Veranstaltung", Color = ""},
              new {Typ = "Weiterbildung", Color = ""},
              new {Typ = "Vorlauf"      , Color = "red"},
              new {Typ = "Nachlauf"     , Color = "red"}
            });

 

and in my CustomEditorTemplate i have this dropdownlist :

@(Html.Kendo().DropDownListFor(model => model.Typ)
                .DataTextField("Typ")
                .DataValueField("Typ")
                .OptionLabel("ausw√§hlen")
                     .DataSource(Source =>
                     {
                         Source.ServerFiltering(true);
                         Source.Custom()
                         //.ServerFiltering(true)
                         .Type("aspnetmvc-ajax")
                         .Transport(transport =>
                         {
                             transport.Read("Typ_Read_All", "Typ");
                         })
                         .Schema(schema =>
                         {
                             schema.Data("Data")
                             .Total("Total")
                             .Errors("Errors");
                         });
                     }))

 

Now if I create an event and set a typ for it, the event color will take its color from the resource .. this works fine.

But I want to show these colors like in the picture in my previous Post (TargetList.png)

 

Thanks in advance

0
Accepted
Petar
Telerik team
answered on 24 Apr 2020, 08:38 AM

Hi Blackout,

Thank you for the clarification about the targeted functionality. A possible approach for achieving it in the custom template is to execute code similar to the below one in the edit event function.

var colors = [];
$(e.sender.resources[0].dataSource.data()).each(function(index, value){
  colors.push(value.color);
});

var listBoxId = $("[data-container-for='ownerId'] span[class='k-widget k-dropdown']").attr("aria-owns");
var liElements = $("#"+listBoxId).find("li");
$.each(liElements, function(index, value){
  $(value).prepend('<div class="k-scheduler-mark" style="background-color:'+colors[index]+'"></div>');
})

Here is a modified version of the Dojo I've sent you in my previous reply that demonstrates the usage of the above code snippet. 

In the context of UI for ASP.NET MVC you will have to define a function that handles the Edit event. Add an equivalent of the above code to this function and you will achieve the desired business logic.

Regards,
Petar
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
0
K.Ramadan
Top achievements
Rank 2
Veteran
answered on 06 May 2020, 08:01 AM

Hello Petar,

I'm trying to do the same thing but with a DropDownList that fetch its values from a ServerDB .

So I tried the same Code .. but it didn't work .. so I changed the resources[0] to resources[1] and I console.loged the resources and

now I have the Colors in the array...

So I console.loged liElements .. in the first list where the colors are just given in BindTo() .. the result was all li elements...

But in the list where the color is a value on a server .. it shows me just one element and it is the ul when I click on it .. I see the li

elements under the tag "Children"...

So the way $.euch () is written .. doesn't help much in this situation... It will be great if you help me with another a simple yet direct

answer.

var colors1 = [];
$(e.sender.resources[1].dataSource.data()).each(function (index, value) {
    colors1.push(value.RaumColor); // this color should be exactly written like in the Typ resource
 
    console.log(value.RaumColor);
});
var listBoxRaum = $("[data-container-for='Raum'] span[class='k-widget k-dropdown']").attr("aria-owns");
console.log(listBoxRaum);
var liElements1 = $("#" + listBoxRaum).find("li");
console.log(liElements1);
 
 
$.each(liElements1, function (index, value) {
    $(value).prepend('<div class="k-scheduler-mark" style="background-color:' + colors1[index] + '"></div>');
});

 

So This is on of the resources Scheduler :

 

resources.Add(r => r.Raum)
         .Name("Raum")
         .Title("Raum")
         .DataTextField("Raum")
         .DataValueField("Raum")
         .DataColorField("RaumColor")
         .DataSource(Source =>
         {
             Source.Custom()
             .Type("aspnetmvc-ajax")
             .Transport(transport =>
             {
                 transport.Read("Raum_Read_All", "Raum");
             })
             .Schema(schema =>
             {
                 schema.Data("Data")
                        .Total("Total");
                 //.Errors("Errors");
             });

         });

0
Petar
Telerik team
answered on 08 May 2020, 06:25 AM

Hi Blackout,

Based on the provided code I would assume that if you define a model for the DataSource of the resource the issue will be resolved. The other thing that could be the reason for the reported behavior is the format in which the data is returned from the controller. 

Check this forum post that discusses the functionality you want to implement. Compare the suggested implementation to the implementation of your project. You could find what configuration in your project should be changed to achieve the targeted implementation. 

In another post from the linked forum thread, there is also a working project that demonstrates the sourcing of the resources from a controller method. The project is an ASP.NET Core one but the demonstrated approach can also be applied in an ASP.NET MVC project.

Regards,
Petar
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
0
K.Ramadan
Top achievements
Rank 2
Veteran
answered on 13 May 2020, 02:32 PM

Hello Petar,

first of all .. thank you for your answer .. it gave me another perspective to work on...

and I did my best and tried what you sent me...

I added a Model to Resource and tried to change a bit with the Format returned from the Controller .. but with no success!

the thing is the li elements are not found .. the liElement are shown in the prevObject in children!

but when I directly bind to a list then it works great...

but every time when the values are fetched from a server .. I get the same result...

This is my Controller :

public JsonResult Raum_Read_All ([DataSourceRequest]DataSourceRequest request)
{
    using (var db = new cRM_FM_v2_KARAMEntities())
    {
        IQueryable<KommunikationViewModel> test = db.RAUM.ToList().Select(x => new KommunikationViewModel()
        {
            ID         = x.SID_RAUM,
            Raum       = x.RAUMBEZEICHNUNG,
            RaumColor  = x.COLOR
        }).OrderBy(s => s.Raum).AsQueryable();
 
    return Json(test.ToDataSourceResult(request), JsonRequestBehavior.AllowGet);
    }

}

0
Petar
Telerik team
answered on 15 May 2020, 11:15 AM

Hi Blackout,

Can you isolate the reported behavior in a runnable project and send this project to me? This will be the best approach to try to identify what is triggering the issue in the application you are working on. Based on the provided code, I cannot say if it is related to the discussed issue or not.

Looking forward to your reply.

Regards,
Petar
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
Tags
Scheduler
Asked by
K.Ramadan
Top achievements
Rank 2
Veteran
Answers by
Petar
Telerik team
K.Ramadan
Top achievements
Rank 2
Veteran
Share this question
or