Telerik Forums
UI for ASP.NET MVC Forum
3 answers
460 views

Hi! I use MVC Core and Kendo UI for MVC.

I have a grid that has two different foreign key columns, for which I want drop-downs. I have two problems:
1. How can I bind any of them to the MVC Model? TheGridForeignKey.cshtml that I copied in to the Shared/EditorTemplates folder uses some unknown field in the ViewData (which is null and throws an exception at run-time). I want to use MVC. I tried the following which hard-codes some values but it at least shows the drop-down in grid both columns:

Html.Kendo().DropDownListFor(m => m)
       .BindTo((SelectList) new SelectList(new List<string> { "A", "B", "C" }) )

2.The GridForeignKey.cshtml is shared for all views in the whole site, how can I bind it in the actual view instead, where I have control over data?

As you can see, I haven't really figured out how all this works and is glued together. 

Konstantin Dikov
Telerik team
 answered on 16 Sep 2016
1 answer
430 views
Getting "Invalid Model Configuration" Error when scaffolding. From EDMX model. EF5/6, MVC5, VS2015. Why??? There shouldn't be any reason for this to happen.
Eyup
Telerik team
 answered on 16 Sep 2016
1 answer
167 views

Hi,

I am in the process of converting to an Kendo MVC application and using a bootstrap style framework.

I was looking for an example in Kendo ListView that I could achieve in a RadListView with the following code. Setting pagesize to 3 and displaying 3 items horizontally.

<telerik:RadListView ID="RadListView1" runat="server" OnNeedDataSource="RadListView1_NeedDataSource" ItemPlaceholderID="PlaceHolder1" PageSize="3" AllowPaging="true" Width="100%">
                       <LayoutTemplate>
                           <div class="row uniform">
                               <asp:PlaceHolder ID="PlaceHolder1" runat="server" />
                           </div>
                       </LayoutTemplate>
                       <ItemTemplate>
 
                           <div class="4u 12u(narrower)">
                               <div class="boxwrapper style1">
                                   <section class="box special">
                                       <span class="image fit">
                                           <telerik:RadBinaryImage ID="RadBinaryImage2" runat="server" AutoAdjustImageControlSize="false" DataValue='<%#Eval("ArticleImage") %>' />
                                       </span>
                                       <h5><%# DataBinder.Eval(Container, "DataItem.Title")%></h5>
                                       <a class="button" href='<%#Eval("ID", "ShowArticle.aspx?id={0}") %>'>Learn More..</a>
                                   </section>
                               </div>
                           </div>
 
                       </ItemTemplate>
                   </telerik:RadListView>

Danail Vasilev
Telerik team
 answered on 16 Sep 2016
4 answers
669 views

There is a bound column in my Razor MVC Grid that I do not want exported to Excel.  I have seen some examples that show creating an Excel export event then using hideColumn to remove the column but that does not seem to work for me.  How can I hide a column in the grid export to Excel?

 

.Events(e => e.ExcelExport("excelExport"))

function excelExport(e) {
     e.sender.hideColumn("Received");
}

John
Top achievements
Rank 1
 answered on 15 Sep 2016
5 answers
580 views

So, I had the Grid working with Ajax, and that was really awesome as the paging and sorting was very quick. However, we had a problem that larger data sets (30k and more) would have the Grid time out. I believe switching over to a server side binding and grabbing 20 at a time would allow users to get the data. (Please correct me if I'm wrong).

Here's what I had before:

@(Html.Kendo().Grid<vNPISearch>()
            .Name("npi-grid")
            .DataSource(dataSource => dataSource
            .Ajax()
            .Read(read => read.Action("NPI_Read", "Pecos"))
            .ServerOperation(false)
            .PageSize(20))
            .Columns(columns =>
            {
                columns.Template(x => { }).ClientTemplate("#=GetPecosStatus(PecosNPI) #").Width(50);
                columns.Bound(x => x.ProviderFirstName).Title("First Name");
                columns.Bound(x => x.ProviderLastName).Title("Last Name");
                columns.Bound(x => x.ProviderBusinessLocationAddressCity).Title("City");
                columns.Bound(x => x.ProviderBusinessLocationAddressState).Title("State");
                columns.Bound(x => x.NPI).Title("NPI");
            })
            .Scrollable()
            .Sortable()
            .Pageable(pageable => pageable
                .Refresh(true)
                .PageSizes(true)
                .ButtonCount(5))
      )

And the NPI_Read looked like:

public ActionResult NPI_Read([DataSourceRequest] DataSourceRequest request)
{
    if (!String.IsNullOrEmpty(SearchTerm))
    {
        return Json(oandpService.GetPecosSearchResults(SearchTerm).ToDataSourceResult(request), JsonRequestBehavior.AllowGet);
    }
    else
    {
        return null;
    }
}

However, the performance was ABSOLUTELY TERRIBLE! For it to grab 55 records it took almost 10 seconds, whereas if I just populated a simple table it would be almost instantly.

So, I wanted to try server side binding.

The view now looks like:

@(Html.Kendo().Grid<vNPISearch>()
            .Name("npi-grid")
            .Columns(columns =>
            {
                columns.Template(x => { }).ClientTemplate("#=GetPecosStatus(PecosNPI) #").Width(50);
                columns.Bound(x => x.ProviderFirstName).Title("First Name");
                columns.Bound(x => x.ProviderLastName).Title("Last Name");
                columns.Bound(x => x.ProviderBusinessLocationAddressCity).Title("City");
                columns.Bound(x => x.ProviderBusinessLocationAddressState).Title("State");
                columns.Bound(x => x.NPI).Title("NPI");
            })
            .Scrollable(src => src.Height("auto"))
            .Sortable()
            .Pageable()
            .DataSource(dataSource => dataSource
                .Server()
                .PageSize(20)
                .Total((int)ViewData["total"])
                .Read(read => read.Action("NPI_Read", "Pecos")))
)

And the NPI_Read looks like:

public ActionResult NPI_Read([DataSourceRequest] DataSourceRequest request)
{
    if (!String.IsNullOrEmpty(SearchTerm))
    {
        if (request.PageSize == 0)
        {
            request.PageSize = 20;
        }
        IQueryable<vNPISearch> searchResults = oandpService.GetPecosSearchResults(SearchTerm);
 
        if (request.Sorts.Any())
        {
            foreach (SortDescriptor sortDescriptor in request.Sorts)
            {
                if (sortDescriptor.SortDirection == ListSortDirection.Ascending)
                {
                    switch (sortDescriptor.Member)
                    {
                        case "ProviderFirstName":
                            searchResults = searchResults.OrderBy(x => x.ProviderFirstName);
                            break;
                        case "ProviderLastName":
                            searchResults = searchResults.OrderBy(x => x.ProviderLastName);
                            break;
                        case "ProviderBusinessLocationAddressCity":
                            searchResults = searchResults.OrderBy(x => x.ProviderBusinessLocationAddressCity);
                            break;
                        case "ProviderBusinessLocationAddressState":
                            searchResults = searchResults.OrderBy(x => x.ProviderBusinessLocationAddressState);
                            break;
                        case "NPI":
                            searchResults = searchResults.OrderBy(x => x.NPI);
                            break;
                    }
                }
                else
                {
                    switch (sortDescriptor.Member)
                    {
                        case "ProviderFirstName":
                            searchResults = searchResults.OrderByDescending(x => x.ProviderFirstName);
                            break;
                        case "ProviderLastName":
                            searchResults = searchResults.OrderByDescending(x => x.ProviderLastName);
                            break;
                        case "ProviderBusinessLocationAddressCity":
                            searchResults = searchResults.OrderByDescending(x => x.ProviderBusinessLocationAddressCity);
                            break;
                        case "ProviderBusinessLocationAddressState":
                            searchResults = searchResults.OrderByDescending(x => x.ProviderBusinessLocationAddressState);
                            break;
                        case "NPI":
                            searchResults = searchResults.OrderByDescending(x => x.NPI);
                            break;
                    }
                }
            }
        }
        else
        {
            //EF cannot page unsorted data.
            searchResults = searchResults.OrderBy(x => x.ProviderLastName);
        }
 
        //Apply paging.
        if (request.Page > 0)
        {
            searchResults = searchResults.Skip((request.Page - 1) * request.PageSize);
        }
        searchResults = searchResults.Take(request.PageSize);
 
        ViewData["total"] = searchResults.Count();
 
        var result = new DataSourceResult()
        {
            Data = searchResults,
            Total = Convert.ToInt32(ViewData["total"])
        };
 
        return Json(result, JsonRequestBehavior.AllowGet);
    }
    else
    {
        return Json(Enumerable.Empty<vNPISearch>().AsQueryable());
    }
}

However, when I run the page it immediately returns: Object reference not set to an instance of an object. With Line 21 being highlighted. That line is .DataSource(dataSource => dataSource

So, two questions:

  1. Is there a way to improve performance with AJAX and large datasets?
  2. If not, what am I not doing to get server side binding not working?
Viktor Tachev
Telerik team
 answered on 15 Sep 2016
1 answer
142 views

Hi,

I am not able to add the zoom property to my already existing Kendo Chart using HTML.

Its not accepting the zoom attribute and I am using kendo version v2015.1.408. Kindly Help me with the solution

Please find the code as below:

<td>

<%= Html.Kendo().Chart<prt.web.models.qualityovertimeviewmodel>()

.Name("BarGraphCold")

.Series(series => { series.Column(model => model.ColdGerm).Color("#1CAAD9"); })

.CategoryAxis(axis => axis .Categories(model => model.Label )

.MajorGridLines(lines => lines.Visible(false)) .Line(line => line.Visible(true))

.Labels(labels => labels.Rotation(-30)) ) .ValueAxis(axis => axis.Numeric() .MajorGridLines(lines => lines.Visible(false)) .Max(100) .Min(0) )

.Legend(legend => legend .Position(ChartLegendPosition.Bottom))

.Tooltip(true) .DataSource(dataSource => dataSource .Read(read => read.Action("GetBarChartData", "Visualize")) ) %>

</prt.web.models.qualityovertimeviewmodel></td>

Danail Vasilev
Telerik team
 answered on 15 Sep 2016
3 answers
298 views

I searched and can't find anything on this.  I tried to deploy my 1st ASP.NET MVC website using Telerik controls.  The Telerik controls don't load.  So I must have left out a step.  I'm hoping you can tell me what I left out.

I copied the contents from my Visual Studio project to the web server.  The Kendo javascript files are on the webserver.  The kendo dll's are in the bin folder on the web server.

When I run a view - the Kendo controls are missing.  For example, a dropdown list will look like a textbox and have a value in it.  Instead of being a Kendo dropdown list.  And the Kendo menu doesn't work either.  I can see the menu, but clicking on the down arrow to see the menu options doesn't do anything.

Do you know what I need to do?  Thanks.

Rumen
Telerik team
 answered on 15 Sep 2016
2 answers
730 views
Hi, I'm converting over a grid from Telerik for AJAX to Kendo.  I was wondering if there is a way to display a message like "No records to display" in the grid's data area instead of hidden down at bottom in pager section.  See screenshot for desired functionality.
Musashi
Top achievements
Rank 1
 answered on 14 Sep 2016
3 answers
905 views

What is the correct way to have a column in a Telerik MVC Razor page that contains a link for a person to click and view an image in another window?

 

The images will be on a network directory share.  

Each row image location is passed in the data view model.

 

Something like <a href = "file://///ccijisdevbt01m\d$\pictures\Graffiti_London.jpg" target="_blank"> Link to image </a>

Konstantin Dikov
Telerik team
 answered on 14 Sep 2016
9 answers
989 views
Hello,

I am invoking a popup (which is a partial view) from a link  in a main grid. I have a popup with checkbox column and other column which is non editable. The popup window (with Grid) opens correctly and if I keep "Edit" button then I am able to select a checkbox and when I say "update" then I get correct value of checkbox in the controller "update" function. Line by line editing without Batch (without SaveChanges) works correctly and I get CheckBox value as true.

However it is not working in Batch mode. I have set inline mode but no help. The Save button click doesnot invoke my update function. What is missing?

Following is code to invoke a popup from link on  main grid.
-----------------------------------------------------------
 columns.Template(@<text> </text>)
                              .ClientTemplate("<a href='" + Url.Action("ShowPopup", "Events") + "/#= EventId #'" + ">Customers</a>");
--------------------------------------------------------------
Following is code for PopUp:  

-------------------------------------------------------------------------
@using SampleAppModelsAndServices.Areas.AreaOne.Models

   @(Html.Kendo().Window()
    .Name("Window1")
    .Title("Customers")
    .Content(@<text>  
       @(Html.Kendo().Grid<CustomerModel>()
        .Name("GridPopup")
        .Columns(columns =>
        {
            //columns.Bound(p => p.CustomerId);

            columns.Bound(p => p.CheckSelect).Title("Select").Width("10%").HtmlAttributes(new { @style = "font-size:x-small" }).ClientTemplate("<input type='checkbox' #= CheckSelect ? Checked='Checked' : ''# > </input>");
            columns.Bound(p => p.CustomerName).Title("Customer Name").Width("20%");
           
            //columns.Command(c =>
            //{
            //    c.Edit().Text(" ");

            //}).Title("Commands").Width("20%");


        })

                        .ToolBar(tools =>
                                {

                                    tools.Save();
                                })
                            .Editable(editable => editable.Mode(GridEditMode.InCell))

        //  .Sortable()
               //  .Pageable()
               // .Filterable()
          
          .DataSource(dataSource => dataSource
                  .Ajax()
                  .Batch(true)
                  .ServerOperation(false)
                  .Model(model =>
                  {
                      model.Id(m => m.CustomerId);
                      model.Field(m => m.CheckSelect).Editable(true);
                      model.Field(m => m.CustomerName).Editable(false);
                     // model.Equals(m => m.SelectCheck);
                  })


              
              // .Read(read => read.Action("GetCustomers", "Events", new { area = "AreaOne" , @id = Model.ContextId }))
              .Read(read => read.Action("GetCustomers", "Events", new { area = "AreaOne"}))
              // .Update(update => update.Action("Update", "Customers", new { area = "Sales" }))
                //.Update(update => update.Action("UpdateCustomers", "Events", new { area = "AreaOne" , @id = Model.ContextId }))
                .Update(update => update.Action("UpdateCustomers", "Events", new { area = "AreaOne"}))

                           ))
    
    
    
    </text>)

    .Resizable()
    .Draggable()
   // .Width(600)
    .Actions(actions => actions.Minimize().Maximize().Close())
            //.Events(ev => ev.Close("Window1_onClose"))
   // .Visible(true)

    )
Rosen
Telerik team
 answered on 14 Sep 2016
Narrow your results
Selected tags
Tags
Grid
General Discussions
Scheduler
DropDownList
Chart
Editor
TreeView
DatePicker
ComboBox
Upload
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
Accessibility
ListView (Mobile)
Pager
ColorPicker
DateRangePicker
Security
Wizard
Styling
Chat
DateInput
MediaPlayer
TileLayout
Drawer
SplitView
Template
Barcode
ButtonGroup (Mobile)
Drawer (Mobile)
ImageEditor
RadioGroup
Sparkline
Stepper
TabStrip (Mobile)
GridLayout
Badge
LinearGauge
ModalView
ResponsivePanel
TextArea
Breadcrumb
ExpansionPanel
Licensing
Rating
ScrollView
ButtonGroup
CheckBoxGroup
NavBar
ProgressBar
QRCode
RadioButton
Scroller
Timeline
TreeMap
TaskBoard
OrgChart
Captcha
ActionSheet
Signature
DateTimePicker
AppBar
BottomNavigation
Card
FloatingActionButton
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
SegmentedControl
+? more
Top users last month
Boardy
Top achievements
Rank 2
Veteran
Iron
Benjamin
Top achievements
Rank 3
Bronze
Iron
Veteran
ivory
Top achievements
Rank 1
Iron
Iron
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
ClausDC
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Boardy
Top achievements
Rank 2
Veteran
Iron
Benjamin
Top achievements
Rank 3
Bronze
Iron
Veteran
ivory
Top achievements
Rank 1
Iron
Iron
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
ClausDC
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?