Hi,
I'm a beginner in the use of your framework.
I'm trying to use a listboxcontrol containing hours that I can select for 7 different days of the week.
When I oepn the window containing my listbox I refresh my columns with data already selected for the day I'm working on or reloading my listbox (if no data was saved.
Here is my function :
function onOpenRefresh(e) {
var caseCochee = "";
// On récupère la première case cochée
if ($("#header-chb-lundi").is(':checked')) {
caseCochee = "lundi";
} else if ($("#header-chb-mardi").is(':checked')) {
caseCochee = "mardi";
} else if ($("#header-chb-mercredi").is(':checked')) {
caseCochee = "mercredi";
} else if ($("#header-chb-jeudi").is(':checked')) {
caseCochee = "jeudi";
} else if ($("#header-chb-vendredi").is(':checked')) {
caseCochee = "vendredi";
} else if ($("#header-chb-samedi").is(':checked')) {
caseCochee = "samedi";
} else if ($("#header-chb-dimanche").is(':checked')) {
caseCochee = "dimanche";
} else {
alert("Vous n'avez pas choisi de jour !!!");
return;
}
var sourceUrl = "@Url.Action("GetTranchesHoraires", "EngagementRadioSM")";
var dataSource1 = new kendo.data.DataSource({
transport: {
read: sourceUrl,
dataType: "jsonp"
}
});
// On réinit nos deux listbox
var listeTranches1 = $("#listbox1").data("kendoListBox");
var listeTranches2 = $("#listbox2").data("kendoListBox");
listeTranches1.setDataSource(dataSource1);
listeTranches1.dataSource.read();
listeTranches2.dataSource.data([]); // On vide à gauche
// On crée un tableau trié
var mesTranchesTrie = [];
if (mesTranches.length > 0 && mesTranches.find(function (e) { return e.sweekDay === caseCochee; })) {
debugger;
mesTranchesTrie = mesTranches;
mesTranchesTrie.sort(function (a, b) { return b["nid_tranche"] - a["nid_tranche"]; });
var tranche = [];
for (var k = 0; k < mesTranchesTrie.length; k++) {
if (mesTranchesTrie[k].sweekDay == caseCochee) {
tranche.push({ nid_tranche_horaire: mesTranchesTrie[k].nid_tranche, slibelle: mesTranchesTrie[k].slibelle });
}
}
debugger;
var d2 = new kendo.data.DataSource({ data: tranche });
d2.read();
listeTranches2.setDataSource(d2);
var d1 = listeTranches1.dataSource;
var dret = new kendo.data.DataSource();
for (var i = 0; i < d2._data.length; i++) {
var idTanche2 = d2._data[i].nid_tranche_horaire;
for (var j = 0; j < d1._data.length; j++) {
var idTanche1 = d1._data[j].nid_tranche_horaire;
if (idTanche2 != idTanche1) {
dret.add({ nid_tranche_horaire: d1._data[j].nid_tranche_horaire, slibelle: d1._data[j].slibelle });
}
}
d1 = dret;
dret = new kendo.data.DataSource();
}
debugger;
listeTranches1.setDataSource(d1);
} else {
debugger;
listeTranches1.setDataSource(dataSource1);
listeTranches1.dataSource.read(); // On remplit à droite
}
};
And here is my EngagementRadioSM function alloowing me to get the hours that I put in my Listbox:
public JsonResult GetTranchesHoraires()
{
List<TrancheHoraire> lls_ret = new List<TrancheHoraire>();
var list = _context.P_GCC_GET_TRANCHES_HORAIRES();
foreach (var line in list)
{
TrancheHoraire obj = new TrancheHoraire
{
nid_tranche_horaire = line.nid_tranche_horaire,
slibelle = line.slibelle
};
obj.bisValid = false;
lls_ret.Add(obj);
}
return Json(lls_ret, JsonRequestBehavior.AllowGet);
}
mesTranches is an array where I put my data for the different selected hours and days.
My main problem is that I cannot reset my listbox 1 when I already have data for the selected day in mesTranches ...
Hope my explanation isn't too bad (I'm french ...)
Thanx a lot for your help
Antoine
<
div
class
=
"k-scrollbar k-scrollbar-vertical"
style
=
"width: 18px;"
><
div
style
=
"width:1px;height:120px"
></
div
></
div
>
<
div
class
=
"k-scrollbar k-scrollbar-vertical"
style
=
"width: 18px;"
><
div
style
=
"width:1px;height:717px"
></
div
></
div
>
@(Html.Kendo().Splitter()
.Name("DeliverableSplitter")
.Orientation(SplitterOrientation.Horizontal)
.Panes(h =>
{
h.Add().Size("85%").Content(
(Html.Kendo().Splitter().Name("GridsSlitter")
.Orientation(SplitterOrientation.Vertical)
.Panes(v =>
{
v.Add().Size("50%").Content(@<
div
>@(Html.Kendo().Grid<
DeliverableListViewModel
>()
.Name("listOfDeliverables")
.AutoBind(true)
.Events( e => e.DataBound("setDeliverableGridScrollHeight"))
.Columns(columns =>
{
columns.Bound(p => p.Name);
columns.Bound(p => p.Number);
columns.Bound(p => p.Code);
columns.Bound(p => p.Discpline);
columns.Bound(p => p.Acf).Title("Allocated Current Forecast");
})
.ToolBar(toolbar => toolbar.Template("<
button
class
=
'k-button k-button-icontext'
onClick
=
'customExport()'
><
span
class
=
'k-icon k-i-excel'
></
span
>Export to Excel</
button
>" +
"<
button
class
=
'k-button k-button-icontext'
onClick
=
'customImport()'
><
span
class
=
'k-icon k-i-excel'
></
span
>Import from Excel</
button
>"))
.Sortable()
.Scrollable(scrollable => scrollable.Virtual(true))
.Selectable(sel =>
{
sel.Mode(GridSelectionMode.Single);
sel.Type(GridSelectionType.Row);
})
.Filterable(filterable => filterable
.Extra(false)
.Operators(operators => operators
.ForString(str => str.Clear()
.StartsWith("Starts with")
.IsEqualTo("Is equal to")
.IsNotEqualTo("Is not equal to")
)))
.Groupable()
.Resizable(r => r.Columns(true))
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(10)
.Events(e => e.Error("error_handler"))
.Read(read => read.Action("Deliverables_Read", "Deliverable").Data("passProjectWbsAndActivityId"))
))
</
div
>);
v.Add().Size("40%").Content(@<
div
><
div
id
=
"details"
></
div
></
div
>);
}).ToHtmlString()));
h.Add().Content(@<
div
><
div
id
=
"earnedHour"
></
div
><
div
class
=
"clear"
></
div
><
div
id
=
"performanceFactor"
></
div
></
div
>);
}))
Hello,
I need to replace the content of the unselected rows with empty string, or replace with an empty row, upon doing a PDF export.
For example if I have the following grid:
ID Description
1 Row 1
2 Row 2
3 Row 3
If I leave row 2 unselected it should be exported the following way:
ID Description
1 Row 1
3 Row 3
Here is my code:
@(Html.Kendo().Grid(Model)
.Name("Grid")
.ToolBar(toolbar => toolbar.Create().Text("Nuevo").HtmlAttributes(new { @class = "" }))
.ToolBar(tools => tools.Pdf().Text("Imprimir"))
.Pdf(pdf => pdf
.AllPages()
.AvoidLinks()
.PaperSize("A4")
.Scale(0.8)
.Margin("2cm", "1cm", "1cm", "1cm")
.RepeatHeaders()
.TemplateId("page-template")
.FileName("Ficha.pdf")
.ProxyURL(Url.Action("Pdf_Export_Save", "Grid")))
.Pageable(pager => pager
.Refresh(true)
)
.Columns(columns =>
{
columns.Bound(p => p.IdFicha).Title("Numero");
columns.Bound(p => p.Fecha).Format("{0:dd/MM/yyyy}");
columns.Bound(p => p.Descripcion).Title("Descripción");
columns.Bound(p => p.Comentarios);
columns.ForeignKey(x => x.IdCliente, (System.Collections.IEnumerable)ViewData["clientes"], "IdCliente", "Nombre").Hidden();
columns.Command(command =>
{
command.Edit().HtmlAttributes(new { @class = "btn btn-primary" })
.Text("Editar")
.UpdateText("Guardar")
.CancelText("Cancelar");
command.Destroy().Text("Eliminar");
});
})
.Editable(editable => editable.Mode(GridEditMode.PopUp).Window(w => w.Title("Fichas")))
.Pageable(p => p
.Messages(m => m
.Display("Mostrando {0}-{1} de {2} registros")
.Empty("No se encontraron registros")
.First("Ir a la primera página")
.Last("Ir a la última página")
.Next("Ir a la página siguiente")
.Previous("Ir a la página anterior")
)
)
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("Ficha_Read", "Home").Data("additionalData").Type(System.Web.Mvc.HttpVerbs.Post))
)
.Sortable()
.Selectable(selectable => selectable.Mode(GridSelectionMode.Multiple))
.Pageable(x => { x.Enabled(false); })
.DataSource(dataSource => dataSource
.Ajax()
.ServerOperation(false)
.Model(model => model.Id(p => p.IdFicha))
.Destroy(update => update.Action("Ficha_Destroy", "Home"))
.Update(update => update.Action("Ficha_Update", "Home"))
.Create(update => update.Action("Ficha_Create", "Home").Data("additionalData").Type(System.Web.Mvc.HttpVerbs.Post))
)
.Events(e => e.PdfExport("PdfExport"))
<script>
function PdfExport(e) {
if (!exportFlag) {
e.sender.showColumn(3);
e.preventDefault();
exportFlag = true;
setTimeout(function () {
e.sender.saveAsPDF();
});
} else {
e.sender.hideColumn(3);
exportFlag = false;
}
}
</script>
Thanks
Hi all,
I've got a slight problem when displaying data from my model. My model is simple and straight forward:
01.
public
class
TableSchema
02.
{
03.
public
TableSchema()
04.
{
05.
Columns =
new
List<ColumnDescription>();
06.
}
07.
08.
public
string
TableName {
get
;
set
; }
09.
public
List<ColumnDescription> Columns {
get
;
set
; }
10.
}
I'm displaying some of the data in a Kendo Grid which is working without problem. The grid is displaying fine. I want to use a custom editor template to open a popup which displays the "TableName" property and another grid which contains the "List<ColumnDescription> Columns" property. Here is the code for my main grid which displays the TableSchema model:
01.
@model IEnumerable<
ServiorInventaire.Shared.Models.Dynamic.TableSchema
>
02.
03.
@(Html.Kendo().Grid(Model)
04.
.Name("ItemTypes")
05.
.NoRecords(Language.ItemsGridNoRecords)
06.
.Columns(columns =>
07.
{
08.
columns.Bound(p => p.TableName).Title(Language.ItemsGridTableName).Width(250);
09.
columns.Command(command => { command.Edit().Text(Language.Edit).UpdateText(Language.Save).CancelText(Language.Cancel); }).Width(250);
10.
})
11.
.Resizable(resizing => resizing.Columns(true))
12.
.Reorderable(reordering => reordering.Columns(true))
13.
.ToolBar(toolbar =>
14.
{
15.
toolbar.Create().Text(Language.Create);
16.
})
17.
.Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("TableSchema").Window(w => w.Title(Language.ItemsPageTitle)))
18.
.HtmlAttributes(new { style = "height: 550px;" })
19.
.Pageable(pageable => pageable
20.
.Input(true)
21.
.Numeric(true)
22.
.Info(true)
23.
.PreviousNext(true)
24.
.Refresh(true)
25.
.PageSizes(false)
26.
)
27.
.Sortable()
28.
.Scrollable(scr => scr.Height(430))
29.
.Filterable()
30.
.DataSource(dataSource => dataSource
31.
.Ajax()
32.
.PageSize(20)
33.
.ServerOperation(false)
34.
.Model(model => model.Id(p => p.TableName))
35.
.Create(create => create.Action("EditingPopup_Create", "Grid"))
36.
.Update(update => update.Action("EditingPopup_Update", "Grid"))
37.
)
38.
)
And finally, there is the code for my custom editor template:
01.
@model ServiorInventaire.Shared.Models.Dynamic.TableSchema
02.
03.
<
div
class
=
"editor-label"
>
04.
@Html.LabelFor(model => model.TableName)
05.
</
div
>
06.
<
div
class
=
"editor-field"
>
07.
@Html.Kendo().TextBoxFor(model => model.TableName)
08.
</
div
>
09.
10.
<
div
class
=
"editor-label"
>
11.
@Html.LabelFor(model => model.Columns)
12.
</
div
>
13.
<
div
class
=
"editor-field"
>
14.
@(Html.Kendo().Grid(Model.Columns)
15.
.Name("Columns")
16.
.NoRecords(Language.ItemsGridNoRecords)
17.
.Columns(columns =>
18.
{
19.
columns.Bound(p => p.ColumnName).Title(Language.ColumnsGridColumnName).Width(250);
20.
columns.Bound(p => p.Type).Title(Language.ColumnsGridType).Width(250);
21.
columns.Command(command => { command.Edit().Text(Language.Edit).UpdateText(Language.Save).CancelText(Language.Cancel); }).Width(250);
22.
})
23.
.ToolBar(toolbar =>
24.
{
25.
toolbar.Create().Text(Language.Create);
26.
})
27.
.Editable(editable => editable.Mode(GridEditMode.PopUp).Window(w => w.Title(Language.ItemsPageTitle)))
28.
.DataSource(dataSource => dataSource
29.
.Ajax()
30.
.Model(m =>
31.
{
32.
m.Id(p => p.ColumnName);
33.
})
34.
.PageSize(20)
35.
.ServerOperation(false)
36.
.Create(create => create.Action("EditingPopup_Create", "Grid"))
37.
.Update(update => update.Action("EditingPopup_Update", "Grid"))
38.
)
39.
)
40.
</
div
>
My problem now is that if I click "Edit" on the main grid to edit a "TableSchema", the popup shows up. The data for the TableName is showing without problem but the grid for the "Model.Columns" property is empty or even "null". Note, there is data in my database for the TableSchema and the Columns.
Do you know the problem and could anybody help me?
Thank you very much,
Sascha
Hi,
Is there an option to make the ComboBox not close until I've clicked elsewhere on the page? The scrolling function in the combobox kind of interferes with the scrolling on the actual page when scrolling with the mouse.
Below is my view containing my ListView as well as my controller. I can successfully edit and save my data client side, but it never calls the update action on my controller and I can't figure out why. I've copied the example from the Editing demo, but can't figure out what I'm missing. Any ideas?
@model IEnumerable<
Announcement
>
@{
Layout = "~/Views/Shared/_Kendo.cshtml";
}
@(Html.Kendo().ListView<
Announcement
>(Model)
.Name("listView")
.TagName("div")
.ClientTemplateId("template")
.DataSource(dataSource => dataSource
.Ajax()
.Model(model => model.Id("Id"))
.Read(read => read.Action("Index_Read", "ListView"))
.Update(update => update.Action("Index_Update", "ListView"))
)
.Editable()
)
<
script
type
=
"text/x-kendo-tmpl"
id
=
"template"
>
<
div
class
=
"form-group"
>
<
h4
>#:Category#</
h4
>
#:Description#
<
div
class
=
"text-right"
>
<
a
class
=
"btn btn-xs btn-primary k-edit-button"
href
=
"\\#"
>Edit</
a
>
<
a
class
=
"btn btn-xs btn-primary k-delete-button"
href
=
"\\#"
>Delete</
a
>
</
div
>
</
div
>
</
script
>
using System.Collections.Generic;
using Microsoft.AspNetCore.Mvc;
using My.BO;
using Kendo.Mvc.UI;
using Kendo.Mvc.Extensions;
namespace Web.Controllers
{
public class KendoController : Controller
{
// GET: /<
controller
>/
public IActionResult Index()
{
var model = GetAnnouncements();
return View(model);
}
public ActionResult Index_Read([DataSourceRequest] DataSourceRequest request)
{
return Json(GetAnnouncements().ToDataSourceResult(request));
}
[AcceptVerbs("Post")]
public ActionResult Index_Update([DataSourceRequest] DataSourceRequest request, Announcement announcement)
{
if (announcement != null && ModelState.IsValid)
{
//_service.UpdateHotTopic(topic);
}
return Json(ModelState.ToDataSourceResult());
}
private List<
Announcement
> GetAnnouncements()
{
return new List<
Announcement
>() {
new Announcement()
{
Id = 1,
Category = "Test 1",
Description = "Test 1"
},
new Announcement()
{
Id = 2,
Category = "Test 2",
Description = "Test 2"
}
};
}
}
}
Hello guys, i am trying to load a partial view in my tab-strip. each tab strip has a place-holder, where the partial view. will be displayed. One first load, the partial view displays that data. However, when i click the subsequent tabs, the tab-strip does not reload with the new data. i have added a tab re-load logic but, to no avail unfortunately.
Here is my Index.cshtml
01.
<div class=
"demo-section k-content"
>
02.
@(Html.Kendo().TabStrip()
03.
.Name(
"tabstrip"
)
04.
.Events(events => events
05.
.Select(
"onSelect"
)
06.
)
07.
.Animation(animation =>
08.
animation.Open(effect =>
09.
effect.Fade(FadeDirection.In)))
10.
.Items(tabstrip =>
11.
{
12.
tabstrip.Add().Text(
"James Bond"
)
13.
.Selected(
true
)
14.
.Content(@<text>
15.
<div id=
"partialPlaceHolder"
style=
"display:none;"
>
16.
17.
</div>
18.
</text>);
19.
20.
tabstrip.Add().Text(
"Earl Klugh"
)
21.
.Content(@<text>
22.
<div id=
"partialPlaceHolder"
style=
"display:none;"
>
23.
24.
</div>
25.
</text>);
26.
27.
tabstrip.Add().Text(
"Paul Play"
)
28.
.Content(@<text>
29.
<div id=
"partialPlaceHolder"
style=
"display:none;"
>
30.
31.
</div>
32.
</text>);
33.
34.
tabstrip.Add().Text(
"Chinonso M"
)
35.
.Content(@<text>
36.
<div id=
"partialPlaceHolder"
style=
"display:none;"
>
37.
38.
</div>
39.
</text>);
40.
})
41.
)
42.
</div>
43.
44.
<script type=
"text/javascript"
>
45.
46.
$(document).ready(
function
() {
47.
$(
"#tabstrip"
).kendoTabStrip({
48.
animation: {
49.
open: {
50.
effects:
"fadeIn"
51.
}
52.
}
53.
});
54.
55.
$.get(
'/Parent/MyAction'
, { id: 1 },
function
(data) {
56.
57.
$(
'#partialPlaceHolder'
).html(data);
58.
/* little fade in effect */
59.
$(
'#partialPlaceHolder'
).fadeIn(
'fast'
);
60.
})
61.
});
62.
63.
function
onSelect(e) {
64.
// alert($(e.item).find("> .k-link").text());
65.
//$(e.contentElement).html("");
66.
var
tabName = $(e.item).find(
"> .k-link"
).text();
67.
var
id = 0;
68.
69.
if
(tabName ==
"James Bond"
){ id = 1; }
70.
71.
else
if
(tabName ==
"Earl Klugh"
){ id = 2; }
72.
73.
else
if
(tabName ==
"Paul Play"
) { id = 3; }
74.
75.
else
if
(tabName ==
"Chinonso M"
){ id = 4; }
76.
77.
$.get(
'/Parent/MyAction'
, { id: id },
function
(data) {
78.
79.
$(
'#partialPlaceHolder'
).html(data);
80.
/* little fade in effect */
81.
$(
'#partialPlaceHolder'
).fadeIn(
'fast'
);
82.
})
83.
84.
//var ts = $("#tabstrip").data().kendoTabStrip;
85.
//var item = ts.items()[1];
86.
//ts.reload(item);
87.
88.
var
ts = $(
"#tabstrip"
).data().kendoTabStrip;
89.
ts.tabGroup.on(
'click'
,
'li'
,
function
(e) {
90.
ts.reload($(
this
));
91.
})
92.
}
93.
94.
</script>
Here is my ParentController.cs
01.
namespace
JustTestingWeb3.Controllers
02.
{
03.
public
class
ParentController : Controller
04.
{
05.
public
DbQuery db =
new
DbQuery();
06.
// GET: Parent
07.
public
ActionResult Index()
08.
{
09.
return
View();
10.
}
11.
12.
public
ActionResult MyAction(
int
id)
13.
{
14.
var result = db.GetChildren(id);
15.
return
PartialView(
"~/Views/Child/Detail.cshtml"
,result);
16.
}
17.
}
18.
}
Here is the picture, when if load the firs time and when i click on the next tab. Thanks for your help.
Why do my video controls look like the attached image versus the way the demo works? I've gone through styles, disabling what I thought might do it?
@(Html.Kendo().MediaPlayer()
.Name("heads-up-youtube-player-id-" + Model.LiveWidgetID)
.AutoPlay(Model.AutoPlay)
.AutoRepeat(Model.AutoRepeat)
.Navigatable(Model.Navigatable)
.FullScreen(Model.FullScreen)
.Volume(Model.Volume)
.Mute(Model.Mute)
.ForwardSeek(Model.ForwardSeek)
.Media(m => m
.Title(Model.WidgetTitle)
.Source(Model.YouTubeURL)
)
.HtmlAttributes(new { style = "height: 100%; background-color: transparent" })
)
Hello,
Did anyone knows how can I remove the part that is extra from menu?