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
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
Our thoughts here at Progress are with those affected by the outbreak.
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
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
Our thoughts here at Progress are with those affected by the outbreak.
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");
});
});
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
Our thoughts here at Progress are with those affected by the outbreak.
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);
}
}
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
Our thoughts here at Progress are with those affected by the outbreak.