Telerik Forums
UI for ASP.NET MVC Forum
2 answers
376 views
The objects that are enumerated in my Kendo MVC Grid are of type dynamic:

@(Html.Kendo().Grid<dynamic>()
...

I am using InLine editing.  I am able to specify the editor for each of my fields as described here:

http://www.telerik.com/forums/inline-editing-mode-and-dynamic-object
http://docs.telerik.com/kendo-ui/aspnet-mvc/helpers/grid/editor-templates

I won't reiterate the approach that is described above, but in summary it involves adding a UIHint attribute to fields in the model, and then using EditorTemplateName to identify an editor template for the field (and that editor template refers to the field via the Name() method).  This works.

The problem that I have is that many of my fields need to appear in non-editable columns.  My hope was that I could get the grid to render those fields as is (no editor) by:

a. Omit the UIHint attribute from model properties that would not be editable
b. Not specify an EditorTemplateName for non-editable bound columns
c. Set Editable(false) when defining the model (as below):

.DataSource(d =>
{
     d.Ajax()
        .Model(m =>
         {
             m.Id("Id");
             m.Field("Name", typeof(string)).Editable(false);

However, when I do this the grid fails to load and I see an exception in Fiddler:

[RuntimeBinderException: 'object' does not contain a definition for 'Name']
   CallSite.Target(Closure , CallSite , Object ) +152
   System.Dynamic.UpdateDelegates.UpdateAndExecute1(CallSite site, T0 arg0) +662
   lambda_method(Closure , Object ) +133
   Kendo.Mvc.UI.Html.GridDataCellBuilder`2.AppendCellContent(IHtmlNode td, Object dataItem) +131
   Kendo.Mvc.UI.Html.GridDataCellBuilderBase.CreateCell(Object dataItem) +230

I have many fields and most of them wil be non-editable, so I would rather not, for example, create editor templates for each of them that contain disabled controls.

What is the best way to configure all my non-editable columns in an InLine grid that is bound to dynamic objects?

thanks,
Derek
Derek
Top achievements
Rank 1
 answered on 06 Feb 2015
1 answer
364 views
Hi,

I'm binding my grid to a DataTable for displaying dynamic search results. I've followed the example on how to do binding with DataTable, but I was wondering if there is a way to reference a different column in the Template / ClientTemplate. I've tried what I regularly do when bound to a Model/ViewModel, but it doesn't seem to work for DataTables. I've tried both

This is what my grid looks like:

@(Html.Kendo().Grid(Model.Result.Data)
    .Name("gridSearchResults")
    .Columns(columns =>
    {
        foreach (System.Data.DataColumn column in Model.Result.Data.Columns)
        {
            if (column.ColumnName != "Id")
            {
                if (column.ColumnName == "Name")
                {
                    columns.Bound("Name").Template(@<text><a href='" + Url.Action("Details", Model.Result.DataSource) + "/#= Id #'" + ">#= Name #</a></text>);
                }
                else
                {
                    columns.Bound(column.ColumnName);
                }
            }
        }
    })
    .DataSource(d => d
        .Server()
        .Model(m => {
            m.Id("Id");
            foreach (System.Data.DataColumn column in Model.Result.Data.Columns)
            {
                m.Field(column.ColumnName, column.DataType);
            }
        })
    )
)

Model.Result.Data is of type DataTable. It renders all the columns fine, but I'd like the name column to be a hyperlink to the details page.. Any suggestions?

Thank you 
Katia
Top achievements
Rank 1
 answered on 06 Feb 2015
4 answers
235 views
All, 

Please see the following video: http://www.screencast.com/t/9UbonHDdPK0 . 

In this video it shows that the Drop Down list will close after the scroll bar has been clicked in order to go to a hidden portion of the list.  at just past halfway in the video I changed focus to the Kendo.textarea that contains "asdf" and then went back to the drop down list and it works as expected.   the exact same page will work fine in Chrome, Firefox, and IE 9.   If I select the text area first and then select the dropdown list it works as expected.

Thoughts?


Regards,
Jimm
Aaron
Top achievements
Rank 1
 answered on 05 Feb 2015
1 answer
841 views
How do you add a DropDownlist to Grid Toolbar that is already showing the built in Excel toolbar button.

@(Html.Kendo().Grid<Reports.ReportRow>()
    .Name("grdReport")
    .DataSource(dataSource => dataSource
        .Ajax()
        .Read(read => read
                .Action("AJAX", "Report")
                .Data("GetReportParms")
        )
    )
    .ToolBar(tools => {
        tools.Excel();
        tools.Template(@<text>
           <div class="toolbar">
                <label class="category-label" for="category">Version:</label>
                    @(Html.Kendo().DropDownList()
                        .Name("ddlField")
                        .DataTextField("Text")
                        .DataValueField("Value")
                        .AutoBind(true)
                        .Events(e => e.Change("fieldChange"))
                        .DataSource(ds =>
                        {
                            ds.Read("FieldType", "Common");
                        })
                    )
            </div>
        </text>);
    })

All the examples I can find show either a DropDownList in a Toolbar Template OR the built in Excel toolbar button.  I need both.

Thanks
Dimiter Madjarov
Telerik team
 answered on 05 Feb 2015
2 answers
859 views
I have a bunch of buttons that each bring up the same context menu.  I need the context menu to position itself at the mouse click on the button.

In ASP.NET this is accomplished by using code like this.

function OpenAddRowMenu(event) {
    var contextMenu =  $("#AddRowMenu");
    if ((!event.relatedTarget) || (!$telerik.isDescendantOrSelf(contextMenu.get_element(), event.relatedTarget))) {
        contextMenu.show(event);
    }
    else {
        alert("Event error");
    }
}

The button

<button class="btn btn-primary" onclick="OpenAddRowMenu(event); return false;">Add Row</button>
 
I cannot find anything on positioning a context menu or any possible parameters to show().  The MVC documentation is really thin and the examples only show so much.
George
Top achievements
Rank 2
 answered on 05 Feb 2015
1 answer
466 views
Hi there

We are using Kendo Charts in our application. We can successfully export the charts using the following jQuery.
$("#exportASPBarChart").click(function () {
    var chart = $("#ASPBarChart").data("kendoChart");
    var image = chart.imageDataURL();
    var a = $("<a>").attr("href", image).attr("download", "ASPBarChart.png").appendTo("body");
    a[0].click();
});
Is there a way to export the data to a Excel file?

Thank you.
Iliana Dyankova
Telerik team
 answered on 05 Feb 2015
1 answer
402 views
Hi,

I am trying to maintain state of kendo grid like Page Number,Page Size using session. I have referenced below example from your forum

http://www.telerik.com/support/code-library/save-grid-state-in-session-on-server-side

Problem is I don't have any button to Save or Load the grid state like above exmaple. 

I am saving the grid state on DataBound event of Grid and Loading the sate back from session in Document.ready function.

But its not working for me as  Index_Read function for Ajax binding of Grid  is always getting called first before LoadGridState function and thus session object is getting overridden with defualt values for pagesize, pageno etc.

Can you please help me on this.

Thanks
Aarti



Daniel
Telerik team
 answered on 05 Feb 2015
1 answer
286 views
I am having difficulty finding an example for binding the Kendo UI Grid for MVC 4 to a DataTable when using the ASPX view engine.

I reviewed the example in this forum http://www.telerik.com/support/code-library/binding-to-datatable-0191a594e359 and I am finding other examples using the Razor view engine.

Unfortunately, the MVC project to which I am assigned is very large and it is not a priority to convert to the Razor view engine at this time.  The priority is a conversion from MVC 2 to MVC 4 and it was expected the upgrade will go more quickly to stay with the ASPX view engine until a later date.

The requirements are
1. Stick with the ASPX view engine for now and 
2.  Upgrade the controls to work with MVC 4 (for this we are using the latest Kendo UI for MVC 4).

The binding scenario is to pull the DataTable from a session object called "GridResults" (That's right, it's not returned by the controller directly).

We also need to add the DataKeys to the grid when binding to the session-held DataSource.

If there are any examples of binding to a session DataSource returning a DataTable it would be appreciated.  Adding data keys would be a bonus.

Thank you
Atanas Korchev
Telerik team
 answered on 05 Feb 2015
4 answers
168 views
Hi

How do I make the listview scroll horizontally.

Thanks
Ant
Top achievements
Rank 1
 answered on 05 Feb 2015
8 answers
411 views
Hi,

I have kendogrid with list of dropdown filters. 
I am stuggling to call the javascript to load the dropdown in the ready function.
Basically I am not able to find the dropdown element in the grid so that I can call the javasript to load the dropdown again.

View Code:

  @using (Html.BeginForm("ReplaySelectedInboundMessages", "Home"))
   {
    <div id="gridContent">
       <h1></h1>  
    @(Html.Kendo().Grid<ViaPath.MessageReplay.MvcApp.Models.LogModel>(Model)
    .Name("gridTable") 
   //.EnableCustomBinding(true)
    .HtmlAttributes(new {style = "font-family: verdana,arial,sans-serif; font-size: 11px;color: #333333;border-color: #999999;"})       
    .Columns(columns => 
        {
          columns.Template(@<text><input class="box"  id="assignChkBx" name="assignChkBx" type="checkbox" value="@item.LogID"/></text>).HeaderTemplate(@<text><input class="selectAll" type="checkbox" id="allBox" onclick="toggleSelection()"/></text>).Width(20);
            //columns.Template(p => { }).ClientTemplate("<input type='checkbox' #= CheckSelect ? checked='checked':'' # class='chkbx' />");
                    
            columns.Bound(p => p.LogID).Template(p => Html.ActionLink(((string)p.LogID), "MessageDetails", new { logid = p.LogID })).Width(200);
            columns.Bound(p => p.ReceivePortName).Width(100).Filterable(ft => ft.UI("ReceivePortsFilter")); //.Filterable(ftb => ftb.Cell(cell => cell.Operator("contains")));
            columns.Bound(p => p.SendPortName).Width(100).Filterable(ft => ft.UI("SendPortsFilter"));
            columns.Bound(p => p.loggedDate).Format("{0:MM/dd/yyyy hh:mm tt}").Filterable(f => f.UI("DateTimeFilter").Extra(true)).Width(100);
            columns.Bound(p => p.ControlID).Width(100);
            columns.Bound(p => p.SenderID).Width(100).Filterable(ft => ft.UI("SenderIDFilter"));
            columns.Bound(p => p.ReceiverID).Width(100).Filterable(ft => ft.UI("ReceiverIDFilter"));
            columns.Bound(p => p.InterchangeID).Width(100);
            columns.Bound(p => p.ReplayedCount).Width(100);
            columns.Bound(p => p.RetryCount).Width(100);
            columns.Bound(p => p.AckCode).Width(20);
        })
           // .Filterable(ftb => ftb.Mode(GridFilterMode.Row))
            .Filterable()
            .Pageable(page => page.PageSizes(new int[]{10,25,50,100}).Enabled(true))
            .Sortable()
            .Scrollable(src => src.Height("auto"))
            .Resizable(resize => resize.Columns(true))
            )

         <br />
        <br />
        <input type="Submit" name="btnReplayMessage" value="Replay" title="Replay Message" \>
</div>  
      <script type="text/javascript">
          function ReceivePortsFilter(element) {
              element.kendoDropDownList({
                  dataSource: {
                      transport: {
                           read: "@Url.Action("FilterMenuCustomization_ReceivePorts")"
                          
            }
        },
        optionLabel: "--Select Value--"
    });
          }



          function SendPortsFilter(element) {
              element.kendoDropDownList({
                  dataSource: {
                      transport: {
                          read: "@Url.Action("FilterMenuCustomization_SendPorts")"

                      }
                  },
                  optionLabel: "--Select Value--"
              });
          }

          function ReceiverIDFilter(element) {
              element.kendoDropDownList({
                  dataSource: {
                      transport: {
                          read: "@Url.Action("FilterMenuCustomization_ReceiverID")"

            }
        },
        optionLabel: "--Select Value--"
    });
          }

          function SenderIDFilter(element) {
              element.kendoDropDownList({
                  dataSource: {
                      transport: {
                          read: "@Url.Action("FilterMenuCustomization_SenderID")"

                      }
                  },
                  optionLabel: "--Select Value--"
              });
          }


          function DateTimeFilter(control) {
              $(control).kendoDateTimePicker();
          }

          $(document).ready(function () {
              
             
              
              
              var grid = $("#gridTable").data("kendoGrid");
              var dropdown = grid.pager.element
                               .find(".k-pager-sizes [data-role=dropdownlist]")
                               .data("kendoDropDownList");

              var item = {};
              item[dropdown.options.dataTextField] = "All";
              item[dropdown.options.dataValueField] = 1000000;
              dropdown.dataSource.add(item);

              dropdown.bind("change", function (e) {
                  if (this.text() == "All") {
                      grid.one("dataBound", function () {
                          setTimeout(function () {
                              dropdown.span.text("All");
                          });
                      });
                  }
              });
          });
      </script>
       
   }
   
   Controller Code:
   public ActionResult AllMessages([DataSourceRequest(Prefix = "gridTable")] DataSourceRequest request)
        {
            //var filterCollection = KendoGridFilterCollection.BuildCollection(Request);
            List<LogModel> logs = null;
             if (request.Filters == null)
                logs = this.GetAllMessages().Where(x => x.loggedDate >= DateTime.Today.AddDays(-7)).ToList();
             else
                 logs = this.GetAllMessages();
            
            Session.Clear();
            Session["ReceivePortsList"] = logs.OrderBy(e => e.ReceivePortName).Select(a => a.ReceivePortName).Distinct();
            Session["SendPortName"] = logs.OrderBy(e => e.SendPortName).Select(a => a.SendPortName).Distinct();
            Session["SenderID"] = logs.OrderBy(e => e.SenderID).Select(e => e.SenderID).Distinct();
            Session["ReceiverID"] = logs.OrderBy(e => e.ReceiverID).Select(e => e.ReceiverID).Distinct();

            return View(logs);
        
        }

        public ActionResult FilterMenuCustomization_ReceivePorts()
        {

            //List<LogModel> logs = this.GetAllMessages();
            //return Json(logs.Select(e => e.ReceivePortName).Distinct(), JsonRequestBehavior.AllowGet);

            return Json(Session["ReceivePortsList"], JsonRequestBehavior.AllowGet);
           
        }
Alexander Popov
Telerik team
 answered on 05 Feb 2015
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
Dialog
MultiColumnComboBox
DropDownTree
Checkbox
Slider
Switch
Notification
Accessibility
ListView (Mobile)
Pager
Security
ColorPicker
DateRangePicker
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
DropDownButton
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
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
SmartPasteButton
PromptBox
SegmentedControl
LLM Kit
+? more
Top users last month
Tien
Top achievements
Rank 1
Iron
Krasimir
Top achievements
Rank 3
Bronze
Iron
Iron
Cedar
Top achievements
Rank 1
Iron
Emil
Top achievements
Rank 1
Iron
Kyle Watson
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Tien
Top achievements
Rank 1
Iron
Krasimir
Top achievements
Rank 3
Bronze
Iron
Iron
Cedar
Top achievements
Rank 1
Iron
Emil
Top achievements
Rank 1
Iron
Kyle Watson
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?