I have a grid in which one of the columns is a dropdown. I'd like to enable the Multi Filter checkboxes for this column.
How can I do this? If I set Multi to true it just displays the usual dropdown filter menu.
I have a MultiSelectFor using ajax read where I return a list of SelectList Items. Some of the SelectList items have their selected property set to true. The MultiSelect does not display those items as being pre-selected.
I have attached a file showing the View and the Controller code. (in VB)
There has to be a setup issue somewhere. I copied and pasted the Kendo dropdown example.
However the dropdown never calls my method in my controller. It renders on my page(empty).
What am I missing?
@(Html.Kendo().DropDownList()
.Name("myMainName")
.DataTextField("CustomerName")
.DataValueField("CustomerID")
.DataSource(s => {
s.Read(read =>
{
read.Action("GetCustomerList", "MyController");
})
})
.SelectedIndex(0)
)
_Layout
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/kendo")
@Styles.Render("~/bundles/css")
@Styles.Render("~/Content/kendo/css")
BundleConfig
{
public static void RegisterBundles(BundleCollection bundles)
{
bundles.Add(new ScriptBundle("~/bundles/jquery").Include("~/Scripts/jquery-{version}.js"));
bundles.Add(new StyleBundle("~/bundles/css").Include("~/Content/*.css"));
bundles.Add(new ScriptBundle("~/bundles/kendo").Include(
"~/Scripts/kendo/kendo.all.min.js",
// "~/Scripts/kendo/kendo.timezones.min.js", // uncomment if using the Scheduler
"~/Scripts/kendo/kendo.aspnetmvc.min.js"));
bundles.Add(new StyleBundle("~/Content/kendo/css").Include(
"~/Content/kendo/kendo.common-bootstrap.min.css",
"~/Content/kendo/kendo.bootstrap.min.css"));
bundles.IgnoreList.Clear();
}
Here is the code I am using to create the TreeView...
01.
@(Html.Kendo().TreeView()
02.
.Name(
"CategoryTree"
)
03.
.TemplateId(
"TreeViewTemplate"
)
04.
.HtmlAttributes(
new
{ })
05.
.DataTextField(
"Description"
)
06.
.AutoScroll(
false
)
07.
.LoadOnDemand(
true
)
08.
.Events(e => e.Select(
"_CategoryChooserView_OnCategorySelected"
))
09.
.Events(e => e.Expand(
"_CategoryChooserView_OnCategoryExpand"
))
10.
.Events(e => e.Collapse(
"_CategoryChooserView_OnCategoryCollapsed"
))
11.
.Animation(
true
)
12.
//.DataSpriteCssClassField("DataSpriteCSSClass")
13.
.DataSource(d => d
14.
.Model(m => m
15.
.Id(
"CategoryCode"
)
16.
.HasChildren(
"HasChildren"
)
17.
)
18.
.Read(read => read.Action(
"ListSubCategories"
,
"Services"
))
19.
.Events(e => e.RequestEnd(
"_CategoryChooserView_OnCategoryRequestEnd"
))
20.
.Events(e => e.RequestStart(
"_CategoryChooserView_OnCategoryRequestStart"
))
21.
))
After the Treeview is instantiated, I want to call a JavaScript function like this one to expand and select a particular node. The node is not necessarily a top level node - it could be quite a ways down in the hierarchy.
01.
function
_CategoryChooserView_SelectNode(CategoryCode)
02.
{
03.
04.
if
(CategoryCode.length > 0)
05.
{
06.
var
TreeView = $(
"#CategoryTree"
).data(
"kendoTreeView"
);
07.
var
DataItem = TreeView.dataSource.get(CategoryCode);
08.
09.
if
(DataItem)
10.
{
11.
var
Node = treeview.findByUid(DataItem.uid);
12.
treeview.select(Node);
13.
14.
ScrollElementToScrollableParent(Node);
15.
}
16.
}
17.
}
The problem is that DataItem (line 7) comes back undefined every time, no matter what I feed "get()" method. It seems to me that with a client side Treeview that fetches its data from a remote source upon expansion of a node, this can never be possible.
How can I programmatically expand and work my way down to the node I want selected? I somehow need to expand each node down to the target node. Is it even possible?
Hello,
I'm having trouble getting the scheduler to display correctly when using JQuery 2.2.0. The times table is showing beside the days of the week instead of under it.
I've created a simple example here:
http://jsbin.com/lemadiqaju/1/edit?html,output
Any suggestions on how to get the scheduler working correctly?
Thank you.
We are trying to implement the Telerik Scheduler and we have been able to populate the radScheduler calendar with data when passed through the view, but we want to filter our results based on the range that is displayed on the calendar. We saw that we could do this with the .read method, but when we try and populate the calendar with the database connection, the Html helper reads the front end web configuration instead of the back end (web configuration file). Are there ways to fix this?
@(Html.Kendo().Scheduler<ExtendedStoreInformationDTO>()
.Name("scheduler")
.Date(new DateTime(2016, 6, 13))
.StartTime(new DateTime(2013, 6, 13, 7, 00, 00))
.Height(600)
.DataSource(d => d
.Model(m =>
{
m.Id(f => f.StoreID);
m.Field(f => f.Title).DefaultValue("Hello There");
})
.ServerOperation(true)
.Read(read => read.Action("Read", "Home").Data("getAdditionalData"))
)
.Views(views =>
{
views.DayView();
views.WorkWeekView();
views.WeekView();
views.MonthView(monthView => monthView.Selected(true));
views.AgendaView();
views.TimelineView();
})
.Timezone("Etc/UTC")
.WorkDayStart(1,0,0))
Hi
i have add Kendo grid in my view that fetch data from text inputs throw JS Code and it works good, i have add Edit and Destroy Command buttons but i don't need default class from the and i try to set classes as:
columns.Command(command =>
{
command.Edit().HtmlAttributes(new { @class = "btn btn-success" });
command.Destroy().HtmlAttributes(new { @class = "btn btn-danger" });
});
but after grid has data i found two buttons has default class and when i use inspect element i see that:
<
a
class
=
"k-button k-button-icontext k-grid-edit btn btn-success"
href
=
"#"
><
span
class
=
"k-icon k-edit"
></
span
>Edit</
a
>
<
a
class
=
"k-button k-button-icontext k-grid-delete btn btn-danger"
href
=
"#"
><
span
class
=
"k-icon k-delete"
></
span
>Delete</
a
>
and i see that class of bootstrap works as it should be in i remove class "k-button"
so please how can i do that and let bootstrap calsses works as i need ??
Full Grid Code:
@model MhafezClinic.Models.DBContext.PTData
@{
ViewBag.Title = "FindData";
}
<
h2
class
=
"text-danger text-center"
>الإستعلام عن المرضى فى جميع العيادات</
h2
>
<
fieldset
>
<
legend
class
=
"panel-heading panel text-primary"
dir
=
"rtl"
>
<
span
class
=
"glyphicon glyphicon-search"
></
span
>
<
span
>إبحث عن طريق الإسم أو رقم الملف الطبى أو رقم الهاتف ...</
span
>
</
legend
>
<
div
class
=
"panel panel-default k-pr"
>
<
div
class
=
"panel-heading"
>
<
table
class
=
"table table-bordered"
dir
=
"rtl"
>
<
tbody
>
<
tr
>
<
td
style
=
"width: 120px; text-align: center; font-size: medium; font-weight: bold; vertical-align:middle"
>
إسم المريض:
</
td
>
<
td
>
<
input
type
=
"text"
data-val
=
"false"
id
=
"PT_Name"
class
=
"form-control"
style
=
"margin:auto; min-width:250px;"
/>
</
td
>
<
td
style
=
"width: 120px; text-align: center; font-size: medium; font-weight: bold; vertical-align:middle"
>
رقم الملف الطبى:
</
td
>
<
td
>
<
input
type
=
"text"
data-val
=
"false"
id
=
"PT_Clinic_ID"
class
=
"form-control"
style
=
"width: 150px; margin:auto; text-align:center;"
/>
</
td
>
<
td
style
=
"width: 120px; text-align: center; font-size: medium; font-weight: bold; vertical-align:middle"
>
تليفون المريض:
</
td
>
<
td
>
<
input
type
=
"text"
data-val
=
"false"
id
=
"PT_Phone"
class
=
"form-control"
style
=
"width: 150px; margin:auto; text-align:center;"
/>
</
td
>
</
tr
>
<
tr
>
<
td
style
=
"text-align:center;"
colspan
=
"6"
>
<
input
id
=
"showGrid"
style
=
"font-size: medium; font-weight: bold"
type
=
"submit"
value
=
"إستعلام"
class
=
"btn btn-primary"
/>
</
td
>
</
tr
>
</
tbody
>
</
table
>
<
br
/>
<
div
class
=
"k-rtl"
>
@(Html.Kendo().Grid<
MhafezClinic.Models.DBContext.PTData
>()
.Name("SHPTData")
.HtmlAttributes(new { style = "font-weight:bold; vertical-align:middle; font-size:medium;" })
.AutoBind(false)
.Columns(columns =>
{
columns.Bound(e => e.ClinicCode)
.ClientTemplate("#=ClinicCode.Clinic_Code_Name#").Title("كود العيادة")
.Sortable(false).HtmlAttributes(new { @style = "text-align:center;" })
.HeaderHtmlAttributes(new { @style = "font-weight:bold; text-align:center;" }).Width(75)
.Filterable(false);
columns.Bound(e => e.PT_Clinic_ID)
.HtmlAttributes(new { @style = "text-align:center;" })
.HeaderHtmlAttributes(new { @style = "font-weight:bold; text-align:center;" }).Width(165)
.Title("رقم الملف الطبى");
columns.Bound(e => e.PT_Name)
.HeaderHtmlAttributes(new { @style = "font-weight:bold; text-align:center;" })
.Title("إسم المريض").Width(145);
columns.Bound(e => e.PT_Address)
.HeaderHtmlAttributes(new { @style = "font-weight:bold; text-align:center;" }).Filterable(false)
.Sortable(false).Title("العنوان").Width(192);
columns.Bound(e => e.PT_Phone)
.HtmlAttributes(new { @style = "text-align:center;" })
.HeaderHtmlAttributes(new { @style = "font-weight:bold; text-align:center;" }).Width(109)
.Filterable(false).Sortable(false).Title("رقم التليفون");
columns.Bound(e => e.PT_Age)
.HtmlAttributes(new { @style = "text-align:center;" })
.HeaderHtmlAttributes(new { @style = "font-weight:bold; text-align:center;" }).Width(50)
.Filterable(false).Sortable(false).Title("السن");
columns.Bound(e => e.PT_First_Visit_Date)
.HtmlAttributes(new { @style = "text-align:center;" })
.HeaderHtmlAttributes(new { @style = "font-weight:bold; text-align:center;" }).Width(105)
.Filterable(false).Sortable(false).Title("تاريخ أول زيارة");
columns.Command(command =>
{
command.Edit().HtmlAttributes(new { @class = "btn btn-success" });
command.Destroy().HtmlAttributes(new { @class = "btn btn-danger" });
});
})
.Pageable()
.Sortable()
.Filterable(filterable => filterable
.Operators(operators => operators
.ForString(str => str.Clear()
.StartsWith("يبدء بـ")
.IsEqualTo("يساوى").IsNotEqualTo("لا يساوى")
))
.Operators(operators => operators
.ForNumber(str => str.Clear()
.IsEqualTo("يساوى").IsNotEqualTo("لا يساوى")
.IsGreaterThanOrEqualTo("أكبر من أو يساوى")
.IsGreaterThan("أكبر من").IsLessThanOrEqualTo("أقل من أو يساوى")
.IsLessThan("أقل من")
))
.Messages(m =>
m.And("و").Or("أو")
.Filter("بحث").Clear("إلغاء")
.Info("حدد فلتر البحث الذى تريده"))
)
.Editable(editable => editable.Mode(GridEditMode.PopUp))
.DataSource(source => source.Ajax()
.Model(model =>
{
model.Id(e => e.PT_ID);
model.Field(e => e.PT_ID).Editable(false);
})
.Events(events => events.Error("error_handler"))
.Read(read => read.Action("GetDataAll", "PTDatas").Data("getAdditionalData"))
.Update(update => update.Action("Update_Order", "Orders"))
.Destroy(des => des.Action("Update_Order", "Orders"))
))
</
div
>
</
div
>
</
div
>
</
fieldset
>
@section scripts{
<
script
type
=
"text/javascript"
>
function error_handler(e) {
if (e.errors) {
var message = "Errors:\n";
$.each(e.errors, function (key, value) {
if ('errors' in value) {
$.each(value.errors, function () {
message += this + "\n";
});
}
});
alert(message);
}
}
</
script
>
<
script
>
function getAdditionalData() {
return {
PT_Name: $('#PT_Name').val(),
PT_Clinic_ID: $('#PT_Clinic_ID').val(),
PT_Phone: $('#PT_Phone').val(),
};
}
$(document).ready(function () {
$('#showGrid').click(function () {
if ((!$('#PT_Name').val()) && (!$('#PT_Clinic_ID').val()) && (!$('#PT_Phone').val())) {
$("#SHPTData").data("kendoGrid").dataSource.data([]);
alert("من فضلك ادخل القيمة المراد البحث عنها");
return;
}
else if (($('#PT_Name').val() && $('#PT_Clinic_ID').val()) || ($('#PT_Name').val() && $('#PT_Phone').val()) || ($('#PT_Clinic_ID').val() && $('#PT_Name').val())) {
$("#SHPTData").data("kendoGrid").dataSource.data([]);
alert("لا يمكن البحث بأكثر من شرط فى نفس الوقت");
return;
}
else {
$('#SHPTData').data('kendoGrid').dataSource.fetch();
}
});
});
</
script
>
}
and please are there is any way to display message in grid when there is No Data ?
I am trying to draw vertical line on category axis so that I can differentiate previous values and future from that point.
Razor view:
@(Html.Kendo().Chart()
.Name("chart")
.Title("Scheduled Info")
.Title(title => title.Font("24px Arial"))
.Transitions(false)
.Legend(legend => legend
.Position(ChartLegendPosition.Bottom)
)
.HtmlAttributes(new {style = "border: 1px solid #1593cc;height: 400px;"})
.Legend(true)
.Legend(legend => legend.Font("medium Arial"))
.Series(series =>
{
series.Line(Model.ScheduledD0)
.Style(ChartLineStyle.Smooth)
.Color("#ee7624")
.Name("D0")
.Markers(x => x.Visible(false));
series.Line(Model.ScheduledA14)
.Style(ChartLineStyle.Smooth)
.Color("#1593cc")
.Name("A14")
.Markers(x => x.Visible(false));
})
.CategoryAxis(axis => axis
.Line(line => line.Visible(true))
.MajorGridLines(lines => lines.Visible(true))
.MajorTicks(lines => lines.Visible(false))
.Categories(Model.ScheduledPlotTime)
.Labels(labels=> labels.Step(4)))
.ValueAxis(axis => axis.Numeric()
.Max(100)
.Labels(labels => labels.Format("{0}%")))
)
Model:
public class graphs
{
public List<decimal> ScheduledA14 { get; set; }
public List<decimal> ScheduledD0 { get; set; }
public List<string> ScheduledPlotTime { get; set; }
}
I've run into an interesting issue.
I have a grid's initial page being set to a range of items equal to that of the item count appended to the front of the page Ex. 4 rows, equals initial page 401. If I click the center page button of the page navigation it displays the data. What makes even less sense is I have an identical grid on another page returned from a separate controller but the same model and configuration, it works just fine. The only difference between the two grids is the parameters that are supplied to fetch the data, along with the route to allow the additional parameter in the URL.
The first thing i noticed is in my console I did have two errors regarding the sourcemaps for kendo.all.min.js.map and the kendo.aspnetmvc one as well. I grabbed replaced the existing ones from the original location and all cleared up in the console yet this issue still remains.
Is this a known issue on MVC 6 helpers?
Things I've tried. I supplied the model's row count in the datasource to override. Turning paging off makes it render correctly, though I would very much like for it work as it works on the same model elsewhere. I have also allowed ServerOperations to fetch the paging information again, but it acts like it doesnt know it needs to.
The model is an
IEnumerable<Document>
@(Html.Kendo().Grid<
Document
>(Model)
.Name("bookpage-grid")
.Columns(columns =>
{
columns.Bound(m => m.ImageIndicator).Width(35).Title("Img").Filterable(false);
columns.Bound(m => m.Instrument).Width(130);
columns.Bound(m => m.Name).Width(200);
columns.Bound(m => m.NameType).Width(75);
columns.Bound(m => m.Type).Width(75);
columns.Bound(m => m.Date).Width(75);
})
.ToolBar(toolbar =>
{
toolbar.Pdf();
toolbar.Excel();
})
.Excel(excel => excel.FileName(Model.FirstOrDefault().BookPage + "Export.xslx"))
.Selectable()
.Groupable()
.Sortable()
.Scrollable()
.Filterable()
.Pageable()
.DataSource(datasource => datasource
.Ajax()
.PageSize(10)
.ServerOperation(false)
)
)