Telerik Forums
UI for ASP.NET MVC Forum
8 answers
234 views
Hey, 

I'm displaying a map using GeoJson data and would like to display a tooltip when the user moves the mouse over a shape, is this possible?
I'm using the asp.net MVC wrapper and only managed to show tooltips for markers, not shapes.

Thanks!
T. Tsonev
Telerik team
 answered on 04 Aug 2015
1 answer
116 views

I'm will be using MVC 5.0 and entity framework 6.0.  I want to create a view where there are text fields, combo boxes on the top from a parent table.  Then beneath that, there is a grid with lines from a child table.  I want all of this to have a pager at the bottom, so that when you hit the arrow to go to the next parent record, it shows the child records that go with it in the grid.

What is the best way to do this w/Telerik controls (mvc server wrapper controls). 

 

Kiril Nikolov
Telerik team
 answered on 04 Aug 2015
31 answers
740 views

Hi,

I have a ASP.Net MVC 2 project with Telerik MVC Extension. In it there is Grid that has DetailView to display another grid after clicking a plus sign. It works fine. But when converting the project to Kendo, I am surprise to find that there  is such feature in Kendo. DetailView  is an important feature. So I'd like to know how to implement DetailView in Kendo. Thanks.

York


Vladimir Iliev
Telerik team
 answered on 04 Aug 2015
1 answer
199 views

Found an issue when displaying a list of items and deleting.   Kendo seems to be picking up on the “k-grid-delete” style and showing the confirmation correctly, but if I delete multiple rows(one at at time), the action name for the first delete call is missing from the URL.

For the first call and only for the first call it looks like “http://localhost:58501/Application/WholesaleLicense?permitApplicationId=d562e244-2093-488a-aec1-a4e300a72881” instead of “http://localhost:58501/Application/WholesaleLicense/Delete?permitApplicationId=d562e244-2093-488a-aec1-a4e300a72881”.

When calling delete the second time it works fine.  It doesn’t matter which row ​is deleted first​ so it’s not that the first row of the grid is somehow rendered differently.

Is there a fix for this?  See code below.  

@using (Html.BeginForm("IndexPost", "WholesaleLicense", FormMethod.Post, new { id = "ApplicationNavigationForm", Area = "Application" }))
{
    @Html.Partial("_NewApplicationProcessHeader", Model)

    <div class="panel-body">
        @(Html.Kendo().Grid<WholesaleLicenseDetailViewModel>()
              .Name("licenseGrid")
              .Editable(editable => editable.DisplayDeleteConfirmation("Are you sure you want to delete this item?"))
              .DataSource(datasource => datasource.Ajax()
                  .Read(read => read.Action("GetWholeSaleLicenseSummaries", "WholesaleLicense", new { permitApplicationId = @Model.HeaderViewModel.PermitApplicationId }))
                  .Destroy(x => x.Action("Delete", "WholesaleLicense", new { permitApplicationId = @Model.HeaderViewModel.PermitApplicationId }))
                  .Model(model => model.Id(x => x.WholesaleLicenseId)))
              .Columns(col =>
              {
                  col.Bound(x => x.WholesaleLicenseId).Hidden();
                  col.Bound(x => x.LicenseNumber);
                  col.Template(@<text></text>)
                      .ClientTemplate("<a class='blue-tableRowIcon glyphicon glyphicon-edit' href='" + Url.Action("Details", new { id = "#= Id #", permitApplicationId = Model.HeaderViewModel.PermitApplicationId }) + "'></a>" + Environment.NewLine
                          + "<div class='k-button-icontext k-grid-delete red-tableRowIcon glyphicon glyphicon-remove' ></div>"
                      )
                      .FooterTemplate("<a class='green-tableRowIcon glyphicon glyphicon-plus' href='" + Url.Action("Details", new { id = Guid.Empty, permitApplicationId = Model.HeaderViewModel.PermitApplicationId }) + "'></a>")
                      .Title("Action")
                      .Width(94);
              }))
    </div>
    @Html.Partial("_NewApplicationProcessFooter", Model)
}

Rosen
Telerik team
 answered on 03 Aug 2015
3 answers
136 views

Hello,

 I have an ASP.NET MVC app using Telerik MVC controls and I need to return a Razor expression from the controller action and have it rendered in the view as razor. For example, I need to return the following in my model to the view:

 "@(Html.Kendo().CheckBox().Name(\"eq1\").Checked(true).Label(\"Rear side airbags\"));";

 

And have it rendered correctly as a checkbox in the view. All I can get it to do is render the text itself. 

 

Thanks,

 

Michael

Kiril Nikolov
Telerik team
 answered on 03 Aug 2015
3 answers
312 views
Hello

How do I enable the telerik radgrids to be accessible offline and sync once online again?

Help much appreciate
Regards
Alexander Popov
Telerik team
 answered on 31 Jul 2015
4 answers
139 views

I'​m ​trying [ UI for ASP.NET MVC Q2 2015 ]'s pivotgrid object, (in order to substantiate if it fits the needs of the organization which I belong. Also, I haven't read the terms and conditions about creating threads. Sorry if that information was unnecessary.). The object:

<%: Html.Kendo().PivotGrid<T>()
    .Name("pivotgrid").Configurator("#configurator")
    .BindTo(Model).DataSource(dataSource => dataSource

/* etcetera */

 %> 

It is required to set active fields on Columns, Rows, etc, via Javascript, or C# for that matter, after the object is created. ​It is indispensable to load some report configuration model associated to user profiles. The pivot grid object would be used by some sort of administrator user (who would export reports configuration built with the "configurator"), and by other users who would only be able to see the report and do some minor sets on those previously determined measures, rows, columns.

Thank you,

Great tool! By the way

 

 

fabio2x4
Top achievements
Rank 1
 answered on 31 Jul 2015
1 answer
705 views

I have custom editable hierarchical grid. I have add and delete buttons in the child grid. when i click add button on child grid, it opens up kendo window on which user will be displayed list of records where user can select record and click add button. On add click button i am writing ajax call which adds the records. on success of ajax call i am refreshing parent grid which closes up the child expandable row. At that point i just want to refresh child grid so that it still stays open.

I have same issue with delete button too. when user clicks on delete on child grid, I have a ajax call which deletes the record but on success i want to refresh just child grid 

parent grid
 
    <div class="col-xs-18 col-md-12">
                @(Html.Kendo().Grid<BHEBS.Areas.Admin.Models.ContractModel.providers>()
        .Name("grid")
        .Columns(columns =>
        {
            //columns.Bound(p => p.Id).Filterable(false).Width(50);
            columns.Bound(p => p.ContractorType).Width(100);
            columns.Bound(p => p.ContractorName);
            columns.Bound(p => p.BHSISNum).Width(200); ;
            columns.Bound(p => p.StartDate).Format("{0:MM/dd/yyyy}").Width(180);
            columns.Bound(p => p.EndDate).Format("{0:MM/dd/yyyy}").Width(180);
          
            columns.Command(command => command.Custom("Remove").Text("Remove").SendDataKeys(true).Click("deleteClick").HtmlAttributes(new { @class = "k-button k-button-icontext k-grid-add k-primary" })).Width(160);
 
        }).Events(e => e.DataBound("onDataBound"))
        .Pageable()
        .Sortable()
        .Scrollable()
        .Filterable()
        .Selectable()
        .ClientDetailTemplateId("template")
        .HtmlAttributes(new { style = "height:350px;" })
        .DataSource(dataSource => dataSource
        .Ajax()
        .PageSize(20)
        .Read(read => read.Action("Contractors_Read", "Contract").Data("additionalInfo"))
        ))
            </div>
 
child grid
 
 
 
    <script id="template" type="text/kendo-tmpl">
        @(Html.Kendo().Grid<BHEBS.Areas.Admin.Models.ContractModel.serviceDetails>()
            .Name("grid_#=Id#")
            .Columns(columns =>
            {
                // columns.Bound(o => o.Id).Width(50);
                columns.Bound(o => o.ServiceId);
                columns.Bound(o => o.ServiceType);
                columns.Bound(o => o.AdultChild);
                columns.Bound(o => o.Qualifier);
                columns.Command(command => command.Custom("Remove").SendDataKeys(true).Click("deleteClickServices"));
            }).Events(e => e.DataBound("onDataBoundServices"))
             .ToolBar(toolbar =>
{
    toolbar.Template(@<text>
        <div class="toolbar">
            <button class="k-button k-button-icontext k-grid-add k-primary" id="serviceskendowindow">Assign Services</button>
        </div>
    </text>);
})
                                        .DataSource(dataSource => dataSource
                                            .Ajax()
                                            .PageSize(10)
                                                          .Read(read => read.Action("Services_Read", "Contract", new { contractorId = "#=Id#", contractId = ViewBag.ContractService.Id }))
                                        )
                                        .Pageable()
                                        .Sortable()
                                        .ToClientTemplate()
 
        )
    </script>
 
on click assign button on child grid
 
    @(Html.Kendo().Window()
    .Name("servicewindow")
    .Title("Assign Services")
    .Content(@<text><div class="container-fluid">
            <div class="row">
                <div class="col-xs-18 col-md-12">
                    @(Html.Kendo().Grid<BHEBS.Areas.Admin.Models.ContractModel.serviceDetails>()
        .Name("gridServicesWindow")
        .Columns(columns =>
        {
            columns.Template(x => { }).HtmlAttributes(new { @class = "chkbox" }).ClientTemplate("<input type='checkbox' class='checkbox' id = 'chkBoxServices' />");
            columns.Bound(p => p.Id).Filterable(false).Width(50);
            columns.Bound(p => p.ServiceId);
            columns.Bound(p => p.ServiceType);
            columns.Bound(p => p.StartDate).Format("{0:MM/dd/yyyy}");
            columns.Bound(p => p.EndDate).Format("{0:MM/dd/yyyy}");
            columns.Bound(p => p.AdultChild);
        })
                .Pageable()
                .Sortable()
                .Scrollable()
                .Filterable()
                        .AutoBind(false)
                .Selectable(selectable => selectable.Mode(GridSelectionMode.Multiple))
                        .HtmlAttributes(new { style = "height:350px;margin-right:30px;" })
                .DataSource(dataSource => dataSource
                .Ajax()
                .PageSize(20)
                                .Read(read => read.Action("GetAllServices_Read", "Contract").Data("additionalInfoAddServices"))
                )
                    )
                    <button class="k-button close-buttonservices k-primary" style="bottom: 10px; ">Cancel</button>
                    <button class="k-button k-primary" id="addSelectedServices" style="bottom: 10px; ">Assign</button>
                </div>
 
            </div>
 
 
        </div></text>
            )
            .Draggable()
    .Resizable()
    .Width(800)
    .Modal(true)
    .Visible(false)
 
    )
 
 
script :
 
  $("#addSelectedServices").bind("click", function () {
            var checked = [];
            for(var i in checkedServiceIds){
                if(checkedServiceIds[i]){
                    checked.push(i);
                }
            }
            var contractId = '@(ViewBag.ContractService.Id)';
            var contractorId=addSelectedContractorService;
            addServices(checked,contractId,contractorId)
        });
        function addServices(lstServices,contractId,contractorId) {
            var element = $(document.body);
            kendo.ui.progress(element, true);
            $.ajax({
                url: '@Url.Action("AddServices", "Contract")',
                type: 'POST',
                contentType: 'application/json',
                data: JSON.stringify({
                    lstSelectedService: lstServices ,
                    contractorId:contractorId,
                    contractId: contractId
                }),
 
                success: function (response, jqXHR) {
                    var element = $(document.body);
                    kendo.ui.progress(element, false);
                    var orderWindow = $('#servicewindow').data("kendoWindow");
                    orderWindow.close();
                    var addSelectedContractorService =null;
                    checkedServiceIds.length =0;
                    //delete checked;
                    $('#grid').data().kendoGrid.dataSource.read();//refreshing parent grid but want to refesh only child grid
                    //var grid = e.detailRow.find("[data-role=grid]").data("kendoGrid");
                    //grid.dataSource.read();
                },
                error: function(jqXHR, errorThrown) {
                    var element = $(document.body);
                    kendo.ui.progress(element, false);
                    alert('Error - ' + errorThrown);
                }
 
            });
        }
        function deleteClickServices(e)
        {
            e.preventDefault();
            var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
            var Id = dataItem.Id;
            var kendoWindow = $("<div />").kendoWindow({
                title: "Confirm",
                resizable: false,
                modal: true,
                height: "100px",
                width: "300px"
            });
 
            kendoWindow.data("kendoWindow")
                .content($("#delete-confirmation").html())
                .center().open();
 
            kendoWindow
                .find(".delete-confirm,.delete-cancel")
                    .click(function() {
                        if ($(this).hasClass("delete-confirm")) {
                            var lstServiceId = [];
                            lstServiceId.push(Id);
                            var gridMaster = $("#grid").data("kendoGrid");
                            var row= gridMaster.dataItem($(e.target).closest(".k-detail-row").prev(".k-master-row"));
                            var contractorId = row.Id;
                            var contractId = '@( ViewBag.ContractService.Id)';
                            removeService(lstServiceId,contractorId,contractId,kendoWindow)
                        }
                        if ($(this).hasClass("delete-cancel")) {
                            return true;}
                    })
                    .end()
        }
        function removeService(lstServiceId,contractorId,contractId,kendoWindow) {
            var element = $(document.body);
            kendo.ui.progress(element, true);
            $.ajax({
                url: '@Url.Action("RemoveService", "Contract")',
                type: 'POST',
                contentType: 'application/json',
                data: JSON.stringify({
                    lstSelectedService: lstServiceId ,
                    contractorId:contractorId,
                    contractId: contractId
                }),
 
                success: function (response, jqXHR) {
                    var element = $(document.body);
                    kendo.ui.progress(element, false);
                    kendoWindow.data("kendoWindow").close();
                    $('#grid').data().kendoGrid.dataSource.read(); //refreshing parent grid but want to refesh only child grid
 
                    //var grid = e.detailRow.find("[data-role=grid]").data("kendoGrid");
                    //grid.dataSource.read();
 
                },
                error: function(jqXHR, errorThrown) {
                    var element = $(document.body);
                    kendo.ui.progress(element, true);
                    kendoWindow.data("kendoWindow").close();
                    alert('Error - ' + errorThrown);
                }
 
            });
        }

Boyan Dimitrov
Telerik team
 answered on 30 Jul 2015
6 answers
2.0K+ views
hi guys,
Server side validations it will support or not ?
I currently have a working grid with inline editing. I need validation that needs to be done on the server side because duplicate records checking..

Please check the code and let me know any issues in this code? or send me working sample code....

View code...

        @(Html.Kendo().Grid<PeopleTray.Models.Admin.EmploymentTypeModel>()
                .Name("gridEmployementType")
                .Columns(columns =>
                {
                    columns.Command(command => { command.Edit().Text("Edit").HtmlAttributes(new { title = "Edit" }); command.Destroy().Text("Delete").HtmlAttributes(new { title = "Delete" }); }).Width(160);
                    columns.Bound(p => p.Name);
                    columns.Bound(p => p.Description);
                    columns.Bound(w => w.Id).Hidden();                    
                    
                })
                .ToolBar(toolbar => toolbar.Create().Text("Add").HtmlAttributes(new { title="Add" }))
                .Editable(editable => editable.Mode(GridEditMode.InLine).CreateAt(GridInsertRowPosition.Bottom))               
                .Pageable(pager => pager.Refresh(true))
                .Sortable(sortable => sortable.AllowUnsort(true))
                .Events(e => e.Edit("onEdit")) 
                .Events(e => e.Save("onSave"))                              
                .HtmlAttributes(new { style = "width: 70%;" })
                .DataSource(dataSource => dataSource
                    .Ajax()
                    .ServerOperation(false)
                    .Events(events => events.Error("error_handler"))
                    .PageSize(5)
                    .Model(model =>
                    {
                        model.Id(ds => ds.Id);
                    })
                    .Create(create => create.Action("EmployementType_Insert", "CorporateAdmin"))
                    .Read(read => read.Action("EmployementTypes_Read", "CorporateAdmin"))
                    .Update(update => update.Action("EmployementType_Update", "CorporateAdmin"))
                    .Destroy(destroy => destroy.Action("EmployementType_Delete", "CorporateAdmin"))
                )
            )
 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);
        }
    }
--------------------------
Controller code.....

public ActionResult EmployementType_Insert([DataSourceRequest]DataSourceRequest request, EmploymentTypeModel model)
        {
            var employementtypes = AdminService.GetEmployementTypesModel();
            for (int r = 0; r < employementtypes.Count; r++)
            {
                if (employementtypes[r].Name.ToLower() == model.Name.Trim().ToLower())
                {
                    ModelState.AddModelError("grid_error", "The employement type already exists. Please modify or delete your entry.");
                    return Json(new[] { model }.ToDataSourceResult(request, ModelState));
                }
            }
            if (model.Name != null && ModelState.IsValid)
            {
                AdminService.InsertEmploymentType(model);               
            }
            return Json(new[] { model }.ToDataSourceResult(request, null), JsonRequestBehavior.AllowGet);
        }


DHHS
Top achievements
Rank 1
 answered on 30 Jul 2015
5 answers
155 views

Hi,

I have a grid showing several columns like this:

 

columns.Bound(c => c.WeekNumber).ClientGroupHeaderTemplate("KW: #=value#").Hidden(true);
         columns.Bound(c => c.Date).Format("{0:dddd dd.MM.yy}") ;
         columns.ForeignKey(c => c.ThisToSoup, (IEnumerable<EECanteen.Models.FoodItem>)ViewData["Soups"], "ID", "Name").Width(200);
         columns.ForeignKey(c => c.ThisToMenuOne, (IEnumerable<EECanteen.Models.FoodItem>)ViewData["Menus"], "ID", "Name").Width(200);
         columns.ForeignKey(c => c.ThisToMenuTwo, (IEnumerable<EECanteen.Models.FoodItem>)ViewData["Menus"], "ID", "Name").Width(200);
         columns.ForeignKey(c => c.ThisToMenuThree, (IEnumerable<EECanteen.Models.FoodItem>)ViewData["Menus"], "ID", "Name").Width(200);
         columns.ForeignKey(c => c.ThisToCake, (IEnumerable<EECanteen.Models.FoodItem>)ViewData["Cakes"], "ID", "Name").Width(200);
         columns.Bound(c => c.Salads).ClientTemplate("#=SaladsTemplate(Salads)#");
         columns.Command(command => { command.Destroy(); command.Edit(); }).Width(180);

 

I want to display a tooltip for the foreign key and for the selected items in the "Salads" column.
And I want to load the data via Ajax using a controller method where I pass the ForeignKey.

Fortunately these Key (also for the Salads) reference the same table in my database.

I also have this ID in my Salads Template which is built like this:

<script type="text/kendo" id="SaladsTemplate">
    <strong>
        #for(var i = 0; i< data.length; i++){# 
        <a title="#:data[i].Name#" data-id="#:data[i].ID#" href="">#:data[i].Name#</a>  
        #}#
    </strong>
</script>
 
<script type="text/javascript">
    var SaladsTemplate = kendo.template($("#SaladsTemplate").html(), { useWithBlock: false });
</script>

By the way - I want no tooltip on the Date and other columns (not shown here).

Manfred

Alexander Popov
Telerik team
 answered on 30 Jul 2015
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
Rating
ScrollView
ButtonGroup
CheckBoxGroup
NavBar
ProgressBar
QRCode
RadioButton
Scroller
Timeline
TreeMap
TaskBoard
OrgChart
Captcha
ActionSheet
Signature
DateTimePicker
AppBar
BottomNavigation
Card
FloatingActionButton
Licensing
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
Ambisoft
Top achievements
Rank 2
Iron
Pascal
Top achievements
Rank 2
Iron
Matthew
Top achievements
Rank 1
Sergii
Top achievements
Rank 1
Iron
Iron
Andrey
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Ambisoft
Top achievements
Rank 2
Iron
Pascal
Top achievements
Rank 2
Iron
Matthew
Top achievements
Rank 1
Sergii
Top achievements
Rank 1
Iron
Iron
Andrey
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?