Telerik Forums
UI for ASP.NET MVC Forum
1 answer
109 views
Anyone know if this grid can have custom layouts that allow inline editing, but don't cause a popup?  I would like to just rearrange the rows to be stacked, but still be editable. Here is an simple layout example below:

LastName     Phone
FirstName     Email
Alexander Popov
Telerik team
 answered on 26 Feb 2014
1 answer
375 views
I am trying to implement a custom validator to require that a user enter a certain number of rows in my grid.  I am applying the validation attribute to the IEnumerable<T> that provides the rows for my grid.  The validation code gets called on the server side, but on the client side I don't see the data- properties anywhere in the page.  Is it possible to run a client-side validator for the grid as a whole?  If so, what do I need to do so that the client-side code is run?  I'm guessing that because there is no direct reference from the grid to the property, that the client-side validation is not being wired up.  Is there a way to work around this?  Could I bind the grid directly to the property somehow instead of going through the .Read() AJAX method to get the data?   

Here is my validation attribute:
[AttributeUsage(AttributeTargets.Field | AttributeTargets.Property, AllowMultiple = false, Inherited = true)]
    public class RequiredCountAttribute : ValidationAttribute, IClientValidatable
    {
        public const int NotRequiredCount = -1;
        private int minCount;
        private int maxCount;
 
        public string MinErrorMessage { get; set; }
        public string MaxErrorMessage { get; set; }
 
        public RequiredCountAttribute(int minCount, int maxCount = NotRequiredCount)
            : base()
        {
            this.minCount = minCount;
            this.maxCount = maxCount;
        }
 
        protected override ValidationResult IsValid(object value, ValidationContext validationContext)
        {
            if (value != null)
            {
                IEnumerable list = (IEnumerable)value;
 
                int count = 0;
                foreach (object o in list)
                    count++;
 
                if (count < minCount)
                {
                    string errorMessage = FormatErrorMessage(validationContext.DisplayName);
                    return new ValidationResult(errorMessage);
                }
 
                if (maxCount != NotRequiredCount && count > maxCount)
                {
                    string errorMessage = FormatErrorMessage(validationContext.DisplayName);
                    return new ValidationResult(errorMessage);
                }
            }
            return ValidationResult.Success;
        }
 
        public IEnumerable<ModelClientValidationRule> GetClientValidationRules(ModelMetadata metadata, ControllerContext context)
        {
            var rule = new ModelClientValidationRule();
            rule.ErrorMessage = FormatErrorMessage(metadata.GetDisplayName());
            rule.ValidationType = "requiredcount";
            rule.ValidationParameters.Add("mincount", minCount);
            if (maxCount != NotRequiredCount) rule.ValidationParameters.Add("maxcount", maxCount);
            yield return rule;
        }
    }


Here is the JavaScript piece:
(function ($, kendo) {
    $.extend(true, kendo.ui.validator, {
        rules: { // custom rules
            requiredCount: function (input, params) {
                //check for the rule attribute
                if (input.filter("[data-val-requiredcount]").length && input.val()) {
                    var minCount = $(input).attr('data-val-requiredcount-mincount');
                    var maxCount = $(input).attr('data-val-requiredcount-maxcount');
 
                    if (input.val() < minCount)
                        return false;
 
                    if (maxCount !== undefined && input.val() > maxCount)
                        return false;
                }
                return true;
            }
        },
        messages: { //custom rules messages
            requiredCount: function (input) {
                // return the message text
                return input.attr("data-val-requiredcount");
            }
        }
    });
})(jQuery, kendo);

Here is my grid definition:
@(Html.Kendo().Grid<AccountManagement.Business.ViewModels.Areas.DM.RehireDocumentSettingViewModel>()
                    .Name("DocumentSettings")
                    .Columns(columns =>
                    {
                        columns.Bound(ds => ds.Form)
                            .ClientTemplate("#= data.Form.Description #" +
                                "<input type='hidden' name='DocumentSettings[#= index(data)#].Form.FormID' value='#= data.Form.FormID #' />"
                            );
                        columns.Bound(ds => ds.DocumentDateType)
                            .ClientTemplate("#= DocumentDateType.Description #" +
                                "<input type='hidden' name='DocumentSettings[#= index(data)#].DocumentDateType.RehireDocumentDateType' value='#= DocumentDateType.RehireDocumentDateType #' />"
                            );
                        columns.Bound(ds => ds.RemoveIfOlderThanDays)
                            .ClientTemplate("#= RemoveIfOlderThanDays #" +
                                "<input type='hidden' name='DocumentSettings[#= index(data)#].RemoveIfOlderThanDays' value='#= RemoveIfOlderThanDays #' />"
                            );
                        columns.Command(command => command.Destroy());
                    }
                    )
                    .ToolBar(toolbar =>
                    {
                        toolbar.Create().Text(AccountManagement.Resources.AccountManagementResources.AddRehireDocumentSettingButtonText);
                    })
                    .Navigatable()
                    .Sortable()
                    .Scrollable()
                    .Editable(editable => editable.Mode(GridEditMode.InCell))
                    .DataSource(dataSource => dataSource
                        .Ajax()
                        .Batch(true)
                        .ServerOperation(false)
                        .Events(events => events.Error("error_handler"))
                        .Model(model =>
                            {
                                model.Id(ds => ds.Form.FormID);
                                model.Field(ds => ds.Form).DefaultValue(
                                    ViewData["defaultForm"] as AccountManagement.Business.ViewModels.Areas.DM.FormViewModel);
                                model.Field(ds => ds.DocumentDateType).DefaultValue(
                                    new AccountManagement.Business.ViewModels.Areas.DM.RehireDocumentDateTypeViewModel() {
                                        RehireDocumentDateType = AccountManagement.Models.RehireDocumentDateType.DateTypeNotSpecified
                                    }
                                );
                            }
                        )
                        .Read("RehireDocumentSetting_Read", "RehireSetup")
                    )
                )


Any help would be appreciated.

Thanks,
Brian
Petur Subev
Telerik team
 answered on 24 Feb 2014
4 answers
225 views
Hi. New here.

Below is a ListView and a DropDownList, as simple as possible, calling the same Web API for their data. 

The DropDownList works well. The ListView does show anything. What am I doing wrong?

The ListView API call is: http://localhost/api/vehicles?sort=&group=&filter=
The DropDownList API call is : http://localhost/api/vehicles

I would have assumed the .ServerOperation(false) would have removed the sort&group&filter from the Get. In any case, the JSON returned by both Gets is exactly the same. 

Thanks

PS: in case this is relevant, the Web API controller was generated by the Telerik Data Access Wizard and unmodified

<script type="text/x-kendo-template" id="vehicletemplate">
    <div>
        <p>Dummy Placeholder</p>
    </div>
</script>
 
<div class="col-md-4">
    @(Html.Kendo().ListView<Object>().Name("VehicleList")
        .ClientTemplateId("vehicletemplate")
        .TagName("div")
        .DataSource(ds => ds
            .ServerOperation(false)
            .Read(read => read
                .Url("/api/vehicles").Type(HttpVerbs.Get)
            )
        )
    )
 
    @(Html.Kendo().DropDownList()
        .Name("ddList")
        .DataTextField("Registration")
        .DataSource(ds => ds
            .Read(read => read
            .Url("/api/vehicles").Type(HttpVerbs.Get)
            )
        )
    )
</div>
Daniel
Telerik team
 answered on 24 Feb 2014
1 answer
366 views
What is the correct way to use RenderPartial in a splitter?

@(Html.Kendo().Splitter()
  .Name("vertical")
  .Orientation(SplitterOrientation.Vertical)
  .Panes(verticalPanes =>
  {
      verticalPanes.Add()
          .Size("100px")
          .HtmlAttributes(new { id = "top-pane" })
          .Collapsible(false)
           
          .Content(
                @Html.RenderPartial("HeaderPartialView");
          );
Darron
Top achievements
Rank 1
 answered on 21 Feb 2014
3 answers
130 views
Custom Edit issue with Child Object.
I have a grid with a Custom Editor. The object that I want to edit has a child object.
When I select update in the editor it updates both objects.
If I select edit again on the same object it brings up the editor in the current state as expected.
This time when I select update in the controller it shows the data for the child object in the original state.

What I am looking for at this point is an example of using the grid and update that actually updates a child object.
I've see lots of examples that update the parent object, of display a child detail but nothing that actually updates both the parent and child.
Do I need to create a separate update on the child inside of my Custom Editor?
Vladimir Iliev
Telerik team
 answered on 20 Feb 2014
1 answer
222 views
Hello,

I use a panel bar to load content from a partial view which receives an id to display some informations based on it. Is it possible to reload a pane with different id using? I want something like this:

<script>
function loadDetails(id) {
      // get a reference to the panel bar
      var panelBar = $("#panelbar").data("kendoPanelBar");
      // reload the panel bar
      panelBar.reload("#paneWithAjax", new {id = id});
}
</script>

The panel bar has a pane  added with 
.LoadContentFrom("ShowDetails", "Controller", new {id = id})

Regards


Alexander Popov
Telerik team
 answered on 20 Feb 2014
1 answer
122 views
Hi, Is this possible?
Petur Subev
Telerik team
 answered on 20 Feb 2014
2 answers
287 views
I have a ListView control which uses a client template something like:

<script type="text/x-kendo-tmpl" id="paperlist-template">
  ...
  <div>${kendo.toString(PublicationDate, "dd MMMM yyyy")}</div>
  ...
</script>

If I construct the ListView using:

@(Html.Kendo().ListView(Model.Papers)...

everything works fine and the dates display correctly.  Model.Papers is an IEnumerable<PaperListItem>.  PaperListItem.PublicationDate is a C# DateTime.

However, if I construct the ListView using:

@(Html.Kendo().ListView<IEnumerable<PaperListItem>>()...

the dates come out like "/Date(1382050800000)/".

Why is that?
Barrie
Top achievements
Rank 1
 answered on 20 Feb 2014
1 answer
104 views
As the title says, the 'Justify' buttons on the editor don't work.  They show up, but when I click them, nothing happens.  All the other toolbar buttons work perfectly, it's only the justify buttons that have a problem.

Here's my editor configuration:
@(Html.Kendo().Editor().Name("Description")
 .Encode(true)
.Tools(t => t.Clear().Bold().Italic().Underline()
.FontSize().FontName()
.InsertOrderedList().InsertUnorderedList()
.Indent().Outdent()
.JustifyLeft().JustifyRight()
.JustifyCenter().JustifyFull()))

Kendo Version: 2013.3.1119
Browser: IE10
Alex Gyoshev
Telerik team
 answered on 19 Feb 2014
1 answer
274 views
Hi,

I have successfully implemented two multiselect list. List1 contains states and List2 contains counties. What I want to achieve is when I click on List2, it populate only with counties exist in selected states from List1.

Here is what I did;

1. Attached to open even on List2.
2. Wrote a JS function that cause datasource to update for List2 sending data. data is selected from List1.

    function open() {
        console.log("event: open");
        var values = {
            selectedStates: $("#stateMultiSelect").val()
        };

        var stateItem = $('#countyMultiSelect').data('kendoMultiSelect');
        stateItem.dataSource.read(values);
    };
The problem seems to be in model binding, I can see the request contains the data but at controller action it does not map to the model.

Controller Action:

        public JsonResult GetCounties(StateMultiSelectModel seletedStates)
        {
// seletedStates is alway null when breakpoint hits here.

            if (selectedStates == null)
            {
...
            }
...
}
Model
    public class StateMultiSelectModel
    {
        public List<string> SelectedStates { get; set; }
    }
Following is the request sent to controller.


Request URL:
http://localhost:61135/Dashboard/GetCounties?text=&SelectedStates%5B%5D=NC


In the same JS file I have chart controls that are getting updated on a button click using similar mechanism.
Please suggest changes. For your reference attached cshtml file that contain UI control code and JS.
Shailendra
Top achievements
Rank 1
 answered on 18 Feb 2014
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
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
SmartPasteButton
PromptBox
SegmentedControl
+? more
Top users last month
Marco
Top achievements
Rank 4
Iron
Iron
Iron
Hiba
Top achievements
Rank 1
Iron
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
Max
Top achievements
Rank 1
Veteran
Iron
Alina
Top achievements
Rank 1
Want to show your ninja superpower to fellow developers?
Top users last month
Marco
Top achievements
Rank 4
Iron
Iron
Iron
Hiba
Top achievements
Rank 1
Iron
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
Max
Top achievements
Rank 1
Veteran
Iron
Alina
Top achievements
Rank 1
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?