I have a form of 3 grids. One is an editable (Incell) form, one is a standard grid with ajax data binding, and the last one is a grid that has a droppable area from which rows from the second grid are dropped from. After form submission, the first grid works fine, but the other two fail - the drag/drop stops working and the ajax data binding fails as well. It appears that after the form is being replaced (InsertionMode = InsertionMode.Replace), the grid is not recognized in the document.ready javascript function.
Ajax Form syntax:
@using (Ajax.BeginForm("AddCustomer","CustomerMaintenance", new AjaxOptions()
{
HttpMethod = "Post",
UpdateTargetId = "modal-content",
OnSuccess = "OnCustomerAddSuccess",
OnFailure = "OnCustomerAddFailure",
OnBegin = "return CompileStuff();",
OnComplete = "$('.modal-dialog').hideLoading();",
InsertionMode = InsertionMode.Replace
}, new {@id = "AddCustomerForm"}))
Second grid:
@(Html.Kendo().Grid<UserCustomerItem>()
.Name("userCustomerListGrid")
.Scrollable(scoll => scoll.Enabled(true))
.HtmlAttributes(new { style = "height:100%;" })
.Columns(columns =>
{
columns.Bound(uc => uc.UserId).Hidden(true);
columns.Bound(uc => uc.FullName);
})
.DataSource(ds => ds
.Ajax()
.PageSize(100)
.Read(r => r.Action("GetUserListForDataSource", "CustomerMaintenance").Data("getSelectedDataSourceId"))
)
)
Third Grid:
@(Html.Kendo().Grid(Model.ExplicitUserCustomerItemList)
.Name("selectedUserCustomerListGrid")
.Scrollable(scoll => scoll.Enabled(true))
.HtmlAttributes(new { style = "height:100%;" })
.Columns(columns =>
{
columns.Bound(uc => uc.UserId).Hidden(true).ClientTemplate("<input type='hidden' name='ExplicitUserCustomerItemList[#=getUserCustomerIndex(data)#].UserId' value='#=UserId#' />");
columns.Bound(uc => uc.FullName).ClientTemplate("<input type='hidden' name='ExplicitUserCustomerItemList[#=getUserCustomerIndex(data)#].FirstName' value='#=FirstName#' /> " +
"<input type='hidden' name='ExplicitUserCustomerItemList[#=getUserCustomerIndex(data)#].LastName' value='#=LastName#' />" +
"#=FullName#"); ;
columns.Command(command => command.Destroy()).Width(100);
})
.Events(e => e.Remove("onRemoveSelectedUserCustomer"))
.DataSource(ds => ds
.Ajax()
.Destroy("DestroyDummy", "CustomerMaintenance")
.Model(model =>
{
model.Id(p => p.UserId);
model.Field(p => p.FirstName);
model.Field(p => p.LastName);
model.Field(p => p.FullName);
})
.ServerOperation(false)
)
)
Document Ready Function:
$(document).ready(function () {
userCustomerListGrid = $("#userCustomerListGrid").data("kendoGrid");
selectedUserCustomerListGrid = $("#selectedUserCustomerListGrid").data("kendoGrid");
$('#DataSourceId').change(function () {
userCustomerListGrid.dataSource.read();
selectedUserCustomerListGrid.dataSource.data([]);
selectedUserCustomerListGrid.dataSource.read();
....
}
}
Per another forum post, I made the userCustomerListGrid and the selectedUserCustomerListGrid global vars.
After form submission (inconsistent but most of the time), those two variables are undefined.
Do you know why this would be?
Thanks in advance.
I am trying to create a grid that has 5 static parent categories that when expanded will use AJAX to show the data within those categories. Since the categories are static I just create a model, with a Name and Type property, in the controller action and bind them directly to the grid
@(Html.Kendo().Grid(Model.Categories)
.Name(
"CategoryGrid"
)
.Columns(c =>
{
c.Bound(b => b.Name);
c.Bound(b => b.Type);
})
.ClientDetailTemplateId(
"result-template"
)
)
<script id=
"result-template"
type=
"text/kendo-tmpl"
>
@(Html.Kendo().Grid<ChildClass>()
.Name(
"#=Name#_child"
)
.Columns(c =>
{
c.Bound(b => b.ID);
c.Bound(b => b.Description);
})
.DataSource(ds => ds
.Ajax()
.PageSize(20)
.Read(r => r.Action(
"ChildSearch"
,
"Search"
,
new
{ Type =
"#=Type#"
}))
)
.Pageable()
.Selectable()
.ToClientTemplateId()
)
</script>
I unfortunately can't share a screen shot as my dev box doesn't have an internet connection today, but the result is all the columns of the parent grid are offset to the left by 1.
The values for the Name column and an empty header appears in the first column.
The values for Type and the header "Name" appears in the second column.
A blank view, meaning the row styles cut off at the right end of the 2nd column, and the header "Type" appear in the third column.
So my question would be: Why is this happening?
Thanks
Hi
I just playing arround with the PivotGrid, and asking me, if it possible to change the style of the excel export. The cell are allways grey, if I change the background color in the stylesheet to red, then in the browser it changed to red, but in de excel not.
Is it possible to change that? I couldn't find out in a short time.
regards
Hi,
I've run into a bit of a snag within the onRemove javascript method. We have a custom confirm dialog in our application and I'd like to trigger that when removing files from the upload, there does not seem to be any support in the remove method for deferred objects. I'm just not sure how I can proceed. Should I try to override the click function on the remove button so it triggers a different method that then triggers the remove event of the actual upload control? Is there a way to bypass the javascript onRemove, but still process the rest of the remove logic? Is it possible to have the remove workflow delay until my deferred dialog box has completed?
Thanks,
Kevin
Hi,
I want a grid that has a button that opens a window that contains a grid that allows you to select a value for the parent grid
@(Html.ISGrid<Core.Data.Models.AttributeSourceSEModel>()
.Name(
"grid"
)
.Columns(columns =>
{
columns.Command(command => command.Custom(
"pick"
).Click(
"pickAttribute"
)).Width(50);
columns.Bound(p => p.AttributeSourceID).Width(200);
columns.Bound(p => p.Description).Width(200);
columns.Bound(p => p.SourceDataColumnName).Width(200);
columns.Bound(p => p.AttributeDefinitionID).Width(200);
columns.Bound(p => p.AttributeDefinitionName).Width(200);
columns.Bound(p => p.AttributeReportingGroupName).Width(200);
columns.Bound(p => p.AttributeHeaderName).Width(200);
columns.Bound(p => p.Name).Width(200);
//columns.Bound(p => p.AttributeSourceDatabaseID).Width(200);
columns.ForeignKey(p => p.AttributeSourceDatabaseID, (System.Collections.IEnumerable)ViewBag.AttributeSourceDatabase,
"ID"
,
"Name"
)
.Title(
"Database"
).Width(150);
columns.Bound(p => p.TableName).Width(200);
columns.Bound(p => p.SurveyEntityIDColumnName).Width(200);
columns.Bound(p => p.FilterColumnName).Width(200);
columns.Bound(p => p.FilterColumnValue).Width(200);
columns.Bound(p => p.Filter2ColumnName).Width(200);
columns.Bound(p => p.Filter2ColumnValue).Width(200);
columns.Bound(p => p.LastUpdatedDateColumnName).Width(200);
columns.Bound(p => p.RecommendedBatchSize).Width(200);
columns.Bound(p => p.VeracitySourceID).Width(200);
columns.Bound(p => p.VerificationTypeID).Width(200);
columns.Bound(p => p.VerificationTypeUnits).Width(200);
columns.Bound(p => p.IsInUse).Width(200);
columns.Bound(p => p.AttributeDataLogCount).Width(200);
columns.Command(command => command.Destroy()).Width(172);
})
.ToolBar(toolbar =>
{
toolbar.Create();
toolbar.Save();
toolbar.Excel();
})
.Editable(editable => editable.Mode(GridEditMode.InCell).CreateAt(GridInsertRowPosition.Bottom))
.Pageable()
.Groupable()
.Sortable()
.Scrollable()
.Filterable()
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(20)
.Batch(
true
)
.Events(events => events.Error(
"error_handler"
))
.Model(model =>
{
model.Id(p => p.AttributeSourceID);
model.Field(p => p.AttributeDefinitionName).Editable(
false
);
})
.Create(update => update.Action(
"Create"
,
"AttributeSourceSE"
))
.Update(update => update.Action(
"Update"
,
"AttributeSourceSE"
))
.Destroy(update => update.Action(
"Destroy"
,
"AttributeSourceSE"
))
.Read(read => read.Action(
"Read"
,
"AttributeSourceSE"
,
new
{ attributeSourceDatabaseID = @Request[
"AttributeSourceDatabaseID"
] }))
)
)
@(Html.Kendo().Window()
.Name(
"AttDef"
)
.Title(
"Attribute Definition"
)
.Visible(
false
)
.Modal(
true
)
.Draggable(
true
)
.Content(
Html.ModalGrid<Core.Data.Models.AttributeDefinitionModel>()
.Name(
"attgrid"
)
.Events(events => events.Change(
"Grid_OnRowSelect"
))
.Columns(columns =>
{
columns.Bound(p => p.Name);
columns.Bound(p => p.AttributeReportingGroupName);
columns.Bound(p => p.AttributeHeaderName);
columns.Bound(p => p.AttributeDefinitionID).Hidden(
true
);
})
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(20)
.Batch(
true
)
.Events(events => events.Error(
"error_handler"
))
.Model(model =>
{
model.Id(p => p.AttributeDefinitionID);
})
.Read(read => read.Action(
"ReadNameOnly"
,
"AttrDef"
,
new
{ AttributeReportingGroupID = @Request[
"AttributeReportingGroupID"
] }))
)
.ToHtmlString()
)
.Width(500)
.Height(500)
)
<script type=
"text/javascript"
>
function pickAttribute(e) {
window.grid = $(
"#grid"
).data(
"kendoGrid"
);
window.dataItem = window.grid.dataItem($(
event
.srcElement).closest(
"tr"
));
var wnd = $(
"#AttDef"
).kendoWindow({
title:
"Attribute Definition"
,
actions: [
"Minimize"
,
"Maximize"
,
"Close"
],
visible:
false
,
modal:
true
,
close: onClose
}).data(
"kendoWindow"
);
wnd.center();
wnd.open();
resizeGrid();
}
Grid_OnRowSelect = function (e) {
alert(
'onChange'
);
}
function onClose()
{
alert(
'close'
);
}
function resizeGrid() {
var gridElement = $(
"#attgrid"
);
var dataArea = gridElement.find(
".k-grid-content"
);
var newHeight = gridElement.parent().innerHeight() - 2;
var diff = gridElement.innerHeight() - dataArea.innerHeight();
gridElement.height(newHeight);
dataArea.height(newHeight - diff);
}
</script>
It is working up to the point where the window opens, but I cannot click on the child grid to return values to the parent grid.
The columns on the parent grid are read only. How do I update them in javascript?
We use "Bar chart with Multi Axis", we have a scenario to distinguish the series with different color but we need a color like "Shaded with line" color.
How we can do this.
For your reference, I attached the screen shot.
Having the edit/delete buttons at each row is very space inefficient. I would like to be able to:
Does anyone have sample code showing this working before I have to dig in an re-invent this wheel myself?
Thanks,
Brad
Is there any documentation for the logic how the update wizard modifies the _Layout.cshtml?
After the update the file is always messed up and needs to be reverted. If I can consider some logic from your side it would take a pain away :-)
I have a
form that consist of textboxes AND a grid
The model
that I use for the form has properties for the textboxes and a
List<MyGridmodel> for the grid.
What is the
best way to implement the follow scenario?
I add a
record to my grid but after that I click cancel on the form.
So the added record for the grid needs to be canceled,
Anyone ?
I'm having some issues showing multiple lines on the same grid. My objective is a date range in the X axis, a Percentage value in the Y axis and each line to represent a company.
I put breakpoints on the datasource read and I can see that the data is being populated, but after it returns the JSON to the view, no data shows.
Model:
public class CompanyMargin
{
public DateTime? ClosingDate { get; set; }
public decimal? Margin { get; set; }
public string Company { get; set; }
}
Controller: (I have tried 2 ways.. passing directly from the controller itself as a list, and also creating a datasourcerequest action)
public ActionResult MarginsAll()
{
List<CompanyMargin> lstCompanyMargin = new List<CompanyMargin>();
var items = db.spGroupedMargin().ToList();
foreach (var _item in items)
{
CompanyMargin companyMargin = new CompanyMargin();
companyMargin.ClosingDate = _item.InvoiceDate;
companyMargin.Company = _item.Client;
companyMargin.Margin = _item.Margin;
lstCompanyMargin.Add(companyMargin);
}
return View(lstCompanyMargin);
}
[HttpPost]
public ActionResult _GroupedMargin([DataSourceRequest]DataSourceRequest request)
{
List<CompanyMargin> lstCompanyMargin = new List<CompanyMargin>();
var items = db.spGroupedMargin().ToList();
foreach (var _item in items)
{
CompanyMargin companyMargin = new CompanyMargin();
companyMargin.ClosingDate = _item.InvoiceDate;
companyMargin.Company = _item.Client;
companyMargin.Margin = _item.Margin;
lstCompanyMargin.Add(companyMargin);
}
DataSourceResult result = lstCompanyMargin.ToDataSourceResult(request, c => new CompanyMargin
{
Company = c.Company,
Margin = c.Margin,
ClosingDate = c.ClosingDate
});
return Json(result);
}
View:
@(Html.Kendo().Chart<CDashboard.Models.CompanyMargin>()
.Name("MarginChart")
.Title("Company Margins")
.DataSource(datasource => datasource
.Read(read => read.Action("_GroupedMargin", "DashCharts"))
.Group(group => group.Add(model => model.Company))
.Sort(sort => sort.Add(model => model.ClosingDate).Ascending())
)
.Series(series =>
{
series.Line(model => model.Margin, categoryExpression: model => model.ClosingDate)
.Name("#- group.value #");
})
.Legend(legend => legend
.Position(ChartLegendPosition.Bottom)
)
.ValueAxis(axis => axis.Numeric()
.Labels( labels => labels
.Format("{0}%")
.Skip(2)
)
)
.CategoryAxis(axis => axis
.Date()
.BaseUnit(ChartAxisBaseUnit.Days)
)
)
When the page loads, I show a blank chart, then the breakpoint on the _GroupedMargin action triggers. I step through that and I can see that it is indeed populated with data. But as soon as it passes back to the view, nothing shows.
I would also like to question why I cannot find the kendo documentation solution on my local machine. While I had the trial I could open the Kendo.mvc.examples project to get a better understanding of the code. But it seems like once we purchased the product and installed the control panel, the local solution went away. The documentation online is very helpful, but when it offers to show the controller it just shows the generic controller and not the read actions or the models that I would need to see. Please help!