[ahmed.mo.aminParticipant]

Thanks a lot ….

[ahmed.mo.aminParticipant]

I try it as

        public ActionResult Upload(HttpPostedFileBase[] fileToUpload)
        {
            foreach (HttpPostedFileBase File in fileToUpload)
            {
                var path = Path.Combine(Server.MapPath("~/Uploads/"), File.FileName);
                File.SaveAs(path);
            }
            return View();
        }

and set js code as:

$(document).ready(function () {
            $('#jqxFileUpload').jqxFileUpload({
                width: '100%',
                browseTemplate: 'success',
                uploadTemplate: 'primary',
                cancelTemplate: 'danger',
                uploadUrl: "@Url.Content("~/Uploader/Upload")",
                fileInputName: 'fileToUpload',
                localization: {
                    browseButton: 'Select File'
                }
            });

and it works great

Thanks a lot

[ahmed.mo.aminParticipant]

Thanks

are that mean i can set uploadUrl to be from actionresult in any controller i need ?

[ahmed.mo.aminParticipant]

Hi

Yes i’m sure – the problem related with screen size,

@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}
@media (min-width: 992px) {
  .container {
    width: 970px;
  }
}
@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}

i work around it by edit the jqxgrid.js file and set this section as:

div style="z-index: 99999; margin-left: -66px; left: 44%;

here when ( left is 44% ) the loader was centered …

hope to make option for that soon

[ahmed.mo.aminParticipant]

Sorry for that

https://jsfiddle.net/ahmed_amin/tuttue02/9/

the css make the problem is in div contain the grid div

<div class="container body-content">
<div id="jqxgrid"></div>
</div>

css make the problem is:

.container {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

if i remove css class from main div i get loader centered – so please how can fix that and let work with this class ?

[ahmed.mo.aminParticipant]

Hi

i have add this https://jsfiddle.net/ahmed_amin/tuttue02/7/

hope it can help

[ahmed.mo.aminParticipant]

Thanks

i see the example but i can’t understand what i must do “i set grid theme to be bootstrap but still nothing and i need darkblue theme”- sorry for that ?

can you please provide me with sample example depending my grid code to let me understand it

thanks for your concern

[ahmed.mo.aminParticipant]

Thanks a lot Peter Stoev

i have see that the problem is from bootstrap – if i remove it everything is fine, any idea how to fix that ?

[ahmed.mo.aminParticipant]

this is full JS code:

$(document).ready(function () {
    // prepare the data
    var source = {
        datatype: "json",

        datafields:
        [
            { name: 'acc_no', type: 'number' },
            { name: 'Acc_Nm_AR', type: 'string' },
            { name: 'attn', type: 'string' },
            { name: 'total_tax', type: 'number' },
            { name: 'TOT_WT', type: 'number' }
        ],

        url: '/TaxMid/GetCustomers',
    };

    var dataAdapter = new $.jqx.dataAdapter(source);//fine dataadapter

    $("#jqxgrid").jqxGrid({
        source: dataAdapter,
        rtl: true,
        pageable: true,
        autoheight: true,
        theme: 'darkblue',
        width: '100%',
        columns:
            [
                { text: 'كود العميل', dataField: 'acc_no', align: 'center', cellsalign: 'center', width: '10%', cellclassname: "cell" },

                { text: 'إسم الصيدلية', datafield: 'Acc_Nm_AR', align: 'center', cellsalign: 'right', width: '25%', cellclassname: "cell" },

                { text: 'إسم العميل', datafield: 'attn', align: 'center', cellsalign: 'right', width: '25%', cellclassname: "cell" },

                { text: 'إجمالى الضريبة', datafield: 'total_tax', align: 'center', cellsalign: 'center', width: '15%', cellclassname: "cell" },

                { text: 'إجمالى المسحوبات', datafield: 'TOT_WT', align: 'center', cellsalign: 'center', width: '15%', cellclassname: "cell" },

                {
                    text: '',
                    datafield: 'Edit',
                    columntype: "button",
                    cellclassname: "primary",

                    cellsrenderer: function () {
                        return "تعديل";
                    },

                    buttonclick: function (row) {
                        editrowindex = row;
                        var id = $("#jqxgrid").jqxGrid('getcellvalue', row, "acc_no");
                        window.location = '/Customers/Edit/' + id;
                    },

                    width: '5%'
                },

                {
                    text: '',
                    datafield: 'Details',
                    columntype: "button",
                    cellclassname: "success",

                    cellsrenderer: function () {
                        return "عرض";
                    },

                    buttonclick: function (row) {
                        editrowindex = row;
                        var id = $("#jqxgrid").jqxGrid('getcellvalue', row, "acc_no");
                        window.location = '/Customers/Details/' + id;
                    },

                    width: '5%'
                }
            ]
    });
});

this is full CSS code:

.cell {
    font-weight: bold;
}

.success .jqx-button {
    display: inline-block;
    padding: 6px 12px;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: bold;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
    color: #fff;
    background-color: #5cb85c;
    border-color: #4cae4c;
}

.primary .jqx-button {
    display: inline-block;
    padding: 6px 12px;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: bold;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
    color: #fff;
    background-color: #337ab7;
    border-color: #2e6da4;
}

.jqx-grid-column-header, .jqx-grid-columngroup-header {
    font-weight: bold;
}

Please where is conflict ?
Note: i download jQuery UI Widgets from Nuget

[ahmed.mo.aminParticipant]

i just add css to set font bold

.cell {
    font-weight: bold;
}

.jqx-grid-column-header, .jqx-grid-columngroup-header {
    font-weight: bold;
}

i don’t think it will make any conflict with Loader Image’s positioning !!

hope to find help with that please

[ahmed.mo.aminParticipant]

thanks for your concern

last q please: can i use template of jqxButtons in grid and set jqxButtons template ? (HOW ?!)

[ahmed.mo.aminParticipant]

are that mean there is now way to add css class to this part?

                        {
                            text: '', datafield: 'Edit', columntype: 'button', width: 50, cellsrenderer: function () {
                                return "تعديل";
                            }, buttonclick: function (row) {
                                editrowindex = row;
                                var id = $("#jqxgrid").jqxGrid('getcellvalue', row, "Acc_NO");
                                window.location = '/Customers/Edit/' + id;
                            }
                        },

if i use jqxDataTable can i make that ?
or by other way
can i add jqxButtons to jqxGrid ?

[Author]

Posts