Telerik Forums
UI for ASP.NET MVC Forum
3 answers
1.0K+ views
I have a form that isn't inside of an HTML form tag, and upon a specific button click, I gather up the form data, bundle it up as a JSON object, send to an MVC controller and get the results back via Ajax. Can I still use the Telerik Validator component, and if so, how?  Are there any examples of using it via Ajax versus a form submission?
Tsvetina
Telerik team
 answered on 22 Mar 2017
1 answer
1.8K+ views

Hi Telerik Team,

I am having telerik MVC kendo grid(server side grid), In the grid I have defined databinding event. In databinding I want to call web api and alter grid's underline items based on that, and want grid to take updated items and display in grid. mainly want grid to wait for ajax complete before invoking it's databound event. plz share how to achieve that.

Please find the code snippet below,

 @(Html.Kendo().Grid<Model>()
        .Name("grdResults")
    .Columns(columns =>
    {
        columns.Bound(e => e.Title).Title("Title").Width(300);
        columns.Bound(e => e.resources).Encoded(false).Width(100).Title("Resource").Sortable(false);       
    })
           
                           .Scrollable()
                           .DataSource(dataSource => dataSource
                           .Custom()
                           .Schema(sch =>
                           {
                               sch.Model(m =>
                               {
                                   m.Id("field1");
                                   m.Field(f => f.field1).Editable(false);
                               });
                           })
                           .Type("odata-v4")
                           .Transport(transport =>
                           {
                               transport.Read(read => read.Url(odataurl)
                                   .DataType("json")
                                   );

                           })
                           .PageSize(10)
                           .ServerPaging(true)
                           .ServerSorting(true)
            //.ServerFiltering(true)

    )
            .Sortable()
            .Pageable()           
            .Events(e => e.DataBinding("onDataBinding"))        
)

<script>

function onDataBinding(arg) {

//Making ajax call here and and changing the arg.items value for a particular column,but value is not getting updated in the grid 

Note: I am able to update the grid column value when I make async: false in ajax call

}

</script>

 

Thanks,

Prathibha

 

Alex Hajigeorgieva
Telerik team
 answered on 22 Mar 2017
1 answer
81 views
Hi All,

I am trying to submit one form having a grid in it. only example/demo so far which fits my needs is below:
sample used for posting form with grid
 
On top of that i did some small change and i am getting an issue.
Issue: 
The above given sample works fine and i can see that what ever changes were made to grid at client side, those all get posted to server when save is clicked.
but if i enable popup editing in grid, then none of items of grid data contains information on whether they were newly added or updated, same time deleted items are not coming in grid's destroyed list.

Please find attached sample(with said issue) which is exact same copy as sample with below changes:

1. enabled editing sing popup editor
2. using custom popup editor - named orderdetails

With this when i click on save, senddata js function is called but all array items which are sent to server in save ajax call are empty list. when i debugged i can see they are all empty as i am not getting dirty/isnew() giving true for added/edited rows. also grid.dataSource._destroyed.length is also 0, even after deleting few rows from grid.

Please help me solve this issue in this sample. Thanks.

Other more related query but not an issue:
In sample which i referred, list is maintained in static variable in controller, but i can't use static as that way it will be same list for all my users,
so wanted to know is there any built in support in grid where in i can just have read of datasource defined to read from db(controller action) on first load,
and then further add/update/delete happens at client side only and still it shall allow me to have popup editing enabled?
Note: I don't want to use session as unsaved data might be huge.

I am asking this as i understand if i remove update action from data source, then i can't enable editing, else grid throws error saying update is must to enable editing.
Konstantin Dikov
Telerik team
 answered on 22 Mar 2017
10 answers
2.9K+ views

I am using an External ClientTemplate to display some information.  I have created a link out of one of my data values and upon click, I would like to show additional information.  I have this working using the Custom Command action, but the button takes up too much real-estate, hence the new link.  What I cannot figure out is how to perform the same javascript call to accomplish what is working from the Custom Command.

My javascript that works for the Custom Command.

var detailsTemplate = kendo.template($("#statusTemplate").html());
 
function showStatusDetails(e) {
    e.preventDefault();
 
    var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
    var wnd = $("#Details").data("kendoWindow");
 
    wnd.content(detailsTemplate(dataItem));
    wnd.center().open();
}

 

My External ClientTemplate.  Looking for what to replace the ????? with.

<script type="text/x-kendo-template" id="statusRowTemplate">
    <div id="statusContainer">
        <a href="\\#" onclick='showStatusDetails(??????)'><h4 style="height:10px;">#= Description # (#= Code #) </h4></a>
        <div class="dataRow">
            <div class="dataRowField">
                Status Date/Time:
            </div>
            <div class="dataRowValue">
                #= FormattedStatusDateTime #
            </div>
        </div>
        <div class="dataRow">
            <div class="dataRowField">
                Entered By:
            </div>
            <div class="dataRowValue">
                #= EnteredByName #
            </div>
        </div>
    </div>
</script>

 

My grid and window markup

@(Html.Kendo().Grid<Status>()
        .Name("StatusGrid")
        .Columns(columns =>
        {
            columns.Bound(s => s.Code).Title("Status Information").ClientTemplate("#=statusRowTemplate(data)#").HtmlAttributes("style='padding:0px'");
            columns.Command(command =>
            {
                command.Custom("View").Click("showStatusDetails");
                command.Destroy().Text("Delete");
            }).Width(175);
        })
        .DataSource(ds =>
            ds.Ajax()
            .Model(model => model.Id(s => s.StatusID))
            .ServerOperation(false)
            .Read(r => r.Action("ReadStatuses", "ActionPages"))
            .Destroy(destroy => destroy.Action("DeleteStatus", "ActionPages", new { StatusID = "#= Id #" }))
        )
        .Events(e => e.DataBound("dataBound"))
)
 
@(Html.Kendo().Window().Name("Details")
    .Title("Status Details")
    .Visible(false)
    .Modal(true)
    .Draggable(true)
    .Width(500)
)
 
}
Gregory
Top achievements
Rank 1
 answered on 21 Mar 2017
5 answers
294 views

Hello,

I have tried out the Gantt control and moving over to the Scheduler control - I find that the presentation is almost the way I want. However, I want to force events to stick on one row. I display scheduled tasks for multiple employees and want to have both transparency and force tasks / events on a single row and not the way it is displayed in the attached image. Here, overlapping tasks/events will be shown on multiple rows. The grouping works nice, I want to utilize vertical space better by forcing multiple tasks /events into a single row to avoid lenghty scrolling. 

Is this possible with Scheduler control? I used Kendo UI for MVC. 

Veselin Tsvetanov
Telerik team
 answered on 21 Mar 2017
1 answer
242 views

Hi, I have created a project using the MVC5 Grid and Menu template.  When I run the project without any mods, there is a scroll bar on the grid control as expected but also a scroll bar on the browser window.  In order to see the copyright info I have to scroll the browser window.  I assume this is by design?  How do i get the content to fit the browser window without the need for 2 scroll bars?

Also when browsing in IE 11 the page is unresponsive for about 20 seconds but in Chrome and Edge it loads and is responsive instantly.  

Tsvetina
Telerik team
 answered on 21 Mar 2017
1 answer
189 views

I have used UI for ASP.NET MVC in my application and while calling StyleSheetRegistrar, I got error like "System.InvalidOperationException: You cannot call render more than once.". Now on Searching on web i found few solutions and i tried them all but i could not resolve that issue.I have not used ScriptManager in my application. Also i checked and could not find StyleSheetRegistrar().Render() method called twice in my master page. 

Could anybody please help me with this issue?

Note: we have called RenderPartial() method which brings few views during the flow in page but no view or ascx controls contain StyleSheetRegistrar().Render() method called in it.

Konstantin Dikov
Telerik team
 answered on 21 Mar 2017
4 answers
138 views

I am currently evaluating Telerik at the moment and we are currently trying to get our application to use the Grid widget to display a list of "Terms". The grid works semi-nicely when we parse a Model to the partial view and then use the Model with the grid. Model is below;

 

    public class Term
    {
        [Key]
        [DatabaseGenerated(DatabaseGeneratedOption.Identity)]
        public int TermID { get; set; }
        [Required]
        public string TermName { get; set; }
        public string TermDescription { get; set; }
        public bool Preferred { get; set; }
    }

 

The problem is that there can be an unlimited amount of "Terms" so we have tried to use remote binding. However, when we use remote binding, the Grid widget doesn't show up at all. The method in the controller gets the data, and the browser seems to retrieve the json (according to Fiddler).

Controller Method

        public ActionResult _TermTable([DataSourceRequest]DataSourceRequest request)
        {
            using (IVContext db = new IVContext())
            {
                return Json(db.Terms.ToDataSourceResult(request),JsonRequestBehavior.AllowGet);
            }
        }

Partial View

@(Html.Kendo().Grid<DemoSpace.Models.Term>()
    .Name("grid")
    .Columns(columns =>
    {
        columns.Bound(p => p.TermID);
        columns.Bound(p => p.TermName);
        columns.Bound(p => p.TermDescription);
        columns.Bound(p => p.Preferred);
    })
    .DataSource(dataSource => dataSource
        .Ajax()
        .PageSize(20)
        .ServerOperation(true)
        .Read(read => read.Action("_TermTable", "Admin"))
     )
)

I know that I am going to be missing something obvious, but I just can't see it.

 

Any and all help is appreciated.

 

Johannes
Top achievements
Rank 1
Veteran
 answered on 21 Mar 2017
1 answer
525 views

I have a form with a Kendo UI MultiSelect component for ASP.NET MVC / Razor:

@(Html.Kendo().MultiSelectFor(m => m.Ids) .Filter(FilterType.Contains) .AutoBind(true) .MinLength(3) .Delay(500) .DataTextField("Value") .DataValueField("Key") .Placeholder("Please fill") .DataSource( ds => ds.Read( r => r.Action("FillMultiSelect", "ReportsController", new { companyId = IdentityManager.CompanyID, search = string.Empty }) ).ServerFiltering(true) ) )

JavaScript for filtering:

var $ids = $("#Ids").data("kendoMultiSelect"); $ids.dataSource.transport.options.read.data = basicFilter($ids); var basicFilter = function ($element) { return { companyId: self.form.getModel().CompanyId, search: $element.input.val() } }

When I type the search text at the "Ids" MultiSelect, the parameter passed to the ASP.NET MVC Action is the value of the placeholder of the element (see attached images).

What's wrong with my code?

I have posted the same question Stack Overflow: http://stackoverflow.com/questions/42844737/kendo-multi-select-component-passing-placeholder-as-value

 

Ianko
Telerik team
 answered on 20 Mar 2017
7 answers
1.0K+ views

Dear all,

I had followed this useful link Remote Validation to apply the remote validation on MetaData class as follows;

Metadata

public class CoinMetadata
{
    [Required(ErrorMessageResourceType = typeof(Errors), ErrorMessageResourceName = "NameReq")]
    [Display(Name = "CoinName", ResourceType = typeof(ScreenRes))]
    [Remote("IsValidName", "Coin", ErrorMessageResourceType = typeof(Errors), ErrorMessageResourceName = "NameDuplicate")]
    // AdditionalFields="coin_id", ErrorMessageResourceType = typeof(Errors), ErrorMessageResourceName = "NameDuplicate")
    public string name { get; set; }
}

 

The Controller:

public JsonResult IsValidName(string name)
{
    bool found = db.IGL_coin.Any(name => name.name == name);
    if (!found)
    {
        return Json(true, JsonRequestBehavior.AllowGet);
    }
    return Json(false, JsonRequestBehavior.AllowGet);
}

The error message from resource file doesn't show up, instead It shows false.

How can I make it works?

Stefan
Telerik team
 answered on 20 Mar 2017
Narrow your results
Selected tags
Tags
Grid
General Discussions
Scheduler
DropDownList
Chart
Editor
TreeView
DatePicker
Upload
ComboBox
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
ListView (Mobile)
Pager
Accessibility
ColorPicker
DateRangePicker
Wizard
Security
Styling
Chat
MediaPlayer
TileLayout
DateInput
Drawer
SplitView
Barcode
ButtonGroup (Mobile)
Drawer (Mobile)
ImageEditor
RadioGroup
Sparkline
Stepper
TabStrip (Mobile)
GridLayout
Template
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
Rob
Top achievements
Rank 3
Bronze
Bronze
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
Bronze
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?