We Keep Coding

How to set selected to option using ddSlick after postback?

I need to use image drop-down list from http://designwithpc.com/plugins/ddslick I am trying to set "selected" option after postback, but I get infinite loop of postbacks. Here is my code:
<form id="form1">
<select id="localeId" name="localeId"></select>
</form>
<script type="text/javascript">
//Dropdown plugin data
var ddData = [
{
text: "English",
value: "en",
selected: false,
description: "English",
imageSrc: "/assets/img/flags-icons/en-flag.png"
},
{
text: "Portuguese",
value: "pt",
selected: false,
description: "Portuguese",
imageSrc: "/assets/img/flags-icons/pt-flag.png"
},
{
text: "Russian",
value: "ru",
selected: false,
description: "Russian",
imageSrc: "/assets/img/flags-icons/ru-flag.png"
},
{
text: "Spanish",
value: "es",
selected: false,
description: "Spanish",
imageSrc: "/assets/img/flags-icons/es-flag.png"
}
];
$('#localeId').ddslick({
data: ddData,
defaultSelectedIndex: 3,
onSelected: function (data) {
if (data.selectedIndex > 0) {
$('#hidCflag').val(data.selectedData.value);
$.cookie('lang', document.getElementById("hidCflag").value, { expires: 365 });
form1.submit();
}
}
});
</script>
Could please help me to solve it?

Calling:
$( '#demoSetSelected' ).ddslick( 'select', { index: i } );
will also trigger the "onSelected()" function you defined causing an infinite loop.
I solved the same problem by modifying the source file (jquery.ddslick.js) and adding a flag to disable the call to onSelected():
Change the select function to:
methods.select = function (options) {
return this.each(function () {
if (options.index)
selectIndex($(this), options.index, options.disableTrigger);
});
}
Modify selectIndex function definition from:
function selectIndex(obj, index) {
to:
function selectIndex(obj, index, disableTrigger) {
At the very end of the function selectIndex(...), change from:
if (typeof settings.onSelected == 'function') {
settings.onSelected.call(this, pluginData);
}
to:
if ( !disableTrigger ) {
if (typeof settings.onSelected == 'function') {
settings.onSelected.call(this, pluginData);
}
}
Then use instead:
$( '#demoSetSelected' ).ddslick( 'select', { index: i, disableTrigger: true } );
As an aside: to select by value instead of index, check out the code mentioned in:
https://github.com/prashantchaudhary/ddslick/issues/78
https://github.com/lunrfarsde/ddslick
It's a fork of dd-slick with the description part removed. But added select by value.

You may use plugin's select method like
$('#demoSetSelected').ddslick('select', {index: i });
to select a particular index.
As per ddSlick demo#4 on their website(http://designwithpc.com/plugins/ddslick#demo)

Adding onClick events to zabuto calendar

I've implemented zabuto calendar in my project. Here is the screen shot:
.
I want the color of date cell to be changed when clicked. Here is a part of my code:
$(document).ready(function () {
$("#my-calendar").zabuto_calendar({
cell_border: true,
today: false,
show_days: true,
weekstartson: 0,
nav_icon: {
prev: '<i class="fa fa-chevron-circle-left"></i>',
next: '<i class="fa fa-chevron-circle-right"></i>'
}
});
});
Here is onClick code.
myDateFunction(this.id);
function myDateFunction(id) {
var date = $("#" + id).data("date");
document.getElementById("#" + id).style.color = "blue";
}
$("#my-calendar").zabuto_calendar({
action: function () {
return myDateFunction(this.id, false);
},
legend: [
{type: "text", label: "Special event", badge: "00"},
{type: "block", label: "Regular event"}
]
});
But this isn't working. How can I fix it?

Old post, but I've made a custom Zabuto calendar.
It's untested and lot's of features are missing but you should give it a peek:
$("#my-calendar").zabuto_calendar({
language: "fr",
year: 2015,
month: 1,
show_previous: 1,
show_next: 2,
// show_reminder: true,
// show_today: false,
// show_days: true,
// weekstartson: 0,
// nav_icon: {
// prev: '<i class="fa fa-chevron-circle-left"></i>',
// next: '<i class="fa fa-chevron-circle-right"></i>'
// },
callbacks: {
on_cell_double_clicked: function() {
return cellDoubleClicked(this);
},
on_cell_clicked: function() {
return cellClicked(this);
},
on_nav_clicked: function() {
return navClicked(this);
},
on_event_clicked: function() {
return eventClicked(this);
}
},
events: {
local: events_array,
ajax: {
url: "" // load ajax json events here...
}
},
legend: [
{label: "Rendez-vous", type: "appointment"},
{label: "Evenement A", type: "eventtype2"},
{label: "Evenement B", type: "eventtype3"},
{label: "<span class='fa fa-bell-o'></span> Rappel", type: "reminder"}
]
});
http://jsfiddle.net/n2gkm4d9/
(try double-click in day wrappers, simple-click on events)
Now with:
init calendar with local json + ajax data
call public methods (to add just one event at a time for example)
add event through a modal (not the modal included in zabuto calendar, I've removed it)
show a list of events of a day
...
It's only few hours of work, there's lot of features to add and things to do to make it stable but it's usable. ;-)
Look carefully to the code... there's much more than the fiddle show actually:
I think you should add a public method really easily to change the color of the cell.
Cheers
Fro

go through this http://zabuto.com/dev/calendar/examples/action.html. it contains your answer.

How to dynamically add and remove GROUPS to KendoUI Scheduler

I am using KendoUI Scheduler control and here is initialization code
$("#Scheduler").kendoScheduler({
dataSource: [],
selectable: true,
height: 500,
editable: false,
eventTemplate: $("#event-template").html(),
views: [
"day",
{ type: "week", selected: true },
"month",
"agenda"
],
resources: [
{
field: "resourceviewid",
name: "ResourceViews",
dataColorField: "key",
dataSource: [
{ text: "Appointments", value: 1, key: "orange" },
{ text: "Delivery Specialist", value: 2, key: "blue" },
{ text: "Orientation Specialist", value: 3, key: "green" }
]
}
],
group: {
resources: ["ResourceViews"],
orientation: "horizontal"
}
});
Here "Appointments" group is default, it will be available always
I have check box in my screen
<div id="divResourceView">
<label><input checked type="checkbox" value="1" />Delivery Specialist</label>
<label><input checked type="checkbox" value="2" />Orientation Specialist</label>
</div>
On change event I wrote below code to get selected values from checkbox and updating GROUP datasource of KendoUI scheduler as below
$("#divResourceView :checkbox").change(function (e) {
var checked = $.map($("#divResourceView :checked"), function (checkbox) {
return parseInt($(checkbox).val());
});
});
var scheduler = $("#Scheduler").data("kendoScheduler");
var arrayOfStrings = checked.toString().split(",");
for (var i = 0; i < arrayOfStrings.length; i++)
{
if(arrayOfStrings[i] == 1)
{
var data = [{ text: "Delivery Specialist", value: 2, color: "blue" }];
scheduler.resources[1].dataSource.data(data);
}
if (arrayOfStrings[i] == 2) {
var data = [{ text: "Orientation Specialist", value: 3, color: "green" }];
scheduler.resources[2].dataSource.data(data);
}
}
scheduler.refresh();
But it removes all groups and add only one. I want to see both groups when arrayOfStrings has values "1,2",
I can see all groups during initialization But it disappears when i check the check box.
Images for reference
During Initialization
After
As you can see clearly, Delivery Specialist is missing in scheduler control
Found some link: http://www.telerik.com/forums/add-filter-to-resource-datasource
But not sure what they talking about? seems like refresh issue.

I have done this I believe you're right and your issue is to do with refreshing, I use the following to refresh it.
var scheduler = $("#scheduler").data("kendoScheduler");
scheduler.view(scheduler.view().name);
hope this helps through it is stupidly late (I'm currently looking up how to do this lazerly

One Column Value remain unchanged in kendo grid drag and drop

I'm fairly new to kendo UI but some how I managed to render a kendo grid with drag and drop feature Where users can drag and place rows.In my case I have three columns id,name,sequence
So I need to keep sequence column data unchanged while id and name data changed when a drag and drop of a row.
Ex id=1 Name=David Sequnce=0
id=2 Name=Mark Sequnce=1
Now I'm going to drag row 1 to 2 while data of the sequence column remain unchanged new data like this,
Ex id=2 Name=Mark Sequnce=0
id=1 Name=David Sequnce=1
In my case every row is getting changed. I need to implement this solution.
Can somebody help me out on this.
Cheers,
Chinthaka

Try this,
Script
<script type="text/javascript">
$(document).ready(function () {
var data = [
{ id: 1, text: "David ", Sequnce: 0 },
{ id: 2, text: "Mark ", Sequnce: 1 }
]
var dataSource = new kendo.data.DataSource({
data: data,
schema: {
model: {
id: "id",
fields: {
id: { type: "number" },
text: { type: "string" },
Sequnce: { type: "number" }
}
}
}
});
var grid = $("#grid").kendoGrid({
dataSource: dataSource,
scrollable: false,
columns: ["id", "text", "Sequnce"]
}).data("kendoGrid");
grid.table.kendoDraggable({
filter: "tbody > tr",
group: "gridGroup",
hint: function (e) {
return $('<div class="k-grid k-widget"><table><tbody><tr>' + e.html() + '</tr></tbody></table></div>');
}
});
grid.table/*.find("tbody > tr")*/.kendoDropTarget({
group: "gridGroup",
drop: function (e) {
var target = dataSource.get($(e.draggable.currentTarget).data("id"));
dest = $(e.target);
if (dest.is("th")) {
return;
}
dest = dataSource.get(dest.parent().data("id"));
//not on same item
if (target.get("id") !== dest.get("id")) {
//reorder the items
var tmp = target.get("Sequnce");
target.set("Sequnce", dest.get("Sequnce"));
dest.set("Sequnce", tmp);
dataSource.sort({ field: "Sequnce", dir: "asc" });
}
}
});
});
</script>
View
<div id="grid">
</div>
Demo: http://jsfiddle.net/nmB69/710/

Kendo Grid Draggable Rows With Kendo Template

I'm going to implement drag and drop behaviour with kendo grid which is populated using template. How can I achieve draggable rows and reordering with kendo grid.

.Orderable()
Works a treat. Maybe try ".Dragable()" I'm a bit unsure about that though.

Take a look at following my demo code and try it to implement.
var data = [
{ id: 1, text: "text 1", position: 0 },
{ id: 2, text: "text 2", position: 1 },
{ id: 3, text: "text 3", position: 2 }
]
var dataSource = new kendo.data.DataSource({
data: data,
schema: {
model: {
id: "id",
fields: {
id: { type: "number" },
text: { type: "string" },
position: { type: "number" }
}
}
}
});
var grid = $("#grid").kendoGrid({
dataSource: dataSource,
scrollable: false,
columns: ["id", "text", "position"]
}).data("kendoGrid");
grid.table.kendoDraggable({
filter: "tbody > tr",
group: "gridGroup",
hint: function(e) {
return $('<div class="k-grid k-widget"><table><tbody><tr>' + e.html() + '</tr></tbody></table></div>');
}
});
grid.table/*.find("tbody > tr")*/.kendoDropTarget({
group: "gridGroup",
drop: function(e) {
var target = dataSource.get($(e.draggable.currentTarget).data("id")),
dest = $(e.target);
if (dest.is("th")) {
return;
}
dest = dataSource.get(dest.parent().data("id"));
//not on same item
if (target.get("id") !== dest.get("id")) {
//reorder the items
var tmp = target.get("position");
target.set("position", dest.get("position"));
dest.set("position", tmp);
dataSource.sort({ field: "position", dir: "asc" });
}
}
});

put .Dragable()
but make sure that you sit it in the right place, the ordering is required. Some times you may not get the expected result and that may happen due to not paying attention to the order.