Telerik Forums
Kendo UI for jQuery Forum
1 answer
288 views
Hi Guys, 

I am getting an error in dropdown list. 

Overload resolution failed because no Public 'BindTo' is most specific for these arguments:
    'Public Function BindTo(dataSource As System.Collections.Generic.IEnumerable(Of SelectListItem)) As Kendo.Mvc.UI.Fluent.DropDownListBuilder':
        Not most specific.
    'Public Function BindTo(dataSource As System.Collections.Generic.IEnumerable(Of DropDownListItem)) As Kendo.Mvc.UI.Fluent.DropDownListBuilder':
        Not most specific.

This is the line where this exception is being thrown at:

    <div class="editor-field">
        @(Html.Kendo().DropDownList().Name("ExternalMailItemID").BindTo(ViewData("ExternalMailItem")))       
        @Html.ValidationMessageFor(Function(model) model.ExternalMailItemID)
        </div>

This is what i am doing in the controller:

   <HttpPost()> _
        Function Create(ByVal collection As ExternalMailCost) As ActionResult
            Try
                If _repositoryForMailItem.IsExternalMailItemExist(collection.ExternalMailItemID, collection.StartDate, collection.EndDate) = True Then
                    ModelState.AddModelError("", "Unable to add record. There is an overlapping record for this mail item")
                End If


                If ModelState.IsValid Then

                    'Check whether a cost has already been associated with the same mail item
                    ' if there is already cost associated, then check whether the dates selected overlapse?

                    _repositoryForMailCost.Save(collection, "VivekBa")
                End If
                Return View()

            Catch
                Return View()
            End Try
        End Function

The error is thrown when i add the error in the addmodelerror, otherwise it works fine. please help
Atanas Korchev
Telerik team
 answered on 13 Mar 2013
3 answers
220 views
Hi,

I am using the Trial version of Kendo UI for ASP.NET MVC [2012.3.1315.340]. I am trying to customize the filter menu for a grid column as per the demo provide at the site - http://demos.kendoui.com/web/grid/filter-menu-customization.html

However, I cannot seem to get this to work. Below is my code

@(Html.Kendo().Grid<MyViewModel>()
              .Name("importersGrid")
              .Columns(columns =>
                  {
                      columns.Bound(m => m.Status).ClientTemplate("#=StatusText#").Filterable(filterable => filterable.UI("statusFilter");
                      columns.Bound(m => m.ActionOn).Format("{0:MMM dd, yyyy HH:mm}");
                      columns.Bound(m => m.Name).Title("Organization Name").ClientTemplate(@"# if (Status != 1) {# <a href=""Organizations/Show?id=#=PublicId#"">#=Name#</a> #} else {# <a href=""Importers/ApproveReject?id=#=PublicId#"">#=Name#</a>#}#");
                      columns.Bound(m => m.OrganizationCode);
                      columns.Bound(m => m.PrimaryLocation.City).Sortable(false);
                      columns.Bound(m => m.PrimaryLocation.Country).Sortable(false);
                      columns.Bound(m => m.PublicId).Sortable(false).Title("Actions").ClientTemplate(@"# if (Status==1) { #<a href=""Organizations/ApproveReject?id=#=PublicId#"" class=""approve-reject k-button"">Approve/Reject</a>#}#");
                  })
              .Scrollable()
              .Filterable(filterable => filterable.Extra(false).Operators(operators => operators
            .ForString(str => str.Clear()
                .StartsWith("Starts with")
                .IsEqualTo("Is equal to")
                .IsNotEqualTo("Is not equal to")
            )))
              .Sortable(sortable => sortable.SortMode(GridSortMode.SingleColumn))
              .Pageable(pageable => pageable.ButtonCount(5).PageSizes(new[] { 10, 25, 35 }).Info(true).Numeric(true).Messages(messages => messages.Display("Displaying {0} to {1} of {2} organizations")))
              .DataSource(dataSource =>
                          dataSource
                              .Ajax()
                              .ServerOperation(true)
                              .Sort(sort => sort.Add("Status").Ascending())
                              .Read(read => read.Action("GetCompanies", "Organizations", new { Area = "MyCompanies" }).Type(HttpVerbs.Get))
              ))
And below is my JavaScript

<script type="text/javascript">
        function statusFilter(element) {
            element.kendoDropDownList({
                dataSource: [
                    { text: "A", value: "1" },
                    { text: "B", value: "2" },
                    { text: "C", value: "3" },
                    { text: "E", value: "4" }
                ],
                filter: "contains"
            });
        }
    </script>
Now the MyViewModel.Status is an enum with values X, Y, Z.

When I run the application, and I get to see the Grid. The filter shows a dropdown of values X, Y, Z as per the Enum which is not what I expected. I wanted to see A, B,C, E as values and for some reason the statusFilter() function is never called. I set debug points using Web Dev tools in Chrome and it is never hit. I even placed the script tag above the point I declared the Grid. I see no JavaScript errors.

Please help!

Regards,
Ranganath Kini
Atanas Korchev
Telerik team
 answered on 13 Mar 2013
1 answer
96 views
You can reproduce this issue here on the "Batch Editing" demo: http://demos.kendoui.com/web/grid/editing.html

1. Edit any row. Note that the red "dirty cell marker" appears in the upper left corner.
2. Select a different row than the one you edited and Delete it.
3. The dirty cell marker on the first row disappears.

Is there any workaround for this issue?

Thanks!

Vladimir Iliev
Telerik team
 answered on 13 Mar 2013
2 answers
92 views
Being very new to Kendo UI, I'm trying to populate a grid using the following code:

In the <body> of an ascx file (it is hosted inside another page):

    <body>
        <script src="jquery.min.js"></script>
        <script src="kendo.web.min.js"></script>
        <script src="knockout-2.2.1.js"></script>
        <script src="knockout-kendo.min.js"></script>
        <script src="Jobs.js"></script>
        
        <div id="grdJobs" data-bind="kendoGrid: grdJobs"></div>

        <script type="text/javascript">
            initJobs('<%=GetRootUrl() %>');
        </script>
    </body>

In Jobs.js:

function JobViewModel() {
    var self = this;
    
    self.jobData = new ko.observableArray([]);

    self.grdJobs = {
        data: self.jobData,
        scrollable: true,
        sortable: true,
        filterable: false,
        columnMenu: true,
        resizable: true,
        columns: [
            { title: "State", field: "State" },
            { title: "Job ID", field: "JOBID" },
            { title: "Owner", field: "Owner" },
            { title: "Description", field: "Description" },
            { title: "Run State", field: "RunState" },
            { title: "Start Time", field: "StartTime" },
            { title: "End Time", field: "EndTime" },
            { title: "Elapsed Time", field: "ElapsedTime" },
            { title: "Progress", field: "Progress" },
            { title: "Agent", field: "agent" },
            { title: "Last Action", field: "LastAction" }
        ],
        selectable: "single"
    };
};

var g_oJobViewModel = new JobViewModel();
var g_strRootUrl;

function initJobs(strRootUrl) {
    g_strRootUrl = strRootUrl;
    ko.applyBindings(g_oJobViewModel);
    loadJobs();
}

function loadJobs() {
    var strJobsHandler = g_strRootUrl + "/JobResultViewerHandler";
    var joData = { Operation: "Load", Agent: "All Agents", DateRange: "Today", Owner: "My Jobs", FromDate: new Date().toString(), ToDate: new Date().toString() };

    $.ajax({
        url: strJobsHandler,
        type: 'post',
        dataType: 'json',
        data: JSON.stringify(joData),
        success: function (joResult) {
            var realData = [];

            if (joResult.Data.length > 0) {                
                $.each(joResult.Data, function (index, obj) {
                    var arrayElem = {};
                    
                    $.each(obj, function (key, value) {
                        var strKey = joResult.Dictionary[key];

                        if (strKey.indexOf(" ") > -1)
                            strKey = strKey.replace(" ", "");
                        
                        arrayElem[strKey] = joResult.Dictionary[value];
                    });
                    
                    realData.push(arrayElem);
                });

                g_oJobViewModel.jobData.removeAll();
                ko.utils.arrayPushAll(g_oJobViewModel.jobData(), realData);
                g_oJobViewModel.jobData.valueHasMutated();
            }
            },
        error: function(xhr, errorType, exception) {
            //log? or display message?
        }
    });
}

Now the problem:

If I leave "data: self.jobData" in the view model, I see the grid column headers, but loadJobs() DOES NOT get called. If I comment out "data: self.jobData" in the view model, loadJobs DOES get called and the server returns the correct data and it maps correctly to the grid colum fields accoring to looking at the data in a debug session of Google Chrome. However, in BOTH cases, I DO NOT see ANY data in the grid! This is VERY frustrating and I have NO idea idea what I am doing wrong. :( It seems like something is going wrong in the binding, resulting in the data not being displayed in the grid. Except for some differences in how a page is constructed in another part of the application where that page uses a C# HTMLWriter on the server to create the HTML and uses $(document).ready(function() to declare the kendoGrid, the rest of the JS code is virtually identical to what I've described above. Is this enough difference that that page would display data in its grid and mine doesn't? I would think not, but at this point, I don't know. It's too much work to rework my code like the other page so I'd like to resolve my grid data display issue within the above Javascript if this is at all possible with the least amount of effort. I just hope I'm not asking for too much. TIA

Alexander Valchev
Telerik team
 answered on 12 Mar 2013
0 answers
71 views
EDIT: found it!  Woohoo.  headerAttributes { }


Tim R
Top achievements
Rank 1
 asked on 12 Mar 2013
1 answer
85 views
Hello,

I'm trying to pass a reference of a template'd checkbox in a grid to a Javascript function:

columns: [
...
     { title: "&nbsp;", field: "someBoolean", sortable: true, template: "#= DisplayCheckbox(IDx, IDy, someBoolean, this) #" },
...
]

DisplayCheckbox looks like this:

function DisplayCheckbox(IDx, IDy, someBoolean, theCheckbox) {
    return '<input type="checkbox" onclick="AFunction(' + IDx + ', ' + IDy + ', ' + theCheckbox + ')" ' + (someBoolean === true ? 'checked ' : '') + (isAuthorized === true ? '' : 'disabled') + ' />';
}
I'm passing a reference of the checkbox in order to update the underlying model on check-change event.  I'm already doing other work via an AJAX call.  The update of the underlying datasource is to simply allow for sorting to work until the next page refresh.

If I'm going about this bass-ackwards, can you point me in the right direction to go?  If I am on the right track, you probably caught that I can't pass 'this' using the '#= ... #' template render directive.  How would I do that?

Thanks
Zeke Palmolive
Top achievements
Rank 1
 answered on 12 Mar 2013
1 answer
469 views
Hi

How can i get the height of the kendo treeview after the node has been expanded/collapsed?
Dimo
Telerik team
 answered on 12 Mar 2013
3 answers
233 views
Hi

I want to keep the both panes inside a container to have 100% height. The panes should fit to content. But it is taking the default height as 300px.
Dimo
Telerik team
 answered on 12 Mar 2013
9 answers
362 views
Hello!

I'm having a bit of a problem with the uploader all of a sudden -- I'm thinking that it's happened since the latest version of kendoui (2012.3.1114), but I might be wrong with that.

I have an input field in my view:                     
<input id="personalDetails_files" type="file" />

and some code to wire it up:
$("#personalDetails_files").kendoUpload({
    async: {
        saveUrl: "/Uploader/SaveUserThumbnail.aspx",
        removeUrl: "/Uploader/RemoveUserThumbnail.aspx",
        autoUpload: true,
        multiple: false
    },
    select: function (e) {
        if ($('#personalDetails_files').parents(".k-upload").find('.k-file').length >= 1) {
            e.preventDefault();
        }
    },
    upload: function (e) {
        debugger;
    },
    success: function (e) {
        if (e.operation == "remove") {
            //k-upload-button
            $('#personalDetails_files').parents(".k-upload").find('.k-upload-button').show();
            $("#imgPersonalDetails_Thumbnail")[0].src = "/styles/" + currentTheme + "/default.png";
        } else {
            //k-upload-button
            $('#personalDetails_files').parents(".k-upload").find('.k-upload-button').hide();
            $("#imgPersonalDetails_Thumbnail")[0].src = "/UserThumbnails/" + window.currentUser.ID + "_" + e.files[0].name;
        }
        //remove the select button
    },
    remove: function (e) {
 
    },
    error: function (e) {
    }
});

This works great in the latest version of IE/Windows 8, but when I try it in Chrome it fails when the file is uploaded to the server.

The request payload in Chrome>Network Tab is:  ------WebKitFormBoundarygQUKJsVmVusYpfYS--

So, it appears that the uploaded file is not getting added to the submit form that goes to the server.   

Any ideas as to why this is happening? 

Thanks!



Vladimir Iliev
Telerik team
 answered on 12 Mar 2013
0 answers
215 views
I have a Grid. Add & Edit has been done through modal popup . For modal pop-up i have used template. I want to have multiple forms in modal pop-up . There each form should have its own validation. 
sample code :

<div id="CurrentDiv">
    <div class="editor-label">
        @this.Html.LabelFor(model => model.Stations.Name)
    </div>
    <div class="editor-field">
        <input class="text-box single-line" id="StationName" required="required" name="StationName" validationMessage="Station Name Required!" type="text" value="" />
        <span class="k-invalid-msg" data-for="StationName"></span>
    </div>
     
     <div class="editor-label">
        @this.Html.LabelFor(model => model.Stations.ChannelID)
    </div>
    <div class="editor-field">
       <input name="ChannelID"  id="ddlChannelID" data-source="dsChannelDropdown" data-text-field="Text" 
        required="required"   validationMessage="Channel Required!" 
    data-value-field="Value" data-bind="value:ChannelID" data-role="dropdownlist" data-option-label="Select Channel..." disabled="disabled"  />
       <span class="k-invalid-msg" data-for="ChannelID"></span>
        <a href="javascript:void(0)" onclick="showHideChannel(true);">Add</a>
    </div>
</div>   
 div id="divChannel" style="display:none;">
  <div class="editor-label">
        Name :
    </div>
    <div class="editor-field">
        <input class="text-box single-line" id="ChannleName"name="ChannleName" validationMessage="Channle Name Required!" type="text" value="" />
        <span class="k-invalid-msg" data-for="ChannleName"></span>
    </div>
      <div class="editor-label">
         Description :
    </div>
    <div class="editor-field">
        <input class="text-box single-line" id="ChannelDescrip"
         name="ChannelDescrip" validationMessage="Channel Description Required!" type="text" value="" />
        <span class="k-invalid-msg" data-for="ChannelDescrip"></span>
    </div>
    <div>
<a class='k-button k-button-icontext' onclick='SaveChannel();'>Add</a>
<a class='k-button k-button-icontext' onclick='showHideChannel(false);'>Cancel</a>
<a class='k-button k-button-icontext' onclick='showHideChannel(false);'>Back</a>
</div>
</div>
 <script type="text/javascript" language="javascript">
function SaveChannel() {

        $.ajax({
            type: "POST",
            url: "/Channel/CreateAjax",
            data: {
                Id: '0',
                Name: $("#ChannleName").val(),
                Descrip: $("#ChannelDescrip").val(),
                Enabled: true
            },
            error: function (error) {
                alert(error);
            },
            success: function (response) {
                alert(response);
            }
        })
        return false;

    }
    function showHideChannel(show) {
        if (show) {
            $("#divChannel").show();
            $('#CurrentDiv').hide();
            $(".k-edit-form-container").find(".k-grid-update").hide();
            $(".k-edit-form-container").find(".k-grid-cancel").hide();
            $(".k-window-title").html("Add Channel");

        } else {
            dsChannelDropdown.read();
            if ($("#ChannleName").val() != "") {
                var ddlChannelID = $("#ddlChannelID").data("kendoDropDownList")
                ddlChannelID.text($("#ChannleName").val());
            }
            $("#divChannel").hide();
            $('#CurrentDiv').show();
            $(".k-edit-form-container").find(".k-grid-update").show();
            $(".k-edit-form-container").find(".k-grid-cancel").show();
            $(".k-window-title").html("Add/Edit Station");
            
           
        }
    }

</script>


on click of add button it will show channelDiv and will hide currentDiv on click of Add button it will call ajax method and will save channel and will take you back to currentDiv where in dropdown currently added channel will appear. and on click of update button of main div it will save station information in db .
problem is on click of update in Main modal pop-up , it calls validation of all Divs , where as I want validation of currentDiv should be done . and on click of Add button of channelDiv it should validate Channel Div .
Sameer
Top achievements
Rank 1
 asked on 12 Mar 2013
Narrow your results
Selected tags
Tags
Grid
General Discussions
Charts
Data Source
Scheduler
DropDownList
TreeView
MVVM
Editor
Window
DatePicker
Spreadsheet
Upload
ListView (Mobile)
ComboBox
TabStrip
MultiSelect
AutoComplete
ListView
Menu
Templates
Gantt
Validation
TreeList
Diagram
NumericTextBox
Splitter
PanelBar
Application
Map
Drag and Drop
ToolTip
Calendar
PivotGrid
ScrollView (Mobile)
Toolbar
TabStrip (Mobile)
Slider
Button (Mobile)
Filter
SPA
Drawing API
Drawer (Mobile)
Globalization
LinearGauge
Sortable
ModalView
Hierarchical Data Source
Button
FileManager
MaskedTextBox
View
Form
NavBar
Notification
Switch (Mobile)
SplitView
ListBox
DropDownTree
PDFViewer
Sparkline
ActionSheet
TileLayout
PopOver (Mobile)
TreeMap
ButtonGroup
ColorPicker
Pager
Styling
MultiColumnComboBox
Chat
DateRangePicker
Dialog
Checkbox
Timeline
Drawer
DateInput
ProgressBar
MediaPlayer
ImageEditor
TextBox
OrgChart
Effects
Accessibility
PivotGridV2
ScrollView
BulletChart
Licensing
QRCode
ResponsivePanel
Switch
Wizard
CheckBoxGroup
TextArea
Barcode
Breadcrumb
Collapsible
Localization
MultiViewCalendar
Touch
RadioButton
Stepper
Card
ExpansionPanel
Rating
RadioGroup
Badge
Captcha
Heatmap
AppBar
Loader
Security
TaskBoard
Popover
DockManager
FloatingActionButton
CircularGauge
ColorGradient
ColorPalette
DropDownButton
TimeDurationPicker
ToggleButton
TimePicker
BottomNavigation
Ripple
SkeletonContainer
Avatar
Circular ProgressBar
FlatColorPicker
SplitButton
Signature
Chip
ChipList
VS Code Extension
AIPrompt
PropertyGrid
Sankey
Chart Wizard
OTP Input
SpeechToTextButton
InlineAIPrompt
StockChart
ContextMenu
DateTimePicker
RadialGauge
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?