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

Best practice adjusting column width in mDataTable


  • rizkidprast
    Participant

    Posts: 5
    Member Reply #18726

    Hi, firstly i need to say that your Job is AMAZING !!. I love this template.
    Ok, this is why i came for :p
    i am struggling a lot with adjusting header columns width of mDatatable (please see attachment t.png).
    As you can see header columns are not synchronized with the content.

    2nd attached file contains scripts to initialized it.

    I tried so many ways but no luck. advice please

    thanks

     

    • This topic was modified 4 months, 1 week ago by  rizkidprast.
    Attachments:
    You must be logged in to view attached files.
    Jai
    Jai
    Keymaster

    Posts: 2700
    Support Staff Reply #18761

    Hi ๐Ÿ™‚

    Thanks for your feedback.

    Can you please send your datatable init code? How did you initialize it? Was it in a tab or hidden during initialization.

    Thanks


    rizkidprast
    Participant

    Posts: 5
    Member Reply #18768

    Hi Jai, I have included attachements in my first post. please check it

    please reccomend me to adjust header and body properly

    regards

    Jai
    Jai
    Keymaster

    Posts: 2700
    Support Staff Reply #18781

    Hi ๐Ÿ™‚

    Are using a fixed width or no width in the columns setting?

    Thanks


    rizkidprast
    Participant

    Posts: 5
    Member Reply #18784

    Hi

    I have tried both.

    Please advice

    Jai
    Jai
    Keymaster

    Posts: 2700
    Support Staff Reply #18818

    Hi ๐Ÿ™‚

    What type of data source are you using? Remote or local? or from html table?

    Thanks


    rizkidprast
    Participant

    Posts: 5
    Member Reply #18821

    its remote source

    please….
    see attached file (from my first post)
    <pre style=”color: #000000; word-wrap: break-word; white-space: pre-wrap;”>datatable = $(‘#role-permission-list’).mDatatable({
    data: {
    type: ‘remote’,
    source: {
    read: {
    url: ‘/Administrator/Api/RolePermissionList/’ + wApp.roleId,
    map: function (raw) {
    var dataSet = raw;
    if (typeof raw.data !== ‘undefined’) {
    dataSet = raw.data;
    }
    return dataSet;
    },
    },
    },
    pageSize: 10,
    serverPaging: true,
    serverFiltering: true,
    serverSorting: true,
    },
    layout: {
    scroll: false,
    footer: false
    },
    sortable: true,
    pagination: true,
    toolbar: {
    items: {
    pagination: {
    pageSizeSelect: [10, 20, 30, 50, 100],
    },
    },
    }, search: {
    input: $(‘#generalSearch’),
    },
    columns: [{
    field: ‘ActivityName’,
    title: ‘Name’,
    sortable: true,
    width: 110,
    textAlign: ‘left’,
    overflow: ‘visible’,
    type: ‘text’,
    }, {
    field: ‘GetUrl’,
    title: ‘Url’,
    sortable: true,
    width: 110,
    textAlign: ‘center’,
    overflow: ‘visible’,
    type: ‘text’,
    template: function (row) {
    return row.GetUrl
    }
    }, {
    field: ‘CanRead’,
    title: ‘R’,
    sortable: true,
    width: 5,
    textAlign: ‘center’,
    overflow: ‘visible’,
    type: ‘bool’,
    template: function (row) {
    return row.IsSystemRole ? ‘<i class=”fa fa-check text-success”></i>’ : ‘<i class=”fa fa-times text-danger”></i>’;
    }
    }, {
    field: ‘CanCreate’,
    title: ‘C’,
    sortable: true,
    width: 5,
    textAlign: ‘center’,
    overflow: ‘visible’,
    type: ‘bool’,
    template: function (row) {
    return row.IsSystemRole ? ‘<i class=”fa fa-check text-success”></i>’ : ‘<i class=”fa fa-times text-danger”></i>’;
    }
    },{
    field: ‘CanUpdate’,
    title: ‘U’,
    sortable: true,
    width: 5,
    textAlign: ‘center’,
    overflow: ‘visible’,
    type: ‘bool’,
    template: function (row) {
    return row.IsSystemRole ? ‘<i class=”fa fa-check text-success”></i>’ : ‘<i class=”fa fa-times text-danger”></i>’;
    }
    },{
    field: ‘CanDelete’,
    title: ‘D’,
    sortable: true,
    width: 5,
    textAlign: ‘center’,
    overflow: ‘visible’,
    type: ‘bool’,
    template: function (row) {
    return row.IsSystemRole ? ‘<i class=”fa fa-check text-success”></i>’ : ‘<i class=”fa fa-times text-danger”></i>’;
    }
    }, {
    field: ‘Actions’,
    width: 110,
    title: ‘Actions’,
    sortable: false,
    template: function (row, index, datatable) {
    var editDisabled = ”;
    var deleteDisabled = ”;
    return ‘\
    \
    <i class=”la la-edit”></i>\
    \
    ‘;
    },
    }],
    });
     

    Jai
    Jai
    Keymaster

    Posts: 2700
    Support Staff Reply #18823

    Hi ๐Ÿ™‚

    Sorry, I didn’t see there is another attachment file (datatable init code).

    We have tried your code, it worksย on our site. Is there any specific way to initialize it? Maybe you did initialize the datatable on the modal or on the tab?

    Thanks

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

You must be logged in to reply to this topic.