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

I have a popup grid and I am using a template in Shared/EditorTemplates/_TeamSocial.cshtml.
However when the popup opens the TeamID value @Model.TeamID = 0.

How do I get the ID to pass over correctly?

 

Grid code:

@(Html.Kendo().Grid<BusinessApplication.DTO.DTOTeamSocialGrid>().Name("grid")
 
    .Columns(col =>
    {
        col.Bound(m => m.SocialCompanyName);
        col.Bound(m => m.SocialURL);
        col.Bound(m => m.CurrentStatus);
        col.Command(command => { command.Edit().HtmlAttributes(new { @class = "btn" }); }).Width(100);
        col.Command(command => { command.Destroy().HtmlAttributes(new { @class = "btn" }); }).Width(100);
         
    })
        .ToolBar(toolbar => toolbar.Create().Text("Add/Edit social link"))
    .Editable(editable => editable.Mode(GridEditMode.PopUp)
        .TemplateName("_TeamSocial")
        .Window(w => w.Width(600))
        .Window(w =>w.Title("Add/Edit social link")))  
    .Pageable()
    .Sortable()
    .Scrollable(s => s.Height("auto"))
    .DataSource(dataSource => dataSource
        .Ajax()
        .PageSize(20)
        .Events(events => events.Error("error_handler"))
        .Model(model => model.Id(m => m.TeamID))
        .Create(update => update.Action("TeamSocial_Create", "Team", new { teamID = Model.TeamID }))
        .Read(read => read.Action("GetTeamSocialGridItems", "Team", new { teamID = Model.TeamID }))
        .Update(update => update.Action("TeamSocial_Update", "Team", new { teamID = Model.TeamID }))
        .Destroy(update => update.Action("TeamSocial_Delete", "Team", new { teamID = Model.TeamID }))
    )
    )
    <script type="text/javascript">
        function error_handler(e) {
            if (e.errors) {
                var message = "Errors:\n";
                $.each(e.errors, function (key, value) {
                    if ('errors' in value) {
                        $.each(value.errors, function () {
                            message += this + "\n";
                        });
                    }
                });
                alert(message);
            }
        }
 
    </script>

 

Template popup code:

@model BusinessApplication.DTO.DTOTeamSocialGrid
 
<!-- Social URL -->
<div class="form-group required  col-xs-10 col-xs-offset-1">
    <span class="pull-right" data-toggle="tooltip"
          title="Enter the social website URL including 'http:// and the username'"
          data-placement="left">
        <i class="fa fa-question-circle"></i>
    </span>
 
    <label for="SocialURL">Social URL</label>
    <input type="text" class="form-control" id="SocialURL" placeholder="Enter the website URL (http://)" name="SocialURL"
           data-fv-notempty="true"
           data-fv-notempty-message="The social URL is required and cannot be empty"
           data-fv-uri="true"
           data-fv-uri-message="The social URL is not valid, it must start with http:// or https://">
</div>
 
<div class="clearfix"> </div>
<div class="form-group  col-xs-10 col-xs-offset-1">
 
 
 
 
    <label class="checkbox">
        <input name="CurrentStatus" type="checkbox" id="CurrentStatus" @if (Model.CurrentStatus == BusinessApplication.Base.PPConstants.CurrentStatus.Active) { @: checked
                                                                                                                                                                                                                                                                                                                                                                           }> Set LIVE
    </label>
</div>
 
 
@Html.Hidden("TeamID", Model.TeamID)
<div class="clearfix"> </div>

 

Thanks 

Tom

Tom
Top achievements
Rank 1
 answered on 20 May 2016
1 answer
695 views

We are using Kendo MVC Grid in our application. We are using LINQ to EF to query the tables.

Following is a query in our application:

query.Where(ExpressionBuilder.Expression<ParentTable>(command.Request.Filters))

This works fine as long as the filters are any columns from the "ParentTable". However, the ParentTable has a navigation collection ICollection<ChildTable> and the ChildTable has a property ChildProperty and the method ExpressionBuilder.Expression fails when we use this ChildProperty for filtering.

Any solution for this problem?

Thanks

T. Tsonev
Telerik team
 answered on 19 May 2016
4 answers
2.6K+ views

Hi guys, currently i have this scenario where i want to get the selected row id after clicking on the edit button and pass that id to the action method...

Please let me know if this is possible. here is my code below that i have gathered so far...

function disableOnEdit(e) {
                      var model = e.model; //gets the model of the currently edited row
                      var Department = model.DepartmentID; //gets the value of the field "Department"
                   
              
                      $.ajax({
                          type: "POST",
                          data: Department,
                          url: '@Url.Action("GetUsers","Home")',
                          success: function (result) {
                              console.log(result);
                          }
                            })
                 
                     
 
                      $(".k-edit-form-container").parent().width(520).height(500).data("kendoWindow").center();
 
                      
                  }

and my grid code below
 
<div  style="clear:both;  position:relative; padding-top: 10px">
@(Html.Kendo().Grid<KendoUIApp1_Test.Models.IncidentsViewModel>()
              .Name("grid")
              .Columns(colums =>
    {
         */
        colums.Bound(p => p.DepartmentID).Hidden(true);
        colums.Bound(p => p.IncidentID).ClientTemplate("<a class='k-button' href='" + Url.Action("GetPDF", "Home") + "?IncidentID=#= IncidentID #'" + "> <span span class='k-icon k-i-pdf''></span>Get Incident Pdf</a>").Title("Download PDF").Filterable(false);
        colums.Bound(p => p.StatusName).Title("Status").Filterable(false);
        colums.Bound(p => p.ReferenceNo).Title("ReferenceNo").Filterable(false);
        colums.Bound(p => p.IncidentDate).Title("IncidentDate").ClientTemplate("#= kendo.format('{0:MM/dd/yyyy HH:mm:ss}',kendo.parseDate(IncidentDate)) #").Filterable(model => model.UI("IncidentDateFilter"));
        colums.Bound(p => p.AccountName).Title("AccountName").Filterable(false);
        colums.Bound(p => p.Department1).Title("Department").Filterable(false);
        colums.Bound(p => p.Description).Title("Description").Filterable(false);
        colums.Bound(p => p.Comments).Title("Comments").Filterable(false);
        colums.Bound(p => p.FirstName).Title("CurrentAssignedUser").Filterable(false);
        colums.Command(cmd => cmd.Edit());
 
    })
      .Filterable(filterable => filterable
        .Extra(true)
        .Operators(operators => operators
            .ForString(str => str.Clear()
                .StartsWith("Starts with")
                .IsEqualTo("Is equal to")
                .IsNotEqualTo("Is not equal to")
 
            ))
        )
 
    .HtmlAttributes(new { style = "height:550px;" })
    .DataSource(datasource => datasource
    .Ajax() //Configure the grid data source
    .Events(Eevents => Eevents.RequestEnd("OnChangeRefresh"))
    .Model(model =>
        {
            model.Id(m => m.IncidentID);
 
 
        })
    .Read(read =>
    {
        read.Action("GetIncidents", "Home").Data("IncidentsFilter");
    })// set the action method which will return the data in json format
 
    .Update(update => update.Action("Incidents_Update", "Home"))
    )
 
    .Navigatable()
    .Groupable()
    .Pageable()
    .Reorderable(reorder => reorder.Columns(true))
    .Sortable()
    .Scrollable()
        .Events(events =>
            {
                events.Save("onIncidentUserAssign");
                // events.Save("onStatusChange");
 
            })
 
            .Events(eEvents => eEvents.Edit("disableOnEdit"))
 
        //.Events(events =>
        //{
        //  events.Save("onStatusChange");
        //   // events.Save("onStatusChange");
 
        //})
 
 
    .Editable(ed => ed.Mode(GridEditMode.PopUp).TemplateName("Incidents")
                                               .Window(w => w.Title("Edit Incident Details")
                                               .HtmlAttributes(new {@class= "kendo-popup-editor" })
                                               .Scrollable(false)
                                               .Name("editWindow")))
                                              
                                                
                                               )

Danail Vasilev
Telerik team
 answered on 19 May 2016
1 answer
117 views

Hello, I'm trying to figure out the scrollbar functionality in Gridbuilder. In my particular case, as shown in the code below, I have a toolbar and some columns. The scrollbar is scrolling the entire grid, header and all. There appears to be another scroll bar for just the data but it is greyed out. What I'm trying to do is just get the data to scroll while leaving the header stationary. Any ideas? 

 

    .Name("Generic")
    .Columns(columns =>
    {
        columns.Bound(p => p.Name);
        columns.Bound(p => p.Desc);
    })
    .DataSource(dataSource => dataSource
        .Ajax()
        .Model(model =>
        {
            model.Id(p => p.ID);
        })
        .Create(create => create.Action("Create")
        .Read(read => read.Action("Read")
        .Update(update => update.Action("Update")
        .Destroy(destroy => destroy.Action("Delete")
        .PageSize(20)
    )
    .Sortable(sortable => sortable
        .AllowUnsort(true)
        .SortMode(GridSortMode.SingleColumn))
    .ToolBar(toolbar =>
    {
        toolbar.Template(@<text>
        @item.CreateButton("Add")
        @item.SaveButton("Save", "Cancel")
        </text>);
    })
)

Scott
Top achievements
Rank 1
 answered on 18 May 2016
2 answers
283 views

I would like to build a 2 sided multi select control like the following using Kendo UI MVC:

http://www.jqueryscript.net/demo/Two-side-Multi-Select-Plugin-with-jQuery-multiselect-js/

I would imagine to do this I would need to create a custom Kendo UI widget by inheriting from the base widget class?? Does anyone have any examples or ideas how to do this?

 

Thanks in advance,

Dave

David
Top achievements
Rank 1
 answered on 18 May 2016
16 answers
434 views
I have a listivew that has single selection set.

However, I need part of the template area (div) to not trigger the selection where clicking in inside that div will do something else than cause the onchange to fire.

How would I do this without using an iframe?

Thank You in Advance.
Rene Pilon
Dimiter Madjarov
Telerik team
 answered on 18 May 2016
4 answers
1.3K+ views

Hi there, 

I am trying to filter my grid using 2 dropdownlists in the toolbar template section of the grid. I have been able to copy the example http://demos.telerik.com/aspnet-mvc/grid/toolbar-template which works absolutely fine and I have also been able to replicate the code for another dropdownlist but they are performing separate filtering.

I would like to be able to filter by one dropdownlist and then filter the results of that filter by the next dropdownlist.

the grid code I currently have is:

.ToolBar(toolbar =>
              {
              toolbar.Template(@<text>
        <div class="toolbar">
            <label class="site-label" for="site">Show reports by site:</label>
            @(Html.Kendo().DropDownList()
                                .Name("sites")
                                .OptionLabel("All")
                                .DataTextField("SiteName")
                                .DataValueField("ClientSiteId")
                                .AutoBind(false)
                                .Events(e => e.Change("sitesChange"))
                                .DataSource(ds =>
                                {
                                    ds.Read("ToolbarTemplate_Sites", "Report");
                                }))
        </div>
<div class="new-toolbar">
    <label class="type-label" for="type">Show reports by type:</label>
    @(Html.Kendo().DropDownList()
                .Name("type")
                .OptionLabel("All")
                .DataTextField("StockTypeName")
                .DataValueField("StockTypeId")
                .AutoBind(false)
                .Events(e => e.Change("typesChange"))
                .DataSource(ds =>
                {
                    ds.Read("ToolbarTemplate_Types", "Report");
                }))
</div>
            </text>);
              })

 

// the Script

    function sitesChange() {
        var value = this.value(),
grid = $("#grid").data("kendoGrid");
        if (value) {
            grid.dataSource.filter({ field: "ClientSiteId", operator: "eq", value: parseInt(value) });
        } else {
            grid.dataSource.filter({});
        }
    }

    function typesChange() {
        var value = this.value(),
grid = $("#grid").data("kendoGrid");
        if (value) {
            grid.dataSource.filter({ field: "StockTypeId", operator: "eq", value: parseInt(value) });
        } else {
            grid.dataSource.filter({});
        }
    }

Any help would be greatly appreciated.

Regards

Rosen
Telerik team
 answered on 18 May 2016
6 answers
117 views

Hi there,

I set up my grid to use multiple grid filters which are combo boxes.  These filters allow you to refine your displayed data however there is a slight problem when using them.  Initially they work fine but when you use them in conjunction with one another you get an error

System.FormatException: String was not recognized as a valid DateTime.

I made 4 filters, 3 of them are string values and 1 of them is a datetime (see below).

@(Html.Kendo().ComboBox()
       .Name("periods")                               
       .Suggest(true)                               
       .Filter("contains")
       .DataTextField("Text")
       .DataValueField("Value")      
       .Events(e => e.Change("filterChange"))
       .BindTo(new List<SelectListItem>() {
             new SelectListItem() {
                   Text = "All",
                   Value = "30000"
             },
             new SelectListItem() {
                   Text = "3 Months",
                   Value = "90"
             },
             new SelectListItem() {
                   Text = "21 Days",
                   Value = "21" 
             }}))

@(Html.Kendo().ComboBox()
     .Name("locations")
     .Placeholder("-- Filter Region --")
     .Suggest(true)                               
     .Filter("contains")
     .DataTextField("Text")
     .DataValueField("Value")
     .AutoBind(false)
     .Events(e => e.Change("filterChange"))
     .BindTo(new List<SelectListItem>() {
         new SelectListItem() {
           Text = "Aberdeen",
           Value = "1"
         },
         new SelectListItem() {
           Text = "Norway",
           Value = "2"
         },
         new SelectListItem() {
           Text = "Southern Sector",
           Value = "3"
         },
         new SelectListItem() {
           Text = "North Sea",
           Value = "4"
         },
         new SelectListItem() {
           Text = "Brazil",
           Value = "7"
         },
         new SelectListItem() {
           Text = "Other",
           Value = "8"
         },
         new SelectListItem() {
           Text = "All",
           Value = ""
         }}))

@(Html.Kendo().ComboBox()
    .Name("owners")
    .Placeholder("-- Filter Owner --")
    .Suggest(true)
    .Filter("contains")
    .DataTextField("company_name")
    .DataValueField("company_name")
    .AutoBind(false)
    .Events(e => e.Change("filterChange"))
    .DataSource(ds =>
        {
          ds.Read("toolbar_Owners", "Home");
        }))

@(Html.Kendo().ComboBox()
    .Name("vessel_types")
    .Placeholder("-- Select Type --")
    .Suggest(true)
    .Filter("contains")
    .DataTextField("spot_name")
    .DataValueField("spot_name")
    .AutoBind(false)
    .Events(e => e.Change("filterChange"))
    .DataSource(ds =>
        {
          ds.Read("toolbar_Types", "Home");
        }))

If you filter on PERIODS and REGION there is no error at all.  If you filter on PERIODS and any other filter the above error regarding datetime is thrown.  Here is the javascript that handles the filters:

function filterChange() {
     var filters = [];
     var grid = $('#Grid').data('kendoGrid');
     var ddl_owners = $("#owners").getKendoComboBox().value();
     var ddl_region = $("#locations").getKendoComboBox().value();
     var ddl_types = $("#vessel_types").getKendoComboBox().value();
     var ddl_periods = $("#periods").getKendoComboBox().value();
     var value = this.value();
 
         //Convert value of dropdown to int
         intDays = parseInt(value),
         today = new Date(),
         addDays = ddl_periods.value;
 
     today.setDate(today.getDate() + intDays);
     today.setHours(0, 0, 0, 0);
   
     
     if (ddl_owners) {
         filters.push(
             {
                 field: "owner_company",
                 operator: "eq",
                 value: ddl_owners
             }
         );
     }
 
     if (ddl_region) {
         filters.push(
             {
                 field: "current_location_spotlist_id" && "spotlist_id",
                 operator: "eq",
                 value: ddl_region
             }
         );
     }
     if (ddl_types) {
         filters.push(
             {
                 field: "vessel_type",
                 operator: "eq",
                 value: ddl_types,                   
             }               
         );
         console.log("Type" + ddl_types);
     }
     if (ddl_periods) {
         filters.push(
             {
                 field: "fixture_stop",
                 operator: "lte",
                 value: today
             }
         );
         console.log("Period: " + today);
     }
     grid.dataSource.filter({
         logic: "and",
         filters: filters
     });
      
}

I am looking for some help on where I may have gone wrong.

 

Thanks

Maria Ilieva
Telerik team
 answered on 18 May 2016
2 answers
260 views
Because a grid i try to implement has records with many (large) dropdownboxes, i have set them to autobind false. Now when a record is set to editmode, the dropdownbox is empty, when clicked it is populated and the appropiate item is selected. Because an empty dropdownlist is confusing the user, i'm looking for a solution where the value is displayed.
View:
@(Html.Kendo().Grid<Indato.Data.EF.Models.Oplovk>()
      .Name("grid")
      .Columns(columns =>
      {
          columns.ForeignKey(c => c.idCategory, (System.Collections.IEnumerable)ViewData["Categories"], "idCategory", "Name").Title("Category").EditorTemplateName("Category");
      })
      .Editable(editable => editable.Mode(GridEditMode.InLine))
       
      .DataSource(dataSource => dataSource
          .Ajax()
          .Model(model =>
          {
              model.Id(p => p.id);
          })
      )
      .ClientDetailTemplateId("template")
 
Editortemplate:
@model object
  
@(
 Html.Kendo().DropDownListFor(m => m)
        .AutoBind(false)
        .DataSource(ds =>
        {
            ds.Read("Catgories", "Category", new { Area = "Tabellen" });
        })
        .DataTextField("Name")
        .DataValueField("idCategory")
)
Ivan Danchev
Telerik team
 answered on 18 May 2016
3 answers
600 views

I have an AutoComplete control in a in a client template that uses the ToClientTemplate method

@(Html.Kendo().AutoComplete()
                    .Name("presenter")
                    .DataTextField("DisplayText")
                      .Filter("contains")
                      .MinLength(3)
                      .HtmlAttributes(new { style = "width:100%" })
                    .DataSource(source =>
                    {
                        source.Read(read =>
                        {
                            read.Action("Search", "People", new { SPHostUrl = ViewBag.SPHostUrl })
                                .Data("onPresenterAdditionalData");
                        })
                        .ServerFiltering(true);
                    })
                    .Template("<div><span class=\"k-state-default\">${ data.DisplayText }</span></div><div><span class=\"k-state-default\">${ data.Title }</span></div>")
                    .ToClientTemplate())

The controller is returning data and I have used Fiddler to make sure it is being sent to the browser.

The dropdown just shows "undefined" for DisplayText and "null" for Title.

The above control is in a template <script type="text/x-kendo-tmpl" id="documentDetailsTemplate"> and render using

var template = kendo.template($("#documentDetailsTemplate").html());

 

When I select one of the options, it displays the DisplayText of the selected option.

Ivan Danchev
Telerik team
 answered on 18 May 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
Wizard
Security
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
+? more
Top users last month
Cynthia
Top achievements
Rank 1
Iron
Toby
Top achievements
Rank 3
Iron
Iron
Iron
Danielle
Top achievements
Rank 1
Iron
Iron
Joel
Top achievements
Rank 3
Bronze
Bronze
Iron
yw
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Cynthia
Top achievements
Rank 1
Iron
Toby
Top achievements
Rank 3
Iron
Iron
Iron
Danielle
Top achievements
Rank 1
Iron
Iron
Joel
Top achievements
Rank 3
Bronze
Bronze
Iron
yw
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?