This topic contains 7 replies, has 2 voices, and was last updated by Jai Jai 5 months, 1 week ago.

Column rendering not working well on first load


  • puntoexesrl
    Participant

    Posts: 9
    Member Reply #18095

    Hello there,

    I have another question about mDatatables, on the first rendering I obtain something like I attached.

    Is there a way to implement a general function in order to avoid this to happen?

    I don’t understand why some columns are replaced with a substring of it.

    Hope you reply soon,
    Davide

    this is my code:

    <script>
    var pageUrl = $('#host').val();
    function binding() {
    $('.btnRemoveElement').click(function () {
    var action = $(this).attr('rel');
    $('#frmDelete').attr('action', pageUrl + action);
    });
    }
    $('#tblEmployees').mDatatable({
    data: {
    type: 'remote',
    source: {
    read: {
    url: '@Url.Action("GetEmployees", "Company")',
    method: 'GET',
    // custom headers
    headers: { 'x-my-custom-header': 'some value', 'x-test-header': 'the value' },
    params: {
    id: '@Model.ID',
    },
    map: function (raw) {
    // sample data mapping
    var dataSet = raw;
    if (typeof raw.data !== 'undefined')
    {
    dataSet = raw.data;
    }
    return dataSet;
    },
    }
    },
    pageSize: 10,
    saveState: {
    cookie: true,
    webstorage: true
    },
    serverPaging: false,
    serverFiltering: false,
    serverSorting: false,
    autoColumns: false,
    },
    layout: {
    theme: 'default',
    class: 'm-datatable--brand',
    scroll: false,
    height: null,
    footer: false,
    header: true,

    smoothScroll: {
    scrollbarShown: true
    },

    spinner: {
    overlayColor: '#000000',
    opacity: 0,
    type: 'loader',
    state: 'brand',
    message: true
    },

    icons: {
    sort: { asc: 'la la-arrow-up', desc: 'la la-arrow-down' },
    pagination: {
    next: 'la la-angle-right',
    prev: 'la la-angle-left',
    first: 'la la-angle-double-left',
    last: 'la la-angle-double-right',
    more: 'la la-ellipsis-h'
    },
    rowDetail: { expand: 'fa fa-caret-down', collapse: 'fa fa-caret-right' }
    }
    },

    sortable: true,
    autoWidth:true,
    pagination: true,

    search:false,

    detail: {
    title: 'Load sub table',
    content: function (e) {
    // e.data
    // e.detailCell
    }
    },

    rows: {
    callback: function () { binding(); },
    // auto hide columns, if rows overflow. work on non locked columns
    autoHide: false,
    },

    //// columns definition
    columns: [
    {
    field: "id",
    title: "#",
    responsive: { hidden: 'lg' },
    locked: { left: 'xl' },
    sortable: false,
    },
    {
    field: "name",
    title: "Nome",
    sortable: 'asc',
    filterable: false,
    //width: 150,
    responsive: { visible: 'lg' },
    locked: { left: 'xl' },
    template: function (row) {
    console.log(row);
    return '<span>' + row.name + '</span>';
    }
    },
    {
    field: "surname",
    title: "Cognome",
    //width: 150,
    responsive: { visible: 'lg' },
    locked: { left: 'xl' },
    template: function (row) {
    return '<span>' + row.surname + '</span>';
    }
    },
    {
    field: "fiscalCode",
    title: "Codice fiscale",
    //width: 200,
    overflow:'visible',
    responsive: { visible: 'lg' },
    locked: { left: 'xl' },
    },
    {
    field: "accountingBalance",
    title: "Saldo residuo",
    //width: 150,
    responsive: { visible: 'lg' },
    locked: { left: 'xl' },
    },
    {
    field: "currentBalance",
    title: "Saldo disponibile",
    //width: 150,
    responsive: { visible: 'lg' },
    locked: { left: 'xl' },
    },
    {
    field: "",
    title: "Azioni",
    //width: 150,
    responsive: { visible: 'lg' },
    locked: { center: 'xl' },
    template: function (row) {
    return '<span><input type="button" rel="@Url.Action("Delete", "Employee")/'+row.id+'" data-toggle="modal" data-target="#mdlRemove" class="btn btn-outline-danger btnRemoveElement" value="Elimina" /></span>';
    }
    }],

    toolbar: {
    layout: ['pagination'],
    placement: ['bottom'], //'top', 'bottom'
    items: {
    pagination: {
    type: 'full_numbers',

    pages: {
    desktop: {
    layout: 'default',
    pagesNumber: 6
    },
    tablet: {
    layout: 'default',
    pagesNumber: 3
    },
    mobile: {
    layout: 'compact'
    }
    },

    navigation: {
    prev: true,
    next: true,
    first: true,
    last: true
    },

    },
    info: false,
    }
    },

    translate: {
    records:
    {
    processing: 'Attendere prego...',
    noRecords: 'nessun dipendete presente.'
    },
    toolbar:
    {
    pagination: {
    items: {
    default: {
    next: 'la la-angle-right',
    prev: 'la la-angle-left',
    first: 'la la-angle-double-left',
    last: 'la la-angle-double-right',
    more: 'la la-ellipsis-h'
    },
    info: 'Displaying {{start}} - {{end}} of {{total}} records'
    }
    }
    }
    }
    });
    </script>

    Attachments:
    You must be logged in to view attached files.
    Jai
    Jai
    Keymaster

    Posts: 2700
    Support Staff Reply #18111

    Hi 🙂

    What do you mean by columns are being replaced by substring?

    Where did you initialize the mDatatable? Was it inside the Tab content?

    Thanks


    puntoexesrl
    Participant

    Posts: 9
    Member Reply #18119

    hi jai,
    if you look at the picture I attached in the old message you can see there are some cells that end with dots, for example:
    DNDDVD94U21… should be displayed as DNDDVD94U21G535U in reality.

    this is the code instead of my view in which I have my datatable:


    <div class="m-portlet m-portlet--tabs">
    <div class="m-portlet__head">
    <div class="m-portlet__head-caption">
    <div class="m-portlet__head-title">
    <h3 class="m-portlet__head-text">
    @ViewBag.Title
    </h3>
    </div>
    </div>
    <div class="m-portlet__head-tools">
    <ul class="nav nav-tabs m-tabs m-tabs-line m-tabs-line--right m-tabs-line-danger" role="tablist">
    <li class="nav-item m-tabs__item">

    Dettagli azienda

    <li class="nav-item m-tabs__item">

    Contatti

    <li class="nav-item m-tabs__item">

    Elenco dipendenti

    </div>
    </div>

    @using (Html.BeginForm("Edit", "Company", FormMethod.Post, new { @class = "m-form", id = "frmEdit" }))
    {
    <div class="m-portlet__body">
    <div class="tab-content">
    <!--PRIMA PAGINA BEGIN-->
    <div class="tab-pane active show" id="m_portlet_tab_1_1">
    <div class="m-form__section m-form__section--first">
    <div class="row">
    <div class="col-lg-9">
    @Html.HiddenFor(m => m.isDeleted)

    <div class="form-group m-form__group row">
    <div class="col-lg-4 text-center" style="vertical-align:middle">

    </div>
    <div class="col-lg-8">
    @Html.LabelFor(m => m.Name)
    @Html.EditorFor(m => m.Name, new { @autocomplete = "Name", htmlAttributes = new { @class = "form-control m-input" } })
    @Html.ValidationMessageFor(m => m.Name)
    </div>
    </div>

    <div class="row form-row">
    <div class="col-md-12">
    @if (Request.Url.ToString().Contains("Edit"))
    {
    <span class="semi-bold">@Html.Label("Logo")</span>
    }
    else
    {
    <span class="semi-bold">@Html.Label("Carica logo")</span>
    }
    </div>
    <div class="custom-file">
    <input type="file" class="custom-file-input" name="file" id="file">
    <label class="custom-file-label" for="customFile">
    Seleziona file
    </label>
    </div>
    </div>
    <div class="form-group m-form__group">
    @Html.LabelFor(m => m.ColourTemplate)
    @Html.EnumDropDownListFor(m => m.ColourTemplate, htmlAttributes : new { @class = "form-control m-input" })
    @Html.ValidationMessageFor(m => m.ColourTemplate)
    </div>
    <div class="form-group m-form__group row">
    <div class="col-lg-6">
    @Html.LabelFor(m => m.VatCode)
    @Html.EditorFor(m => m.VatCode, new { @autocomplete = "VatCode", htmlAttributes = new { @class = "form-control m-input" } })
    @Html.ValidationMessageFor(m => m.VatCode)
    </div>
    <div class="col-lg-6">
    @Html.LabelFor(m => m.FiscalCode)
    @Html.EditorFor(m => m.FiscalCode, new { @autocomplete = "FiscalCode", htmlAttributes = new { @class = "form-control m-input" } })
    @Html.ValidationMessageFor(m => m.FiscalCode)
    </div>
    </div>

    <div class="form-group m-form__group row">
    <div class="col-lg-2">
    @Html.LabelFor(m => m.Phone)
    @Html.EditorFor(m => m.Phone, new { @autocomplete = "Phone", htmlAttributes = new { @class = "form-control m-input" } })
    @Html.ValidationMessageFor(m => m.Phone)
    </div>
    <div class="col-lg-2">
    @Html.LabelFor(m => m.Mobile)
    @Html.EditorFor(m => m.Mobile, new { @autocomplete = "Mobile", htmlAttributes = new { @class = "form-control m-input" } })
    @Html.ValidationMessageFor(m => m.Mobile)
    </div>
    <div class="col-lg-3">
    @Html.LabelFor(m => m.Fax)
    @Html.EditorFor(m => m.Fax, new { @autocomplete = "Fax", htmlAttributes = new { @class = "form-control m-input" } })
    @Html.ValidationMessageFor(m => m.Fax)
    </div>
    <div class="col-lg-5">
    @Html.LabelFor(m => m.Email)
    @Html.EditorFor(m => m.Email, new { @autocomplete = "Email", htmlAttributes = new { @class = "form-control m-input" } })
    @Html.ValidationMessageFor(m => m.Email)
    </div>
    </div>

    <div class="form-group m-form__group">
    @Html.Label("Inserimento rapido indirizzo")
    @Html.TextBox("autocomplete", "", new { @class = "form-control m-input" })
    </div>

    <div class="form-group m-form__group row">
    <div class="col-lg-12">
    @Html.Label("Indirizzo - Civico")
    </div>
    <div class="col-lg-10">
    @Html.EditorFor(m => m.Street, new { htmlAttributes = new { placeholder = "Via...", autocomplete = "Street", @class = "form-control m-input" } })
    @Html.ValidationMessageFor(m => m.Street)
    </div>
    <div class="col-lg-2">
    @Html.EditorFor(m => m.StreetNumber, new { htmlAttributes = new { placeholder = "Civico...", autocomplete = "StreetNumber", @class = "form-control m-input" } })
    @Html.ValidationMessageFor(m => m.StreetNumber)
    </div>
    <div class="col-lg-12">
    @Html.Label("Citta - Provincia - Cap - Nazione")
    </div>
    <div class="col-lg-4">
    @Html.EditorFor(m => m.City, new { htmlAttributes = new { placeholder = "Città...", autocomplete = "City", @class = "form-control m-input" } })
    @Html.ValidationMessageFor(m => m.City)
    </div>
    <div class="col-lg-4">
    @Html.EditorFor(m => m.Province, new { htmlAttributes = new { placeholder = "Provincia...", autocomplete = "Province", @class = "form-control m-input" } })
    @Html.ValidationMessageFor(m => m.Province)
    </div>
    <div class="col-lg-2">
    @Html.EditorFor(m => m.Cap, new { htmlAttributes = new { placeholder = "Cap...", autocomplete = "Cap", @class = "form-control m-input" } })
    @Html.ValidationMessageFor(m => m.Cap)
    </div>
    <div class="col-lg-2">
    @Html.EditorFor(m => m.Nation, new { htmlAttributes = new { placeholder = "Nazione...", autocomplete = "Nation", @class = "form-control m-input" } })
    @Html.ValidationMessageFor(m => m.Nation)
    </div>
    </div>
    <div class="form-group m-form__group">
    <div class="col-md-12">
    <div class="m-checkbox-inline">
    <label for="AccumulateBalance" class="m-checkbox m-checkbox--solid m-checkbox--brand m-checkbox--disabled">
    Accumula saldo
    @Html.CheckBoxFor(a => a.AccumulateBalance, new { @disabled = "disabled" })
    <span></span>
    </label>
    @Html.ValidationMessageFor(m => m.AccumulateBalance)
    </div>
    </div>
    </div>
    </div>
    <div class="col-lg-3 clearfix">
    <br />
    <h4>Servizi Disponibili</h4>
    <table>
    @foreach (var service in services)
    {
    <tr></tr>
    <tr>
    <td>
    <input type="checkbox" disabled
    name="selectedServices"
    value="@service.ServiceID"
    @(Html.Raw(service.Assigned ? "checked=\"checked\"" : ""))
    class="checkbox-custom" />
    <label class="checkbox-custom-label" for="selectedServices">@service.Name</label>
    </td>
    </tr>
    }
    </table>
    </div>
    </div>
    </div>

    </div>
    <!--PRIMA PAGINA END-->
    <!--SECONDA PAGINA BEGIN-->
    <div class="tab-pane" id="m_portlet_tab_1_2">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled. Lorem Ipsum is simply dummy text.
    </div>
    <!--SECONDA PAGINA END-->
    <!--TERZA PAGINA BEGIN-->
    <div class="tab-pane" id="m_portlet_tab_1_3">
    <div class="m_datatable" id="tblEmployees"></div>
    </div>
    <!--TERZA PAGINA EMD-->
    </div>
    </div>
    <div class="m-portlet__foot m-portlet__foot--fit">
    <div class="m-form__actions m-form__actions">
    <input type="submit" value="Salva" class="btn btn-cons btn-success" id="btnSave" />
    @Html.ActionLink("Ritorna alla Lista", "Index", null, new { @class = "btn btn-secondary" })
    </div>
    </div>
    }
    </div>

    Hope this could help

    Davide

    Jai
    Jai
    Keymaster

    Posts: 2700
    Support Staff Reply #18128

    Hi 🙂

    Can you check the browser tool element inspector? The word should be not removed, but maybe you have set the width manually, and the width is not wide enough.

    We have an example which the cells are wide;

    http://keenthemes.com/metronic/preview/?page=crud/metronic-datatable/scrolling/both&demo=default

    Can you try to increase the column’s width option?

    Thanks


    puntoexesrl
    Participant

    Posts: 9
    Member Reply #18135

    Can you check the browser tool element inspector? The word should be not removed, but maybe you have set the width manually, and the width is not wide enough.

    Hi Jai 🙂

    As you can see on my first post in which I wrote the script to initialize the mDatatable, I’ve set the autowidth on true and commented the width in the column definition.
    But the thing is that I would like to obtain the most responsive table as possible, and expecially to have all the cells aligned, and this happens only on the load, because if I click on the sort filter, the columns are rendered correctly.

    Hope there’s a fast way to solve this,

    Davide

    ps: sorry for the late reply but I suppose I’m in a different time zone

    Jai
    Jai
    Keymaster

    Posts: 2700
    Support Staff Reply #18146

    Hi 🙂

    There is no “autoWidth” option in mDatatable.

    It might be a bug. We have to check and fix it in the plugin. This will require some time.

    Thanks


    puntoexesrl
    Participant

    Posts: 9
    Member Reply #18151

    Hi jai

    There is no “autoWidth” option in mDatatable.

    It might be a bug. We have to check and fix it in the plugin. This will require some time.

    while you solve this problem is there a possibility to assign a dinamic width to the column in order to make them work even if I dont know the length of my data inside that table?

    Davide

    Jai
    Jai
    Keymaster

    Posts: 2700
    Support Staff Reply #18170

    Hi 🙂

    At the moment, the datatable don’t have auto width feature. You have to set the width manually via column option.

    Thanks

You must be logged in to reply to this topic.