I have a checkbox (chkRecurring) in the custom editor of the scheduler. I need to show/hide a div (divRecurring) clicking the checkbox. I wrote jquery click event but it doesn't work. And it doesn't throw any error in firebug or any other browser console.
@(Html.Kendo().Scheduler<
TaskViewModel
>()
.Name("schedulerJob")
.Date(DateTime.Today)
.StartTime(7, 0, 0)
.Height(700)
.Views(views =>
{
views.DayView();
views.WeekView();
views.TimelineView(v => v.Selected(true));
})
.Events(e =>
{
e.Edit("schedulerJob_edit");
e.Navigate("schedulerJob_navigate");
e.Remove("schedulerJob_remove");
e.Save("schedulerJob_save");
e.DataBinding("schedulerJob_dataBinding");
e.DataBound("schedulerJob_dataBound");
})
.Group(group => group.Resources("Techs").Orientation(SchedulerGroupOrientation.Vertical))
.Resources(resource =>
{
resource.Add(m => m.TechName)
.Title("Techs")
.Name("Techs")
.DataTextField("TechName")
.DataValueField("emm_code")
.DataSource(d => d.Read("Techs", "JOBS"));
})
.DataSource(d => d
.Model(m =>
{
m.Id(r => r.emm_code);
})
.ServerOperation(true)
.Read(r => r.Action("JobSchedule_Read", "JOBS").Data("passFilter"))
.Create("JobSchedule_Create", "JOBS")
.Update("JobSchedule_Update", "JOBS")
.Destroy("JobSchedule_Delete", "JOBS")
)
.Editable(e => {
e.TemplateId("schedulerJobEditor").Window(w => w.Title("Time Slot Reservation").Name("schedulerJobEditor"));
})
)
<
script
id
=
"schedulerJobEditor"
type
=
"text/x-kendo-template"
>
<
div
>
<
table
style
=
"border-collapse: initial;"
>
<
tr
>
<
td
align
=
"right"
>
<
label
for
=
"Start"
>Job Date:</
label
>
</
td
>
<
td
>
<
input
type
=
"text"
id
=
"jobDateTextbox"
class
=
"k-input k-textbox"
name
=
"start"
data-bind
=
"value: StartViewDate"
style
=
"border-width: 0px;"
disabled
=
"disabled"
>
</
td
>
<
td
align
=
"right"
>
<
label
for
=
"ReservedDate"
>Reserved On:</
label
>
</
td
>
<
td
>
<
input
type
=
"text"
id
=
"reservedDateTextbox"
class
=
"k-input k-textbox"
name
=
"reservedDate"
data-bind
=
"value: ReservationViewDate"
style
=
"border-width: 0px;"
disabled
=
"disabled"
>
</
td
>
</
tr
>
<
tr
>
<
td
align
=
"right"
>
<
label
for
=
"Start"
>Job Time:</
label
>
</
td
>
<
td
>
<
input
type
=
"text"
id
=
"jobTimeTextbox"
class
=
"k-input k-textbox"
name
=
"start"
data-bind
=
"value: StartViewTime"
>
</
td
>
<
td
align
=
"right"
>
<
label
for
=
"ReservedTime"
>Time:</
label
>
</
td
>
<
td
>
<
input
type
=
"text"
id
=
"reservedTimeTextbox"
class
=
"k-input k-textbox"
name
=
"reservedTime"
data-bind
=
"value: ReservationViewTime"
style
=
"border-width: 0px;"
disabled
=
"disabled"
>
</
td
>
</
tr
>
<
tr
>
<
td
align
=
"right"
>
<
label
for
=
"Duration"
>Duration:</
label
>
</
td
>
<
td
>
<
select
name
=
"duration"
id
=
"durationDropDownList"
data-bind
=
"value: Duration"
>
@foreach (var dur in (List<
ServicePROWeb.ServiceProWCFService.TypeMstr
>)HttpContext.Current.Session["DurationList"])
{
<
option
value
=
'@dur.ty_code_desc'
>@dur.ty_code_desc</
option
>
}
</
select
>
</
td
>
<
td
align
=
"right"
>
<
label
for
=
"ReservationID"
>Reservation ID:</
label
>
</
td
>
<
td
>
<
input
type
=
"text"
id
=
"reservationIDTextbox"
class
=
"k-input k-textbox"
name
=
"reservationID"
data-bind
=
"value: ReservationID"
style
=
"border-width: 0px;width:100%"
disabled
=
"disabled"
>
</
td
>
</
tr
>
<
tr
>
<
td
align
=
"right"
>
<
label
for
=
"TechName"
>Tech:</
label
>
</
td
>
<
td
colspan
=
"3"
>
<
input
type
=
"text"
class
=
"k-input k-textbox"
name
=
"techName"
data-bind
=
"value: TechName"
disabled
=
"disabled"
>
</
td
>
</
tr
>
<
tr
>
<
td
align
=
"right"
>
<
label
for
=
"Title"
>Reason for Reservation:</
label
>
</
td
>
<
td
colspan
=
"3"
>
<
input
type
=
"text"
class
=
"k-input k-textbox"
name
=
"title"
data-bind
=
"value: title"
style
=
"width: 60%;"
>
</
td
>
</
tr
>
<
tr
>
<
td
>
</
td
>
<
td
colspan
=
"3"
>
<
input
type
=
"checkbox"
id
=
"chkRecurring"
>Recurring Reservation
</
td
>
</
tr
>
</
table
>
<
br
/>
<
div
id
=
"divRecurring"
style
=
"width: 95%; margin-left: 5px; padding: 10px;"
>
<
input
type
=
"radio"
name
=
"rdoTech"
value
=
"c"
checked
=
"checked"
>Current Tech
<
input
type
=
"radio"
name
=
"rdoTech"
value
=
"a"
style
=
"margin-left: 15px;"
>All Techs
<
span
style
=
"margin-left: 24px;"
>Every: </
span
><
input
type
=
"text"
id
=
"everyTextbox"
class
=
"k-input k-textbox"
name
=
"recurrenceNumber"
data-bind
=
"value: RecurrenceNumber"
>
<
input
type
=
"radio"
name
=
"rdoRecurrenceFrequency"
value
=
"d"
checked
=
"checked"
style
=
"margin-left: 15px;"
>Day(s)
<
input
type
=
"radio"
name
=
"rdoRecurrenceFrequency"
value
=
"w"
style
=
"margin-left: 15px;"
>Weeks(s)
<
input
type
=
"radio"
name
=
"rdoRecurrenceFrequency"
value
=
"m"
style
=
"margin-left: 15px;"
>Month(s)
<
br
/><
br
/>
<
input
type
=
"checkbox"
id
=
"chkIncludeBusinessDays"
>Include Non-Business Days
<
span
style
=
"margin-left: 30px;"
>Until: </
span
><
input
type
=
"text"
id
=
"untilDateTextbox"
class
=
"k-input k-textbox"
name
=
"until"
>
<
span
style
=
"margin-left: 15px;"
>(max. 3 months)</
span
>
</
div
>
</
div
>
</
script
>
$(
'#chkRecurring'
).click(
function
() {
$(
"#divRecurring1"
).hide();
});
Thanks
I am having a play around with the grid. I have implemented the following example where batch update/create/delete from this post kendo-grid-batch-incell-save-changes-with-single-trigger-for-create-update-destroy. This works nicely where I get the rows being created/updated/deleted.
However, if I need to do some custom server side validation in a save event before the changes are committed - if there are any errors, is it possible to return the errors and set them back in the grid supposing my save send handler is:
function
sendSaveAllData() {
var
grid = $(
'#mygrid'
).data(
"kendoGrid"
);
var
finalData = ...;
// send the data with one request to the server
$.ajax({
url:
"@Url.Action("
SaveAllBatchChanges
", "
MyController
")"
,
data: finalData,
type:
"POST"
,
error:
function
() {
//Handle the server errors
},
success:
function
(data) {
//alert("update on server is completed");
showMessage(
'success'
,
'My Batch'
,
'Successfully saved batch changes.'
)
//refresh the grid
grid.dataSource._destroyed = [];
grid.dataSource.read();
}
})
}
With controller method:
public
ActionResult SaveAllBatchChanges(
[Bind(Prefix =
"updated"
)]List<BatchEditModel> updated,
[Bind(Prefix =
"new"
)]List<BatchEditModel> created,
[Bind(Prefix =
"deleted"
)]List<BatchEditModel> destroyed)
{
// do some validation before notifying server
// save if valid
return
Json(
"Success!"
);
}
At the minute I show a popup message to the user which reads success - but I haven't got any code in place currently to do the validate until I find something concrete to put in place.
Ideally I want to set cell style of errors in the grid if possible back in the browser - ie red background colour if the cell contains an error.
Is there a way to manually set error messages in the grid (client side) and highlight the error cells from an external ajax post?
Thanks
Andez
Hello,
I need to format some cell in export excell with kendo mvc grid. I use the export in this way :
.Index.cshtml :
.ToolBar(tools => tools.Excel())
.Excel(excel => excel
.FileName("Export.xlsx")
.ForceProxy(true)
.Filterable(true)
.AllPages(true)
.ProxyURL(Url.Action("ExcelSave", "CieAssistant"))
)
Controller :
public ActionResult ExcelSave(string contentType, string base64, string fileName)
{
var fileContents = Convert.FromBase64String(base64);
return File(fileContents, contentType, fileName);
}
How i can update format of cell in the controller function "ExcelSave" ?!
Thanks,
I am new to Telerik MVC and JavaScript and jQuery.
Here is my issue:
I have two ListViews on my page:
@(Html.Kendo().ListView(Model.ProfessionalsNotInGroup.Lines).Name("staffNotInGroupList").TagName("div").HtmlAttributes(new { style = "height: 580px; overflow: auto;" }).ClientTemplateId("groupTemplate").Selectable(selectable => selectable.Mode(ListViewSelectionMode.Multiple)).Navigatable().DataSource(ds => ds .Sort(sort =>{ sort.Add(f => f.Proname);}).Model(m =>{ m.Id(f => f.Userguid); m.Field(f => f.Proname);})).Deferred())
AND
@(Html.Kendo().ListView(Model.ProfessionalsInGroup.Lines).Name("staffInGroupList").TagName("div").HtmlAttributes(new { style = "height: 580px; overflow: auto;" }).ClientTemplateId("groupTemplate").Selectable(selectable => selectable.Mode(ListViewSelectionMode.Multiple)).Navigatable().DataSource(ds => ds .Sort(sort =>{ sort.Add(f => f.Proname);}).Model(m =>{ m.Id(f => f.Userguid); m.Field(f => f.Proname);})).Deferred())
The template for the ListViews:
<script type="text/x-kendo-tmpl" id="groupTemplate"><div class="staff"><span>#: Proname#</span></div>
I have a button that moves items from one ListView to Another:
function addStaffToGroup(e) {var lvStaffNotInGroupList = $("#staffNotInGroupList").data("kendoListView");var StaffSelections = lvStaffNotInGroupList.select();var lvStaffInGroupList = $("#staffInGroupList").data("kendoListView");for (i = 0; i < StaffSelections.length; i++){ lvStaffInGroupList.dataSource.add(lvStaffNotInGroupList.dataItem(StaffSelections[i])); lvStaffInGroupList.refresh(); lvStaffNotInGroupList.dataSource.remove(lvStaffNotInGroupList.dataItem(StaffSelections[i])); lvStaffNotInGroupList.refresh();}}
The problem being whenever I remove or add items to the ListViews and call refresh() the ListViews are not being sorted alphabetically.​​​
How do I achieve this please?
Thank you.​
Hello,
I think I may have a found a bug with how a Grid is displaying data after I've added a record to the table it's bound to. The meat of the problem is in the javascript I'm using to call dataSource.read() after I've added the record. My first attempt looked as follows:
<script>
function
NewDefectFeatureSubmitButtonClick(e)
{
var
defectFeatureGrid = $(
"#DefectFeatureGrid"
).data(
"kendoGrid"
);
var
newDefectFeatureTextBox = $(
"#NewDefectFeatureNameTextBox"
);
var
newDefectFeatureName = newDefectFeatureTextBox.val();
var
dummyUrl =
'@Url.Action("AddDefectFeature", "DefectFeature", new { name = "--V1--" })'
;
var
url = dummyUrl.replace(
"--V1--"
, newDefectFeatureName);
$.ajax(
{
dataType:
"json"
,
type:
"POST"
,
url: url
});
Sleep(1000);
// needed to allow the ajax call above to complete before re-reading the datasource
defectFeatureGrid.dataSource.read();
newDefectFeatureTextBox.val(
""
);
}
</script>
Notice how I'm passing the parameter via the URL...then calling dataSource.read(). This works just fine and the grid updates with the new record...however I felt this looked "hacky" so I wanted to update it to use the data object in the ajax call....which looks like the following:
<script>
function
NewDefectFeatureSubmitButtonClick(e)
{
var
defectFeatureGrid = $(
"#DefectFeatureGrid"
).data(
"kendoGrid"
);
var
newDefectFeatureTextBox = $(
"#NewDefectFeatureNameTextBox"
);
var
newDefectFeatureName = newDefectFeatureTextBox.val();
var
url =
'@Url.Action("AddDefectFeature", "DefectFeature")'
;
$.ajax(
{
data: {
name: newDefectFeatureName
},
dataType:
"json"
,
type:
"POST"
,
url: url
});
Sleep(1000);
// needed to allow the ajax call above to complete before re-reading the datasource
defectFeatureGrid.dataSource.read();
newDefectFeatureTextBox.val(
""
);
}
</script>
notice here how I'm passing the parameter into the data object for the ajax call, then the same as before calling dataSource.read(). The difference being is in this case, the grid does NOT add the new row.
When I look at the database, the record gets added regardless to how the parameter is passed into the ajax call.
When I look at the fiddler traces from the read calls:
I've no idea why this is happening, but it repro's 100% of the time. Is this a bug? If not can someone explain to me why it's not? I have another view where I don't have a choice and I have to pass the parameters via the data object...so I need to get it solved eventually or I'm going to be blocked.
Here's the rest of my source files for context:
Controller:
namespace
TPOReports.Controllers
{
using
System.Web.Configuration;
using
System.Web.Mvc;
using
Kendo.Mvc.UI;
using
Kendo.Mvc.Extensions;
using
TPOReporting;
/// <summary>
/// controller class for dealing with DefectFeature related actions
/// </summary>
public
class
DefectFeatureController : Controller
{
/// <summary>
/// returns the default view for the this controller
/// </summary>
/// <returns>DefectFeatureView</returns>
[HttpGet]
public
ActionResult DefectFeatureView()
{
return
View();
}
/// <summary>
/// adds a new DefectFeature into the database
/// </summary>
/// <param name="name">name of DefectFeature to add</param>
/// <returns>DefectFeatureView</returns>
[HttpPost]
public
ActionResult AddDefectFeature(
string
name)
{
DataMaintenance dataMaintenance =
new
DataMaintenance(WebConfigurationManager.ConnectionStrings[
"DefaultConnection"
].ConnectionString);
dataMaintenance.AddDefectFeature(name);
return
RedirectToAction(
"DefectFeatureView"
);
}
/// <summary>
/// retrieves all DefectFeature objects from the database
/// </summary>
/// <returns>a collection of DefectFeature objects as json</returns>
[HttpPost]
public
ActionResult GetDefectFeatures([DataSourceRequest] DataSourceRequest request)
{
DataMaintenance dataMaintenance =
new
DataMaintenance(WebConfigurationManager.ConnectionStrings[
"DefaultConnection"
].ConnectionString);
var defectFeaturesPayload = dataMaintenance.GetDefectFeatures().Payload;
DataSourceResult result = defectFeaturesPayload.ToDataSourceResult(request);
return
Json(result);
}
}
}
View with working javascript block:
@using TPOReporting
@{
ViewBag.Title = "Defect Feature Maintenance";
Layout = null;
}
<
script
>
function NewDefectFeatureSubmitButtonClick(e)
{
var defectFeatureGrid = $("#DefectFeatureGrid").data("kendoGrid");
var newDefectFeatureTextBox = $("#NewDefectFeatureNameTextBox");
var newDefectFeatureName = newDefectFeatureTextBox.val();
var dummyUrl = '@Url.Action("AddDefectFeature", "DefectFeature", new { name = "--V1--" })';
var url = dummyUrl.replace("--V1--", newDefectFeatureName);
$.ajax(
{
dataType: "json",
type: "POST",
url: url
});
Sleep(1000); // needed to allow the ajax call above to complete before re-reading the datasource
defectFeatureGrid.dataSource.read();
newDefectFeatureTextBox.val("");
}
</
script
>
<
div
>
<
h2
>Defect Features</
h2
>
<
hr
size
=
"3"
/>
</
div
>
<
div
>
<
table
>
<
tr
>
<
td
>
<
label
>New Defect Feature Name:</
label
>
</
td
>
<
td
>
@(Html.Kendo().TextBox()
.Name("NewDefectFeatureNameTextBox"))
</
td
>
<
td
>
@(Html.Kendo().Button()
.Name("NewDefectFeatureSubmitButton")
.Content("Submit")
.Events(e => e.Click("NewDefectFeatureSubmitButtonClick")))
</
td
>
</
tr
>
</
table
>
</
div
>
<
div
>
@(Html.Kendo().Grid<
DefectFeature
>()
.Columns(c =>
{
c.Bound(df => df.Name)
.Title("Name");
c.Bound(df => df.LastUpdate)
.Title("Last Update");
})
.DataSource(ds => ds
.Ajax()
.Read(r => r.Action("GetDefectFeatures", "DefectFeature")))
.HtmlAttributes(new { style = "height:300px;" })
.Name("DefectFeatureGrid")
.Scrollable()
.Selectable()
.Sortable())
</
div
>
Hello! I have a model whose foreign key references itself. To provide some more context, I have a table in my database called "Categories", and this table may contain categories or sub-categories, depending on whether they have a reference to a "Non-sub-category" or not.
Having this into account, I am using a grid that contains a foreign key, as the following:
@(Html.Kendo().Grid<CategoriesViewModel>()
.Name(​
"CategoriesGrid"
)
.Columns(columns =>
{
columns.Bound(c => c.Name).Width(50);
columns.ForeignKey(c => c.ParentCategoryId,
(System.Collections.IEnumerable)ViewData[
"Categories"
],
"CategoryId"
,
"Name"
)
.Filterable(filterable => filterable
.Extra(
false
)
)
.Width(50);
columns.Command(command => command.Edit()).Width(50);
})
.ToolBar(toolbar => toolbar.Create())
.Editable(e => e.Mode(GridEditMode.InLine))
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(5)
.ServerOperation(
false
)
.Model(model =>
{
model.Id(a => a.CategoryId);
model.Field(a => a.ParentCategoryId).DefaultValue(
null
);
})
.Create(update => update.Action(
"CreateCategory"
,
"Categories"
))
.Read(read => read.Action(
"GetCategories"
,
"Categories"
))
.Update(update => update.Action(
"EditCategory"
,
"Categories"
))
)
The behaviour I desire is to add lines to this table and have the "ForeignKey" dropdown automatically updated. So for instance, if I add a category "Animal", when I am creating a new sub-category (e.g. a "Cat") I want to see already displayed "Animal" in my dropdown. I also want to be able to have an "Empty value" on the dropdown (like a placeholder), so I can indicate that the new category is a "Primary category" (i.e. a non-sub-category). I understand that the "ForeignKey" data is statically bound, and the only way I have right now to display the newly inserted data is to force a reload on the page.
Is not there any workarounds to update my "ForeignKey" dropdown on a grid change (Create or Edit)?
Regards,
Manuel
Hi. I'm trying to run very simple validation for the grid inline edit function.
- GridEditMode.InLine
- Server binding
- Trying to add "onsubmit" attribute to the "GridForm" form element (it does not work)
Or does DataAnnotation based validation works for this case? If so, please let me know any sample code for that. I could only see AJAX version or non-grid version.
Below is my cshtml file:
@using Kendo.Mvc.UI;
@using Kendo.Mvc.Extensions;
@model WebApp.Features.Vendor.Index.Result
@{
ViewBag.Title = "Vendor Management";
}
<div class="jumbotron">
<div id="clientsDb">
@Html.ValidationDiv()
@(Html.Kendo().Grid((IEnumerable<PayBy.WebApp.Features.Vendor.UiController.Vendor>)Model.Vendors)
.Name("Grid")
.Columns(columns =>
{
columns.Bound(c => c.VendorName).Title("Name").Width(30);
columns.Bound(c => c.IsInternal).Title("Internal").Width(30);
columns.Bound(c => c.AccountName).Title("Account").Width(50);
columns.Command(commands => commands.Edit()).Width(30);
})
.ToolBar(toolbar => toolbar.Create().Text("Add"))
.Sortable()
.Editable(editable => editable.Mode(GridEditMode.InLine))
.HtmlAttributes(new { style = "height: 480px;" })
.Scrollable()
.DataSource(dataSource => dataSource
.Server()
.Model(model =>
{
model.Id(p => p.Id);
model.Field(f => f.AccountName).Editable(false);
})
.Create("Update", "Vendor")
.Update("Update", "Vendor")
.Sort(sort => sort.Add("VendorShortName").Ascending())
)
)
</div>
</div>
<div class="row">
</div>
<script>
var form = $('#GridForm');
if (form != null) {
form.attr('onsubmit', 'return ValidateForm();');
}
function ValidateForm()
{
alert('validate');
if ($('#VendorName').val().length == 0) {
alert('[Name] Required field.');
return false;
}
if ($('#VendorName').val().length > 256) {
alert('[Name] Maximum 256 letters.');
return false;
}
return true;
}
</script>
Is there a demo of how to connect a chart to the selected row(s) of a grid? Basicly I have a grid and when the user selects a row(s) I want to have the selected data update a chart on the page.
Thanks,
Erik
I am trying to use a datepicker in a grid column that utilizes InCell editing. The problem I am having is that the datepicker appears to revert back to the specified default value after I remove the focus from the datepicker cell into another cell. Another interesting thing to note is that I can click back into the datepicker cell that I changed and the datepicker will once again show the correct date that I changed the cell too. Any ideas what causes this behavior?
Here is the date snippet from my viewmodel:
[DisplayName(
"Month/Year"
)]
[DisplayFormat(DataFormatString =
"{0:MMMM yyyy}"
)]
[DataType(DataType.Date)]
[Required]
public
DateTime FOBDate {
get
;
set
; }
Here is my Date.cshtml code:
@model DateTime?
@(Html.Kendo().DatePickerFor(m => m)
.Name(
"fobpricedate"
)
.Format(
"MMMM yyyy"
)
.Start(CalendarView.Year)
.Depth(CalendarView.Year)
)
And here is my view that contains the grid:
@(Html.Kendo().Grid<TestMACPortal.Models.FOBViewModel>()
.Name(
"grid"
)
.Columns(columns =>
{
columns.Bound(c => c.Category).ClientTemplate(
"#=Category.CategoryName#"
);
//.EditorTemplateName("ProductCategory");
columns.Bound(c => c.SKU_Name);
columns.Bound(c => c.MaterialNumber);
columns.Bound(c => c.Company).ClientTemplate(
"#=Company.CompanyName#"
);
columns.Bound(c => c.FOBDate).EditorTemplateName(
"Date"
);
columns.Bound(c => c.Price).EditorTemplateName(
"Price"
);
})
.ToolBar(toolbar =>
{
toolbar.Create();
//toolbar.Save();
})
.Editable(editable => editable.Mode(GridEditMode.InCell))
.HtmlAttributes(
new
{ style =
"height: 500px;"
})
.Scrollable()
.Sortable()
.Groupable()
.Resizable(resize => resize.Columns(
true
))
//.Filterable(ftb => ftb.Mode(GridFilterMode.Row))
.DataSource(dataSource => dataSource
.Ajax()
.Batch(
true
)
.ServerOperation(
false
)
.Events(events => events.Error(
"error_handler"
))
.Model(model =>
{
model.Id(c => c.FOBID);
model.Field(c => c.FOBID).Editable(
false
);
model.Field(c => c.Category).DefaultValue(ViewData[
"defaultCategory"
]
as
TestMACPortal.Models.ProductCategoryViewModel);
model.Field(c => c.Company).DefaultValue(ViewData[
"defaultCompany"
]
as
TestMACPortal.Models.CompanyViewModel);
model.Field(c => c.FOBDate).DefaultValue(DateTime.Today);
})
//.Destroy("Editing_Destroy", "FOB")
.Read(read =>
{
read.Action(
"GetFOBs"
,
"FOB"
);
})
//.Create("CreateFOB", "FOB")
//.Update("UpdateFOB", "FOB")
)
)