DropDowlListFor DataColorField alternative !?

8 posts, 1 answers
  1. K.Ramadan
    K.Ramadan avatar
    78 posts
    Member since:
    Feb 2020

    Posted 20 Apr Link to this post

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

  2. Petar
    Admin
    Petar avatar
    402 posts

    Posted 22 Apr Link to this post

    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.
  3. K.Ramadan
    K.Ramadan avatar
    78 posts
    Member since:
    Feb 2020

    Posted 22 Apr in reply to Petar Link to this post

    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

  4. Answer
    Petar
    Admin
    Petar avatar
    402 posts

    Posted 24 Apr Link to this post

    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.
  5. K.Ramadan
    K.Ramadan avatar
    78 posts
    Member since:
    Feb 2020

    Posted 06 May in reply to Petar Link to this post

    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");
                 });

             });

  6. Petar
    Admin
    Petar avatar
    402 posts

    Posted 08 May Link to this post

    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.
  7. K.Ramadan
    K.Ramadan avatar
    78 posts
    Member since:
    Feb 2020

    Posted 13 May in reply to Petar Link to this post

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

    }

  8. Petar
    Admin
    Petar avatar
    402 posts

    Posted 15 May Link to this post

    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.
Back to Top