Telerik Forums
UI for ASP.NET MVC Forum
1 answer
149 views

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,

Patrick | Technical Support Engineer, Senior
Telerik team
 answered on 21 Oct 2015
1 answer
333 views

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.​

Ifte
Top achievements
Rank 1
 answered on 21 Oct 2015
8 answers
830 views

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:

  • parameter passed via URL - The fiddler trace includes the new record
  • parameter passed via data - The fiddler trace does NOT include the new record even though the database shows it's there.

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>

Toffer
Top achievements
Rank 2
 answered on 21 Oct 2015
9 answers
425 views

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

 

Manuel
Top achievements
Rank 1
 answered on 21 Oct 2015
1 answer
956 views

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>

Daniel
Telerik team
 answered on 21 Oct 2015
2 answers
271 views
Hi,

I have a Kendo Grid that I am building dynamically from a `System.Data.DataTable`. I am having issues trying to lock the columns.

I am setting a few columns to locked based on their title as you will see in my code. The boolean check is coming back as true or false where expected and that value is correctly being set in the `.Locked()` property. But the grid is not locking that column, nor is it giving me the `Lockable` option in the column menu.

Please see my code below:

       @model MvcProject.UnitOfWork.ViewModels.Reports.FacilityEquipmentDistributionVm


       @(Html.Kendo().Grid<dynamic>()
       .Name("resultsGrid")
                       .Columns(columns =>
                            {
                                columns.Group(group => group
                                    .Title("Facility Equipment Distribution Report : Date run - " + DateTime.Now.ToShortDateString())
                                    .Columns(header =>
                                    {
                                       
                                        foreach (System.Data.DataColumn column in Model.CombinedTable.Columns)
                                        {
                                            string title = "";
                                            bool showColumn;
                                            
                                            if (Model.ColumnTitles.TryGetValue(column.ColumnName, out title))
                                            {
                                                
                                            }
                                            else
                                            {
                                                title = column.ColumnName;
                                            }

                                            if (Model.ColumnsToShow.TryGetValue(column.ColumnName, out showColumn))
                                            {

                                            }
                                            else
                                            {
                                                showColumn = false;
                                            }

                                            bool lockColumn = (title == "PropertyRef" || title == "PropertyName" || title == "Address" || title == "Prefix" || title == "Floor");
                                            
                                           header.Bound(column.ColumnName)
                                                .Title(title)
                                                .Visible(showColumn)
                                                .Locked(lockColumn)
                                                .Lockable(true)
                                                .Width(title.Length * 8);

                                        }

                                    })
                                );
                            })

                        .HtmlAttributes(new { style = "height: 900px;" })
                            .Pageable(p => p
                                .ButtonCount(5)
                                .PageSizes(true)
                                .Refresh(true)
                            )

                            .Scrollable(s => s.Height("auto").Enabled(true))
                            .Sortable()
                            .Reorderable(reorderable => reorderable.Columns(true))
                            .Filterable()
                            .Groupable()
                            .ColumnMenu()
                            .Resizable(r => r
                                .Columns(true)
                            )
                                .Excel(excel => excel
                                    .FileName("Facility Equipment Distribution.xlsx")
                                    .Filterable(true)
                                    .ProxyURL(Url.Action("_GridExportSave", "Reports"))
                                    .AllPages(true)
                                )
                            .DataSource(d => d
                                .Ajax()
                                
                                .Read(read => read.Action("_FacilityEquipmentDistributionResults_Read", "Reports").Data("Genesis.Reports.Space.Search.getPaginationData"))
                                    .ServerOperation(true)
                                    .PageSize(20)
                                )
                                .ToolBar(tools =>
                                {
                                    tools.Pdf();
                                    tools.Excel();
                                })
        //PDF removed for now until it is patched
                                .Pdf(pdf => pdf
                                     .AllPages()
                                    .FileName("FacilityEquipmentDistribution.pdf")
                                    .ProxyURL(Url.Action("_GridExportSave", "Reports"))
                                )
                                //.Events(events => events.DataBound("Genesis.Reports.Space.Search.loadTT"))

)

Any help would be much appreciated.

Kind Regards,
Gareth
Gareth
Top achievements
Rank 1
 answered on 20 Oct 2015
1 answer
93 views

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

Iliana Dyankova
Telerik team
 answered on 20 Oct 2015
1 answer
428 views

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")
                )
        )

 

 

 

 

Georgi Krustev
Telerik team
 answered on 20 Oct 2015
4 answers
145 views
Hi,
is there a way to use a Kendo Grid with polymorphic items and Popup editing?

I'd like to define a base class BaseViewModel with some common properties and subclasses FirstViewModel and SecondViewModel with more specific properties. The Grid is bound to BaseViewModel, but in the Popup Editor I'd like to edit the subclasses. The controller produces an IEnumerable containing FirstViewModels and SecondViewModels.

I have defined EditorTemplates for FirstViewModel and SecondViewModel but the Model which is passed to when editing is always of type BaseViewModel.
Any suggestions?

Kind regards,
Thomas
Vladimir Iliev
Telerik team
 answered on 20 Oct 2015
2 answers
124 views

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?

 

 ​

 

Graham
Top achievements
Rank 1
 answered on 20 Oct 2015
Narrow your results
Selected tags
Tags
Grid
General Discussions
Scheduler
DropDownList
Chart
Editor
TreeView
DatePicker
Upload
ComboBox
MultiSelect
ListView
Window
TabStrip
Menu
Installer and VS Extensions
Spreadsheet
AutoComplete
TreeList
Gantt
PanelBar
NumericTextBox
Filter
ToolTip
Map
Diagram
Button
PivotGrid
Form
ListBox
Splitter
Application
FileManager
Sortable
Calendar
View
MaskedTextBox
PDFViewer
TextBox
Toolbar
MultiColumnComboBox
Dialog
DropDownTree
Checkbox
Slider
Switch
Notification
ListView (Mobile)
Pager
Accessibility
ColorPicker
DateRangePicker
Wizard
Security
Styling
Chat
MediaPlayer
TileLayout
DateInput
Drawer
SplitView
Barcode
ButtonGroup (Mobile)
Drawer (Mobile)
ImageEditor
RadioGroup
Sparkline
Stepper
TabStrip (Mobile)
GridLayout
Template
Badge
LinearGauge
ModalView
ResponsivePanel
TextArea
Breadcrumb
ExpansionPanel
Rating
ScrollView
ButtonGroup
CheckBoxGroup
NavBar
ProgressBar
QRCode
RadioButton
Scroller
Timeline
TreeMap
TaskBoard
OrgChart
Captcha
ActionSheet
Signature
DateTimePicker
AppBar
BottomNavigation
Card
FloatingActionButton
Licensing
Localization
MultiViewCalendar
PopOver (Mobile)
Ripple
ScrollView (Mobile)
Switch (Mobile)
PivotGridV2
FlatColorPicker
ColorPalette
DropDownButton
AIPrompt
PropertyGrid
ActionSheet (Mobile)
BulletGraph
Button (Mobile)
Collapsible
Loader
CircularGauge
SkeletonContainer
Popover
HeatMap
Avatar
ColorGradient
CircularProgressBar
SplitButton
StackLayout
TimeDurationPicker
Chip
ChipList
DockManager
ToggleButton
Sankey
OTPInput
ChartWizard
SpeechToTextButton
InlineAIPrompt
TimePicker
StockChart
RadialGauge
ContextMenu
ArcGauge
AICodingAssistant
+? more
Top users last month
Rob
Top achievements
Rank 3
Bronze
Iron
Iron
Sergii
Top achievements
Rank 1
Iron
Iron
Dedalus
Top achievements
Rank 1
Iron
Iron
Lan
Top achievements
Rank 1
Iron
Doug
Top achievements
Rank 1
Want to show your ninja superpower to fellow developers?
Top users last month
Rob
Top achievements
Rank 3
Bronze
Iron
Iron
Sergii
Top achievements
Rank 1
Iron
Iron
Dedalus
Top achievements
Rank 1
Iron
Iron
Lan
Top achievements
Rank 1
Iron
Doug
Top achievements
Rank 1
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?