1

i have the following JQgrid implementation

    colModel: [
                { name: 'NameEn', index: 'NameEn', width: 100, align: 'left' },
                { name: 'Desc', index: 'Desc', width: 100, align: 'left' },
                { name: 'ID', index: 'ID', width: 100, align: 'left', hidden:true }
],
    caption: "Management",
    gridview: true,
    rownumbers: true,
    rownumWidth: 40,
    scroll: 0,
    rowNum: 100,
    sortname: 'ID',
    pager: '#pager',
    sortorder: "asc",
    viewrecords: true,
    autowidth: true,
    width: '100%',
    height: '100%',
    jsonReader: { root: "GridData", page: "CurrentPage", total: "TotalPages", records: "TotalRecords", repeatitems: false, id: "00" }

};

SectorGrid.prototype.SetupGrid = function (selector) {
    jQuery(selector).html('<table id="grid"></table><div id="pager"></div>');
    var grid = jQuery("#grid").jqGrid(this.gridConfiguration);

    jQuery("#grid").navGrid('#pager',{edit:false,add:false,del:true,search:false})
};

i want to add a delete functionality, the delete call a webservice with the url http://localhost/services.svc/sector(id) and the service just take the id and it will handle everything by it self also i would like to edit data using differnt url http://localhost/services.svc/sector and this receives json object with the same information above. i really tried to configure it but it wont work can somebody help me in this, it dosent matter if u used the delete option in the jqgrid or custom buttons but i dont want to use the editurl property.

please put a full example how to implement this continue to my code above

UPDATED: Rest Method

[WebInvoke(UriTemplate = "Sector({iD})/", Method = "DELETE",  ResponseFormat = WebMessageFormat.Json, BodyStyle = WebMessageBodyStyle.Bare)]
        [OperationContract]
        bool DeleteSector(string iD)

thanks in advance

Madi
  • 146
  • 1
  • 3
  • 13
  • The URL `http://localhost/services.svc/sector(id)` seems me a little strange. Could you include the prototype of the `sector` method of your WCF service? – Oleg Aug 21 '11 at 10:48

1 Answers1

2

Try to use navGrid in the form

jQuery("#grid").jqGrid('navGrid', '#pager',
    {edit: false, add: false, search: false}, {}, {},
    { // Delete parameters
        ajaxDelOptions: { contentType: "application/json" },
        mtype: "DELETE",
        serializeDelData: function () {
            return ""; // don't send and body for the HTTP DELETE
        },
        onclickSubmit: function (params, postdata) {
            params.url = '/Sector(' + encodeURIComponent(postdata) + ')/';
        }
    });
Oleg
  • 220,925
  • 34
  • 403
  • 798
  • hi Oleg, thanks for the response, but it's not clear enough to me (im noob with jquery :)) i added you code to my grid navigation and customized the url should i do anything else ? how could i send the ID ? can you please explain more, thanks again i appreciate it – Madi Aug 21 '11 at 21:06
  • @Amadi: `postdata` should be `id`. It should be all. If the program still not work you can verify in [Fiddler](http://www.fiddler2.com/fiddler2/) to which URL will be sent the DELETE request. – Oleg Aug 22 '11 at 00:23
  • @Madi: In general yes (for example `onclickSubmit` exist for `editGridRow` too), but one have to send another information to the server. The function `serializeEditData` and the property `ajaxEditOptions` could help you. – Oleg Aug 22 '11 at 15:58
  • i need your amazing help again, i think the grid edit option wont work with me since i display part of the received data in the grid and the others are hidden could you please help how i could fill my ready built form using the edit button with the selected row id a wcf service will be called and fill the form, i just need the part where i can call the wcf with the selected row id Thanks for your gorgeous help – Madi Sep 01 '11 at 21:29
  • @Madi: You can use Edit and Add options of `navGrid` which are `{}, {},` in my answer. You can set in both cases `ajaxEditOptions: { contentType: "application/json" }, recreateForm: true, serializeEditData: function (postdata) { return JSON.stringify(postdata); }`. For Edit setting you can use `mtype: "PUT"` and modify Edit URL with respect of `onclickSubmit: function (params, postdata) { params.url = urlEdit + '/' + postdata.list_id; }` for example. Here `list` is the `id` of the `` element of the grid. Is it what you asked?
     – Oleg Sep 01 '11 at 21:46
  • this working fine but as i told you the generate only the fields that are not hidden, i have some fields hidden and some drop down lists, so all what i want to take the action of this button to a custom function the populates the edit data on my custom form out of the grid Thanks – Madi Sep 01 '11 at 22:48
  • @Madi: If I understand you correct you need to send some hidden fields in the Add/Edit request to the server. In the case you should just use [editrules: {edithidden:true}](http://www.trirand.com/jqgridwiki/doku.php?id=wiki:common_rules#editrules). If you want you can show the fields to the user in the Add/Adit form. The corresponding lines already exists but are hidden. You can use Developer Tools of IE or Google Chrome to examine all hidden fields of the forms. – Oleg Sep 01 '11 at 22:54
  • i have a grid with a default data came on page load but if the page has some querystring there is another function performed and different data revived, i need your advice to populate this data what do you think is to do 2 grids to handle the QS if exists or there is a way to overwrite the datatype in the grid if there is a QS exists ? sorry for annoying you, but its nice to have a consultation from a senior like u. – Madi Sep 02 '11 at 19:02
  • @Madi: I could try to help you, but now I am not sure that I understand you correct. You can change `datatype` dynamically. For example in the master/details scenario if the second grid should shows some details based of the row selected in the first grid one set typically `datatype:'local'` in the second (details) grid at the beginning. So no data will be displayed in the second grid. After the row in the first grid is selected one can set parameters of the second grid, set `datatype:'json'` and `trigger('reloadGrid')`. Is is close to what you have? You can describe your problem in details. – Oleg Sep 02 '11 at 19:11
  • what exactly i want to implement that i have an page without any querystring, it loads a list of jobs in a grid within the same page. i have a different scenario for the same page if Querystring passed into this page a different list of data should be listed in the same grid, my question is should i make another hidden grid and display it when the query string are passed and hide the first one or i can overwrite the datasource for the first grid when the condition happens (querystring passed) if so i need to know who to overwrite the data i tried jQuery("#grid").jGrid({datatype: func});? – Madi Sep 03 '11 at 14:49
  • @Madi: I don't recommend you to use `datatype: func` in any situation. Why you need it? Moreover I don't understand what you mean under "querystring" here. You wrote "an page without any querystring", "if Querystring passed into this page". What it means? If you need to send to the server some additional parameters you can use `postData`. Could you explain more about the "Querystring"? – Oleg Sep 03 '11 at 15:48
  • simply i have a page that loads all jobs data in the grid for all users, but if i sent parameters to this page in query string such as (Job/?UserID=3) i need the same grid to load only the jobs with the userid = 3, i have the function already written but i dont know how to tell the grid to load another data from if the page has some parameters in the query string. – Madi Sep 03 '11 at 16:10
  • @Madi: So if you would use `Job?UserID=3` you get the filtered data. I suppose if you would use `Job?UserID=0` or `Job?UserID=` you would has **full** data from the `Job` action. So if you would use `Job?UserID=` at the beginning and then if needed `Job?UserID=3` you could use **one** grid. If you can use `postData: { UserID: function() {/* return "" at the beginning and "3" if UserID should be set to 3*/ } }`. In the case the function which caclulate the `UserID` parameter will be called at every grid reload and you can return from the function the value which you need. – Oleg Sep 03 '11 at 17:48