Saturday, January 23, 2016

Add New Row & Enabling And Disabling the Fields in Grid

 //  Add New Vehicle Row
    self.addNewVehicle = function () {

        if (self.vehicleValues().length < self.tender.NumberofVehicles()) {
            var vehicleNewItem = new VehicleDTO(new Object());
            self.vehicleValues.push(vehicleNewItem);
        }
        else {
            alert('.عذرا لا يمكنك إضافة المزيد من السيارات من ذكر في العقد');
        }
    };



//Enabling And Disabling the Fields in Vehicle Grid
    self.IsEditingItem = function (vehicleValue) {
        var boolReturnFound = false;
        ko.utils.arrayForEach(self.vehicleValues(), function (dataBounditem) {
            if (dataBounditem.VehicleId() == vehicleValue()) {
                if (dataBounditem.enableEdit() == true) {
                    boolReturnFound = true;
                    dataBounditem.editFlag(1);
                }
            }
        });
        return boolReturnFound;

    };

    self.enableEditing = function (vehicleValue) {
        ko.utils.arrayForEach(self.vehicleValues(), function (dataBounditem) {
            if (dataBounditem.VehicleId() == vehicleValue()) {
                dataBounditem.enableEdit(true);

            }
        });
    };


  <div>
            <table class="table table-bordered table-responsive">
                <thead class=" border blue ">
                   @* <th class="text-center-xs text-center-sm">
                        <input type="checkbox" /></th>*@
                    <th class="text-center-xs text-center-sm">م</th>
                    <th class="text-center-xs text-center-sm">الاستخدام</th>
                    <th class="text-center-xs text-center-sm">نوع المركبة</th>
                    <th class="text-center-xs text-center-sm">الموديل</th>
                    <th class="text-center-xs text-center-sm">اللون</th>
                    <th colspan="1" class="text-center-xs text-center-sm ">رقم اللوحة</th>
                    <th class="text-center-xs text-center-sm">رقم الشاسي</th>
                    <th colspan="3" class="text-center-xs text-center-sm">استمارة فحص وتسليم مركبة حكومية</th>
                    <th class="text-center-xs text-center-sm">حذف</th>
                    <th class="text-center-xs text-center-sm">تعديل</th>
                    <th class="text-center-xs text-center-sm">مركبة بديلة</th>
                    <th class="text-center-xs text-center-sm">حالة المركبة</th>
                </thead>
                <tbody data-bind="foreach: vehicleValues">
                    <tr>
                        @*<td>
                            <input type="checkbox" /></td>*@
                        <td data-bind="text: $index() + 1"></td>
                        <td >
                            <input type="hidden"  data-bind="value: VehicleId" />
                            <select class=" input-md "  data-bind="options: $parent.usages, optionsValue: 'UsageId', optionsText: 'UsageName', value: UsageId, enable: $parent.IsEditingItem($data.VehicleId) ">
                            </select>

                        </td>

                        <td class="text-center-sm" data-bind="text: VehicleType"></td>
                        <td class="text-center-sm"  data-bind="text: ModelNumberYear"></td>
                        <td class="text-center-sm" data-bind="text: Color"></td>
                        <td class="text-center-sm" " data-bind="text: VehicleNumber"></td>
                        @*<td class="text-center-sm" >/</td>
                        <td class="text-center-sm" ><input type="text" size="4"/></td>*@
                        <td class="text-center-sm" data-bind="text: ChassisNumber"></td>
                        <td class="text-center-sm yellow"><a href="#" data-bind="click: function () { $parent.redirecttoExaminationForm($parent.tender.VehicleTenderId, $data.VehicleId, $data.UsageId) }">
                            <button class="btn btn-success btn-xs ">استمارة</button></a></td>
                        <td class="text-center-sm yellow">
                           <a href="#"  data-bind="    enable: $parent.IsEditingItem($data.VehicleId), click: function () { $parent.getVehicleID($data.VehicleId) }"> <span class="glyphicon glyphicon-folder-open" data-toggle="modal" data-target="#add-003"></span></a>
                              <a href="#" data-bind="click: function () { $parent.GetExaminationFormImage($data.VehicleId) }"><span class=" glyphicon glyphicon-search" ></span> </a>
                        </td>
                        <td class="text-center-sm yellow"><a href="#" data-bind="click: function () { $parent.ViewExaminationFormReport($data.VehicleId) }"><span class="glyphicon glyphicon-print"></span></a></td>
                        <td class="text-center-sm"><a href="#" data-bind="enable: $parent.IsEditingItem($data.VehicleId), click: function () { $parent.DeleteSelectedVehicle($data) }"><span class="glyphicon glyphicon-remove"></span></a></td>
                        <td class="text-center-sm"><a href="#" data-bind="click: function () { $parent.enableEditing($data.VehicleId) }"><span class="glyphicon glyphicon-edit"></span></a></td>
                        <td class="text-center-sm">
                            <button class="btn btn-default btn-xs" data-toggle="modal" data-target="#add-004" data-bind="enable: WorkStatusId() == 2, visible: $parent.IsEditingItem($data.VehicleId), click: function () { $parent.ListAlternative_Vehicles_Available($data.VehicleId, '') }" >مركبة بديلة</button></td>
                        <td>
                            <select class=" input-md  " data-bind="options: $parent.workStatus, optionsValue: 'WorkStatusId', optionsText: 'WorkStatusName', value: WorkStatusId, enable: $parent.IsEditingItem($data.VehicleId), event: { change: selectionChanged } ">
                            </select>
                        </td>
                    </tr>

                </tbody>
                   <tr><td  data-bind="visible: vehicleValues().length == 0"><span>لا توجد نتائج للبحث</span></td></tr>
            </table>
             @*             Pagination     *@

            <div>
                <table>
                    <tr>

                        <td>
                            <button class="btn btn-info col-xs-12 " data-bind="click: SearchVehiclesPagingSetUp.GetNextPage">
                                <span class="glyphicon  glyphicon-white pull-right"></span>التالي
                            </button>

                        </td>
                        <td>
                            <button class="btn btn-info col-xs-12 " data-bind="click: SearchVehiclesPagingSetUp.GetPreviousPage">
                                <span class="glyphicon  glyphicon-white pull-right"></span>السابق
                            </button>
                        </td>
                        <td>
                            <label class="center " data-bind="text: SearchVehiclesPagingSetUp.PageCountDisplay"></label>
                        </td>
                    </tr>
                </table>
            </div>

             @*             Pagination     *@
        </div>


No comments:

Post a Comment