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") ) )
I have a grid control which is bound to the model I have passed it in the view (local data):
HireReport.cshml
@model ReportingPortalWeb.Models.HireReportViewModel
@(Html.Kendo().Grid(Model.StockReport)
.Name("grid")
.Columns(columns =>
{
columns.Bound(p => p.SohQty).Title("Quantity").Visible(Model.StockReport.Sum(t => t.SohQty) > 0);
...
I want to add the export to excel function but this seems limited to remote data
.ToolBar(tools => tools.Excel())
...
Is there no way to bind this to the local model data?