I am pulling in a tabstrip to show details within a template on the kendo grid. I do my initial pull for the grid, but would like to use a separate datasource for the tabstrip. I only have one tab that holds all these detail. Is there a better way of achieving this? I do want to show everything in the table like the HTML shows, but want to pull it from its own datasource when the detail table is displayed.
I do it elsewhere successfully but that's with using a grid within the template.
Below is the grid code and the template code :
#(Html.Kendo().Grid<InvoiceVM>()
.Name("grid")
.Columns(columns =>
{
columns.Bound(i => i.DarwinInvoiceNumber).Title("Invoice").ClientTemplate("<a href='" + Url.Action("Current", "PayrollInvoices", new { i = "#: InvoiceNumber#" }) + "' >#: DarwinInvoiceNumber#</a>").Width(100);
columns.Bound(i => i.DivisionID);
//columns.Bound(i => i.Date).Format("{0:MM/dd/yyyy}");
//columns.Bound(i => i.CheckDate).Format("{0:MM/dd/yyyy}");
columns.Bound(i => i.DateDisplay).Title("Date"); //09/26/2017 DS TFS # 2798
columns.Bound(i => i.CheckDateDisplay).Title("Check Date"); //09/26/2017 DS TFS # 2798
columns.Bound(i => i.Total).Format("{0:C}");
columns.Bound(i => i.Employees);
columns.Bound(i => i.Employees).Title("Checks").Width(100);
columns.Bound(i => i.TotalGross).Title("Gross Wages").Format("{0:C}");
})
.Sortable()
//.Selectable()
.Scrollable()
.ToolBar(tools => tools.Excel())
.Excel(excel => excel
.FileName("PayInvoices.xlsx")
.Filterable(true)
)
.Groupable()
.ColumnMenu()
.Pageable()
.Filterable()
.ClientDetailTemplateId("template")
.HtmlAttributes(new { style = "height:600px;" })
.Reorderable(reorder => reorder.Columns(true))
.Resizable(resize => resize.Columns(true))
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(15)
.Read(read => read.Action("Get_InvoicesRead", "PayrollInvoices"))
)
.Excel(excel => excel
.FileName("InvoiceList.xlsx")
.Filterable(true)
.AllPages(true)
//.ProxyURL(Url.Action("Excel_Export_Summaries_Save", "Reports"))
)
.Events(events => events.DataBound("dataBound"))
)
<script id="template" type="text/kendo-tmpl">
#(Html.Kendo().TabStrip()
.Name("tabStrip_#=DarwinInvoiceNumber#")
.SelectedIndex(0)
.Animation(animation => animation.Open(open => open.Fade(FadeDirection.In)))
.Items(items =>
{
items.Add().Text("Details").Content(
"<div class='invoice_details sub-table-background'>" +
"<table class='table table-bordered'><tr><td><label>Pay Period Begin:</label></td><td>#=kendo.toString(StartDate,'MM/dd/yyyy')#</td><td><label>FICA Med</label></td><td>#= kendo.toString(TotalFicaM,'c') #</td><td><label>Total Benefits</label></td><td>#= kendo.toString(TotalBenefits,'c') #</td></tr>" +
"<tr><td><label>Pay Period End:</label></td><td>#= kendo.toString(EndDate,'MM/dd/yyyy') #</td><td><label>FICA SS</label></td><td>#= kendo.toString(TotalFicaSS,'c') #</td><td><label>Credits</label></td><td>#= kendo.toString(TotalCredits,'c') #</td></tr>" +
"<tr><td><label>Net Wages:</label></td><td>#= kendo.toString(NetWagesPayRun,'c')#</td><td><label>FUTA</label></td><td>#= kendo.toString(TotalFUTA,'c') #</td><td><label>Fees </label></td><td>#= kendo.toString(TotalFees,'c') #</td></tr>" +
"<tr><td><label>Sales Tax:</label></td><td>#= kendo.toString(Tax,'c')#</td><td><label>SUTA</label></td><td>#= kendo.toString(TotalSUTA,'c') #</td><td><label>Amount Due</label></td><td>#= kendo.toString(AmountRemaining,'c') #</td></tr>" +
"<tr><td><label>Non Gross:</label></td><td>#= kendo.toString(TotalNonGross,'c') #</td><td><label>Worker's Comp</label></td><td>#= kendo.toString(TotalWC,'c') #</td><td></td><td></td></tr>" +
"</table></div>"
);
})
.ToClientTemplate()
)
</script>
Regarding the progress indicator, we use the Kendo Progress Indicator which we start on the select event and stop on the load event:
#(Html.Kendo().TabStrip().Name("myTabStrip")
.Items(tabs =>
{
tabs.Add().Text("T1").LoadContentFrom("Tab1", "Controller", new { Id = Model.Id });
tabs.Add().Text("T2").LoadContentFrom("Tab2", "Controller", new { Id = Model.Id });
tabs.Add().Text("T3").LoadContentFrom("Tab3", "Controller", new { Id = Model.Id });
})
.Events(e => e
.ContentLoad("onContentLoad")
.Select("onTabSelect")
)
)
Then this script:
<script type="text/javascript">
function onTabSelect() {
window.setTimeout(function() {
// Find the tabstrip and attach a progressbar
kendo.ui.progress($('div.k-tabstrip-wrapper'), true);
});
}
function onContentLoad() {
// Hide progress bar
window.setTimeout(function() {
kendo.ui.progress($('div.k-tabstrip-wrapper'), false);
});
}
</script>
You could probably roll your own indicator with same concept.
Related
I have the initial values for the grid in my ViewModel. But if the user wants to update values, I want to update my database, then send back the updated values for the grid from the backend. The problem is that the Ajax Read is always called. But it shouldn't because the (initial) values are there in the ViewModel and bound to Grid.
I tried setting the AutoBind to false, but it does not work, I get an error. (Cannot set AutoBind if widget is populated during initialization)
#(Html.Kendo().Grid<MyClass>()
.Name("MyClassGrid")
.BindTo(Model.MyClassList)
.Columns(column =>
{
column.Bound(c => c.SomeProp).Title("Some Property");
})
.Scrollable()
.DataSource(ds => ds
.Ajax()
.Read(read => read.Action("GetMyData", "CheckBar", new { param1 = Model.ParamFirst}))))
I want to display the already stored values for my grid, and only use the read operation if I want to update the values in my database too.
#(Html.Kendo().Grid<SQDCDashboard.Core.ViewModels.SafetyIncidentViewModel>()
.Name("safetyincident-grid")
.Columns(columns =>
{
columns.Bound(c => c.CreatedAt).HtmlAttributes(new { style = "width: 22%" }).Format("{0:MM/dd/yyyy}");
columns.Bound(c => c.Type).HtmlAttributes(new { style = "width: 22%" });
columns.Bound(c => c.Description).HtmlAttributes(new { style = "width: 22%" });
columns.ForeignKey(c => c.ProductionLineId, (System.Collections.IEnumerable)ViewData["ProductionLines"], "Id", "Name").HtmlAttributes(new { style = "width: 22%" });
columns.Command(command => { command.Edit(); }).HtmlAttributes(new { style = "width: 12%" });
})
.ToolBar(toolbar => toolbar.Create().Text("New Safety Incident"))
.Editable(editable => editable.Mode(GridEditMode.InLine))
.DataSource(ds =>
ds.Ajax()
.ServerOperation(false)
.Model(model =>
{
model.Id(p => p.Id);
model.Field(p => p.ProductionLineId).DefaultValue(Model.DefaultProdLine);
})
.Read(read => read.Action("GetSafetyIncidentList", "Safety"))
.Update(update => update.Action("EditSafetyIncidentInLine", "Safety"))
.Create(create => create.Action("CreateNewSafetyIncident", "Safety"))
)
.HtmlAttributes(new { style = "height: 100%" })
.Sortable()
.Filterable()
.Pageable()
.Mobile()
)
Here is an example of my grid. The Update(update => update.Action("Action" , "Controller"))
is the method you are wondering about. For my code I did not have to pass a parameter in with my read, and I do not need to pass one in with my Update.
[HttpPost]
public ActionResult EditSafetyIncidentInLine([DataSourceRequest] DataSourceRequest request, SafetyIncidentViewModel sivm)
{
if (sivm != null && ModelState.IsValid)
{
SafetyIncident si = _safetyIncidentService.Find(sivm.Id);
si.Description = sivm.Description;
si.ProductionLineId = sivm.ProductionLineId;
si.ProdLine = _productionLineService.Find(sivm.ProductionLineId);
si.Type = sivm.Type;
_safetyIncidentService.Update(si);
sivm.Id = si.Id;
sivm.CreatedAt = si.CreatedAt;
}
return this.Json(new[] { sivm }.ToDataSourceResult(request, ModelState));
}
This method is the one that is called when the Update button is pressed. The update button is created with the columns.Command(command => { command.Edit(); }; and the Editable(editable => editable.Mode(GridEditMode.InLine)). If you want more clarification or if your question is different let me know. I never got an error with having my grid already initialized when I was updating values.
I have a sample like this popup editing mode
I want to store my model while first inserting, and set default values.
#(Html.Kendo().Grid<License>()
.Name("popupGrid")
.Columns(columns =>
{
columns.Bound(p => p.LicenseId).Width(20).Hidden().HeaderHtmlAttributes(new { #title = "License" });
columns.ForeignKey(p => p.CustomerId, (System.Collections.IEnumerable)ViewData["customers"], "CustomerID", "CustomerName")
.Title("Customer").Width(200);
columns.Bound(p => p.VendorId).Width(20).HeaderHtmlAttributes(new { #title = "Vendor" });
columns.Bound(p => p.ProductId).Width(20).HeaderHtmlAttributes(new { #title = "Product" });
columns.Command(p => p.Edit().Text("Edit").HtmlAttributes(new { #title = "Edit" })).Width(80);
})
.ToolBar(toolbar => toolbar.Create().HtmlAttributes(new {#id ="MyAddButton" ,#title = "Add" }))
.Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("PopupEditView"))
.Events(e => e.Edit("onGridEdit").Save("onGridSave"))
.DataSource(dataSource => dataSource
.Ajax()
.Model(model => model.Id(p => p.LicenseId))
.Create(create => create.Action("Create", "Home").Type(HttpVerbs.Post))
.Read(read => read.Action("Read", "Home").Type(HttpVerbs.Post))
.Update(update => update.Action("Update", "Home").Type(HttpVerbs.Post))
)
)
<script>
var myModel;
function onGridSave(e) {
if (e.model.isNew()) {
myModel = e.model;
}
}
function onGridEdit(e) {
if (e.model.isNew()&&myModel!=null) {
e.model.set("CustomerId", myModel.CustomerId);
e.model.set("VendorId", myModel.VendorId);
e.model.set("ProductId", myModel.ProductId);
}
}
</script>
But it's not working.
following code is not working too :
$(e.container).find('input[name="CustomerId"]').data("kendoDropDownList").value(myModel.CustomerId);//it's not giving error. but CustomerId is null in model of create method
Actually I want to this. But I don't know how to update datasource while prevent closing window.
You might try configuring your dropdownlist with valuePrimitive: true
http://docs.telerik.com/kendo-ui/api/javascript/ui/dropdownlist#configuration-valuePrimitive
I have a Kendo grid:
#(Html.Kendo().Grid<Grid>().Name("Grid")
.DataSource(ds => ds
.Ajax()
.Model(model => model.Id(m => m.ID))
.Read(read => read.Action("Grid_Read", "Sessions", new {sessionId = ViewBag.SessionID}))
.Update(update =>
update.Action("Grid_Update", "Sessions", new {
sessionId = ViewBag.SessionID, qcStateId = '????'}))
.PageSize(10)
.Batch(true)
)
.ToolBar(toolbar =>
{
toolbar.Template(
"| Set selected to: " + #Html.Partial("EditorTemplates/QCStatusHeader"));
}
)
QCStatusHeader:
#(Html.Kendo().DropDownList()
.Name("QCStatusHeader")
.DataValueField("Id")
.DataTextField("Name")
.BindTo((List<NomadBase.Web.ViewModels.Shared.QCStateViewModel>)ViewBag.PossibleQCStatesHeader)
)
How do I get the selected value from the QCStatusHeader dropdownlist into my update call to the controller?
Pretty simple solution, add the .Data option with a javascript method to return the currently selected value of the ddl.
.Update(update => update.Action("Grid_Update", "Sessions", new {sessionId = ViewBag.SessionID})
.Data("QCStatusHeaderValue"))
function QCStatusHeaderValue() {
var value = $('#QCStatusHeader').data("kendoDropDownList").value();
return { qcStateId: value };
}
I have such Grid
#(Html.Kendo().Grid(Model.Differences)
.Name("formDifferencesList")
.HtmlAttributes(new { #class = "fullScreen" })
.Columns(columns =>
{
columns.Bound(e => e.Property);
columns.Bound(e => e.FieldPath);
columns.Bound(e => e.FieldType);
columns.Bound(e => e.Type);
columns.Bound(e => e.LeftValue);
columns.Bound(e => e.RightValue);
})
.Pageable()
.Sortable()
.Scrollable()
.Selectable()
.Resizable(resize =>
resize.Columns(true))
.Groupable()
.Filterable()
.DataSource(dataSource =>
dataSource.Ajax()
.PageSize(25)
.ServerOperation(false)
.Model(model => model.Id(e => string.Format("{0}{1}", e.Property, e.FieldPath)))))
RightValue and LeftValue is instance of type Object, it can be primitive value (like int, string), but also it can be a collection. If it is a collection I want to use Kendo ListView to represent it. How should I do that?
I tried to bound to the DataBound event
.Events(events => events.DataBound("onDifferencesDataBounded"))
added ClientTemplate to the Grid
columns.Bound(e => e.LeftValue).ClientTemplate("<div class='leftValueView'></div>");
and then inside js function tried to apply the template
<script type="text/javascript">
function onDifferencesDataBounded() {
$.each($('.leftValueView'), function () {
var grid = $('#formDifferencesList').data().kendoGrid;
var row = $(this).closest('tr');
var dataItem = grid.dataItem(row);
$(this).kendoListView({
dataSource: { data: dataItem },
template: kendo.template($("#leftValueTemplate").html())
});
});
}
</script>
<script type="text/x-kendo-template" id="leftValueTemplate">
// Not sure what should I do here?
</script>
Is there anything at all in the dataItem.LeftValue or RightValue such as Array, when you put a breakpoint there?
var dataItem = grid.dataItem(row); // <-breakpoint when you pass that line
If there is array such as number array [1,3,4,5] then you can give a try to use #=data# inside of the template.
I have such grid defined
#(Html.Kendo().Grid<FieldViewModel>(Model.Fields)
.HtmlAttributes(new { #class = "fullScreen" })
.Name("formFields")
.ClientDetailTemplateId("formFieldsTemplate")
.Columns(columns =>
{
columns.Bound(e => e.Key);
columns.Bound(e => e.DisplayName);
columns.Bound(e => e.FieldTypeName);
columns.Bound(e => e.Order);
columns.Bound(e => e.IsMandatory);
columns.Bound(e => e.Type);
})
.Pageable()
.Sortable()
.Scrollable()
.Selectable()
.Resizable(resize => resize.Columns(true))
.Groupable()
.Filterable()
.DataSource(dataSource => dataSource.Ajax().ServerOperation(false).Model(model => model.Id(e => e.Key))))
and details template
<script id="formFieldsTemplate" type="text/kendo-tmpl">
#(Html.Kendo().Grid<FieldViewModel>()
.Name("FormField_#=Key#")
.ClientDetailTemplateId("formFieldsTemplate")
.Columns(columns =>
{
columns.Bound(e => e.Key);
columns.Bound(e => e.DisplayName);
columns.Bound(e => e.FieldTypeName);
columns.Bound(e => e.Order);
columns.Bound(e => e.IsMandatory);
columns.Bound(e => e.Type);
})
.DataSource(dataSource => dataSource.Ajax().Read(read => read.Action("LoadFieldDetails", "Forms", new { formPath = Model.Schema, rootElementName = Model.Root ,fieldKey = "#=Key#" })))
.Pageable()
.Sortable()
.Selectable()
.ToClientTemplate())
</script>
As you can see I have Type property (of type int), so what I want to do is not to show any details view and no arrow on the entire row when Type property is set to the specific value. How can I achieve it?
When you define your template like this, then it's used on client side. It's rendered by the #(Html.Kendo().Grid<FieldViewModel>() command but actually then used on client side. But you cannot compare a Type on clientside. but for example, when constructing the model you do:
if (myType is MyDataType) // Do the type check
{
myRow.UseTemplate = 1; // Define ID for template
}
else // ...and so on, can do a 'switch` or whatever
{
myRow.UseTemplate = 2;
}
And here is your template where you switch by Template ID:
<script id="formFieldsTemplate" type="text/kendo-tmpl">
# if (UseTemplate == 1) { #
<div>Template 1</div>
# } else { #
<div>Template 2</div>
# } #
</script>
Not sure if it will work properly if you have different data to display within your data rows... Hope you get the idea though.