Hi,
When I work with groups of columns, and I try to show a group that not is the first one, columns header aren't displayed in correct order. As you can see in the example, what could I do to do that?
http://dojo.telerik.com/ukAsO/3
Please tell me how to convert a column to a link in the Gantt chart. I tried to convert the same by iterating the <tr> tags and converting the first column content to a link however, when the task are re-ordered it get disturbed.
Column properties only support date formatting.
Please help
I'm sure I'm missing something simple, but I can't seem to figure this one out.
Say I've got a template where I need to display the image for an object, and if the object has no image, display a default. I currently have this code inside my template:
# if (data.Image.length > 0) { # <img src="/content/#= data.ID #/Image/#= data.Image #" class="img-responsive border-radius" /># } else { # <img src="/content/default.jpg" class="img-responsive border-radius" /># } #Which works well, but I'm not thrilled w/ having to repeat the actual HTML image tag and classes - this is a small example, but what if I had a condition where there could be 10+ options for the image src?. Then I'd have the exact same HTML 10+ times.
I've tried creating a variable to hold the image source and then using that in the template, but this doesn't seem to work:
# if (data.Image.length > 0) { var image_var = "/content/#= data.ID #/Image/#= data.Image #"; }else { var image_var = "/content/default.jpg";}#<img src="#= image_var #" class="img-responsive border-radius" />The code above works for default image, but the src for the object with an image doesn't actually get the ID and image name values - this is what's in the src when the element is inspected:
/content/;$kendoOutput+='= data.ID ';/Image/;$kendoOutput+='= data.Image ';Removing the "#= #" around the data just puts the "data.ID" text into the src:
/content/data.ID/Image/data.ImageWhenever you click anywhere outside of the scheduler the selected cells are deselected (the k-state-selected class is removed). I want to keep the selection until a new one is made. Can anyone help me out with this?
Thanks
Hi,
we ware using the gantt-chart which has on the right side a two-level header. I mean depending on the choosen view (.e.g. month) in the first row are the months shown and in the second row are the weeks.
But what we need is a three-level header: The first row shows the years, then the months and the third row shows the weeks.
Is this possible?
Best Regards!
I have multiple grids loading on a page. I want to hide the entire page until all grids are loaded. The grids are dynamically loaded based off of a table.
In a partial view I do this for each category:
<div id="@gridName" style="display:none;"></div>
<script type="text/javascript">
$(document).ready(function() {
$("#@gridName").kendoGrid({
dataSource: new kendo.data.DataSource({
schema: {
model: {
id: "CostSheetDetailId",
fields: {
CostSheetDetailId: { editable: false },
FriendlyName: { nullable: false, type: "string", defaultValue: "" },
EquipmentModelId: { editable: true, nullable: false},
Unit: { type: "number", editable: true, defaultValue: "0" },
Price: { type: "number", editable: true, defaultValue: "0" },
Budget: { type: "number", editable: true, defaultValue: "0" },
Actual: { type: "number" },
CostSheetCategoryId: {nullable: false, type: "number", defaultValue: @Model.Category.CostSheetCategoryId },
CostSheetId: { nullable: false, type: "number", defaultValue: @Model.CostSheetId },
Tooltip: { nullable: true, type: "string" }
}
},
errors: "errorMsg"
},
error: function (e) {
if(e.errors !== undefined ) {
toastr.options = {
"positionClass": "toast-bottom-full-width"
};
toastr.error('There is an error: ' + e.errors, 'Uh Oh!');
}
this.cancelChanges();
},
transport: {
read: {
url: "/CostSheet/CostSheetCategoryDetailGet",
dataType: "json",
data: {
Id: @Model.CostSheetId,
CostSheetCategoryId: "@Model.Category.CostSheetCategoryId",
IsFixed: "@Model.Category.IsFixed"
}
},
create: {
url: "/CostSheet/CostSheetCategoryDetailCreate",
dataType: "json",
type: "POST",
data: {
__RequestVerificationToken: getAntiForgeryToken()
}
},
update: {
url: "/CostSheet/CostSheetCategoryDetailEdit",
dataType: "json",
type: "POST",
data: {
__RequestVerificationToken: getAntiForgeryToken()
}
},
destroy: {
url: "/CostSheet/CostSheetCategoryDetailDelete",
dataType: "json",
type: "POST",
data: {
__RequestVerificationToken: getAntiForgeryToken()
}
},
parameterMap: function (data, operation) {
if (operation === "update") {
data.CreateDate = _dateToString(data.CreateDate);
data.LastModDate = _dateToString(data.LastModDate);
}
return data;
}
}
}),
toolbar: ["create"],
sortable: true,
columns: [
{ field: "EquipmentModelId", title: "Name", template: "# if (Tooltip != null) { #" +
"<span data-toggle=\"tooltip\" title=\"#=Tooltip#\">#=FriendlyName#</span>" +
"# } else { #" +
"<span data-toggle=\"tooltip\" title=\"#=Tooltip#\">#=FriendlyName#</span>" +
"# } #", editor: equipmentModelDropDownEditor },
{ field: "Unit", title: "Unit", width: "180px", editor: unitNumericEditor },
{ field: "Price", title: "Price", width: "180px", editor: priceNumericEditor, format: "{0:c}" },
{ field: "Budget", title: "Budget", width: "180px", editor: budgetStaticEditor, format: "{0:c}", },
{ field: "Actual", title: "Actual", widht: "180px" },
{ command: ["edit", "destroy"], title: " ", width: "211px" }
],
editable: "inline",
dataBound: function(e) {
$('#@gridName').slideDown("slow");
}
});
});
</script>
How do I keep the page blank until all of them have loaded?
So I implemented inline editing on my grid, and it all works fine and saves fine. The only problem is that when I click the edit button, my drop downs start off on Index 0 (which is blank) but I want them to start on the value that was on the grid initially. So for example if I had two Rate Types, "Regular", and "Discount", and suppose that my row's rate type is "Discount". When I click the edit button, I expect the Dropdown to be defaulted to "Discount" which was the row's initial value, but instead it is just a blank value at index 0. Please help! Here is the code :
Gird :
@(Html.Kendo().Grid<CirculationDatabase.DAL.Publication>()
.Name("PubGrid")
.Columns(columns =>
{
columns.Bound(p => p.PubName).Title("Publication").Width("300px").HeaderHtmlAttributes(new { style = "font-size:13px;" });
})
.Pageable()
.Sortable()
.Scrollable()
.ClientDetailTemplateId("template")
.HtmlAttributes(new { style = "height:730px;" })
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(20)
.Events(events => events.Error("error_handler"))
.Model(model => model.Id(p => p.Publication_ID))
.Create(update => update.Action("EditingPopup_Create", "Grid"))
.Read(read => read.Action("ReturnPublicationInfo", "Publication"))
.Update(update => update.Action("EditingPopup_Update", "Grid"))
.Destroy(update => update.Action("EditingPopup_Destroy", "Grid"))
)
.Events(events => events.DataBound("dataBound"))
)
<script id="template" type="text/kendo-tmpl">
@(Html.Kendo().TabStrip()
.Name("tabStrip_#=Publication_ID#")
.SelectedIndex(0)
.Animation(animation => animation.Open(open => open.Fade(FadeDirection.In)))
.Items(items =>
{
items.Add().Text("Domestic").Content(@<text>
@(Html.Kendo().Grid<CirculationDatabase.DAL.proc_getPubGrid>()
.Name("subDomestic_#=Publication_ID#")
.Columns(columns =>
{
columns.Bound(x => x.PriceAmount).ClientTemplate("$" + "\\#=PriceAmount\\#");
columns.Bound(x => x.Rate).EditorTemplateName("rateEditor");
columns.Bound(x => x.DurationPeriod).Title("Duration (Months)").EditorTemplateName("durationEditor");
columns.Command(x => x.Edit());
})
.Editable(editable => editable.Mode(GridEditMode.InLine))
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(5)
.Events(events =>
{
events.Error("error_handler");
events.RequestEnd("onRequestEnd");
})
.Model(model =>
{
model.Id(p => p.Price_ID);
model.Id(i => i.Duration_ID);
model.Field(i => i.DurationPeriod).DefaultValue(ViewData["DurationPeriod"] as CirculationDatabase.DAL.proc_getPubGrid);
})
.Create(update => update.Action("EditingPopup_Create", "Grid"))
.Read(read => read.Action("ReturnPublicationInfoSubgrid", "Publication", new { pubID = "#=Publication_ID#", type = "Domestic" }))
.Update(update => update.Action("UpdatePublicationInfo", "Publication").Data("dropDownValues"))
.Destroy(update => update.Action("EditingPopup_Destroy", "Grid"))
)
.Pageable()
.Sortable()
.ToClientTemplate())
</text>);
items.Add().Text("Foreign").Content(@<text>
@(Html.Kendo().Grid<CirculationDatabase.DAL.proc_getPubGrid>()
.Name("subForeign_#=Publication_ID#")
.Columns(columns =>
{
columns.Bound(x => x.PriceAmount).ClientTemplate("$" + "\\#=PriceAmount\\#");
columns.Bound(x => x.Rate).EditorTemplateName("rateEditor");
columns.Bound(x => x.DurationPeriod).Title("Duration (Months)").EditorTemplateName("durationEditor");
columns.Command(x => x.Edit());
})
.Editable(editable => editable.Mode(GridEditMode.InLine))
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(5)
.Model(model =>
{
model.Id(i => i.Price_ID);
})
.Events(events =>
{
events.Error("error_handler");
events.RequestEnd("onRequestEnd");
})
.Create(update => update.Action("EditingPopup_Create", "Grid"))
.Read(read => read.Action("ReturnPublicationInfoSubgrid", "Publication", new { pubID = "#=Publication_ID#", type = "Foreign" }))
.Update(update => update.Action("UpdatePublicationInfo", "Publication").Data("dropDownValues"))
.Destroy(update => update.Action("EditingPopup_Destroy", "Grid"))
)
.Pageable()
.Sortable()
.ToClientTemplate())
</text>);
}).ToClientTemplate())
</script>
Edit Template :
@model CirculationDatabase.DAL.proc_getPubGrid
@(Html.Kendo().DropDownList()
.Name("Rate")
.DataTextField("Rate")
.DataValueField("Rate_ID")
.DataSource(source =>
{
source.Custom()
.ServerFiltering(true)
.Type("aspnetmvc-ajax") //Set this type if you want to use DataSourceRequest and ToDataSourceResult instances
.Transport(transport =>
{
transport.Read("populateRateDDL", "Publication");
})
.Schema(schema =>
{
schema.Data("Data") //define the [data](http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#configuration-schema.data) option
.Total("Total"); //define the [total](http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#configuration-schema.total) option
});
})
)
Controller :
using CirculationDatabase.DAL;
using Kendo.Mvc.UI;
using Kendo.Mvc.Extensions;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Data;
namespace CirculationDatabase.Controllers
{
public class PublicationController : Controller
{
private readonly EntitiesModel db = new EntitiesModel();
public ActionResult Publications()
{
if (Request.IsAuthenticated)
{
return View();
}
else
{
return RedirectToAction("Login", "Login");
}
}
public ActionResult ReturnPublicationInfo([DataSourceRequest] DataSourceRequest gridRequest)
{
IList<proc_getPubs> myViewModels = new List<proc_getPubs>();
foreach (proc_getPubs pub in db.Proc_getPubs())
{
myViewModels.Add(pub);
}
return Json(myViewModels.ToDataSourceResult(gridRequest), JsonRequestBehavior.AllowGet);
}
public ActionResult ReturnPublicationInfoSubgrid([DataSourceRequest] DataSourceRequest gridRequest, int pubID, string type)
{
IList<proc_getPubGrid> myViewModels = new List<proc_getPubGrid>();
foreach (proc_getPubGrid pub in db.Proc_getPubGrid(pubID, type))
{
myViewModels.Add(pub);
}
return Json(myViewModels.ToDataSourceResult(gridRequest), JsonRequestBehavior.AllowGet);
}
public ActionResult populateRateDDL([DataSourceRequest] DataSourceRequest dropDownRequest)
{
IList<RateType> myViewModels = new List<RateType>();
foreach (RateType rate in db.ExecuteStoredProcedure<RateType>("proc_getRateType", null))
{
RateType r = new RateType()
{
Rate_ID = rate.Rate_ID,
Rate = rate.Rate
};
myViewModels.Add(r);
}
return Json(myViewModels.ToDataSourceResult(dropDownRequest), JsonRequestBehavior.AllowGet);
}
[HttpPost]
public ActionResult populateDurationDDL([DataSourceRequest] DataSourceRequest dropDownRequest)
{
IList<Duration> myViewModels = new List<Duration>();
foreach (Duration duration in db.ExecuteStoredProcedure<Duration>("proc_getDuration", null))
{
Duration dur = new Duration()
{
Duration_ID = duration.Duration_ID,
DurationPeriod = duration.DurationPeriod
};
myViewModels.Add(dur);
}
return Json(myViewModels.ToDataSourceResult(dropDownRequest), JsonRequestBehavior.AllowGet);
}
[AcceptVerbs(HttpVerbs.Post)]
public ActionResult UpdatePublicationInfo([DataSourceRequest] DataSourceRequest request, Price newPrice, string durationValue, string rateValue)
{
if (ModelState.IsValid)
{
Price priceToUpdate = db.Prices.FirstOrDefault(s => s.Price_ID == newPrice.Price_ID);
priceToUpdate.Duration_ID = Convert.ToInt32(durationValue);
priceToUpdate.Rate_ID = Convert.ToInt32(rateValue);
priceToUpdate.PriceAmount = newPrice.PriceAmount;
db.SaveChanges();
}
return Json(new[] { newPrice }.ToDataSourceResult(request, ModelState));
}
protected override void Dispose(bool disposing)
{
db.Dispose();
base.Dispose(disposing);
}
}
}
Entity :
public partial class proc_getPubGrid
{
private int _publication_ID;
public virtual int Publication_ID
{
get
{
return this._publication_ID;
}
set
{
this._publication_ID = value;
}
}
private string _pubName;
public virtual string PubName
{
get
{
return this._pubName;
}
set
{
this._pubName = value;
}
}
private decimal? _priceAmount;
public virtual decimal? PriceAmount
{
get
{
return this._priceAmount;
}
set
{
this._priceAmount = value;
}
}
private int? _durationPeriod;
public virtual int? DurationPeriod
{
get
{
return this._durationPeriod;
}
set
{
this._durationPeriod = value;
}
}
private string _rate;
public virtual string Rate
{
get
{
return this._rate;
}
set
{
this._rate = value;
}
}
private int? _duration_ID;
public virtual int? Duration_ID
{
get
{
return this._duration_ID;
}
set
{
this._duration_ID = value;
}
}
private int? _rate_ID;
public virtual int? Rate_ID
{
get
{
return this._rate_ID;
}
set
{
this._rate_ID = value;
}
}
private int? _price_ID;
public virtual int? Price_ID
{
get
{
return this._price_ID;
}
set
{
this._price_ID = value;
}
}
}