Adding multiple data-* and values to element

OK. I got it, thank to wpeffects posts and your answer.

For those who need to get it work here are the steps you need to follow :

Step 1

Add map param in your functions.php (or any file.php included in functions.php with locale_template(); ) :

add_action('init', 'kc_add_data', 99 );

    function kc_add_data(){

        global $kc;
        $kc->add_map_param(
            'kc_row',
            array(
                'name' => 'my_custom_data',
                   'label' => __('Extra Data', 'KingComposer'),
                   'type' => 'text',
                   'admin_label' => true,
                   'description' => __('Extra Data (ex: data-key="value")', 'KingComposer')
         ), 1 );
    }

The code above adds a text field in row settings (kc_row).

Step 2

Create a folder called kingcomposer in your activated template directory. Then copy kc_row.php from wp-content/plugins/kingcomposer/shortcodes/ folder into your template’s kingcomposer folder.

Step 3

Edit your kc_row.php and before :

$output .= '<div class="kc-row-container' . esc_attr($container_class) . '">';

add :

if( !empty( $atts['my_custom_data'] ) ) {
    $custom_datas = explode(',', esc_attr( $atts['xdata'] ));
    foreach($custom_datas as $custom_data) {
        $element_attributes[] = $custom_data;
    }
}

Now the code part is done, you can go check if the fiel exists in row param in King Composer on any page. Be aware that kc_row map is for rows at root of your post / page. If you need to add extra data-* attributes to rows inside, replace kc_row by kc_row_inner and copy and edit kc_row_inner.php

One last thing !

The code above lets you add multiple data attributs with couple key=value coma separated. No need to write quotes, it is added automatically :

data-key=value,data-key2=value2

Renders like this :

<div data-kc-fullheight="true" data-kc-fullwidth="row" data-key="value" data-key2="value2" class="kc_row home-row-parallax" data-kc-action="loaded">...</div>

Erh… I made a mistake. For the code to work with :

$output .= '<div ' . implode( ' ', $element_attributes) . '>';

Step 3

if( !empty( $atts['xdata'] ) ) {
    $custom_datas = explode(',', $atts['xdata']);
    foreach($custom_datas as $custom_data) {
        $element_attributes[] = trim( $custom_data);
    }
}

DO NOT use esc_attr(); with $atts[‘my_custom_data’]

and the value of your text field should be encapsulated with double quotes :

data-key="value",data-key2="value2"

Then, data attributes are rendered like this :

<div data-kc-fullheight="true" data-kc-fullwidth="row" data-key="value" data-key2="value2" class="kc_row home-row-parallax" data-kc-action="loaded">...</div>