2013-08-01 3 views
5

사용자 계정을 관리 (작성/수정) 할 수있는 Kendo Grid가 편집 가능합니다. 편집은 팝업 (인라인 또는 일괄 처리)으로 수행됩니다. 유효한 데이터가 서버에 제공되는지 확인하기 위해 클라이언트 측 유효성 검사가 있지만 서버 쪽에서 작성/업데이트가 실패 할 경우 서버에서 응답을 처리하는 방법을 알 수 없습니다. 예를 들어 HTTP 404 또는 500으로 요청이 실패한 것처럼 '실패'라고 말하지는 않습니다. 나는 서버에있는 스크립트 에서처럼 데이터에 대해 무언가를 좋아하지 않았고 강요하기를 거절 한 것처럼 말하고있다.검도 그리드 항목 편집 또는 생성시 서버 측 오류 감지

누군가 내가 이것을 수행 할 수있는 방법을 보여줄 수 있습니까? 업데이트를 서버에 보낸 후 응답을 기다리는 것입니다. 응답이 모든 것이 OK라고 말하면, 그러면 좋습니다. 응답이 좋지 않다고 말하면 (A) 팝업 편집 창이 열리고 채워지지 않도록 유지하고 (B) 거부 이유에 대한 피드백을 사용자에게 제공 할 수 있기를 바랍니다. 응답이 모든 것이 OK라고 표시하지 않는 한 데이터는 그리드에 커밋되지 않아야합니다. 마찬가지로 편집 팝업은 서버가 OK라고 말할 때까지 열려 있어야합니다.

나는 내가 원하는 것을 성취 할 수있는 한 서버의 응답 형식을 유연하게 조정할 수 있습니다.

나를 검도 공식 API 문서로 안내하기 전에, 나는 이미 잘 알고 있으며 매일 그것을 참조하고있다. 그러나 최소한으로 말하면 불완전하며이 주제와 관련된 것을 찾을 수 없습니다. 문서에서 도움이 될만한 문서를 찾았 으면 모든 것을 가르쳐주세요. =)

요청에 따라 아래 표는 그리드를 작성하는 코드입니다.

$("#kendo_user_grid").kendoGrid({ 
    columns: [{ 
     title: "Last name", 
     field: "lName" 
    },{ 
     title: "First name", 
     field: "fName" 
    },{ 
     title: "Business unit", 
     field: "businessUnit" 
    },{ 
     title: "Username", 
     field: "loginId" 
    },{ 
     title: "Email address", 
     field: "email" 
    },{ 
     title: "Phone", 
     field: "phone" 
    },{ 
     title: "Address", 
     field: "address" 
    },{ 
     title: "City", 
     field: "city" 
    },{ 
     title: "State", 
     field: "state" 
    },{ 
     title: "Zip code", 
     field: "zipcode" 
    },{ 
     title: "Country", 
     field: "country" 
    },{ 
     title: "Time zone", 
     field: "timezone" 
    },{ 
     title: "Privileges", 
     field: "privs" 
    },{ 
     command: ["edit","destroy"], 
     title: " " 
    }], 
    scrollable: false, 
    dataSource: { 
     transport: { 
      read: { 
       url: "manageUsers.phtml", 
       data: { mode: "fetch" }, 
       dataType: "json", 
       type: "POST" 
      }, 
      update: { 
       url: "manageUsers.phtml", 
       data: { mode: "update" }, 
       type: "POST" 
      }, 
      destroy: { 
       url: "manageUsers.phtml", 
       data: { mode: "destroy" }, 
       type: "POST" 
      }, 
      create: { 
       url: "manageUsers.phtml", 
       data: { mode: "create" }, 
       type: "POST" 
      }, 
      batch: false 
     }, 
     schema: { 
      data: "records", 
      total: "total", 
      model: { 
       id: "userId", 
       fields: { 
        userId: { editable: false, nullable: true }, 
        lName: { type: "string", editable: true, validation: { required: true } }, 
        fName: { type: "string", editable: true, validation: { required: true } }, 
        businessUnit: { type: "string", editable: true, validation: { required: true } }, 
        loginId: { type: "string", validation: { required: true } }, 
        email: { type: "string", validation: { required: true } }, 
        phone: { type: "string" }, 
        address: { type: "string" }, 
        city: { type: "string" }, 
        state: { type: "string" }, 
        zipcode: { type: "string" }, 
        country: { type: "string" }, 
        timezone: { type: "string" }, 
        privs: { type: "string" } 
       } 
      } 
     }, 
     pageSize: 20, 
     serverPaging: false, 
     serverFiltering: false, 
     serverSorting: false 
    }, 
    filterable: true, 
    sortable: true, 
    pageable: true, 
    editable: { 
     mode: "popup", 
     template: kendo.template($("#kendo_edit_user_template").html()) 
    }, 
    toolbar: ["create","save","cancel"] 
}); 
+0

jQuery.one를 사용하고 계십니까? –

+0

그리드를 만들 때 사용하는 코드를 추가하여 내 게시물을 업데이트했습니다. – Dave

답변

13

염두에두고 두 지점이 있습니다

  1. Schema.errors 서버 측 오류가 서버 응답에서 필드입니다.
  2. error은 오류가 발생하는 경우에 발생하는 이벤트입니다.

은 기본적으로 다음을 수행해야합니다

  1. 이 스키마에 서버에서 다시 전송 상태에의 액세스를 제공하는 errors 정의를 추가합니다.
  2. 예를 들어 이전 값을 복원하는 error 이벤트 처리기를 구현하십시오.

서버가 다음과 같은 것이다 myError라는 필드에 오류 메시지가 반환하는 경우 : 이벤트가 될 것

schema: { 
    errors: function(response) { 
     if (response.myError && response.myError !== "OK") { 
      return response.myError; 
     } 
     return false; 
    }, 
    data: "records", 
    total: "total", 
    model: { 
     id: "userId", 
     fields: { 
      userId: { editable: false, nullable: true }, 
      lName: { type: "string", editable: true, validation: { required: true } }, 
      fName: { type: "string", editable: true, validation: { required: true } }, 
    ... 

과 :

schema: { 
    errors: "myError", 
    data: "records", 
    total: "total", 
    model: { 
     id: "userId", 
     fields: { 
      userId: { editable: false, nullable: true }, 
      lName: { type: "string", editable: true, validation: { required: true } }, 
      fName: { type: "string", editable: true, validation: { required: true } }, 
    ... 

또는

dataSource: { 
    error : function (e) { 
     if (e.errors !== false) { 
      alert("Error: " + e.errors); 
      // This will cancel any change done 
      this.cancelChanges(); 
     } 
    }, 
    transport: { 
     read: { 
      url: "manageUsers.phtml", 
      data: { mode: "fetch" }, 
      dataType: "json", 
      type: "POST" 
     }, 

편집 : 당신이 원하는 것을 유지하는 경우 팝업 당신이해야 할 열 : 나는 데이터 바인딩 이벤트에 바인딩

dataSource: { 
    error : function (e) { 
     if (e.errors !== false) { 
      alert("Error: " + e.errors); 
      // This will keep the popup open 
      grid.one("dataBinding", function (e) { 
       e.preventDefault(); // cancel grid rebind 
      }); 
     } 
    }, 
    transport: { 
     read: { 
      url: "manageUsers.phtml", 
      data: { mode: "fetch" }, 
      dataType: "json", 
      type: "POST" 
     }, 

한 번만 당신이 이미 가지고있는 몇 가지 코드를 게시 할 수

+0

@OnaBai에 감사드립니다! 나는'Schema.errors'가 존재한다는 것을 몰랐고'dataSource.error'는 HTTP 에러를위한 것이라고 생각했지만, 그렇지 않으면 행복하게 배웠습니다! 내가 아직 알아 내지 못했던 다른 부분은 성공이 확인 될 때까지 편집 팝업을 열어 두는 방법입니다. 'this.cancelChanges()'를 사용하면 변경 사항을 실행 취소하지만 팝업은 여전히 ​​닫힙니다. 내가 어떻게 해결할 수 있을지 생각해? – Dave

+0

팝업 **을 열어 두는 답에 ** 편집 **을 참조하십시오 – OnaBai

+1

완벽한! 그것은 위대한 작품! 고마워요, 오바이, 방금 제 주를 보냈습니다. 나는 당신의 해답을 대답으로 받아 들였습니다. – Dave