refresh grid data from server after deleting row

[taramanMember]

Hi,
I have a grid loaded with data by ajax.
the last column in the grid used to delete the current record using ajax method to delete it

I need to call the method used to load data again after deleting this row

Initiate the grid

function gridPreferences_init() {
    var source = {
        datatype: "json",
        type: "GET",
        url: "/Preferences/PhysicianPreferences",
        async: false,
        cache: false,
        formatdata: function(data) {
            return {
                physicianId: PhysicianId
            };
        },
        datafields: [
            { name: "PhysicianPreferenceId" },
            { name: "PreferenceName" },
            { name: "ProcedureTypeName" },
            { name: "ProcedureSubTypeName" },
            { name: "SpineLevelsFormatted" },
            { name: "PreferenceLevelName" },
            { name: "RangeASA" },
            { name: "RangeAge" },
            { name: "RangeBMI" }
        ]
    };
    dataAdapterPreferences = new $.jqx.dataAdapter(source, {
        contentType: "application/json; charset=utf-8",
        loadError: function (xhr, status, error) { alert(error); }
    });
    
   
    var renderCancelImage = function (row, columnfield, value, defaulthtml, columnproperties) {
        return '<div style="width: 100%;text-align: center;margin-top:3px;margin-bottom:3px"><a href="javaScript:cancelPreference(' + value + ')"> <img src="/Images/SmallTrashCan.png" title="Cancel Preference" /></a></div>';
    };
   
    
    $("#gridPreferences").jqxGrid({
        source: dataAdapterPreferences,
        theme: theme,
        width: 1020,
        autoheight: true,
        pageable: false,
        rendergridrows: function (args) {
            return args.data;
        },
       
        columns: [
			{ text: "Preference Name", dataField: "PreferenceName", width: 150, cellsalign: "center", align: 'center', groupable: false },
            
			{ text: "Procedure SubType", dataField: "ProcedureSubTypeName", width: 150, cellsalign: "center", align: 'center', groupable: false },
			{ text: "Spine Levels", dataField: "SpineLevelsFormatted", width: 150, cellsalign: "center", align: 'center', groupable: false },
            
            { text: "ASA Range", dataField: "RangeASA", width: 120, cellsalign: "center", align: 'center', groupable: false },
            { text: "Age Range", dataField: "RangeAge", width: 120, cellsalign: "center", align: 'center', groupable: false },
            { text: "BMI Range", dataField: "RangeBMI", width: 120, cellsalign: "center", align: 'center', groupable: false },
            { text: "", dataField: "PhysicianPreferenceId", width: 60, cellsrenderer: renderCancelImage, groupable: false }
		]
    });
}

To delete the selected row

function cancelPreference(preferenceId) {
 	var postdata = {
	    preferenceId: preferenceId
	};
	$.ajax({
		type: "POST",
		contentType: "application/json; charset=utf-8",
		 url: "/Preferences/DeletePreference",
		data: JSON.stringify(postdata),
		dataType: "json",
		async: false,
		success: function (result) {
			//I need to reload the grid after deleting the selected row
		},
		error: function (error) { alert(error); }
	});
}

thanks
Taraman

[supportParticipant]

Hi Taraman,

In order to delete the selected row, please taka a look at the jqxGrid’s demo at: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/index.htm#demos/jqxgrid/createremoveupdatedata.htm

Best Wishes,
Mariya

jQWidgets Team
http://www.jqwidgets.com

[taramanMember]

Hi Mariya,

I need to refresh the grid by the data come from the server (I mean how can I rebind the data)

thanks,
Taraman

[dipticParticipant]

Hello,

I am also not able to refresh the data in grid after deleting the record in grid while it works if I load the same page in other tab in other browser.

JavaScript runtime error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!

Unable to rebind the data in grid.Any help will be highly appreciated !!

Thanks and Regards,

[Author]

Posts