Is it okay to use Kendo UI widgets? #2795

bilalhaidar created 7 years ago

Hello, So many controls are being used on the existing code. In case I want to use Kendo UI controls, any special consideration to take care of? Any integrations, etc.?

I saw the samples that use the Kendo Grid, it's a matter of adding .css js and proper configuration in the .js controller. Anything else needed to integrate with the Abp Framework

Thanks

22 Answer(s)

0

ismcagdas created 7 years ago
Support Team

Hi,

You can use Kendo UI controls in AspNet Zero. We didn't try all controls but main idea is matching json response from server to Kendo UI's expected json. And I think this should not be a problem.

We can always try to help you if you have any problems.

Thanks.
0

bilalhaidar created 7 years ago

As usual, thank you so much :)

bilalhaidar created 7 years ago

Hi, I am trying to include Kendo without affecting any css/js in the app.

I created under libs folder this structure:

libs/kendoui/css/{css files here} libs/kendoui/js/{js files here}

Then, in the AppBundleConfig I added this:

private static void AddAppCssLibs(BundleCollection bundles, bool isRTL)
        {
            bundles.Add(
                new StyleBundle("~/Bundles/App/libs/css" + (isRTL ? "RTL" : ""))
                    ...
                    .Include("~/libs/kendoui/css/kendo.material.min.css", new CssRewriteUrlWithVirtualDirectoryTransform())
                    .ForceOrdered()
                );
        }

Also, I added to the bundle of js the following:

bundles.Add(
                new ScriptBundle("~/Bundles/App/libs/js")
                    .Include(
                        ...
                        "~/libs/kendoui/js/kendo.core.min.js",
                        "~/libs/kendoui/js/kendo.calendar.min.js",
                        "~/libs/kendoui/js/kendo.popup.min.js",
                        "~/libs/kendoui/js/kendo.datepicker.min.js"
                  ).ForceOrdered()
                );

The files are not showing in the HMTL at all.

Anything still missing?

Thanks

0

ismcagdas created 7 years ago
Support Team

Hi,

Yes, what you did is enough to put those files in your layout. Can you clean browser cache and try to refresh your page again ? Maybe the page is cached by browser ?

bilalhaidar created 7 years ago

Thanks. Files are showing now. However, the widget is not. All what I get is a textbox for the following widget:

<input kendo-date-picker
                   ng-model="dateString"
                   k-ng-model="dateObject" />

Files needed to run the above is:

<link href="/libs/kendoui/css/kendo.common-material.min.css" rel="stylesheet"/>
<link href="/libs/kendoui/css/kendo.material.min.css" rel="stylesheet"/>

<script src="/libs/kendoui/js/kendo.core.min.js"></script>
<script src="/libs/kendoui/js/kendo.calendar.min.js"></script>
<script src="/libs/kendoui/js/kendo.popup.min.js"></script>
<script src="/libs/kendoui/js/kendo.datepicker.min.js"></script>
<script src="/libs/kendoui/js/kendo.angular.min.js"></script>

This is an example of using a Calendar. <a class="postlink" href="http://dojo.telerik.com/IRuSi">http://dojo.telerik.com/IRuSi</a>

Thanks

JeffMH created 7 years ago

Did you add the kendo.directives to your module configuration?

/* 'app' MODULE DEFINITION */
var appModule = angular.module("app", [
    "ui.router",
    "ui.bootstrap",
    'ui.utils',
    "ui.jq",
    'ui.grid',
    'ui.grid.pagination',
    "oc.lazyLoad",
    "ngSanitize",
    "ngMessages",
    'angularFileUpload',
    'daterangepicker',
    'angularMoment',
    'frapontillo.bootstrap-switch',
    'abp',
    'kendo.directives'
]);

0

bilalhaidar created 7 years ago

Thanks Jeff :-) I totally forgot about that.
0

bilalhaidar created 7 years ago

One more issue.

With the daterangepicker used by default in the framework, there was a tight integration with moment. For instance I can define locale.format = 'L' for the daterangepicker and works smoothly with moment.

Now, how could I make the kendo ui datepicker for instance integrate with moment?

I saw a file called moment-with-locale.js. Seems 'L' is defined in that file for each culture to be different. So, when changing cultures, L will be different for each culture.

I dunno if my analysis is correct, but how would I extend for instance another datepicker in this case kendo ui to make use of that also?

Thanks
0

JeffMH created 7 years ago

<cite>drcgreece: </cite> One more issue.

I dunno if my analysis is correct, but how would I extend for instance another datepicker in this case kendo ui to make use of that also?

Thanks

Sorry, I can't help you with that one.
0

ismcagdas created 7 years ago
Support Team

Thanks JeffMH :).

Now, how could I make the kendo ui datepicker for instance integrate with moment?

I think telerik team can help you with that, we don't have enough information about kendo ui controls.
0

bilalhaidar created 7 years ago

I'll find out how and share it here in case anyone needs to use kendo ui.
0

ismcagdas created 7 years ago
Support Team

Thanks,

We really appreciate your effort :)
0

bilalhaidar created 7 years ago

The current calendars use a format like that:

format: 'L'

Now for sure, somewhere inside the calendar it contacts moment Locales to find out what is the actual format of 'L' for the specific culture, correct?

Can you guide me to the code that translates format: 'L' to the actual format like 'DD.MM.YYYY'? Once I know that, I could extend Kendo UI widget to return a value based on that format.

Thanks
0

ismcagdas created 7 years ago
Support Team

Hi,

Both 'L' and 'DD.MM.YYYY' are format of momentjs. Why don't you use 'DD.MM.YYYY' instead of 'L'.

Maybe I didn't understand the question :)
0

bilalhaidar created 7 years ago

Hi I noticed in the monent-locale file L has different values as per culture.

In one of the grids you use moment:'L' to display date. When culture changes and depending on culture L gets another format.

Is that correct? If so, how can u query moment-locale to get actual format behind L depending on culture being used? Then I'll be able that se actual format with kendo instead of L.

Thanks
0
ismcagdas created 7 years ago
Support Team
Hi,

I think this is what you are looking for

moment.localeData().longDateFormat('L')

But this format, for example 'DD.MM.YYYY' might not work for kendo ui, you can check it.

Thanks.
0

bilalhaidar created 7 years ago

I found that best option to validate Kendo UI DatePicker is to use a custom directive. Have a look here: <a class="postlink" href="http://codepen.io/bilalhaidar/pen/RpXYJd">http://codepen.io/bilalhaidar/pen/RpXYJd</a>

Thanks
0

ismcagdas created 7 years ago
Support Team

Hi,

Thank you very much for your sharing :).
0

bilalhaidar created 7 years ago

I went into more issues with Datepicker, moment and saving/loading data from server. I developed a small and handy directive to handle validation and format issues I'll share it here if allowed and when I have access to PC as I'm on mobile now.
0

ismcagdas created 7 years ago
Support Team

Thanks,

We will be very happy if you can :).

bilalhaidar created 7 years ago

Hello Ismail, Here is the directive. I am sure it can be more enhanced and I would be thankful if you improve on it and then share it with me again.

(function () {
    function validationDate() {

        function link($scope, $element, $attrs, $ctrl) {

            $ctrl.$validators.vd = function (value) {
                if (value === undefined || value === null) { // usually value is undefined when its initialized
                    return true;
                }

                // validate with moment
                return moment(new Date(value), app.drc.consts.momentDateFormat, true).isValid();
            }

            /*
                since we are using ng-model and not k-ng-model
                I need to convert whatever DatePicker assigns
                to the date value, convert it to moment
            */
            $ctrl.$parsers.unshift(function (value) {
                if (value && (typeof value === "string")) {
                    if (!moment(value, app.drc.consts.momentDateFormat, true).isValid()) {
                        value = ''; // since its empty the validation above will fire 
                    }
                    else {
                        value = moment(value, app.drc.consts.momentDateFormat).toDate();
                        //console.log('Value Stored in model: ', value);
                    }
                    return value;
                }
                return '';
            });

            /*
                Value set by controller (or loaded from serevr)
                => Convert to a format understood by Kendo
            */
            $ctrl.$formatters.unshift(function (value) {
                if (value) {
                    //console.log('Value Stored in Kendo DatePicker: ', kendo.parseDate(value));
                    return kendo.parseDate(value);
                }
            })
        }

        return {
            require: 'ngModel',
            restrict: 'A',
            link: link
        }
    }

    appModule.directive('validationDate', validationDate);
})();

0

ismcagdas created 7 years ago
Support Team

Hi,

Thanks a lot for your work :). I will try to take a look at it today.

Thanks again.

Have an answer to this question? Log in and write your answer.