Telerik Forums
Kendo UI for jQuery Forum
10 answers
1.1K+ views
Hello

I'm using inline editing in a grid, which is all working fine. However, when I add sorting, and a column is using a descending sort, the new record row (the editable one, not a newly inserted row) is actually added at the bottom. Not really a problem if there's only one page, but it's not so cool when it's at the bottom of page 19. Yes, I can go to that last page, or reverse the sorting, and I'll see the boxes, but it would still be cool if the new record row was always at the top.

Example here: http://jsfiddle.net/EEJsG/1/ It's using the "Inline editing" demo code from this website, with only "sortable: true" added.

To see my problem, just click "Unit Price" twice and click the add new record button.

Is this a bug, or am I missing a setting?

Thanks!
Alessandro Stefano
Top achievements
Rank 1
 answered on 29 Dec 2020
6 answers
565 views
Hi, I have a grid with the editable mode set to popup like so:
.Editable(editable => { editable.Mode(GridEditMode.PopUp); editable.TemplateName("EmailTemplate"); })
And then "EmailTemplate" looks like so:

@model Young_Ealing.Models.EmailTemplate
 
@Html.LabelFor(m=>m.Name)
@Html.TextBoxFor(m=>m.Name)
@Html.LabelFor(m=>m.Subject)
@Html.TextBoxFor(m=>m.Subject)
@Html.LabelFor(m=>m.Body)
@(Html.Kendo().EditorFor(m=>m.Body).Name("Body").Tools(tools => tools.FontName().Bold().Clear().CreateLink().FontSize().FormatBlock().Indent()
            
.InsertImage().InsertOrderedList().InsertUnorderedList().Italic().JustifyCenter()            .JustifyFull().JustifyLeft().JustifyRight().Outdent().Separator().Strikethrough()
            .SubScript().SuperScript().Underline().Unlink().ViewHtml().CustomButton(cb => cb.Name("add_name").ToolTip("insert individual name").Exec(@<text>
            function(e) {
                var editor = $(this).data("kendoEditor");
                editor.exec("inserthtml", { value: "@(Young_Ealing.Code.EmailUtils.TEMPLATE_INDIVIDUAL_NAME)" });
            }
        </text>))).HtmlAttributes(new { style = "width: 785px;height:295px;"}))
@Html.LabelFor(m => m.IsHtml)
@Html.CheckBoxFor(m => m.IsHtml)
<div class="clear"></div>
Everything works as expected except the Editor does not show the contents of the "Body" field and when I post the form back the contents of EmailTemplate.Body is null. All the other fields save and display fine. And if I bind "Body" to a normal text area it works fine too, so the problem lies somewhere in my implementation of the Kendo UI Editor.
Sajitha
Top achievements
Rank 1
Veteran
 answered on 28 Dec 2020
3 answers
1.8K+ views

I'm trying to add a Kendo Tooltip to a disable DropDownList, but it's not working. :/

My DropDowList:

@(Html.Kendo().DropDownListFor(m => m.AgencyId)
                      .OptionLabel("-- Select --")
                      .DataTextField("ProviderName")
                      .Name("ddlb_FedCarewarePDI_Provider")
                      .DataValueField("ProviderId")
                      .DataSource(src =>
                      {
                          src.Read(r =>
                          {
                              r.Action("getAgencyList", "AgencyReports").Type(HttpVerbs.Post);
                          });
                      }).HtmlAttributes(new { style = "width: 300px" })
                    )

 

My Kendo Tooltip Code:

@(Html.Kendo().Tooltip()
    .For("#ddlb_FedCarewarePDI_Provider")
    .ContentTemplateId("template")
    .Position(TooltipPosition.Top)
    .Width(400)
    .Height(500)
)
 
<script id="template" type="text/x-kendo-template">
    <p>#=Something Great Here#</p>
</script>

 

Ideas on what I need to fix?

 

 

 

 

 

 

 

Plamen
Telerik team
 answered on 25 Dec 2020
3 answers
2.0K+ views
I am trying to set the tools using EditorFor to create a text editor that shows with no tools 
as the default view but cannot get the syntax correct.

@
Html.Kendo().EditorFor(m
 => m.ChildViewModel.Text).HtmlAttributes(new { Width = "100%", tools = "[]" })

I would also like to show a limited number of tools using the same method for another editor
on the same page.



Please show me the correct syntax for configuring tools using the 'Html.Kendo().EditorFor'
method.

Thanks
Misho
Telerik team
 answered on 24 Dec 2020
2 answers
3.0K+ views

Hi team,

I'm trying to create a grid (MVC) that displays data from my model, with rows and cells with background color changing depending of boolean values.  

 

1st try : I used ClientTemplate in my grid to add some class to my cell content.

.ClientTemplate("<div class=#:hasErrorDateDebut?'orangeBack':''#>" +
                            "<div class=#:isActive?'greenBack':''#>" +
                                " #=kendo.toString(dateDebut,'dd / MM / yyyy')# " +
                            "</div>" +
                        "</div>")

hasErrorDateDebut and isActive are the booleans I used to determine if i need to color my cell in orange or green. 

.greenBack {
        background-color: var(--light-green);
    }
 
.orangeBack {
    background-color: #ffb459;
}

 

Issue : It only colors the div inside my td cell. Each td has padding that I can't remove (because each cell of the same line needs to have the same size I suppose), and so the paddings aren't colored. I also tried to set negative margin to counter this padding, but it only works to left and right, and not to top and bottom. 

I now understand that I need to set my class/style to the td element, not the content. But I don't know how I can do so inside ClientTemplate. HtmlAttributes add style/class to the td element correctly, but I can't manage to do so with ClientTemplate. 

 

2nd try : I removed my css and didn't change the ClientTemplate, so the cells I need to color has in it's content a element with orangeBack or greenBack class. I then used javascript to search if td has greenBack or orangeBack class in their content, and then colored them. 

$('tr').has('.greenBack').css('background-color', 'var(--light-green)');
$('td').has('.orangeBack').css('background-color', '#ffb459');

 

Inside a document.ready, it added the desired style to the right td (tr for my green background). This worked perfectly, until I added an Edit command.

columns.Command(command =>
        {
            command.Edit().Text(" ").IconClass("k-icon k-i-edit").Visible("hasNotHappened");
        })
.Editable(editable => editable.Mode(GridEditMode.InLine))

 

Issue : When I click on the edit button, and then validate or cancel my changes, my td and tr classes and styles are erased. I don't know why this happens and how I can prevent it ? 

I tried to use a click function to the .k-grid-cancel to apply my styles again, but it doesn't work. 

$("#gridHistoPeriodesRecueil").data("kendoGrid").bind("edit", function (e) {
    e.container.find(".k-grid-cancel").click(function (e) {
        console.log("tyughujlk");
        $('tr').has('.greenBack').css('background-color', 'var(--light-green)');
        $('td').has('.orangeBack').css('background-color', '#ffb459');
    });
});

 

The log is displayed, but I think the grid and so the element with greenBack and orangeBack classes aren't load when the call is done. I tried to use onDataBound event but it isn't fired. Is there a way to apply my styles like this ?

 

3rd try : I tried to use RowTemplate, as it can allow me to set classes and styles directly to the tr and td I want. But I also want to use Edit command inline. Is there a way to declare it easily in a RowTemplate or only to define the columns I need in RowTemplate and not the whole grid ?

 

 

I hope it was clear enough. I tried many things, but everytime there is an issue I didn't manage to solve. If you can help me to make one of this solution works, let me know.

Thank you,

Valentin

 

Tsvetomir
Telerik team
 answered on 24 Dec 2020
1 answer
1.2K+ views

Hi,

  I found a sample code to display one validation message for a group of radio buttons above the radio button group, but I am not able to display one message in validation summary.  Please try code snippet below.  You can see the validation message display 5 times in the summary.  I just want one message in summary.  Please help.

 

<div id="form">
    <span class="k-invalid-msg" data-for="test"></span><br/>
    Test 1<input type="radio" name="test" required /><br/>
    Test 1<input type="radio" name="test" required /><br/>
    Test 1<input type="radio" name="test" required /><br/>
    Test 1<input type="radio" name="test" required /><br/>
    Test 1<input type="radio" name="test" required /><br/>
    <button id="post">Post</button>
    
    <div id="step3-validation-summary">

     </div>
</div>

<script>
$(function(){
    var validator = $("#form").kendoValidator({
        rules: {
            radio: function(input) {
                if (input.filter("[type=radio]") && input.attr("required")) {
                    return $("#form").find("[type=radio][name=" + input.attr("name") + "]").is(":checked");
                }
                return true;
            }
        },
        messages: {
            radio: "This is a required field"
        },
        validationSummary: {
                container: "#step3-validation-summary"
            }
    }).getKendoValidator();

    $("#post").click(function() {
        validator.validate();
    });
});
</script>

 

Thanks,

Wesley

Ivan Danchev
Telerik team
 answered on 23 Dec 2020
4 answers
567 views
Is it possible to create such action with custom actions?
Stoyan
Telerik team
 answered on 23 Dec 2020
3 answers
575 views

Hi,

We would like to force the user to crop the image in a 4:3 aspect ratio only.

 

this._kendoImageEditor = $("#kendoImageEditorComponent").kendoImageEditor({
    imageUrl: options.image,
    toolbar:{
        items:
        [
        "zoomIn",
        "zoomOut",
        "crop"
        ]
    },
    messages: {
        panes: {
            crop: {
                aspectRatioItems: {
                    "4:3": "4:3"
                }
            }
        }
    }
}).data("kendoImageEditor");

 

However when testing we see all the other aspect ratios. 

 

Can these be removed?

Petar
Telerik team
 answered on 23 Dec 2020
7 answers
477 views

Hi, if you add an event that starts 08/17/2015 8:00AM and ends at 08/19/2015 : 8h00PM, the scheduler will display the item as if it was an all day event for all three days which is not visually useful.

 I would like to be able to show the event starting at 8h00AM the first day all the way down to the end of the day, then the second day shown as an all day item and finally have the event continue on the last day from 12:00AM to 8h00PM.

Is there a way to achieve this with the scheduler?

 

(I attached some screenshots to better explain my requirements)

Veselin Tsvetanov
Telerik team
 answered on 23 Dec 2020
1 answer
199 views
We're using the jQuery rating with Bootstrap theme. The default star icons are huge. How do you make them look smaller and with less spacing in between? I tried using css to override the font-size but it gets weird when you have half precision values. The half stars look shifted.
Ivan Danchev
Telerik team
 answered on 22 Dec 2020
Narrow your results
Selected tags
Tags
+? more
Top users last month
Anislav
Top achievements
Rank 6
Silver
Bronze
Bronze
Jianxian
Top achievements
Rank 1
Iron
Marco
Top achievements
Rank 3
Iron
Iron
Iron
Jim
Top achievements
Rank 2
Iron
Iron
Nurik
Top achievements
Rank 2
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Anislav
Top achievements
Rank 6
Silver
Bronze
Bronze
Jianxian
Top achievements
Rank 1
Iron
Marco
Top achievements
Rank 3
Iron
Iron
Iron
Jim
Top achievements
Rank 2
Iron
Iron
Nurik
Top achievements
Rank 2
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?