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

Hello,

Hopefully, this is an easy question. Basically, I don't want the gray box with the circle with an x and the item text to appear when the user drags it onto an area. I got the circle with an x with to disappear using CSS; I just need the CSS classes/ids for the other pieces, so I can make them disappear. 

Thanks!

 

Magdalena
Telerik team
 answered on 12 Jul 2016
1 answer
467 views

Hello,

When using the select event handler, I need to capture the id of the item that was clicked on, allow the user to click on a spot on the canvas (a different vendor's tool), and then draw the shape that the user chose at that location. Getting the id of the item is fine and the correct shape is drawn on the canvas. However, this happens when the item in the tree view is selected instead of when the user clicks on the canvas. I attached an event listener to the canvas using getElementById, but listener is triggered when the tree view item is selected and I'm not sure how to ensure that it only fires after the user clicks on the canvas.

function onSelect(e) {
        // this refers to the TreeView object
 
        var dataItem = this.dataItem(e.node);
         document.getElementById("canvas").addEventListener("click", drawShape(dataItem.id), false);
}
 
function drawShape(shape)
{
   var x = event.clientX;
   var y = event.clientY;
   //draw correct shape at target location
}

 

Any suggestions?

Thanks in advance.

Dimitar
Telerik team
 answered on 12 Jul 2016
1 answer
243 views

Hi guys lately i have been trying to add upload control inside a popup window but i same as i have my custom edit template. The idea is to have another popup window where I will only handle the uploading of images in a separate window and that window i would like it to have a grid to show uploaded images.

Here is my grid code with the custom edit template for editing,

 

@(Html.Kendo().Grid<KendoUIApp1_Test.Models.IncidentsViewModel>()
              .Name("grid")
          
 
              .Columns(colums =>
              {
                   * http://www.telerik.com/blogs/kendo-ui-r1-2016-webinar-wrapup
                   */
                  colums.Bound(p => p.DepartmentID).Hidden(true);
 
                  colums.Bound(p => p.StatusName).Title("Status").Filterable(false).ClientTemplate(
                                                                                                   "# if (StatusID === 1 ) { #" +
                                                                                                     "<span class='CBdrawingstatusGreen'>#:StatusName#</span>" +
                                                                                                  "# } else if (StatusID === 2 ) { #" +
                                                                                                      "<span class='CBdrawingstatusYellow'>#:StatusName#</span>" +
                                                                                                  "# } else { #" +
                                                                                                      "<span class='CBdrawingstatusred'>#:StatusName#</span>" +
                                                                                                  "# } #"
 
                                                                                                );
                  colums.Bound(p => p.ReferenceNo).Title("ReferenceNo").Filterable(true);
                  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("Airport").Filterable(false).Width(200);
                  colums.Bound(p => p.SiteName).Title("Site").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.ContactName).Title("CurrentAssignedContact").Filterable(false).Width(200);
                  colums.Bound(p => p.FirstName).Title("CurrentAssignedUser").Filterable(false);
                  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.Command(cmd =>
                  {
                      cmd.Edit();
                      //cmd.Custom("Upload").Click("onCustomCommandClick");
                  });
 
              })
          .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(x => x.DataBound("onDataBound"))
        //.Events(events =>
        //{
        //  events.Save("onStatusChange");
        //   // events.Save("onStatusChange");
 
        //})
 
 
    .Editable(ed => ed.Mode(GridEditMode.PopUp).TemplateName("Incidents")
                                               .Window(w => w.Animation(true)
                                               .Scrollable(false)
                                               .Name("editWindow")))
     
 
        )
    
and below my edit template,

 

@Html.HiddenFor(model => model.AccountID)
        @Html.HiddenFor(model => model.StatusID)
        @Html.HiddenFor(model => model.CurrentAssignedUser)
        @Html.HiddenFor(model => model.CurrentAssignedContact)
        @Html.HiddenFor(model => model.DepartmentID)
        @Html.HiddenFor(model => model.OriginalAssignedUser)
        @Html.HiddenFor(model => model.SiteID)
<div class="container">
    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
        <div class="form-horizontal">
            <div class="panel panel-primary">
                <div class="panel-heading">Incident Settings</div>
                <div class="panel-body">
                    <div class="form-group">
 
                        <table class="table.art-article">
                            <tr>
                                <td>
                                    <div class="k-edit-label">
                                        @Html.LabelFor(model => model.ReferenceNo, new { @class = " col-xs-3 col-sm-3 col-md-3 col-lg-3 control-label " })
                                    </div>
                                </td>
                                <td>
                                    <div class="k-edit-field">
                                        @(Html.Kendo().TextBoxFor(model => model.ReferenceNo).Enable(false)
                                                      .HtmlAttributes(new { style = "width:200px" })
                                         )
                                    </div>
 
                                </td>
                            </tr>
 
                            <tr>
                                <td>
                                    <div class="k-edit-label">
                                        @Html.LabelFor(model => model.Status, new { @class = " col-xs-3 col-sm-3 col-md-3 col-lg-3 control-label " })
                                    </div>
                                </td>
                                <td>
                                    <div class="k-edit-field">
                             @(Html.Kendo().DropDownListFor(model => model.StatusName)
                             .Name("KStatus")
                             .DataTextField("StatusName")
                             .DataValueField("StatusID")
                             .OptionLabel("Select Status")
                             .HtmlAttributes(new { style = "width:200px" })
                             .DataSource(source =>
                  {
                      source.Read(read =>
                        {
                            read.Action("GetStatus", "Home");
 
                        })
                  .ServerFiltering(true);
 
 
                  })
                     .AutoBind(false)
                             )
                                    </div>
 
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <div class="k-edit-label">
                                        @Html.LabelFor(model => model.IncidentDate, new { @class = " col-xs-3 col-sm-3 col-md-3 col-lg-3 control-label " })
                                    </div>
                                </td>
                                <td>
                                    <div class="k-edit-field">
                                        @(Html.Kendo().DateTimePickerFor(model => model.IncidentDate)
                                                      .HtmlAttributes(new { style = "width:200px" })
                                       )
                                    </div>
                                </td>
                            </tr>
 
                            <tr>
                                <td>
                                    <div class="k-edit-label">
                                        @Html.LabelFor(model => model.CurrentAssignedUser, new { @class = " col-xs-3 col-sm-3 col-md-3 col-lg-3 control-label " })
                                    </div>
                                </td>
                                <td>
                                    <div class="k-edit-field">
                                        @(Html.Kendo().TextBoxFor(model => model.FirstName).Enable(false)
                                                      .HtmlAttributes(new { style = "width:200px" })
                                              )
 
                                    </div>
                                </td>
                            </tr>
 
                              <tr>
                                <td>
                                    <div class="k-edit-label">
                                        @Html.LabelFor(model => model.CurrentAssignedContact, new { @class = " col-xs-3 col-sm-3 col-md-3 col-lg-3 control-label " })
                                    </div>
                                </td>
                                <td>
                                    <div class="k-edit-field">
                                        @(Html.Kendo().TextBoxFor(model => model.ContactName).Enable(false)
                                                      .HtmlAttributes(new { style = "width:200px" })
                                              )
 
                                    </div>
                                </td>
                            </tr>
 
                            <tr>
 
                                <td>
                                    <div class="k-edit-label">
                                        @Html.LabelFor(model => model.NewDepartment, new { @class = " col-xs-3 col-sm-3 col-md-3 col-lg-3 control-label " })
                                    </div>
                                </td>
                                <td>
                                    <div class="k-edit-field">
                                        @(Html.Kendo().DropDownListFor(model => model.Department1)
                                                      .Name("KDept")
                                                      .DataTextField("Department1")
                                                      .DataValueField("DepartmentID")
                                                      .OptionLabel("Select Department")
                                                      .HtmlAttributes(new { style = "width:200px" })
                                                      .DataSource(source =>
                                                      {
                                                          source.Read(read =>
                                              {
                                                  read.Action("GetDepartments", "Home");
                                              })
                                                           .ServerFiltering(true);
                                                      })
 
                                                      .Events(e => { e.Change("OnChange"); })
                                                      .AutoBind(false)
 
                               )
                                    </div>
                                </td>
 
                            </tr>
 
                            <tr>
                                <td>
                                    <div class="k-edit-label">
                                        @Html.LabelFor(model => model.AssignNewUser, new { @class = " col-xs-3 col-sm-3 col-md-3 col-lg-3 control-label " })
                                    </div>
                                </td>
                                <td>
                                    <div class="k-edit-field">
                                        @(Html.Kendo().DropDownListFor(model => model.FirstName)
                                                      .Name("Knames")
                                                      .DataTextField("FirstName")
                                                      .DataValueField("UserID")
                                                      .OptionLabel("Select A User")
                                                      .HtmlAttributes(new { style = "width:200px" })
                                                      .DataSource(source =>
                                                     {
                                                         source.Read(read =>
                                            {
                                                read.Action("GetUsers", "Home");
 
 
                                            });
 
 
                                                     })
 
 
                                         )
                                    </div>
                                </td>
                            </tr>
 
                              <tr>
                                <td>
                                     
                                    <div class="k-edit-label">
                                        @Html.LabelFor(model => model.AssignNewContact, new { @class = " col-xs-3 col-sm-3 col-md-3 col-lg-3 control-label " })
                                    </div>
                                </td>
                                <td>
                                    <div class="k-edit-field">
                                        @(Html.Kendo().DropDownListFor(model => model.ContactName)
                                                      .Name("KContact")
                                                      .DataTextField("ContactName")
                                                      .DataValueField("ContactID")
                                                      .OptionLabel("Select A Contact")
                                                      .HtmlAttributes(new { style = "width:200px" })
                                                      .DataSource(source =>
                                                     {
                                                         source.Read(read =>
                                            {
                                                read.Action("GetContact", "Home");
 
 
                                            });
 
 
                                                     })
 
 
                                         )
                                    </div>
                                </td>
                            </tr>
                            @* uploading of files images  *@
                           <tr>
                                <td>
                                     
                                    <div class="k-edit-label">
                                        @Html.LabelFor(model => model.AssignNewContact, new { @class = " col-xs-3 col-sm-3 col-md-3 col-lg-3 control-label " })
                                    </div>
                                </td>
                                <td>
                                    <div class="k-edit-field">
                                     <div id="Popdiv" style="display: none">
                                       @(Html.Kendo().Upload()
                                                .Name("file")
                                                .Multiple(false)
                                                .Events(x => x.Success("onSuccess"))
                                            )   
                                        <div style="float: right; margin: 10px">
                                            <button id="okayButton" >Okay</button>
 
                                        </div>
                                       </div>   
                                    </div>
                                </td>
                            </tr>
                            <tr>
 
                                <td>
                                    <div class="k-edit-label">
                                        @Html.LabelFor(model => model.currentDepartment, new { @class = " col-xs-3 col-sm-3 col-md-3 col-lg-3 control-label " })
 
                                    </div>
                                </td>
                                <td>
                                    <div class="k-edit-field">
                                        @(Html.Kendo().TextBoxFor(model => model.Department1).Enable(false)
                                                      .HtmlAttributes(new { style = "width:200px" })
                               
                                
                                           )
 
 
                                    </div>
                                </td>
                            </tr>
 
                             <tr>
                                <td>
                                    <div class="k-edit-label">
                                        @Html.LabelFor(model => model.Comments, new { @class = " col-xs-3 col-sm-3 col-md-3 col-lg-3 control-label " })
                                    </div>
                                </td>
                                <td>
                                    @*  <span class="k-textbox k-space-right">*@
                                    <div class="editor-field textarea">
                                        @*  @(Html.Kendo().TextBoxFor(model => model.Comments)
                                                          .HtmlAttributes(new { style = "width:200px" })
                                                               )*@
 
                                        @Html.TextAreaFor(model => model.Comments, new { rows = "6", cols = "45", @class = "form-control" })
                                        @*@Html.Bootstrap().TextAreaFor(model => model.Comments).Rows(6).Columns(28)*@
 
                                    </div>
 
                                    @*</span>*@
                                </td>
                            </tr>
 
 
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Please help guys...

Veselin Tsvetanov
Telerik team
 answered on 12 Jul 2016
7 answers
403 views
We have a simple Gantt chart, no dependencies, and are displaying tasks and subtasks.

My treelist of task/sub-tasks is not working correctly. I am using Guid.ToString() for this value. If a Summary designation is given, I get treelist arrows, but parent/child relationships are not being honored. Removing Summary for top-level tasks then removes any UI elements for treelists. I'm wondering If I am missing some required CSS files. I have been using all.less and gantt.less, and even tried throwing in treelist.less, but to no avail.

Any help and assistance is much appreciated. Let me know if you need further information.
James
Top achievements
Rank 1
 answered on 11 Jul 2016
1 answer
158 views

We have a simple Gantt chart, no dependencies, and are displaying tasks and subtasks. I am able to color subtask bars using a custom template, but have not been able to do anything with the summary bar. Each task and subtask needs to be colored according based on it's status, and I m storing the color in an added field in my IGanttTask class. If I remove the top-level tasks' Summary designation (i.e., Summary = false), I lose treelist functionality.

 

Any help and assistance is much appreciated. Let me know if you need further information.

Peter Milchev
Telerik team
 answered on 11 Jul 2016
3 answers
323 views

Did anyone knows how to localize the caption of the edit dialog when using GridEditMode.PopUp ?

I have found how o localize the button

   columns.Command(commands =>
   {
   commands.Edit().Text(@Localizer["idsEdit"].Value)
   .UpdateText(@Localizer["idsOK"].Value)
   .CancelText(@Localizer["idsCancel"].Value); // The "edit" command will edit and update data items.
   commands.Destroy().Text(@Localizer["idsDelete"].Value); // The "destroy" command removes data items.
   }).Title(@Localizer["idsCommands"].Value).Width(220);

but not the caption.

Any ideas ?

Best regards

Eyup
Telerik team
 answered on 11 Jul 2016
1 answer
277 views

Good Afternoon,

Not sure why this is happening but hope somebody can help.

I need to add tabs dynamically which works ok but once they are added I can see it's content in the tabs that already existed. It's definitely the new tab's content as when I change the options in one tab, the changes are reflected in the other tabs. My code is below and I have attached some screenshots also. I would be really grateful for any assistance.

<button type="button" class="btn btn-success" id="myButton">Add New Job</button>

 <p></p>     
@(Html.Kendo().TabStrip()
              .Name("tabstrip")              
              .Items(tabstrip =>
              {
                  tabstrip.Add().Text("1: BAIC13 ")
                      .Selected(true)
                      .LoadContentFrom(Url.Action("Job1", "Test"));
                  tabstrip.Add().Text("OPERATORS")
                      .LoadContentFrom(Url.Action("Operators", "Test"));
              })             
)
    </div>

<script>
 
    $(document).ready(function () {
        $("#myButton").click(function () {
            var tabStrip = $("#tabstrip").kendoTabStrip().data("kendoTabStrip");
            var lastIndex = tabStrip.tabGroup.children("li:last").index();
            tabStrip.insertBefore(
                    {
                        text: "New Tab",
                        contentUrl: '@Url.Action("AddJob", "Test")'          
                    },
                    tabStrip.tabGroup.children("li:last")
            );
            tabStrip.select(lastIndex);
        });
    });    
</script>

 

 

 

Dimitar
Telerik team
 answered on 11 Jul 2016
5 answers
915 views

I have a kendo grid with Multiple column sorting enabled. The issue is whenever sorting is enabled, user can right click on column and click on 'Open link in new tab', and when clicked, user gets directed to error page e.g. the new page would look like: http://localhost:50411/PurchaseOrder/GetPurchaseOrders?GridPOSearchHeaderInfo-sort=Revision-asc (this page doesn't exists)
I checked Kendo grid sorting demo page: http://demos.telerik.com/kendo-ui/grid/sorting and tried opening link in new tab by right clicking the column in the grid and it doesn't have tis issue. The new page url is: http://demos.telerik.com/kendo-ui/grid/sorting# so it would pretty much load same page. 

Is there anyway to disable right click on the kendo grid's column or not generate that random page?

Here is my razor code:

@(Html.Kendo().Grid<SupplierPortal.ViewModels.PaymentResultViewModel>()
    .Name("GridPaymentSearchHeaderInfo")
    .Columns(columns =>
    {
        columns.Bound(e => e.PaymentNumber).Width("160px").HtmlAttributes(new { @style = "text-align:right;" });
        columns.Bound(e => e.PaidToName).Width("170px");                   
    })                 
    .ToolBar(tools =>
    {
    tools.Template(@<text>
    <div class="pull-right" style="display: inline-block; padding-right: 10px; padding-top: 2px; padding-bottom: 2px;">
        <a href="#" class="k-button updateView" title="Update Selected View"><i class="fa fa-floppy-o" aria-hidden="true"></i></a>
        <a href="#" class="k-button addView" title="Add New View"><i class="fa fa-plus" aria-hidden="true"></i></a>
        <a href="#" class="k-button deleteView" title="Delete Selected View"><i class="fa fa-times" aria-hidden="true"></i></a>
        <span class="preline"></span>
        <a class="k-button k-button-icontext k-grid-excel POexport" href="#" title="Export to Excel" style="background: #f8fdae;"><span class="k-icon k-i-excel"></span></a>
    </div>
    <div class="col-lg-4 col-md-5 col-sm-5 col-xs-7 pull-right" style="padding-right: 0;">
        <div class="form-group" style="margin-bottom: 0;">
            @Html.Label("Grid View:", new { @class = "col-sm-3 col-xs-4 control-label view" })
            <div class="col-sm-7 col-xs-6" style="padding-left: 0;">
                @Html.DropDownList("lstViewNamesGridPaymentSearchHeaderInfo", new SelectList(Model.ViewNames, "Value", "Text", Model.SelectedPaymentViewId), "All Columns", new { @class = "form-control lstViewNames", @style = "height: auto;" })
            </div>
        </div>
    </div>
    </text>);
    })
    .ColumnMenu()
    .Pageable(x => x.PageSizes(new object[] { 10, 20, 50, 100, "All" }))
    .Reorderable(reorder => reorder.Columns(true))
    .AutoBind(false)
    .Reorderable(reorder => reorder.Columns(true))
    .Selectable()
    .Filterable(filterable => filterable
                    .Extra(false)
                    .Operators(operators => operators
                        .ForString(str => str.Clear()
                            .Contains("Contains")
                            .StartsWith("Starts with")
                            .IsEqualTo("Is equal to")
                            .IsNotEqualTo("Is not equal to")
                        ))
                    )
    .Sortable(sortable => sortable
        .AllowUnsort(true)
        .SortMode(GridSortMode.MultipleColumn))
    .Scrollable(scr => scr.Height(322))
    .Resizable(resize => resize.Columns(true))
    .DataSource(dataSource => dataSource
                .Ajax()
                .PageSize(10)
                .ServerOperation(false)
                .Read(read => read.Action("GetPayments", "Payment").Data("GetSearchParameters"))
                )
    .Events(events => events.Change("changeHeaderInfo"))
    .Events(events => events.DataBound("gridDataBound"))
    .Events(events => events.DataBinding("gridDataBinding"))
    .Events(events => events.ColumnMenuInit("gridColumnMenuInit"))
)

Vessy
Telerik team
 answered on 11 Jul 2016
3 answers
196 views

Hello,

there is bug in ToDataSourceResult method, namely internal FirstSortableProperty method. The FirstSortableProperty method is called when passed DataSourceRequest has no Sorts list. It uses reflection to select first property of queryable entity.

If your entity class has a "calculated" readonly property that is not mapped to the database entity, the FirstSortableProperty method might select it so the LINQ query fails. It supposed to select public instance properties with getters and setters only.

Thanks.
Vasil
Telerik team
 answered on 08 Jul 2016
10 answers
3.6K+ views

I want to present a data element as a tool tip in a grid that has limited space. The data would be a property of the object the grid already displays. This particular property is not displayed due to limited space. I've looked through all the examples I can find. None of them look like what I'm trying to accomplish.

Ideally the user would hover over a row or a cell on a given row and the tooltip would be displayed. In this case the data would indicate whether or not a warehouse item had been picked up or not.

If this is possible, do you have an example in Razor format? This will be implemented in a .cshtml view in MVC4.

Thanks for your help with this!

Viktor Tachev
Telerik team
 answered on 08 Jul 2016
Narrow your results
Selected tags
Tags
+? more
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?