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

Scheduler is not Showing properly

6 Answers 261 Views

Scheduler

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

Udal asked on 13 Aug 2013, 01:52 PM

myouput.png

original.png

@using Kendo.Mvc.UI;
@{
ViewBag.Title = "MyAccount";
}
<div class="top_link_bar1">
@using (Html.BeginForm("LogOff", "MyAccount", FormMethod.Post, new { id = "logoutForm" }))
{

<a>Welcome @HttpContext.Current.Session["UserName"]</a>

<a href="javascript:document.getElementById('logoutForm').submit()">Sign Out</a>
}

</div>
<div id="forecast">
@(Html.Kendo().TabStrip()
.Name("tabstrip")
.Items(tabstrip =>
{
tabstrip.Add().Text("Schedular")
.Selected(true)
.Content(@<text>
<div class="weather1">

<div id="people">
<input checked type="checkbox" id="alex" value="1">
<input checked type="checkbox" id="bob" value="2">
<input type="checkbox" id="charlie" value="3">
</div>
@(Html.Kendo().Scheduler<Joydip.Models.MyAccountModel>()
.Name("scheduler")
.Date(new DateTime(2013, 6, 13))
.StartTime(new DateTime(2013, 6, 13, 7, 00, 00))
.Height(500)
.Views(views =>
{
views.DayView();
views.WeekView(weekView => weekView.Selected(true));
views.MonthView();
views.AgendaView();
})
.Timezone("Etc/UTC")
.Resources(resource =>
{
resource.Add(m => m.OwnerID)
.Title("Owner")
.DataTextField("Text")
.DataValueField("Value")
.DataColorField("Color")
.BindTo(new[] {
new { Text = "Alex", Value = 1, Color = "#f8a398" } ,
new { Text = "Bob", Value = 2, Color = "#51a0ed" } ,
new { Text = "Charlie", Value = 3, Color = "#56ca85" }
});
})
.DataSource(d => d
.Model(m =>
{
m.Id(f => f.TaskID);
m.Field(f => f.OwnerID).DefaultValue(1);
})
.Read("Read", "Scheduler")
.Create("Create", "Scheduler")
.Destroy("Destroy", "Scheduler")
.Update("Update", "Scheduler")
.Filter(filters =>
{
filters.Add(model => model.OwnerID).IsEqualTo(1).Or().IsEqualTo(2);
})
)
)

</div>

</text>);
tabstrip.Add().Text("TaskManagement")

.Content(@<text>
<div class="weather1">

</div>

</text>);
})
)
</div>

<script type="text/javascript">
$(function () {
$("#people :checkbox").change(function (e) {
var checked = $.map($("#people :checked"), function (checkbox) {
return parseInt($(checkbox).val());
});

var filter = {
logic: "or",
filters: $.map(checked, function (value) {
return {
operator: "eq",
field: "OwnerID",
value: value
};
})
};

var scheduler = $("#scheduler").data("kendoScheduler");
scheduler.dataSource.filter(filter);
});
})
</script>
<style scoped>
#forecast {
width: 770px;
height: 750px;
margin: 30px auto;
//padding: 80px 15px 0 15px;
}

.sunny, .cloudy, .rainy {
display: inline-block;
margin: 20px 0 20px 10px;
width: 128px;
height: 128px;
background: url('@Url.Content("~/Content/web/tabstrip/weather.png")') transparent no-repeat 0 0;
}

.cloudy{
background-position: -128px 0;
}

.rainy{
background-position: -256px 0;
}

.weather {
width: 160px;
padding: 40px 0 0 0;
float: right;
}
.weather1 {
width:auto;
height:auto;
padding: 40px 0 0 0;
overflow:scroll !important;
}
#forecast h2 {
font-weight: lighter;
font-size: 5em;
padding: 0;
margin: 0;
}

#forecast h2 span {
background: none;
padding-left: 5px;
font-size: .5em;
vertical-align: top;
}

#forecast p {
margin: 0;
padding: 0;
}
#people
{
background: url('@Url.Content("~/Content/web/scheduler/")team-schedule.png') transparent no-repeat;
height: 115px;
position: relative;
}
#alex {
position: absolute;
left: 404px;
top: 81px;
}
#bob {
position: absolute;
left: 519px;
top: 81px;
}
#charlie {
position: absolute;
left: 634px;
top: 81px;
}
</style>

i'm doing this in vs2012 mvc4
what should be the problem....??
show the output in attached file
one is output from my code another is website Output...

6 Answers, 1 is accepted

answered on 14 Aug 2013, 02:01 PM

But i have also use this in different page just scheduler
Result is same

Means i have created a new view there is only scheduler but its also displaying same

Here is my code of this page

<div id="people">
<input checked type="checkbox" id="alex" value="1">
<input checked type="checkbox" id="bob" value="2">
<input type="checkbox" id="charlie" value="3">
</div>
@(Html.Kendo().Scheduler<Kendo.Mvc.Examples.Models.Scheduler.TaskViewModel>()
.Name("scheduler")
.Date(new DateTime(2013, 6, 13))
.StartTime(new DateTime(2013, 6, 13, 7, 00, 00))
.Height(600)
.Views(views =>
{
views.DayView();
views.WeekView(weekView => weekView.Selected(true));
views.MonthView();
views.AgendaView();
})
.Timezone("Etc/UTC")
.Resources(resource =>
{
resource.Add(m => m.OwnerID)
.Title("Owner")
.DataTextField("Text")
.DataValueField("Value")
.DataColorField("Color")
.BindTo(new[] {
new { Text = "Alex", Value = 1, Color = "#f8a398" } ,
new { Text = "Bob", Value = 2, Color = "#51a0ed" } ,
new { Text = "Charlie", Value = 3, Color = "#56ca85" }
});
})
.DataSource(d => d
.Model(m => {
m.Id(f => f.TaskID);
m.Field(f => f.OwnerID).DefaultValue(1);
})
.Read("Read", "Scheduler")
.Create("Create", "Scheduler")
.Destroy("Destroy", "Scheduler")
.Update("Update", "Scheduler")
.Filter(filters =>
{
filters.Add(model => model.OwnerID).IsEqualTo(1).Or().IsEqualTo(2);
})
)
)

<script type="text/javascript">
$(function () {
$("#people :checkbox").change(function (e) {
var checked = $.map($("#people :checked"), function (checkbox) {
return parseInt($(checkbox).val());
});

var filter = {
logic: "or",
filters: $.map(checked, function (value) {
return {
operator: "eq",
field: "OwnerID",
value: value
};
})
};

var scheduler = $("#scheduler").data("kendoScheduler");

scheduler.dataSource.filter(filter);
});
})
</script>

<style scoped>
#people
{
background: url('@Url.Content("~/Content/web/scheduler/")team-schedule.png') transparent no-repeat;
height: 115px;
position: relative;
}
#alex {
position: absolute;
left: 404px;
top: 81px;
}
#bob {
position: absolute;
left: 519px;
top: 81px;
}
#charlie {
position: absolute;
left: 634px;
top: 81px;
}
</style>