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.

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

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. 

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.

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. 

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

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

Hi,

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

However when testing we see all the other aspect ratios. 

Can these be removed?

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)

Hello everyone,

I am using Kendo 2020.2.513 and I want to do something as in this Dojo: https://dojo.telerik.com/EnuyodAQ

In fact, I am perfectly able to reproduce that code in my project. However, as soon as I change the URL with the one that is providing my data, the code is failing. Data is binded correctly to the spreadsheet, but the next error occurs:

I have even updated the server code to return provide a Jsonp output (so far, it was normal Json). When accessing the data URL directly, with a callback query parameter, the output is consistent with the one in the Dojo example (https://demos.telerik.com/kendo-ui/service/Products?callback=someCallbackFn&_=1234). 

The only difference I can come up with is that, since I am testing locally, my server is serving the content without SSL/TLS (no HTTPS). But I don't think that is relevant at this point. 

Do you have any idea of what can be going on?

For the past few months, I have been experimenting with React and Material UI and put one very simple application into production.

I am working on my second app which will be an online membership application.  It will need masked inputs for things such as dates, SSN# and credit cards.   This is where Mui started to fall short.   My company already licenses the DevCraft bundle for a WPF project so I started digging into Kendo.  It has all the controls I need and others I didn't even thinks of using.

My initial question isn't about the controls, but to point me in a direction for best practices responsive layout containers.  Mui has Grid (not to be confused with a Data Grid), boxes and Container which helps with that.

It's not clear to me how you do this with Kendo.   Do you have any articles to share.  

Thanks

Anthony

I know the original thread got moved to the Feedback Portal, but just in case someone else is looking for a way to do this until it is provided by kendo. When the thread got moved to the portal, this was added: Note: DOM manipulation over SVG elements is not a great approach, and I would not recommend it, unless it is absolutely unavoidable. Unfortunately, there is nothing more reasonable that can be done instead.

Here is a dojo and here is the code:

So this is a bit of a strange one.  Have a database where items are stored in float due to the variance of the decimal points.  So you will commonly find scientific notation (7e-8 for example).  I am using Inline Editing on the grid and have use this to display the number as a decimal:

{
                field: "testValue",
                title: "Value",
                width: 100,
                editor: customNumberEditor,
                template: "#= kendo.toString(testValue, 'n' + schemeNomRes)#"
}

However, when you click the Edit Button in the row.  The text field reverts back to Scientific Notation.  My function for customNumberEditor is pretty basic:

function customNumberEditor(container, options) {
    $("<input required name=\"" + options.field + "\" onkeypress= \"return isNumber(event)\">").appendTo(container);
}

Is there something I could do there to ensure that the number appears in my textbox as: 0.00000008 in this example?

Thanks,

Richard